/**
 * The Food Gene — home.css
 * Version: 3.4 (Site V2) · Teal Kitchen
 *
 * OWNER: Home agent. Homepage-only rules (HOME-001 … HOME-011), loaded on
 * body.page-home only (layouts/site.php), so no other page pays for them
 * (NFR-001). Shared components — pills, chips, cards, section titles, panels,
 * the newsletter — are in main.css; use those classes rather than restyling
 * them here. Every colour comes from tokens.css (NFR-008).
 *
 * Sections, in page order (HOME-009):
 *   1. Hero slideshow (HOME-001)
 *   2. Pull quote (HOME-010)
 *   3. This week's recipe and Also new (HOME-011)
 *   4. Browse (HOME-002)
 *   5. Latest recipes (HOME-003)
 *   6. In season now (HOME-005)
 *   7. Watch & Cook (HOME-004)
 *   8. Kitchen guides (HOME-006)
 *   9. Welcome block (HOME-010)
 *  10. Responsive (HOME-008, NFR-010)
 */

/* ═══ 1. Hero slideshow (HOME-001) ═════════════════════════════════════════ */

/* BR-014: a rounded photo panel inside the column, headline bottom-left. */
.mb-hero { margin: 0 0 var(--space-xl); }
.mb-hero__slides {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-surface-dark);
}

/* Every slide sits in the same grid cell, so the panel is as tall as the
   tallest slide and never jumps as they change. */
.mb-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(64vh, 520px);
  transition: opacity 600ms ease, visibility 600ms;
}
/* An author display value would override the hidden attribute. */
.mb-hero__slide[hidden] { display: none; }
/* visibility:hidden also takes an inactive slide's link out of the tab order
   and the accessibility tree. Reduced motion drops the fade (main.css §2). */
.mb-hero__slide:not(.is-active) { opacity: 0; visibility: hidden; }

.mb-hero__media { position: absolute; inset: 0; }
.mb-hero__media .media, .mb-hero__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mb-hero__media .media-placeholder { height: 100%; aspect-ratio: auto; }
/* Two layers of the photo scrim, from the left and bottom-up, so white text
   stays legible over a pale photograph as well as a dark one (BR-012), while
   the top right of the photo stays clear. */
.mb-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--scrim-strong) 0%, var(--scrim-strong) 40%, var(--scrim-clear) 85%),
    linear-gradient(180deg, var(--scrim-clear) 10%, var(--scrim-strong) 80%);
}
.mb-hero__inner {
  position: relative;
  width: 100%;
  max-width: 40rem;
  padding: var(--space-xl) var(--space-lg);
  color: var(--text-on-dark);
}
.mb-hero__label, .mb-feature__label { margin-bottom: var(--space-xs); }
.mb-hero__title {
  max-width: 18ch;
  margin: 0 0 var(--space-xs);
  font-size: var(--size-h1);
  color: var(--text-on-dark);
}
.mb-hero__summary {
  max-width: 46ch;
  margin: 0 0 var(--space-md);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--text-on-dark);
}
.mb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; }
.mb-hero__slides :focus-visible { outline: var(--focus-ring-on-dark); outline-offset: 3px; }

/* The controls sit under the panel, on white, so they never cover a headline
   and keep the teal-on-white contrast at every width. Revealed by home.js. */
.mb-hero__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
}
.mb-hero__controls[hidden] { display: none; }

.mb-hero__rotation { padding-inline: 18px 20px; }
.mb-hero__icon { flex: none; }
.mb-hero__icon--play { display: none; }
.mb-hero__rotation.is-paused .mb-hero__icon--pause { display: none; }
.mb-hero__rotation.is-paused .mb-hero__icon--play { display: block; }

.mb-hero__nav { display: flex; align-items: center; gap: var(--space-3xs); }
/* NFR-004: every control is at least 44 × 44. */
.mb-hero__arrow {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-subtle);
  color: var(--accent-juniper);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.mb-hero__arrow:hover { background: var(--bg-accent-soft); color: var(--accent-juniper-hover); }

.mb-hero__dots { display: flex; flex-wrap: wrap; }
/* A 44px target around a small ring; the current slide's dot fills and
   stretches, so the state is not shown by colour alone (WCAG 1.4.1). */
.mb-hero__dot {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}
.mb-hero__dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent-sage);
  border-radius: var(--radius-pill);
  transition: width var(--transition-smooth), background-color var(--transition-fast);
}
.mb-hero__dot:hover::before { background: var(--bg-accent-soft); }
.mb-hero__dot[aria-current="true"]::before {
  width: 28px;
  border-color: var(--accent-juniper);
  background: var(--accent-juniper);
}

/* ═══ 2. Pull quote (HOME-010) ═════════════════════════════════════════════ */

/* Plain body type with a teal emphasis; no ornament marks. */
.mb-quote { max-width: 44rem; margin: 0 0 var(--space-xl); }
.mb-quote blockquote { margin: 0; }
.mb-quote blockquote p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  line-height: 1.45;
  color: var(--text-primary);
}
.mb-quote em { font-style: normal; font-weight: var(--weight-semi); color: var(--accent-juniper); }
.mb-quote figcaption { margin-top: var(--space-sm); }
.mb-quote cite {
  font-family: var(--font-label);
  font-weight: var(--weight-medium);
  font-style: normal;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-juniper);
}

/* ═══ 3. This week's recipe and Also new (HOME-011) ════════════════════════ */

.mb-feature {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 440px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-surface-dark);
}
.mb-feature__media { position: absolute; inset: 0; }
.mb-feature__media .media, .mb-feature__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mb-feature__media .media-placeholder { height: 100%; aspect-ratio: auto; }
/* The gradient is what makes white text legible over an unknown photograph. */
.mb-feature__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--scrim-strong) 0%, var(--scrim-strong) 50%, var(--scrim-clear) 85%);
}
.mb-feature__inner {
  position: relative;
  width: 100%;
  max-width: 36rem;
  padding: var(--space-xl) var(--space-lg);
  color: var(--text-on-dark);
}
.mb-feature__title { max-width: 16ch; margin: 0 0 var(--space-xs); font-size: var(--size-h2); color: var(--text-on-dark); }
.mb-feature__title a { color: inherit; text-decoration: none; }
.mb-feature__title a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; }
.mb-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-xs);
  margin: 0 0 var(--space-xs);
  font-family: var(--font-label);
  font-weight: var(--weight-medium);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-on-dark);
}
.mb-feature__meta li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.mb-feature__meta li + li::before { content: ""; width: 4px; height: 4px; border-radius: var(--radius-pill); background: var(--accent-mint); }
.mb-feature__blurb { max-width: 46ch; margin: 0 0 var(--space-md); color: var(--text-on-dark); }
.mb-feature__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; }
.mb-feature :focus-visible { outline: var(--focus-ring-on-dark); outline-offset: 3px; }

/* Also new: two Small items under the feature (MED-008). The title link is
   stretched over the item, so the whole tile opens it with one link. */
.home-also { margin-top: var(--space-md); }
.home-also__heading {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-title);
  font-weight: var(--weight-semi);
  font-size: var(--size-kicker);
  letter-spacing: var(--tracking-title);
}
.home-also__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
.home-also__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  background: var(--bg-surface-subtle);
  transition: background-color var(--transition-fast);
}
.home-also__item:hover { background: var(--bg-accent-soft); }
.home-also__shot {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-placeholder);
}
.home-also__shot .media, .home-also__shot img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.home-also__shot .media-placeholder { height: 100%; aspect-ratio: auto; }
.home-also__title { margin: 0 0 var(--space-3xs); text-wrap: balance; }
.home-also__link { color: inherit; text-decoration: none; }
.home-also__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.home-also__link:focus-visible { outline: none; }
.home-also__link:focus-visible::after { outline: var(--focus-ring); outline-offset: 3px; }
.home-also__item:hover .home-also__title { color: var(--accent-juniper-hover); }
.home-also__meta { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* ═══ 4. Browse (HOME-002) ═════════════════════════════════════════════════ */

/* Tiles, not chips: each category with the line naming its subcategories,
   and a round arrow like the main pills (BR-004). A saved view is the teal
   tile — a way in, not a category. */
.home-browse__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
}
.home-browse__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3xs);
  height: 100%;
  min-height: 6.5rem;
  padding: var(--space-sm) calc(36px + 2 * var(--space-sm)) var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-surface-subtle);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.home-browse__tile:hover { background: var(--bg-accent-soft); color: var(--text-primary); }
/* The circle, then the arrow drawn over it with the shared mask. */
.home-browse__tile::before,
.home-browse__tile::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-sm);
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: var(--radius-pill);
}
.home-browse__tile::before { background: var(--accent-juniper); }
.home-browse__tile::after {
  background: var(--text-inverse);
  -webkit-mask: var(--icon-arrow) center / 18px 18px no-repeat;
          mask: var(--icon-arrow) center / 18px 18px no-repeat;
  transition: transform var(--transition-fast);
}
.home-browse__tile:hover::after { transform: translateX(3px); }
.home-browse__name {
  font-family: var(--font-title);
  font-weight: var(--weight-semi);
  font-size: var(--size-card);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-title);
  text-transform: uppercase;
  color: var(--accent-juniper);
}
.home-browse__line { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--text-secondary); }

.home-browse__tile--view { background: var(--accent-juniper); }
.home-browse__tile--view:hover { background: var(--accent-juniper-hover); }
.home-browse__tile--view .home-browse__name,
.home-browse__tile--view .home-browse__line { color: var(--text-inverse); }
.home-browse__tile--view::before { background: var(--bg-surface); }
.home-browse__tile--view::after { background: var(--accent-juniper); }

/* ═══ 5. Latest recipes (HOME-003) ═════════════════════════════════════════ */

/* The "See all recipes" panel closes the grid: the rest of the second row
   from 900px, a full row below that. */
.home-latest__more {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--bg-accent-soft);
}
.home-latest__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--size-h3);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--accent-juniper);
}
.home-latest__line { margin: 0 0 var(--space-2xs); color: var(--text-primary); }

/* ═══ 6. In season now (HOME-005) ══════════════════════════════════════════ */

/* The collection's title and line take the first column of the four, so its
   three recipes complete the row. */
.home-season__intro { grid-column: 1 / -1; align-self: center; }
.home-season .kicker { color: var(--accent-sage-strong); }   /* BR-012: small label on a tint */
.home-season__title { margin: 0; font-size: var(--size-h3); }
.home-season__line { margin: var(--space-2xs) 0 0; color: var(--text-primary); }
/* Pale badges would vanish into the tint, so they turn white here. */
.home-season .badge-row > * { background: var(--bg-surface); }

/* ═══ 7. Watch & Cook (HOME-004) ═══════════════════════════════════════════ */

.home-watch__feature {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: var(--space-lg);
}
.home-watch__title { margin: 0 0 var(--space-xs); font-size: var(--size-h3); }
.home-watch__title a { color: inherit; text-decoration: none; }
.home-watch__title a:hover { color: var(--accent-juniper-hover); text-decoration: underline; text-decoration-thickness: 2px; }
.home-watch__summary { color: var(--text-primary); }
.home-watch__meta { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.home-watch__more { margin-top: var(--space-xl); }
/* BR-004: the still keeps its 24px corners when the film cannot play. */
.home-watch .video-player__missing .media { overflow: hidden; border-radius: var(--radius-md); }

/* A centred "see all" pill under a section. */
.home-more { margin: var(--space-lg) 0 0; text-align: center; }

/* ═══ 8. Kitchen guides (HOME-006) ═════════════════════════════════════════ */

.home-guides .mb-title p { color: var(--text-primary); }

/* ═══ 9. Welcome block (HOME-010) ══════════════════════════════════════════ */

/* Heading beside the text: an editorial block with no photograph, since
   HOME-010 gives it a heading, text and a button only. */
.home-welcome {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--space-sm) var(--space-xl);
}
.home-welcome__heading { margin: 0; font-size: var(--size-h2); }
.home-welcome__body { max-width: var(--width-reading); }
.home-welcome__body p { font-size: var(--text-lg); color: var(--text-primary); }
.home-welcome__actions { margin: var(--space-md) 0 0; }

/* ═══ 10. Responsive (HOME-008, NFR-010) ═══════════════════════════════════ */

@media (min-width: 600px) {
  .home-browse__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .home-browse__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-latest__more { grid-column: span 2; }
  .home-season__intro { grid-column: auto; padding-right: var(--space-2xs); }
}

@media (max-width: 899.98px) {
  .mb-hero__slides, .mb-feature { border-radius: var(--radius-md); }
  .mb-hero__slide { min-height: min(62vh, 460px); }
  .mb-hero__inner, .mb-feature__inner { padding: var(--space-lg) var(--space-md); }
  .mb-feature { min-height: 380px; align-items: flex-end; }
  /* A left-weighted gradient stops working once the copy sits over the middle
     of the photograph, so it becomes a bottom-up scrim. */
  .mb-feature__scrim { background: linear-gradient(180deg, var(--scrim-soft) 0%, var(--scrim-strong) 60%); }
  .mb-feature__title { max-width: none; }
  .home-watch__feature { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .home-welcome { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599.98px) {
  .mb-hero { margin-bottom: var(--space-lg); }
  .mb-hero__inner, .mb-feature__inner { padding: var(--space-md) var(--space-sm); }
  .mb-hero__summary { font-size: var(--text-md); }
  /* The pause control keeps its 44px round target but shows only its icon,
     so the controls fit one row at 375px; the words stay in its name. */
  .mb-hero__rotation { width: var(--tap-target); padding: 0; }
  .mb-hero__rotation [data-hero-rotation-text] {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .home-also__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .home-also__item { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); }
  .home-browse__tile { min-height: 5.5rem; padding-left: var(--space-sm); }
  .home-latest__more { padding: var(--space-md); }
  .mb-quote { margin-bottom: var(--space-lg); }
}