/* =========================================================
   CASE STUDY SYSTEM — /case-studies/_shared/cs.css
   SAVEPOINT (single scaling system)
   Keeps /work header intact (LTL stays in ../../work/style.css)
   ========================================================= */

/* ===================== TOKENS ===================== */

:root{
  --cs-gutter: clamp(22px, 3vw, 44px);

  /* set per page if header height changes */
  --cs-header: 150px;

  --cs-text: rgba(10,10,10,.92);
  --cs-muted: rgba(10,10,10,.65);
  --cs-accent: #2a63ff;

  /* type */
  --cs-font: 15px;
  --cs-leading: 1.62;

  /* layout baseline (1080) */
  --cs-gap: 56px;

  /* stage baseline (1080) */
  --cs-max: 1400px;

  /* left column baseline */
  --cs-left-col: clamp(380px, 28vw, 460px);

  /* left column vertical baseline established by Adobe */
  --cs-left-drop: 54px;
}

/* ===================== SCALE (CASE STUDIES ONLY) ===================== */

.case-study{
  --ui-scale: 1;     /* layout scale */
  --type-scale: 1;   /* type scale */
}

@media (min-width: 1200px){
  .case-study{
    /* match your /work scale behavior */
    --ui-scale: clamp(1, calc(100vw / 1920px), 2);

    /* you chose a more aggressive type scaling; keep it */
    --type-scale: clamp(1, calc(100vw / 1920px), 1.5);

    /* stage grows so BOTH columns grow */
    --cs-max: clamp(1400px, calc(1400px * var(--ui-scale)), 2500px);

    /* left grows but stays capped to avoid skinny-tower issues */
    --cs-left-col: clamp(420px, calc(440px * var(--ui-scale)), 640px);

    /* keep column relationship consistent */
    --cs-gap: clamp(48px, calc(56px * var(--ui-scale)), 110px);
  }
}

/* ===================== SAFETY ===================== */

.case-study,
.case-study *{ box-sizing: border-box; }

/* This stylesheet is only loaded by case-study pages. Prevent intentional
   desktop hero bleeds from creating a horizontal scrollbar. */
html{ overflow-x: hidden; }

.case-study{
  color: var(--cs-text);
  /* Fixed backgrounds are fragile on mobile and unnecessary now that pages may scroll. */
  background-attachment: scroll;
}

.case-study .cs p{
  max-width: none !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* ===================== PAGE SHELL ===================== */

.case-study .cs{
  /* Natural document height: the page scrolls only when its content needs it. */
  padding: calc(10px * var(--ui-scale)) 0 calc(48px * var(--ui-scale));
}

.case-study .cs-inner{
  width: min(var(--cs-max), calc(100% - (var(--cs-gutter) * 2)));
  margin-inline: auto;
}

/* ===================== STAGE ===================== */

.cs-stage{
  width: 100%;
  display: grid;
  grid-template-columns: var(--cs-left-col) minmax(0, 1fr);
  gap: var(--cs-gap);
  align-items: start;
}

/* ===================== LEFT ===================== */

.cs-left{
  min-width: 0;
  display: grid;
  gap: calc(26px * var(--ui-scale));
  padding-top: calc(var(--cs-left-drop) * var(--ui-scale));
}

.cs-block{ display:block; }

.cs-icon{
  display:block;
  width: calc(30px * var(--type-scale));
  height: auto;
  margin: 0 0 calc(12px * var(--ui-scale)) 0;
  opacity: .95;
}

.cs-left p{
  margin: 0 0 calc(12px * var(--ui-scale));
  font-size: calc(var(--cs-font) * var(--type-scale));
  line-height: var(--cs-leading);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.cs-left a{
  color: var(--cs-accent);
  text-decoration: none;
  font-weight: 800;
}
.cs-left a:hover{ text-decoration: underline; }

/* ===================== NO-ICON CASE STUDIES ===================== */
/* Make first paragraph start where Adobe’s first paragraph starts:
   (left drop) + (icon height) + (icon bottom margin)
*/
.cs-left:not(:has(.cs-icon)){
  padding-top: calc(
    (var(--cs-left-drop) * var(--ui-scale)) +
    (30px * var(--type-scale)) +
    (12px * var(--ui-scale))
  );
}

/* ===================== RIGHT ===================== */

.cs-right{
  min-width: 0;
  max-width: 100%;
  justify-self: end;
  overflow: visible;
}

.cs-collageBtn{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
  display: block;
  width: 100%;
  max-width: 100%;
}

.cs-collage{
  width: 100%;
  height: auto;
  display: block;
  /* Size from the column width, not the viewport height. Tall pages may scroll. */
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 22px 70px rgba(0,0,0,.15));
}

/* ===================== LIGHTBOX ===================== */

.cs-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.cs-lightbox[hidden]{ display:none; }

.cs-lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.90);
}

.cs-lightbox__panel{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0; /* reset browser <figure> margins; keeps full image pan range accessible */
}

.cs-lightbox__img{
  width: auto;
  height: auto;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
}

.cs-lightbox__close{
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

/* ===================== MOBILE ===================== */

@media (max-width: 900px){
  .cs-stage{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .case-study .cs{
    padding-bottom: 36px;
  }

  .case-study .cs-left,
  .case-study .cs-left:not(:has(.cs-icon)){
    padding-top: 0;
  }

  /* Page-specific desktop hero dials should not bleed off a phone screen. */
  .case-study .cs-collage,
  .case-canon .cs-right .cs-collageBtn{
    transform: none !important;
  }

  .cs-right{
    width: 100%;
    justify-self: stretch;
  }
}

/* ===================== ACCESSIBILITY ===================== */

@media (prefers-reduced-motion: reduce){
  .cs-collage,
  .cs-icon{ transform:none !important; }
}

/* ===== Body copy baseline (match Adobe) ===== */
.cs-block p{
  font-size: calc(18px * var(--type-scale, 1));
  line-height: 1.65;
  letter-spacing: 0.01em;
  font-weight: 800;
}

/* ===================== ADOBE TYPE OVERRIDE ===================== */

.case-adobe{
  --cs-font: 18px;
  --cs-leading: 1.65;
}

/* ===================== HERO SHADOW (MATCH /WORK, PNG-AWARE) ===================== */

.cs-collage{
  box-shadow: none;
  filter: drop-shadow(0 30px 28px rgba(0,0,0,.35));
}

/* ===================== CASE STUDIES — LIGHTBOX (REVERSE) ===================== */

.case-study .cs-lightbox__backdrop{
  background: rgba(220,220,220,.96);
}


/* ===================== COTOPAXI — HERO POSITION DIAL ===================== */

.case-cotopaxi .cs-collage{
  transform-origin: center center;
  transform: translateY(4%);
}


/* ===================== FIFTH AVENUE — HERO TUNE ===================== */
/* Bigger hero + bleed right + vertical nudge (NO layout side effects) */

.case-fifthave .cs-collage{
  --fa-hero-scale: 1.15;  /* size */
  --fa-hero-x: 10%;        /* bleed right */
  --fa-hero-y: 50px;       /* DIAL: +down / -up */

  transform-origin: center center;
  transform: translateY(var(--fa-hero-y));
}

/* ===================== GOT2B — HERO TUNE ===================== */
/* Bigger hero + bleed right + vertical nudge (NO layout side effects) */

.case-got2b .cs-collage{
  --g2b-hero-scale: 1.10; /* size */
  --g2b-hero-x: 12%;       /* bleed right */
  --g2b-hero-y: 10px;      /* DIAL: +down / -up */

  transform-origin: center center;
  transform: translateY(var(--g2b-hero-y));
}

/* ===================== ILLUMINATIVE — HERO TUNE ===================== */
/* Bigger hero + bleed right + vertical nudge (NO layout side effects) */

.case-illuminative .cs-collage{
  --illu-hero-scale: 1.10; /* size */
  --illu-hero-x: 11%;       /* bleed right */
  --illu-hero-y: 25px;      /* DIAL: +down / -up */

  transform-origin: center center;
  transform: translateY(var(--illu-hero-y));
}

/* ===================== THIRD MAN — HERO TUNE ===================== */
/* Bigger hero + bleed right + vertical nudge (NO layout side effects) */

.case-thirdman .cs-collage{
  --tm-hero-scale: 1.25; /* size */
  --tm-hero-x: 17%;       /* bleed right */
  --tm-hero-y: 70px;      /* DIAL: +down / -up */

  transform-origin: center center;
  transform: translateY(var(--tm-hero-y));
}


/* =========================================================
   CANON — HERO DIALS (safe: image only, no layout changes)
   ========================================================= */

.case-canon{
  /* main hero tuning */
  --canon-hero-scale: 1.0;
  --canon-hero-x: 5px;     /* + = right, - = left */
  --canon-hero-y: 15px;     /* + = down,  - = up  */
  --canon-hero-rot: 0deg;  /* optional */

  /* optional: allow extra horizontal "bleed" if needed */
  --canon-hero-maxw: 100%;
}

/* apply dials to the hero image */
.case-canon .cs-right .cs-collage{
  max-width: var(--canon-hero-maxw);
  transform-origin: top center;
  transform:
    translateY(var(--canon-hero-y))
    rotate(var(--canon-hero-rot));
}

/* keep click target aligned with transformed image */
.case-canon .cs-right .cs-collageBtn{
  transform-origin: top center;
  transform:
    translateY(var(--canon-hero-y))
    rotate(var(--canon-hero-rot));
}

/* ===================== LIGHTBOX ZOOM ===================== */
body.cs-lightbox-open{
  overflow: hidden;
}

/* The panel owns only the dialog + close button. A dedicated viewport below
   handles all fit/zoom scrolling so oversized desktop images never create
   inaccessible "negative overflow" on the left/top edges. */
.cs-lightbox__panel{
  overflow: hidden;
  padding: 0;
}

.cs-lightbox__viewport{
  position: absolute;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cs-lightbox__canvas{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-lightbox__img{
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: auto;
  flex: none;
}

.cs-lightbox__panel.is-zoomed .cs-lightbox__viewport{
  overflow: auto;
}

.cs-lightbox__panel.is-zoomed .cs-lightbox__canvas{
  position: relative;
  display: block;
  width: auto;
  height: auto;
}

.cs-lightbox__panel.is-zoomed .cs-lightbox__img{
  position: absolute;
  left: 16px;
  top: 16px;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  margin: 0 !important;
  transform: none !important;
  cursor: grab;
}

.cs-lightbox__panel.is-dragging .cs-lightbox__img{
  cursor: grabbing;
}

@media (pointer: coarse){
  .cs-lightbox__panel.is-zoomed .cs-lightbox__img{
    cursor: zoom-out;
  }
}