/* ===================================================== */
/* RON'S SIGNATURE SAUCE — PAGE STYLES                  */
/* ----------------------------------------------------- */
/* Page-specific styling for the Ron's Signature Sauce   */
/* case study. This file loads after                     */
/* css/styles.css and css/pages/case-study.css and holds */
/* only rules that describe this page specifically.      */
/* ===================================================== */

/* ===================================================== */
/* CSS GUIDE | HOW TO READ THIS FILE                     */
/* ----------------------------------------------------- */
/* This stylesheet is the Ron's Signature Sauce case     */
/* study layer. It follows the shared system in          */
/* css/styles.css and css/pages/case-study.css and only  */
/* adds page-specific tokens, scene composition, and     */
/* responsive overrides. Read it from top to bottom.     */
/*                                                       */
/* 1. RON'S SIGNATURE SAUCE — PAGE TOKENS                */
/*    Page control panel: Book Frame sizing tokens and   */
/*    Scene One art direction measurements.              */
/*                                                       */
/* 2. SCENE ONE: RON'S SIGNATURE SAUCE HERO              */
/*    Ron's Signature Sauce case study-specific art      */
/*    direction for the opening spread.                  */
/*    .case-study-hero is the CSS hook.                  */
/*                                                       */
/* 3. RON'S SIGNATURE SAUCE CASE STUDY                   */
/*    RESPONSIVE BREAKPOINTS                             */
/*    Breakpoint token overrides and structural          */
/*    overrides for the .case-study-hero spread.         */
/* ===================================================== */

/* ===================================================== */
/* 1. RON'S SIGNATURE SAUCE — PAGE TOKENS                */
/* ----------------------------------------------------- */
/* Page-level control panel for this Ron's Signature     */
/* Sauce case study. Shared site tokens stay in          */
/* css/styles.css.                                       */
/* ===================================================== */

:root {
  /* ===================================================== */
  /* RESPONSIVE INTRO PAGE TOKENS                          */
  /* ----------------------------------------------------- */
  /* Scene One has three responsive modes: scaled Open     */
  /* Spread for landscape-capable widths, true stacked     */
  /* pages for portrait/tablet and phone, and a shared     */
  /* Single Page ruler for the non-fullscreen scenes.      */
  /* ===================================================== */
  --cs-sauce-book-frame-open-spread-width: var(--book-frame-source-width);
  --cs-sauce-book-frame-open-spread-height: var(--book-frame-source-height);
  --cs-sauce-book-frame-page-stack-gap: 0px;
  --cs-sauce-book-frame-single-page-width: min(
    var(--book-frame-single-page-source-width),
    calc(100vw - 32px),
    calc((var(--app-viewport-height) - var(--header-clearance) - (var(--book-frame-viewport-clearance, 16px) * 2)) * var(--book-frame-single-page-width-from-height-ratio, 0.7732))
  );
  --cs-sauce-book-frame-single-page-height: calc(var(--cs-sauce-book-frame-single-page-width) * var(--book-frame-single-page-ratio, 1.2933));
  --cs-sauce-book-frame-single-page-gap: max(
    0px,
    calc(
      var(--app-viewport-height)
      - var(--header-clearance)
      - (var(--book-frame-viewport-clearance, 16px) * 2)
      - var(--cs-sauce-book-frame-single-page-height)
    )
  );
  --cs-sauce-book-frame-stacked-page-width: min(
    var(--book-frame-single-page-source-width),
    calc(100vw - 32px)
  );
  --cs-sauce-book-frame-stacked-page-height: calc(var(--cs-sauce-book-frame-stacked-page-width) * var(--book-frame-single-page-ratio, 1.2933));

  /* ===================================================== */
  /* RON'S SIGNATURE SAUCE BOOK FRAME DERIVED TOKENS       */
  /* ----------------------------------------------------- */
  /* These are Ron's Signature Sauce case study-specific   */
  /* Book Frame measurements used by responsive Canvas     */
  /* Scenes.                                               */
  /* ===================================================== */
  --cs-sauce-book-frame-open-spread-scale: calc(var(--cs-sauce-book-frame-open-spread-width) / var(--book-frame-source-width));
  --cs-sauce-book-frame-single-page-scale: calc(var(--cs-sauce-book-frame-single-page-width) / var(--book-frame-single-page-source-width));
  --cs-sauce-book-frame-stacked-page-scale: calc(var(--cs-sauce-book-frame-stacked-page-width) / var(--book-frame-single-page-source-width));
  --cs-sauce-book-frame-layout-width: var(--cs-sauce-book-frame-open-spread-width);
  --cs-sauce-book-frame-layout-height: var(--cs-sauce-book-frame-open-spread-height);
  --cs-sauce-book-frame-layout-scale: var(--cs-sauce-book-frame-open-spread-scale);

  /* Shared Book Frame router for Canvas Scenes.                 */
  /* These describe the same rectangle Scene One's .spread__book */
  /* renders at the active breakpoint, so Canvas Scenes (like    */
  /* Scene Two) can read one consistent active Book Frame rather */
  /* than re-deriving frame/top math per breakpoint.             */
  /*                                                             */
  /*   layout-top         viewport-y of the active book frame    */
  /*                       (matches where Scene One's            */
  /*                       .spread__book starts vertically)      */
  --cs-sauce-book-frame-layout-top: var(--header-clearance);

  /* Scene One headline scales from the same Book Frame   */
  /* ruler as its page. The 1440 value stays the source.  */
  --cs-sauce-scene-one-source-headline-size: var(--chapter-size);
  --cs-sauce-scene-one-source-page-inset-top: 104px;
  --cs-sauce-scene-one-source-page-inset-bottom: 144px;
  --cs-sauce-scene-one-source-page-inset-gutter: 144px;
  --cs-sauce-scene-one-source-page-inset-outer: 80px;
  --cs-sauce-scene-one-source-text-field-width: 376px;
  --cs-sauce-scene-one-source-text-offset-y: 96px;
  /* Firefox rejects custom-property chains that depend on
     length/length division. These ratios preserve the same 1440
     source measurements without routing Scene One text through an
     invalid scale value. */
  --cs-sauce-scene-one-active-page-width: calc(var(--cs-sauce-book-frame-layout-width) * 0.5);
  --cs-sauce-scene-one-active-headline-size: calc(var(--cs-sauce-scene-one-active-page-width) * 0.12);
  --cs-sauce-scene-one-active-page-inset-top: calc(var(--cs-sauce-book-frame-layout-height) * 0.1340206);
  --cs-sauce-scene-one-active-page-inset-bottom: calc(var(--cs-sauce-book-frame-layout-height) * 0.185567);
  --cs-sauce-scene-one-active-page-inset-gutter: calc(var(--cs-sauce-scene-one-active-page-width) * 0.24);
  --cs-sauce-scene-one-active-page-inset-outer: calc(var(--cs-sauce-scene-one-active-page-width) * 0.1333333);
  --cs-sauce-scene-one-active-text-field-width: calc(var(--cs-sauce-scene-one-active-page-width) * 0.6266667);
  --cs-sauce-scene-one-active-text-offset-y: calc(var(--cs-sauce-book-frame-layout-height) * 0.1237113);
  /* Vertical nudge for the centered text block. Source: -90px at the 776px
     source page height (negative = up, positive = down). Stored as a unitless
     ratio (-90 / 776) and applied as layout-height * ratio so it scales per
     breakpoint without a length/length scale -- which Firefox rejects as
     invalid, collapsing the offset to 0 (text drops to dead-center). */
  --cs-sauce-scene-one-text-nudge: -0.1159794;

  /* Ron's Signature Sauce: left-page image is a photo.          */
  /* object-fit: cover is correct. No image override needed.     */
  /* Background default (#f3f3f1 from case-study.css) is fine.   */
  /* No --case-study-hero-bg override for this page.             */
}

/* ===================================================== */
/* 2. SCENE ONE: RON'S SIGNATURE SAUCE HERO              */
/* ----------------------------------------------------- */
/* Ron's Signature Sauce case study-specific art         */
/* direction for the opening image inside the shared     */
/* spread system.                                        */
/* ===================================================== */

.case-study-hero {
  display: flex;
  align-items: stretch;
}

.case-study-hero .text-chapter {
  font-size: var(--cs-sauce-scene-one-active-headline-size);
  width: min-content;
}

.case-study-hero .spread__page--right .spread__inner {
  padding-top: var(--cs-sauce-scene-one-active-page-inset-top);
  padding-bottom: var(--cs-sauce-scene-one-active-page-inset-bottom);
  padding-left: var(--cs-sauce-scene-one-active-page-inset-gutter);
  padding-right: var(--cs-sauce-scene-one-active-page-inset-outer);
}

/* Centered-text modifier: explicit height gives flexbox the free space   */
/* it needs to resolve justify-content: center (from case-study.css).     */
/* min-height: 100% alone cannot be relied on in this stacking context    */
/* across browsers — the layout token resolves to a concrete px value at  */
/* every breakpoint via the active book frame router.                     */
.case-study-hero--centered-text .spread__page--right .spread__inner {
  padding-top: 0;
  padding-bottom: 0;
  height: var(--cs-sauce-book-frame-layout-height);
}

.case-study-hero--centered-text .spread__page--right .spread__inner .case-study-hero__text {
  margin-top: calc(var(--cs-sauce-book-frame-layout-height) * var(--cs-sauce-scene-one-text-nudge));
}

/* ===================================================== */
/* CENTERED HERO — PROPORTIONAL TEXT BLOCK SCALING       */
/* ----------------------------------------------------- */
/* The headline already scales via active-headline-size. */
/* The kicker, meta fonts, and all spacing tokens are    */
/* fixed in case-study.css. As the book frame shrinks,   */
/* those fixed elements consume a growing share of the   */
/* page height, leaving too little free space for the    */
/* centering + nudge system to resolve correctly.        */
/*                                                       */
/* These overrides express every fixed measurement as a  */
/* ratio of the active book frame dimensions — the same  */
/* approach used for all other Scene One tokens — so     */
/* the entire text block scales as a single unit at      */
/* every breakpoint and viewport size.                   */
/*                                                       */
/* Source reference (1200×776 open spread):              */
/*   active-page-width  = 600px                          */
/*   layout-height      = 776px                          */
/* ===================================================== */

/* Kicker: 12px font, 24px margin-bottom at source. */
.case-study-hero--centered-text .case-study-hero__kicker {
  font-size: calc(var(--cs-sauce-scene-one-active-page-width) * 0.02);
  margin-bottom: calc(var(--cs-sauce-book-frame-layout-height) * 0.031);
}

/* Meta section: margin-top (64-28=36px), padding-top (16px) at source. */
.case-study-hero--centered-text .case-study-meta.case-study-hero__meta {
  margin-top: calc(var(--cs-sauce-book-frame-layout-height) * 0.0464);
  padding-top: calc(var(--cs-sauce-book-frame-layout-height) * 0.0206);
}

/* Meta item gap: 8px at source. */
.case-study-hero--centered-text .case-study-hero__meta .case-study-meta__item {
  gap: calc(var(--cs-sauce-book-frame-layout-height) * 0.0103);
}

/* Meta label font: 12px at source. */
.case-study-hero--centered-text .case-study-meta__label {
  font-size: calc(var(--cs-sauce-scene-one-active-page-width) * 0.02);
}

/* Meta value font: 18px at source. */
.case-study-hero--centered-text .case-study-meta__value {
  font-size: calc(var(--cs-sauce-scene-one-active-page-width) * 0.03);
}

/* Meta divider min-height: 70px at source. */
.case-study-hero--centered-text .case-study-hero__meta-divider {
  min-height: calc(var(--cs-sauce-book-frame-layout-height) * 0.0902);
}

.case-study-hero .spread__page--right .spread__text {
  max-width: var(--cs-sauce-scene-one-active-text-field-width);
  padding-top: var(--cs-sauce-scene-one-active-text-offset-y);
}

/* Centered-text modifier: removes the top offset so flexbox    */
/* centering on .spread__inner works correctly. This rule must  */
/* follow the base .case-study-hero .spread__text rule so       */
/* source order overrides the active text-offset-y token.       */
.case-study-hero--centered-text .spread__text {
  padding-top: 0;
}

/* ===================================================== */
/* 3. RON'S SIGNATURE SAUCE CASE STUDY                   */
/*    RESPONSIVE BREAKPOINTS                             */
/* ----------------------------------------------------- */
/* This section is the Ron's Signature Sauce case study  */
/* responsive layer. It does not invent a new layout     */
/* system; it adjusts the existing page tokens and only  */
/* adds structural overrides where the spread must        */
/* change shape.                                         */
/*                                                       */
/* Current responsive states:                            */
/*   1. Desktop source          : 1301+ normal height    */
/*   2. Short-height desktop    : 1301+ / max-height 895 */
/*      Global spread scaling lives in css/styles.css;   */
/*      this file inherits that scaled spread.           */
/*   3. Narrow Desktop / Laptop : 1100–1300              */
/*   4. Fitted open spread      : 768–1099               */
/*   5. Phone                   : 0–767                  */
/*   6. Portrait stacking       : 768–1300 portrait      */
/* ===================================================== */

/* ====================================================== */
/* ACTIVE BOOK FRAME SYNC                                */
/* ------------------------------------------------------ */
/* The 1440 source band keeps the source 1200x776 frame.  */
/* Bands where the shared spread has already scaled in    */
/* css/styles.css read that rendered spread back into the */
/* Ron's Signature Sauce case study Book Frame tokens.    */
/* Tablet widths below the shared spread threshold opt    */
/* Scene One into a fitted two-page spread without        */
/* changing global spread tokens.                         */
/* ====================================================== */
@media (min-width: 1301px) and (max-height: 895px),
       (min-width: 1100px) and (max-width: 1300px) {
  :root {
    --cs-sauce-book-frame-open-spread-width: var(--spread-max-width);
    --cs-sauce-book-frame-open-spread-height: var(--spread-height);
  }
}

/* ====================================================== */
/* SHORT-HEIGHT DESKTOP : 1301+ / UNDER 896 HEIGHT        */
/* ------------------------------------------------------ */
/* The 1440 source layout remains untouched at full       */
/* height. When only the height shrinks, scale the intro  */
/* headline with the active spread so it stays inside the */
/* same text-safe field as the guide.                     */
/* ====================================================== */
/* ====================================================== */
/* NARROW DESKTOP / LAPTOP : 1100–1300                    */
/* ------------------------------------------------------ */
/* Preserves the desktop editorial feeling while fitting  */
/* common laptop windows (1280, 1200, 1100). The spread   */
/* stays side-by-side; Scene Three stays on the shared    */
/* Book Frame router (body x/width scale from canvas).    */
/* The lower bound matches the spread side-by-side         */
/* activation threshold in css/styles.css exactly (no 1px */
/* gap at 1100).                                          */
/* ====================================================== */

/* ====================================================== */
/* FITTED OPEN SPREAD : 768–1099                          */
/* ------------------------------------------------------ */
/* The Ron's Signature Sauce case study intro can still   */
/* hold its two-page idea at tablet widths if the Book    */
/* Frame is scaled by width AND height.                   */
/* This keeps Reference 8 from switching to a phone stack */
/* prematurely while leaving other scenes alone.          */
/* ====================================================== */
@media (min-width: 768px) and (max-width: 1099px) {
  :root {
    --cs-sauce-book-frame-open-spread-width: min(
      var(--book-frame-source-width),
      calc(100vw - 48px),
      calc((var(--app-viewport-height) - var(--header-clearance) - var(--book-frame-viewport-clearance, 16px)) * var(--book-frame-width-from-height-ratio, 1.5464))
    );
    --cs-sauce-book-frame-open-spread-height: calc(var(--cs-sauce-book-frame-open-spread-width) * var(--book-frame-source-ratio, 0.6467));
  }

  .case-study-hero {
    min-height: var(--cs-sauce-book-frame-open-spread-height);
  }

  .case-study-hero .spread__page--left,
  .case-study-hero .spread__page--right {
    order: 0;
  }

  .case-study-hero .spread__book {
    width: var(--cs-sauce-book-frame-open-spread-width);
    max-width: var(--cs-sauce-book-frame-open-spread-width);
    height: var(--cs-sauce-book-frame-open-spread-height);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-study-hero .spread__page,
  .case-study-hero .spread__page--media-only {
    width: auto;
    height: var(--cs-sauce-book-frame-open-spread-height);
    min-height: var(--cs-sauce-book-frame-open-spread-height);
  }
}

/* ====================================================== */
/* SCENE ONE STACKED ORDER + PAGE MODEL                   */
/* ------------------------------------------------------ */
/* The Book Frame switches Spread Scenes into a stacked   */
/* Single Page model at phone widths and portrait tablet/ */
/* small-laptop windows. Landscape tablet widths are      */
/* restored to a scaled Open Spread in the next rule.     */
/*                                                       */
/* The image page leads, then the text page follows,      */
/* preserving the original 600x776 page proportion        */
/* instead of becoming loose full-width content.          */
/* ====================================================== */
@media (max-width: 767px) {
  :root {
    /* Option 1 test: phone portrait keeps one fitted 600x776 page
       but removes the leftover viewport gap, so the text page
       begins immediately after the image page. */
    --cs-sauce-book-frame-stacked-page-width: min(
      var(--book-frame-single-page-source-width),
      calc(100vw - 48px),
      calc((var(--app-viewport-height) - var(--header-clearance) - (var(--book-frame-viewport-clearance, 16px) * 2)) * var(--book-frame-single-page-width-from-height-ratio, 0.7732))
    );
    --cs-sauce-book-frame-stacked-page-height: calc(var(--cs-sauce-book-frame-stacked-page-width) * var(--book-frame-single-page-ratio, 1.2933));
    --cs-sauce-book-frame-page-stack-gap: 0px;
    --cs-sauce-book-frame-layout-width: var(--cs-sauce-book-frame-stacked-page-width);
    --cs-sauce-book-frame-layout-height: var(--cs-sauce-book-frame-stacked-page-height);
    --cs-sauce-book-frame-layout-scale: var(--cs-sauce-book-frame-stacked-page-scale);
    --cs-sauce-book-frame-layout-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    --cs-sauce-scene-one-active-page-width: var(--cs-sauce-book-frame-layout-width);
  }

  /* Portrait intro pages scroll naturally — no scroll-snap.
     Scene One flows from image page to text page without any
     snap or hold behavior so the transition into Scene Two
     is continuous. */

  /* Image first, statement second. Grid items accept the
     `order` property exactly like flex items. */
  .case-study-hero {
    padding-top: var(--book-frame-viewport-clearance, 16px);
  }

  .case-study-hero .spread__page--left  { order: -1; }
  .case-study-hero .spread__page--right { order: 0; }

  .case-study-hero .spread__book {
    width: var(--cs-sauce-book-frame-stacked-page-width);
    max-width: var(--cs-sauce-book-frame-stacked-page-width);
    height: auto;
    grid-template-columns: 1fr;
    gap: var(--cs-sauce-book-frame-page-stack-gap);
    justify-items: stretch;
  }

  .case-study-hero .spread__page {
    width: var(--cs-sauce-book-frame-stacked-page-width);
    height: var(--cs-sauce-book-frame-stacked-page-height);
    min-height: var(--cs-sauce-book-frame-stacked-page-height);
  }

  /* Image keeps the left-page crop field instead of expanding to
     a loose, oversized mobile image. */
  .case-study-hero .spread__page--media-only {
    height: var(--cs-sauce-book-frame-stacked-page-height);
    min-height: var(--cs-sauce-book-frame-stacked-page-height);
  }

  .case-study-hero .spread__page--media-only .spread__media,
  .case-study-hero .spread__page--media-only .spread__media-frame {
    height: 100%;
    min-height: 100%;
  }
}

/* ====================================================== */
/* SCENE ONE PORTRAIT PAGE STACK : 768–1300               */
/* ------------------------------------------------------ */
/* Tablet, small-laptop, and narrow-desktop windows keep  */
/* the scaled Open Spread while they are landscape-ish.   */
/* Once the viewport leans portrait, this rule preserves  */
/* the Book Frame page logic as two stacked pages: Left   */
/* Page on top, Right Page below. The gap is leftover     */
/* viewport space, so page one clears as page two snaps   */
/* into place. The white page keeps its imaginary page    */
/* boundary and text-safe field.                         */
/* Each page snaps independently so the user lands on one */
/* fitted page before scrolling into the next page.       */
/* ====================================================== */
@media (min-width: 768px) and (max-width: 1300px) and (max-aspect-ratio: 6/5) {
  :root {
    --cs-sauce-book-frame-page-stack-gap: var(--cs-sauce-book-frame-single-page-gap);
    --cs-sauce-book-frame-layout-width: var(--cs-sauce-book-frame-single-page-width);
    --cs-sauce-book-frame-layout-height: var(--cs-sauce-book-frame-single-page-height);
    --cs-sauce-book-frame-layout-scale: var(--cs-sauce-book-frame-single-page-scale);
    --cs-sauce-book-frame-layout-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    --cs-sauce-scene-one-active-page-width: var(--cs-sauce-book-frame-layout-width);
  }

  .case-study-hero {
    padding-top: var(--book-frame-viewport-clearance, 16px);
  }

  .case-study-hero .spread__page--left  { order: -1; }
  .case-study-hero .spread__page--right { order: 0; }

  .case-study-hero .spread__book {
    width: var(--cs-sauce-book-frame-single-page-width);
    max-width: var(--cs-sauce-book-frame-single-page-width);
    height: auto;
    grid-template-columns: 1fr;
    gap: var(--cs-sauce-book-frame-page-stack-gap);
  }

  .case-study-hero .spread__page {
    width: var(--cs-sauce-book-frame-single-page-width);
    height: var(--cs-sauce-book-frame-single-page-height);
    min-height: var(--cs-sauce-book-frame-single-page-height);
  }

  .case-study-hero .spread__page--media-only {
    height: var(--cs-sauce-book-frame-single-page-height);
    min-height: var(--cs-sauce-book-frame-single-page-height);
  }

  .case-study-hero .spread__page--media-only .spread__media,
  .case-study-hero .spread__page--media-only .spread__media-frame {
    height: 100%;
    min-height: 100%;
  }
}