/* ============================================================
   case.css — case-study pages only
   (cases/*.html + en/cases/*.html). Loaded after main.css.
   ============================================================ */

/* Reading column = left column of the 65/35 page grid (same width as the home hero text) */
:root{--col:65%}
@media(max-width:1279px){:root{--col:100%}}

.wrap{padding-top:3.5rem}

/* ============ Media ============ */
.media{
  position:relative;overflow:hidden;border-radius:var(--r-media);background:var(--media-bg);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.media video{display:block;width:100%;height:auto}

/* ============ Case layout ============ */
.back{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:var(--fs-btn);font-weight:var(--fw-medium);margin-bottom:var(--space-10);transition:color .2s var(--ease)}
.back:hover{color:var(--ink)}
/* Top nav row: "all cases" on the left, "next case" on the right */
.case-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-10)}
.case-nav .back{margin-bottom:0}
/* End-of-case placement (after the results, before the footer): space above instead of below */
.case-nav--foot{margin-top:var(--gap-block);margin-bottom:0}
.next{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:var(--fs-btn);font-weight:var(--fw-medium);white-space:nowrap;transition:color .2s var(--ease)}
.next:hover{color:var(--ink)}
/* Cursor-following preview card of the next case (desktop hover only; built by main.js) */
.next-preview{position:fixed;z-index:80;width:220px;pointer-events:none;opacity:0;transition:opacity .18s var(--ease);will-change:left,top}
.next-preview.is-visible{opacity:1}
.next-preview__media{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:1rem;display:block;background:var(--media-bg);box-shadow:0 22px 40px -18px rgba(39,39,39,.5)}
.narrow{max-width:56rem}
/* Hero — mirrors the home page .hero; width follows --col (65%) */
.case-hero{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2rem;max-width:var(--col);perspective:900px;margin-bottom:0}
.case-logo{width:14rem;height:14rem;object-fit:cover}
/* Hero logo — stepped sizes per breakpoint, matching the home hero avatar (base 14rem covers 1280–1919px) */
@media(max-width:1279px){.case-logo{width:12rem;height:12rem}}
@media(max-width:767px){.case-logo{width:10rem;height:10rem}}
@media(min-width:1900px){.case-logo{width:16rem;height:16rem}}
/* Media captions as an outlined bubble — no fill, grey stroke (same --grey as the .tag chips).
   No tail: one corner is squared off toward the media (bottom-left on desktop, top-left on mobile).
   z-index keeps it above the image shadow. */
.cap{position:relative;z-index:3;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:var(--fs-caption);line-height:var(--lh-caption);padding:1rem 1.25rem;border-radius:1rem 1rem 1rem 0}
/* On mobile the figure stacks into one column, so the squared corner moves to the top-left (toward the image above) */
@media(max-width:767px){
  .cap{border-radius:0 1rem 1rem 1rem}
}
/* Left column = 65% (same as text); caption fills the right ~35% column */
.figure{display:grid;grid-template-columns:var(--col) 1fr;gap:var(--space-8);align-items:start;margin-top:var(--gap-block)}
.figure > .media,.figure > .shots{margin-top:0}
@media(max-width:1279px){.figure{grid-template-columns:1fr;gap:1.25rem}}
.sec{margin-top:var(--gap-block);max-width:var(--col)}
.sec h2,.sec h3{margin-bottom:var(--gap-heading)}
.sec p + p{margin-top:var(--gap-para)}

/* Highlight — pulled-out emphasis line with a 💬 icon above it (h3 size) */
.highlight{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--fw-medium);color:var(--ink)}
.highlight::before{content:"💬";display:block;width:3rem;height:3rem;font-size:3rem;line-height:1;margin-bottom:var(--gap-heading)}
/* Emoji glyphs step down to 2rem on mobile */
@media(max-width:767px){
  .highlight::before{width:2rem;height:2rem;font-size:2rem}
  .stat__emoji{font-size:2rem}
}

/* Block rhythm: top-level blocks use --gap-block (6rem → 3.5rem on mobile) */

/* Role tags */
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:var(--space-6)}
.tag{
  display:inline-flex;align-items:center;background:var(--surface);color:var(--ink);
  font-size:var(--fs-btn);font-weight:var(--fw-medium);line-height:1.5;padding:.65rem 1rem;border-radius:1rem;
}

/* Screenshot galleries */
.shots{display:grid;gap:var(--space-4);margin-top:var(--space-8);align-items:center}
/* Bottom-weighted shadow like the home case-card hover: y-offset > blur, so no shadow on top, minimal on the sides */
.shots img{width:100%;height:auto;min-width:0;display:block;filter:drop-shadow(0 20px 16px rgba(39,39,39,.20));transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* Flat screenshots (not transparent device mockups) keep the rounded corners */
.shots img.rounded{border-radius:var(--r-media)}
/* Format-driven corners: PNGs are treated as transparent device mockups — never rounded, on any
   breakpoint. Rounding stays only for flat raster (.jpg/.jpeg) and video (.media). */
img[src$=".png"]{border-radius:0 !important}
/* Real-life scale: iPad Pro 13" (281.6mm landscape) : iPhone 17 Pro (71.9mm portrait) ≈ 3.92 : 1.
   Flex so the negative overlap is reclaimed as proportional growth and the pair stays flush to the full column width. */
.shots--pair{display:flex;align-items:flex-start;gap:0}
.shots--pair img{width:auto}
.shots--pair img:first-child{flex:3.92 1 0}
/* iPhone sits on top of the iPad; the negative margin = overlap, images grow to keep the right edge flush */
.shots--pair img:last-child{flex:1 1 0;margin-left:-11%;position:relative;z-index:2}
/* iPad_index_002 + shop: shop slides UNDER the iPad by ~50% of its own width; pair flush to full column width */
.shots--duo{display:flex;align-items:flex-start;gap:0}
.shots--duo img{width:auto}
.shots--duo img:first-child{flex:1 1 0;position:relative;z-index:2}
.shots--duo img:last-child{flex:1 1 0;margin-left:-33.3%;position:relative;z-index:1}
.shots--quad{grid-template-columns:repeat(4,1fr);align-items:start}
.fullvid{margin-top:var(--space-8)}
@media(max-width:767px){
  /* Multi-image blocks collapse into a full-bleed horizontal carousel (same behaviour as the card
     gallery / masonry): each frame fills ~the column width, keeps its aspect ratio, swipe sideways. */
  .shots--pair,.shots--duo,.shots--quad{
    display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--space-4);
    grid-template-columns:none;align-items:flex-start;min-width:0;max-width:none;
    margin:3.5rem calc(-1 * var(--pad)) -3rem;
    padding:0 var(--pad) 3rem;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .shots--pair::-webkit-scrollbar,.shots--duo::-webkit-scrollbar,.shots--quad::-webkit-scrollbar{display:none}
  /* Reset the desktop overlap (flex-basis + negative margins), then size per block. */
  .shots--pair img,.shots--duo img,.shots--quad img,
  .shots--pair img:first-child,.shots--pair img:last-child,
  .shots--duo img:first-child,.shots--duo img:last-child{
    max-width:none;flex:0 0 auto;margin:0;position:static;z-index:auto;
  }
  .shots--duo img{width:calc(100vw - 8rem);height:auto}
  .shots--quad img{width:calc(100vw - 8rem);height:auto}
  /* Pair: tablet + phone shown at the same height */
  .shots--pair img,.shots--pair img:first-child,.shots--pair img:last-child{height:55vh;width:auto}
}

/* Mobile: soften media / card corners to the button radius (--r-media is too round on small screens) */
@media(max-width:767px){
  .media,
  .shots img.rounded,
  .cards img,
  .results .stat{border-radius:var(--r-btn)}
}

/* Card gallery — see the .cards component below (masonry layout removed; unused) */


/* ============================================================
   Card gallery component (.cards)
   Desktop: three equal-width columns (balance the look by putting
   the taller cards in a column with fewer items). Mobile: turns into
   a full-bleed horizontal carousel. Images flagged .is-tall are
   cropped to a sensible default height (~1.5× width) with a fade-out
   bottom, and expand to full height on tap (handler in main.js).

   Markup:
     <div class="cards reveal">
       <div class="cards__col"><img src="…" alt="" loading="lazy"> … </div>
       <div class="cards__col"> … </div>
       <div class="cards__col"> … </div>
     </div>
   Add class="is-tall" to any image taller than ~1.5× its own width.
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);align-items:start;margin-top:var(--gap-block);max-width:var(--col)}
.cards__col{display:flex;flex-direction:column;gap:var(--space-4)}
.cards img{width:100%;height:auto;display:block;border-radius:var(--r-btn);filter:drop-shadow(0 20px 16px rgba(39,39,39,.20));transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
@media(max-width:767px){
  .cards{display:flex;flex-wrap:nowrap;gap:var(--space-4);align-items:flex-start;max-width:none;margin:3.5rem calc(-1 * var(--pad)) -3rem;padding:0 var(--pad) 3rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cards::-webkit-scrollbar{display:none}
  .cards__col{display:contents}
  .cards img{width:calc(100vw - 8rem);max-width:none;flex:0 0 auto;max-height:calc((100vw - 8rem) * 1.5);object-fit:cover;object-position:top;transition:max-height .35s var(--ease)}
  /* Tall cards: crop with a fade-to-transparent bottom; tap expands to full height */
  .cards img.is-tall{-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent);cursor:pointer}
  .cards img.is-tall.is-open{max-height:calc((100vw - 8rem) * 4.1);-webkit-mask-image:none;mask-image:none}
}

/* Results */
.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-8);max-width:64rem}
.stat{background:var(--surface);border-radius:var(--r-media);padding:var(--space-8)}
.stat__icon{width:3rem;height:3rem;object-fit:contain;margin-bottom:var(--space-4)}
.stat__emoji{display:block;font-size:3rem;line-height:1;margin-bottom:var(--space-4)}
.stat__num{font-size:var(--fs-h1);font-weight:var(--fw-semibold);line-height:1;letter-spacing:var(--ls-num);color:var(--blue);margin-bottom:var(--space-2)}
.stat p{color:var(--ink);font-size:var(--fs-btn);line-height:1.5;max-width:none}
@media(max-width:767px){.results{grid-template-columns:1fr}}

/* Results — brief strip on the first screen */
.results-brief{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);margin-top:var(--gap-block);max-width:var(--col)}
.rb-num{font-size:var(--fs-h2);font-weight:var(--fw-semibold);line-height:1;letter-spacing:var(--ls-num);color:var(--blue);margin-bottom:var(--space-2)}
.rb-label{font-size:var(--fs-caption);color:var(--ink);line-height:1.4}
@media(max-width:767px){.results-brief{grid-template-columns:repeat(2,1fr);gap:1.5rem 1.25rem}}
/* Result numbers scale automatically via the shared type tokens (--fs-h1 / --fs-h2) */

/* ============================================================
   Case menu — floating anchor navigation (full case pages only)
   Markup: <nav class="case-menu"> with a .case-menu__toggle button
   and a .case-menu__panel of #anchor links (one per titled section).
   Toggle matches the back-to-top button; panel matches the next-case card.
   Behaviour (main.js): opens/closes the panel, and shows/hides the whole
   control — visible from the top, hidden only once the footer scrolls into
   view. Desktop: centred on the right edge. Mobile: bottom-left corner
   (home avatar + menu button), panel opens upward, slides away.
   ============================================================ */
.sec[id]{scroll-margin-top:5.5rem}
.case-menu{position:fixed;top:50%;right:var(--pad);transform:translateY(-50%);z-index:45;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.case-menu__toggle{width:3.25rem;height:3.25rem;padding:.8rem;box-shadow:0 14px 34px -14px rgba(39,39,39,.45)}
/* Round home avatar, shown beside the menu button on mobile only — a way back to the home page */
.case-home{display:none;width:3.25rem;height:3.25rem;flex:0 0 auto;border-radius:50%;overflow:hidden;box-shadow:0 14px 34px -14px rgba(39,39,39,.45)}
.case-home img{width:100%;height:100%;object-fit:cover;display:block}
.case-menu__toggle svg{width:1.3rem;height:1.3rem;display:block}
.case-menu__panel{position:absolute;top:50%;right:calc(100% + 4px);transform:translateY(-50%) translateX(8px) scale(.98);transform-origin:right center;min-width:15rem;background:var(--surface);border-radius:var(--r-btn);box-shadow:0 22px 40px -18px rgba(39,39,39,.5);padding:.5rem;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s var(--ease)}
.case-menu.is-open .case-menu__panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) translateX(0) scale(1)}
.case-menu__toggle .icon-close{display:none}
.case-menu.is-open .case-menu__toggle .icon-menu{display:none}
.case-menu.is-open .case-menu__toggle .icon-close{display:block}
.case-menu__panel a{display:block;padding:.55rem .85rem;border-radius:.75rem;color:var(--ink);font-size:var(--fs-btn);font-weight:var(--fw-medium);text-decoration:none;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease)}
.case-menu__panel a:hover,.case-menu__panel a:focus-visible{background:var(--ink);color:var(--on-ink);outline:none}
@media(max-width:767px){
  /* Bottom-left corner; panel opens upward; visible from the top, hides only at the footer */
  .case-menu{left:1rem;right:auto;top:auto;bottom:1rem;transform:translateX(0);display:flex;align-items:center;gap:4px}
  .case-home{display:block}
  .case-menu__panel{left:0;right:auto;top:auto;bottom:calc(100% + 4px);transform:translateY(8px) scale(.98);transform-origin:left bottom;min-width:0;width:max-content;max-width:calc(100vw - 5rem)}
  .case-menu.is-open .case-menu__panel{transform:translateY(0) scale(1)}
  .case-menu__panel a{white-space:normal}
  .case-menu.is-collapsed{opacity:0;pointer-events:none;transform:translateX(-14px) scale(.85)}
}

/* ============================================================
   Case accent backdrop — a full-bleed brand colour behind the hero
   that fades to the page background as the first screen scrolls away.
   Opt in per page: add class="case-accent" to <body>, drop
   <div class="case-bg" style="background:<gradient>" aria-hidden="true">
   as the first body child; main.js drives the scroll fade and blends
   the sticky nav into the colour while it sits behind the bar.
   ============================================================ */
body.case-accent .case-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;will-change:opacity}
/* Hero text inverted while it sits on the accent */
body.case-accent .case-hero .case-title{color:#fff}
body.case-accent .case-hero .sub{color:rgba(255,255,255,.92)}
body.case-accent .case-hero .sub b{color:#fff}
body.case-accent .case-hero__note{color:rgba(255,255,255,.72);font-size:var(--fs-caption);line-height:1.5}
/* Sticky nav blends into the accent while it's behind the bar (main.js toggles .over-accent) */
.site-nav{transition:box-shadow .3s var(--ease),background .3s var(--ease),backdrop-filter .3s var(--ease),-webkit-backdrop-filter .3s var(--ease)}
.site-nav.over-accent{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-nav.over-accent .logo{color:#fff}
.site-nav.over-accent .btn:not(.btn-blue){background:rgba(255,255,255,.16);color:#fff}
.site-nav.over-accent .btn:not(.btn-blue):hover,.site-nav.over-accent .btn:not(.btn-blue):focus-visible{background:#fff;color:var(--ink)}

/* Print */
@media print{.back,.case-menu,.case-bg{display:none}}