/* =====================================================================
   MEALS ON ME — Landing page styles (index.html)
   Page-specific only. All component styling comes from css/main.css;
   this file adds the hero collage, the menu teaser layout, the
   dietitian strip, a few centering helpers and the scroll-reveal.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Hero visual — real-photo collage (each tile is a .media photo box)
   --------------------------------------------------------------------- */
.hero__media { display: flex; justify-content: center; }

/* Centre the press strip between the hero's visible bottom edge and the
   how-it-works section: split the tight section padding evenly above and
   below the label + logos. Neither neighbour moves — the strip's total
   height is unchanged, only the content shifts down inside it. */
.landing-press {
  --tight-y: clamp(2.5rem, 2rem + 2vw, 4rem); /* keep in sync with .section--tight */
  padding-block: calc(var(--tight-y) / 2);
}

.hero-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-4);
  width: 100%;
  max-width: 31rem;
}
.hero-collage__tile {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 1;
}
.hero-collage__tile--main {
  grid-row: span 2;
  aspect-ratio: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.hero-collage__chip {
  position: absolute;
  left: 4%;
  bottom: 6%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.55rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.hero-collage__chip .icon { width: 1.1rem; height: 1.1rem; color: var(--color-primary); }

.hero__proof-text {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
}

/* ---------------------------------------------------------------------
   Logo strip label
   --------------------------------------------------------------------- */
.landing-logos-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-semibold);
}

/* ---------------------------------------------------------------------
   Plan-preview trailing actions + shared centered-actions helper
   --------------------------------------------------------------------- */
.landing-actions--center { justify-content: center; }
.landing-plan-actions { margin-top: var(--space-8); }

.landing-guarantee {
  max-width: 42rem;
  margin-inline: auto;
  margin-top: var(--space-10);
  text-align: left;
}

.landing-trust--center {
  justify-content: center;
  margin-top: var(--space-6);
}

.landing-final-head { margin-bottom: var(--space-8); }

/* ---------------------------------------------------------------------
   Dietitian authority strip
   --------------------------------------------------------------------- */
.dietitians {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  text-align: center;
}
.dietitians__text {
  max-width: 42rem;
  color: var(--color-text-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

/* ---------------------------------------------------------------------
   Sample-menu teaser
   --------------------------------------------------------------------- */
.menu-teaser__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.menu-teaser__head .section-head {
  margin-bottom: 0;
  max-width: 40rem;
}

.menu-teaser {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-5);
}
@media (min-width: 640px) { .menu-teaser { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .menu-teaser { grid-template-columns: repeat(6, 1fr); gap: var(--space-5) var(--space-4); } }

.menu-teaser__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0; /* let the 1fr grid tracks shrink below content min-content on narrow screens */
}
.menu-teaser__media {
  display: block;
  aspect-ratio: 4 / 3;
  height: auto; /* .media's height:100% must not override the ratio */
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.menu-teaser__tile:hover .menu-teaser__media {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.menu-teaser__cap { display: flex; flex-direction: column; gap: 2px; }
.menu-teaser__name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}
.menu-teaser__kcal { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---------------------------------------------------------------------
   Scroll reveal — the hidden state is only applied by landing.js
   (class .is-revealing), so content stays visible without JS and under
   prefers-reduced-motion. main.css also neutralises transitions there.
   --------------------------------------------------------------------- */
.reveal.is-revealing {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-revealing.is-visible {
  opacity: 1;
  transform: none;
}