/* JOE'S / Chef Joe at Roadhouse - MEET CHEF JOE page (revamp pass 2, 8 Oct 2026).
   Linked after /assets/css/joes.css by the shell (_build-shell.py), on /meet-chef-joe and
   /es/meet-chef-joe only. Ported from the Meet rules in the retired site.css.
   Everything sits in @layer pages, so it outranks joes.css's home-shaped components (the
   .watch-grid, .method-in, .method-shots and .step rules were written for the home page's
   #watch section) without !important. Tokens only; min-width breakpoints only. */
@layer pages {
  /* ── The head: the words, then the courtyard film and the flat-top loop ──
     Phones: the main film full width; the loop half-width beside its caption.
     40rem: the two films side by side. 64rem: the words (sticky) beside the films. */
  .sub-meet-chef-joe .page-head .watch-grid {
    gap: var(--sp-md); margin-top: var(--sp-lg); align-items: start;
  }
  .sub-meet-chef-joe .page-head .watch-grid > figure:not(.watch-main) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-sm); align-items: end;
  }
  .sub-meet-chef-joe .page-head .watch-grid > figure:not(.watch-main) > .shot-cap { margin: 0; }

  /* ── Joe's story: his photo beside the bio from 56rem ── */
  .sub-meet-chef-joe .bio-in > * { max-width: 46rem; }
  .sub-meet-chef-joe .bio-in > .bio-photo { max-width: 22rem; margin: 0 0 var(--sp-md); }
  .sub-meet-chef-joe .bio-photo img { width: 100%; border-radius: var(--r-lg); background: var(--tint); box-shadow: var(--sh-2); }
  .sub-meet-chef-joe .bio-photo figcaption { margin-top: .45rem; font-size: var(--step--1); color: var(--muted); }
  .sub-meet-chef-joe .bio-lede { max-width: 60ch; margin-bottom: var(--sp-md); font-size: var(--step-1); color: var(--ink); }
  .sub-meet-chef-joe .bio-quote { margin-bottom: var(--sp-md); padding: .2rem 0 .2rem 1.1rem; border-left: 4px solid var(--ember); }
  .sub-meet-chef-joe .bio-quote p { max-width: 62ch; margin-bottom: .75rem; font-size: 1.08rem; line-height: 1.65; color: var(--ink); }
  .sub-meet-chef-joe .bio-quote footer { font-weight: 600; color: var(--muted); }
  .sub-meet-chef-joe .bio-years { max-width: 60ch; margin-bottom: var(--sp-sm); color: var(--muted); }
  .sub-meet-chef-joe .bio-tag { font-family: var(--f-display); font-size: var(--step-2); line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--ember-dk); }

  /* ── How Joe cooks: why it matters (with the motto), the three steps, the smash film ──
     On the home page .method-in is a ruled block inside #watch; here it is the section's own
     wrap, so the rule, the offset and the 48rem two-column grid all come off. */
  .sub-meet-chef-joe .method { isolation: isolate; }
  .sub-meet-chef-joe .method-in { display: block; margin-top: 0; padding-top: 0; border-top: 0; }
  .sub-meet-chef-joe .why-care { max-width: 62ch; margin-bottom: var(--sp-lg); }
  .sub-meet-chef-joe .why-care p { margin-bottom: .85rem; font-size: 1.06rem; line-height: 1.7; color: var(--ink); }
  .sub-meet-chef-joe .why-care .wc-lede { font-size: var(--step-1); line-height: 1.45; font-weight: 600; color: var(--navy); }
  .sub-meet-chef-joe .why-care .wc-close { margin-top: 1.1rem; font-family: var(--f-display); font-size: var(--step-2); line-height: 1; text-transform: uppercase; color: var(--ember-dk); }
  .sub-meet-chef-joe .wc-motto { margin: 1.3rem 0 .4rem; padding: 1.1rem 1.2rem; border-left: 4px solid var(--ember); border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--tint); }
  .sub-meet-chef-joe .wc-motto p { margin-bottom: .7rem; }
  .sub-meet-chef-joe .wc-motto .wcm-latin { margin: 0; font-family: var(--f-display); font-size: var(--step-2); line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
  .sub-meet-chef-joe .wc-motto .wcm-tr { margin: .3rem 0 .9rem; font-style: italic; color: var(--muted); }
  .sub-meet-chef-joe .wc-motto footer { font-weight: 600; color: var(--muted); }
  /* Up to 56rem: the smash film half-width beside its caption, not 576px tall on its own. */
  .sub-meet-chef-joe .method-in > .method-shots {
    position: static; grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-top: var(--sp-md);
  }
  .sub-meet-chef-joe .method-shots figure {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-sm); align-items: end;
  }
  .sub-meet-chef-joe .method-shots .shot-cap { margin: 0; }
  /* "Read the whole method" stands alone on its line, so it gets a full tap target. */
  .sub-meet-chef-joe .method-foot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 3px; }
  /* The close reads left, under the words, as the old page did. */
  .sub-meet-chef-joe .method .page-cta { justify-content: flex-start; margin-top: var(--sp-lg); }

  @media (min-width: 40rem) {
    .sub-meet-chef-joe .page-head .watch-grid { grid-template-columns: repeat(2, minmax(0, 19rem)); justify-content: start; }
    .sub-meet-chef-joe .page-head .watch-grid > figure:not(.watch-main) { display: block; }
    .sub-meet-chef-joe .page-head .watch-grid > figure:not(.watch-main) > .shot-cap { margin-top: .55rem; }
  }

  @media (min-width: 56rem) {
    .sub-meet-chef-joe .bio-in {
      display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 22rem);
      column-gap: clamp(var(--sp-lg), 4vw, var(--sp-2xl)); align-items: start;
    }
    .sub-meet-chef-joe .bio-in > * { grid-column: 1; }
    .sub-meet-chef-joe .bio-in > .bio-photo { grid-column: 2; grid-row: 1 / span 8; margin: 0; }

    /* Words left, the smash film right (sticky while the steps scroll past). */
    .sub-meet-chef-joe .method-in {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
      grid-template-rows: repeat(5, auto) 1fr; column-gap: var(--sp-xl); align-items: start;
    }
    .sub-meet-chef-joe .method-in > * { grid-column: 1; }
    .sub-meet-chef-joe .method-in > .method-shots {
      grid-column: 2; grid-row: 1 / -1; max-width: none; margin: 0;
      position: sticky; top: calc(var(--nav-h) + 1rem);
    }
    .sub-meet-chef-joe .method-shots figure { display: block; }
    .sub-meet-chef-joe .method-shots .shot-cap { margin-top: .55rem; }
  }

  @media (min-width: 64rem) {
    /* The head: the words (sticky) beside the two films, not a title row over a pair. */
    .sub-meet-chef-joe .page-head > .wrap {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
      column-gap: var(--sp-xl); align-items: start;
    }
    .sub-meet-chef-joe .page-head-copy { position: sticky; top: calc(var(--nav-h) + 1rem); }
    /* The lede at lede size, so the words and the films end level. */
    .sub-meet-chef-joe .page-head-copy > .sec-sub { margin-bottom: 0; font-size: var(--step-1); color: var(--navy); }
    .sub-meet-chef-joe .page-head .watch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }

    .sub-meet-chef-joe .method-in { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
    /* The steps as the board's line items: label and title left, the words right. */
    .sub-meet-chef-joe .method .step {
      display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
      column-gap: var(--sp-lg); align-content: start;
    }
    .sub-meet-chef-joe .method .step > .temp { grid-column: 1; justify-self: start; }
    .sub-meet-chef-joe .method .step > h3 { grid-column: 1; }
    .sub-meet-chef-joe .method .step > p { grid-column: 2; grid-row: 1 / span 2; }
  }
}