/* ===================================================== */
/* BORN A STRAY CASE STUDY — PAGE STYLES                */
/* ----------------------------------------------------- */
/* Page-specific styling for the Born a Stray 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 Born a Stray 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. BORN A STRAY CASE STUDY — PAGE TOKENS              */
/*    Page control panel: Book Frame sizing tokens and   */
/*    Scene One art direction measurements.              */
/*                                                       */
/* 2. SCENE ONE: BORN A STRAY HERO                       */
/*    Born a Stray case study-specific art direction     */
/*    for the opening spread.                            */
/*    .case-study-hero is the CSS hook.                  */
/*                                                       */
/* 3. BORN A STRAY CASE STUDY                            */
/*    RESPONSIVE BREAKPOINTS                             */
/*    Breakpoint token overrides and structural          */
/*    overrides for the .case-study-hero spread.         */
/* ===================================================== */

/* ===================================================== */
/* 1. BORN A STRAY CASE STUDY — PAGE TOKENS              */
/* ----------------------------------------------------- */
/* Page-level control panel for this Born a Stray 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-stray-book-frame-open-spread-width: var(--book-frame-source-width);
  --cs-stray-book-frame-open-spread-height: var(--book-frame-source-height);
  --cs-stray-book-frame-page-stack-gap: 0px;
  --cs-stray-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-stray-book-frame-single-page-height: calc(var(--cs-stray-book-frame-single-page-width) * var(--book-frame-single-page-ratio, 1.2933));
  --cs-stray-book-frame-single-page-gap: max(
    0px,
    calc(
      var(--app-viewport-height)
      - var(--header-clearance)
      - (var(--book-frame-viewport-clearance, 16px) * 2)
      - var(--cs-stray-book-frame-single-page-height)
    )
  );
  --cs-stray-book-frame-stacked-page-width: min(
    var(--book-frame-single-page-source-width),
    calc(100vw - 32px)
  );
  --cs-stray-book-frame-stacked-page-height: calc(var(--cs-stray-book-frame-stacked-page-width) * var(--book-frame-single-page-ratio, 1.2933));

  /* ===================================================== */
  /* BORN A STRAY CASE STUDY BOOK FRAME DERIVED TOKENS     */
  /* ----------------------------------------------------- */
  /* These are Born a Stray case study-specific Book Frame */
  /* measurements used by responsive Canvas Scenes.        */
  /* ===================================================== */
  --cs-stray-book-frame-open-spread-scale: calc(var(--cs-stray-book-frame-open-spread-width) / var(--book-frame-source-width));
  --cs-stray-book-frame-single-page-scale: calc(var(--cs-stray-book-frame-single-page-width) / var(--book-frame-single-page-source-width));
  --cs-stray-book-frame-stacked-page-scale: calc(var(--cs-stray-book-frame-stacked-page-width) / var(--book-frame-single-page-source-width));
  --cs-stray-book-frame-layout-width: var(--cs-stray-book-frame-open-spread-width);
  --cs-stray-book-frame-layout-height: var(--cs-stray-book-frame-open-spread-height);
  --cs-stray-book-frame-layout-scale: var(--cs-stray-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-stray-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-stray-scene-one-source-headline-size: var(--chapter-size);
  --cs-stray-scene-one-source-page-inset-top: 104px;
  --cs-stray-scene-one-source-page-inset-bottom: 144px;
  --cs-stray-scene-one-source-page-inset-gutter: 144px;
  --cs-stray-scene-one-source-page-inset-outer: 80px;
  --cs-stray-scene-one-source-text-field-width: 376px;
  --cs-stray-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-stray-scene-one-active-page-width: calc(var(--cs-stray-book-frame-layout-width) * 0.5);
  --cs-stray-scene-one-active-headline-size: calc(var(--cs-stray-scene-one-active-page-width) * 0.12);
  --cs-stray-scene-one-active-page-inset-top: calc(var(--cs-stray-book-frame-layout-height) * 0.1340206);
  --cs-stray-scene-one-active-page-inset-bottom: calc(var(--cs-stray-book-frame-layout-height) * 0.185567);
  --cs-stray-scene-one-active-page-inset-gutter: calc(var(--cs-stray-scene-one-active-page-width) * 0.24);
  --cs-stray-scene-one-active-page-inset-outer: calc(var(--cs-stray-scene-one-active-page-width) * 0.1333333);
  --cs-stray-scene-one-active-text-field-width: calc(var(--cs-stray-scene-one-active-page-width) * 0.6266667);
  --cs-stray-scene-one-active-text-offset-y: calc(var(--cs-stray-book-frame-layout-height) * 0.1237113);
}

/* ===================================================== */
/* 2. SCENE ONE: BORN A STRAY HERO                       */
/* ----------------------------------------------------- */
/* Born a Stray 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-stray-scene-one-active-headline-size);
  width: min-content;
}

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

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

/* Born a Stray: left-page image is a film still/photo.         */
/* object-fit: cover is correct. No image treatment override.   */
/* Background default (#f3f3f1 from case-study.css) is fine.    */
/* No modifier classes on this section — standard top-aligned   */
/* layout. No centered-text handling required.                  */

/* ===================================================== */
/* 3. BORN A STRAY CASE STUDY                            */
/*    RESPONSIVE BREAKPOINTS                             */
/* ----------------------------------------------------- */
/* This section is the Born a Stray 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 */
/* Born a Stray 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-stray-book-frame-open-spread-width: var(--spread-max-width);
    --cs-stray-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 Born a Stray 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 the spread from switching to a phone stack  */
/* prematurely while leaving other scenes alone.          */
/* ====================================================== */
@media (min-width: 768px) and (max-width: 1099px) {
  :root {
    --cs-stray-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-stray-book-frame-open-spread-height: calc(var(--cs-stray-book-frame-open-spread-width) * var(--book-frame-source-ratio, 0.6467));
  }

  .case-study-hero {
    min-height: var(--cs-stray-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-stray-book-frame-open-spread-width);
    max-width: var(--cs-stray-book-frame-open-spread-width);
    height: var(--cs-stray-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-stray-book-frame-open-spread-height);
    min-height: var(--cs-stray-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-stray-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-stray-book-frame-stacked-page-height: calc(var(--cs-stray-book-frame-stacked-page-width) * var(--book-frame-single-page-ratio, 1.2933));
    --cs-stray-book-frame-page-stack-gap: 0px;
    --cs-stray-book-frame-layout-width: var(--cs-stray-book-frame-stacked-page-width);
    --cs-stray-book-frame-layout-height: var(--cs-stray-book-frame-stacked-page-height);
    --cs-stray-book-frame-layout-scale: var(--cs-stray-book-frame-stacked-page-scale);
    --cs-stray-book-frame-layout-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    --cs-stray-scene-one-active-page-width: var(--cs-stray-book-frame-layout-width);
  }

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

  /* Image first, statement second. Grid items accept the
     `order` property exactly like flex items. */
  .case-study-hero .spread__page--left  { order: -1; }
  .case-study-hero .spread__page--right { order: 0; }

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

  .case-study-hero .spread__page {
    width: var(--cs-stray-book-frame-stacked-page-width);
    height: var(--cs-stray-book-frame-stacked-page-height);
    min-height: var(--cs-stray-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-stray-book-frame-stacked-page-height);
    min-height: var(--cs-stray-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-stray-book-frame-page-stack-gap: var(--cs-stray-book-frame-single-page-gap);
    --cs-stray-book-frame-layout-width: var(--cs-stray-book-frame-single-page-width);
    --cs-stray-book-frame-layout-height: var(--cs-stray-book-frame-single-page-height);
    --cs-stray-book-frame-layout-scale: var(--cs-stray-book-frame-single-page-scale);
    --cs-stray-book-frame-layout-top: calc(var(--header-clearance) + var(--book-frame-viewport-clearance, 16px));
    --cs-stray-scene-one-active-page-width: var(--cs-stray-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-stray-book-frame-single-page-width);
    max-width: var(--cs-stray-book-frame-single-page-width);
    height: auto;
    grid-template-columns: 1fr;
    gap: var(--cs-stray-book-frame-page-stack-gap);
  }

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

  .case-study-hero .spread__page--media-only {
    height: var(--cs-stray-book-frame-single-page-height);
    min-height: var(--cs-stray-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%;
  }
}