/* ==========================================================================
   El Noa Noa Supermarket — HOMEPAGE
   Section-specific presentation. Loaded on the homepage only.

   Every value comes from a Phase 2 token. This file introduces no colour,
   type size, spacing step, shadow, radius or breakpoint of its own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   The image sits behind the copy, so a scrim guarantees text contrast whatever
   the photograph turns out to be.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* Kept deliberately short on phones: the hero should introduce the page, not
     occupy the whole first screen before any content is reachable. */
  min-height: 320px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero { min-height: 420px; }
}

@media (min-width: 1024px) {
  .hero { min-height: 480px; }
}

/* The image covers the whole hero and the copy sits over it behind a scrim. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
}

/* The media partial locks a ratio; inside the hero it fills the band instead. */
.hero__media .media,
.hero .hero__image {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-position);
}

/* While there is no hero photograph the placeholder's meander texture is the
   backdrop, but its centred glyph and caption would float over the headline as
   debris. The texture stays, the labelling does not. */
.hero__media .media-placeholder > .icon,
.hero__media .media-placeholder-label {
  display: none;
}

/* Scrim. Dark by default so white text always clears contrast; the light
   variant is for a dark photograph with light copy. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(8, 26, 62, 0.92) 0%,
    rgba(8, 26, 62, 0.78) 45%,
    rgba(8, 26, 62, 0.45) 100%
  );
}

.hero--light .hero__media::after {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 0.4) 100%
  );
}

.hero--light { color: var(--color-text); }

/* Not positioned, on purpose: the media is absolutely placed against .hero, so
   it spans the full width of the section and not just this container. */
.hero__inner {
  /* Trimmed on phones, where the meander band already closes the section. */
  padding-block: var(--space-8) var(--space-10);
  width: 100%;
}

@media (min-width: 768px) {
  .hero__inner { padding-block: var(--space-12); }
}

.hero__content { max-width: 34rem; }

/*
 * On phones the two calls to action stack, because the secondary label is long
 * in Spanish. They are kept at the default control height there rather than the
 * large one, and the copy block tightens, so the hero introduces the page
 * without pushing the first section of content off the screen.
 */
@media (max-width: 767.98px) {
  .hero__content { gap: var(--space-3); }

  .hero__content .btn-lg {
    min-height: var(--btn-height);
    padding-inline: var(--space-5);
    font-size: var(--text-base);
  }

  .hero__content .cluster { gap: var(--space-2); }
}

/* --------------------------------------------------------------------------
   1b. HERO, DESKTOP COMPOSITION
   The photograph fills the whole hero at every width and the copy sits over
   it. On wide screens the copy only occupies the left, so the scrim fades out
   towards the right and lets the photograph show.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* Wide enough to hold both calls to action on one line: the Spanish
     secondary label is long, and at 32rem the pair missed fitting by a few
     pixels and wrapped. */
  .hero__content { max-width: 35rem; }

  .hero__media::after {
    background: linear-gradient(
      to right,
      rgba(8, 26, 62, 0.9) 0%,
      rgba(8, 26, 62, 0.72) 35%,
      rgba(8, 26, 62, 0.2) 68%,
      rgba(8, 26, 62, 0) 100%
    );
  }

  .hero--light .hero__media::after {
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.78) 35%,
      rgba(255, 255, 255, 0.2) 68%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}

.hero__title {
  font-size: var(--text-6xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  text-transform: uppercase;
  color: inherit;
  margin: 0;
}

.hero__line { display: block; }
.hero__line--accent { color: var(--color-accent); }
.hero--light .hero__line--accent { color: var(--color-primary); }

.hero__text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-inverse-muted);
  max-width: 30rem;
}

@media (min-width: 768px) {
  .hero__text {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }
}

.hero--light .hero__text { color: var(--color-text-muted); }

/* The meander band closes the hero, echoing the logo lockup. */
.hero__band {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-raised);
}

/* --------------------------------------------------------------------------
   2. TRUST BAR
   -------------------------------------------------------------------------- */

.trust-bar {
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

/*
 * On phones the promises are laid out two per row. A single scrolling line was
 * tried first and rejected: with four items the second one was cut off at the
 * screen edge with nothing to indicate it could be scrolled, which reads as a
 * bug rather than as an affordance. A grid shows every item in full.
 */
.trust-bar__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  padding-block: var(--space-4);
}

.trust-bar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  color: var(--color-primary);
}

.trust-bar__item .icon {
  flex: 0 0 auto;
  margin-top: 2px;
}

@media (min-width: 768px) {
  .trust-bar__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .trust-bar__item { align-items: center; }
  .trust-bar__item .icon { margin-top: 0; }
}

.trust-bar__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/*
 * Text wraps rather than being clipped. The titles are short enough to hold one
 * line at every width; the supporting note is allowed to run to two.
 */
.trust-bar__title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.trust-bar__note {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   3. CATEGORY TILES
   -------------------------------------------------------------------------- */

.category-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.category-tile:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.category-tile__name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   4. WEEKLY DEALS
   -------------------------------------------------------------------------- */

.deals {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.deals__heading h2 { color: var(--color-text-inverse); }
.deals__subtitle { color: var(--color-text-on-inverse-muted); }

.deals__ends {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   5. PRODUCT CARD
   The card itself is a Phase 2 component; only the price alignment is set here.
   -------------------------------------------------------------------------- */

.product-card .card-body { gap: var(--space-2); }

/* --------------------------------------------------------------------------
   6. PROMO BANNERS
   -------------------------------------------------------------------------- */

.promo-banner {
  position: relative;
  display: block;
  isolation: isolate;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.promo-banner .media {
  border-radius: 0;
}

.promo-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8, 26, 62, 0.88) 0%, rgba(8, 26, 62, 0.55) 100%);
}

.promo-banner__body {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-raised);
  padding: var(--space-6);
}

.promo-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-accent);
  margin: 0 0 var(--space-1);
}

.promo-banner__text {
  font-size: var(--text-sm);
  color: var(--color-text-inverse);
  max-width: 32ch;
}

@media (hover: hover) {
  .promo-banner img { transition: transform var(--duration-slow) var(--ease); }
  .promo-banner:hover img { transform: scale(1.04); }
}

/* --------------------------------------------------------------------------
   7. FRESH MARKET
   -------------------------------------------------------------------------- */

.fresh-card {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  min-height: 260px;
  display: flex;
  align-items: flex-end;
}

.fresh-card .media {
  position: absolute;
  inset: 0;
  border-radius: 0;
  aspect-ratio: auto;
  z-index: var(--z-below);
}

/* Without a photograph the placeholder's centred glyph sat on top of the
   card's title. The texture alone marks the slot. */
.fresh-card .media-placeholder > .icon {
  display: none;
}

/* The media fills the whole card and the copy sits on top of it, so the
   placeholder's bottom caption landed across the department button. The
   texture and its centred glyph still read as an image slot without it. */
.fresh-card .media-placeholder-label,
.promo-banner .media-placeholder-label {
  display: none;
}

.fresh-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 26, 62, 0.92) 0%, rgba(8, 26, 62, 0.35) 70%);
}

.fresh-card__body {
  position: relative;
  z-index: var(--z-raised);
  padding: var(--space-6);
}

.fresh-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-2);
}

.fresh-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-on-inverse-muted);
}

/* --------------------------------------------------------------------------
   8. LATIN FAVORITES
   -------------------------------------------------------------------------- */

.latin {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.latin__heading h2 { color: var(--color-on-accent); }
.latin__eyebrow { color: var(--blue-700); }
.latin__subtitle { color: var(--blue-700); }

/* --------------------------------------------------------------------------
   9. WHY NOA NOA
   -------------------------------------------------------------------------- */

.why-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.why-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.why-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  margin: 0;
}

.why-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   10. STORES
   -------------------------------------------------------------------------- */

.store-card__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.store-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.store-card__row .icon {
  color: var(--color-primary);
  flex: 0 0 auto;
  margin-top: 2px;
}

/* A single store takes the full width of the page. On phones it is the same
   stacked card as in the grid; from the tablet breakpoint the photograph sits
   beside the details, so the row is filled by the store rather than by empty
   space. A second store switches the section back to the two-column grid. */
@media (min-width: 768px) {
  .stores-grid--single .store-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: stretch;
  }

  /* The photograph fills its column whatever the height of the details. */
  .stores-grid--single .store-card .media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 22rem;
    border-radius: 0;
  }

  .stores-grid--single .store-card .card-body {
    justify-content: center;
    padding: var(--space-8);
  }

  .stores-grid--single .store-card .card-title { font-size: var(--text-2xl); }

  .stores-grid--single .store-card__contact,
  .stores-grid--single .store-card__hours-list { font-size: var(--text-base); }

  .stores-grid--single .store-card .btn { align-self: flex-start; }
}

.store-card__hours summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  list-style: none;
  min-height: var(--tap-target);
}

.store-card__hours summary::-webkit-details-marker { display: none; }

/* With the native marker gone, "Hours" read as an inert label rather than a
   control that opens. This chevron is the only thing telling a visitor the
   opening times are one tap away. */
.store-card__hours summary::after {
  content: "";
  inline-size: 0.45em;
  block-size: 0.45em;
  margin-inline-start: var(--space-1);
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--duration-fast) var(--ease);
}

.store-card__hours[open] summary::after {
  transform: translateY(0.1em) rotate(-135deg);
}

.store-card__hours-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.store-card__hours-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-1);
}

.store-card__hours-list li + li {
  border-top: var(--border-width) solid var(--color-border);
}

/* --------------------------------------------------------------------------
   11. REVIEWS
   -------------------------------------------------------------------------- */

.reviews__notice { margin-bottom: var(--space-6); }

.review-card__quote {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.review-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}

.review-card__author {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

/* --------------------------------------------------------------------------
   12. NEWSLETTER
   -------------------------------------------------------------------------- */

.home-newsletter {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.home-newsletter__inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .home-newsletter__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

.home-newsletter__icon {
  background: rgba(253, 195, 0, 0.16);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.home-newsletter__text {
  font-size: var(--text-lg);
  color: var(--color-text-on-inverse-muted);
}

/* The footer already carries a newsletter block, so the homepage copy of the
   component drops its own heading duplication and keeps the form. */
.home-newsletter .newsletter .footer-heading {
  font-size: var(--text-3xl);
  text-transform: none;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-inverse);
}