/* =============================================================
   MOBILE.CSS — Responsive overrides for screens ≤ 768px
   All desktop styles are untouched; this file only adds
   overrides inside the media query.
   ============================================================= */

@media (max-width: 768px) {

  /* ── Prevent horizontal overflow site-wide ─────────────────── */
  /* overflow-x: clip instead of hidden — hidden creates a scroll container
     which breaks position: sticky on the nav */
  html, body {
    overflow-x: clip;
  }

  /* ── Border-radius: shift every token down one notch ───────── */
  :root {
    --border-radius-sm: 6px;   /* was 4px  → 6px  */
    --border-radius:    8px;   /* was 8px  → stays */
    --border-radius-lg: 14px;  /* was 16px → 14px */
    --border-radius-xl: 24px;  /* was 32px → 24px */
  }

  /* ── Global ─────────────────────────────────────────────────── */
  .page {
    padding: 12px;
    gap: 12px;
  }

  .nav {
    padding: 12px 20px 12px 28px;
    position: sticky;
    top: 12px;
    z-index: 100;
  }

  /* other.css sets this to 16px to match the desktop .page padding. Mobile
     drops that padding to 12px, and a sticky offset larger than the
     element's natural position pins it immediately — even unscrolled — so
     the header sat 4px low while its placeholder stayed put, leaving only
     8px below it instead of the 12px used between every other section. */
  .page-header {
    top: 12px;
  }

  .nav__pill {
    border-radius: var(--border-radius-lg);
  }

  .nav__logo-mark {
    height: 32px;
    width: 27px;
  }

  .nav__links {
    gap: 0;
  }

  .nav__link {
    padding: 9px 14px;
  }


  /* ── About page: allow scrolling (about.css locks body + .page) ── */
  /* :has() targets body only when the about page is loaded */
  body:has(.page--about),
  .page--about {
    height: auto !important;
    overflow: visible !important;
  }

  .page--about {
    min-height: 100dvh;
  }

  .about-layout {
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    min-height: auto;
  }

  /* Sidebar collapses — only the card is shown (no tall headshot) */
  .about-sidebar {
    width: 100%;
    flex-direction: column;
    gap: 0;
    min-height: auto;
  }

  /* Side by side here rather than stacked: a photo the full width of the
     card eats most of a phone screen before a word of the page is visible.
     The picture takes a fixed square at the left and the details fill the
     rest, so the card costs one band of height instead of two. */
  /* Grid, not flex. The photo has to take its height from the column beside
     it and its width from that height, and flex resolves a row item's width
     before the stretched height exists — the square came out zero wide.
     Grid sizes the row from the details first, so the ratio has something
     to work from. */
  .about-card {
    width: 100%;
    flex: none;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    gap: 12px;
    min-height: auto;
    padding: 10px;
  }

  /* Square, from a definite width.

     This used to take its height from the column beside it (height: 100%)
     and derive the width from the ratio, so the card was exactly as tall as
     its text needed. Chrome resolved that; Safari does not. Sizing an auto
     grid track from an item whose width only exists via aspect-ratio and a
     stretched height is circular, and Safari collapses the track while the
     element keeps its ratio-derived width — so the photo overflowed its
     column and sat on top of the name.

     A definite width breaks the circularity: the track sizes from it, the
     ratio gives the height, and align-self keeps the grid from stretching
     the square back out of shape. The card is now as tall as the taller of
     the two columns rather than always the text. */
  .about-card__media {
    position: relative;
    align-self: center;
    width: clamp(92px, 26vw, 124px);
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Out of flow, so the photograph's own proportions contribute no height.
     Left in flow it sized the box itself — a portrait at the card's width —
     and the details then stretched to match it, which is the opposite of
     what this layout is for. */
  .about-headshot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-card__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2px 2px 2px 0;
  }


  .about-body {
    overflow: visible;
    min-height: auto;
    padding: var(--space-5);
  }

  .about-bio-name {
    font-size: var(--scale-6);
  }

  /* ── Work page: slideshow hidden, work panel fills viewport ── */
  .slideshow-frame,
  .slideshow {
    display: none !important;
  }

  .page-content {
    gap: 0 !important;
  }

  /* Override the width:0/opacity:0 default AND the desktop
     width:calc(...)/3 — works for both home and work states */
  /* No card of its own: .work-surface is already the container, and giving
     the panel a radius and shadow too drew a second box inside the first. */
  .work-panel {
    width: 100% !important;
    max-width: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    flex: 1;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
  }

  /* No hover affordances in this layout. The pointer media query that gates
     them on desktop is about the device, not the width, so a narrow window
     on a laptop still lit them up — and a band left standing after a tap
     reads as a selection nobody made. */
  .work-tl__row:has(.work-item:hover)::before {
    background: transparent;
  }

  .work-tl .work-item:hover .work-tl__mark {
    transform: translate(50%, -50%);
  }

  .work-tl .work-item:hover .work-item__when {
    color: var(--color-text-muted);
  }

  /* With no slideshow beside it on mobile, each entry carries its own
     preview above the title — the image it would otherwise have handed to
     the panel on the left. */
  .work-item__shot {
    display: block;
    margin-bottom: 10px;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    /* Lighter than --shadow-image. That value is tuned for a picture sitting
       alone on a card; here the previews stack one after another down a
       narrow column, and at full strength the column reads as a row of
       heavy slabs. */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.13);
  }

  .work-item__shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }


  /* Kill the SPA-transition animation on mobile */
  .page.is-animating .work-panel {
    transition: none !important;
  }


  /* Work nav runs the same accordion as desktop, driven by touch.
     Vertical panning is handled by work-scroll.js, so the browser must
     not also pan — pinch-zoom is left alone deliberately. */
  /* Back in flow and filling the panel. On desktop the nav is pinned to the
     panel's right edge at half the surface's width so the opening panel can
     uncover it; here the panel is the whole width and there is no slideshow
     to come out from under, so that pinning would size it to half a phone.

     min-height: 0 is what makes the column scroll: a flex child defaults to
     min-height: auto, so without it the nav grows to its full content height
     and the scroller inside has nothing left to scroll.

     touch-action allows the vertical pan. It used to forbid it because
     work-scroll.js drove the column itself; that script now only hands the
     hovered study to the slideshow, so the browser has to do the scrolling. */
  .work-nav {
    position: static;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    touch-action: pan-y pinch-zoom;
  }

  /* Hide work FAB on mobile */
  .work-fab {
    display: none !important;
  }

  /* Show arrow statically on mobile (no hover animation) */
  .work-item__arrow {
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  /* ── Case study bento: single column ────────────────────────── */
  .cs-bento {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cs-bento-card {
    padding: var(--space-5);
  }

  /* ── Hero card: text only, no image ─────────────────────────── */
  .cs-hero-card {
    flex-direction: column !important;
    gap: var(--space-5) !important;
    overflow: hidden;
    padding-right: var(--space-5) !important;
  }

  .cs-hero-card__image,
  div.cs-hero-card__image {
    display: none !important;
  }

  /* Classless wrapper divs that hold only a hidden hero image */
  .cs-hero-card > div:not([class]) {
    display: none !important;
  }

  /* Override any inline max-width / flex-basis on the text column */
  .cs-hero-card__text {
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding-right: 0 !important;
  }

  .cs-hero__title {
    font-size: var(--scale-7);
  }

  /* ── Before/After pairs: stack vertically ───────────────────── */
  .cs-decision-pairs {
    flex-direction: column;
  }

  /* ── Single-image decision layout (Data Validation): stack ──── */
  .cs-decision {
    flex-direction: column;
  }

  .cs-decision__images {
    flex: none;
    width: 100%;
    order: 0; /* image above text */
  }

  .cs-decision__content {
    width: 100%;
  }

  /* ── Process grid: single column ────────────────────────────── */
  .cs-process {
    grid-template-columns: 1fr !important;
  }

  /* ── Stats / takeaways: 2 columns ───────────────────────────── */
  .cs-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cs-takeaways {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Card split: stacked ─────────────────────────────────────── */
  .cs-card-split {
    grid-template-columns: 1fr;
  }

  .cs-card-split__col {
    padding-right: 0;
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
  }

  .cs-card-split__col:first-child {
    border-top: none;
    padding-top: 0;
  }

  /* ── Bare cards with inline flex-direction:row: stack ──────── */
  .cs-bento-card--bare {
    flex-direction: column !important;
  }

  .cs-bento-card--bare > img {
    width: 100% !important;
  }

  .cs-bento-card--bare > div {
    width: 100% !important;
    max-height: 60vw;
  }

  /* ── Other page items: 2-column grid ────────────────────────── */
  .other-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .other-item--flat {
    flex: none;
    min-width: 0;
  }

  /* ── Photography grid: 2 columns ────────────────────────────── */
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── CTA links: stacked ─────────────────────────────────────── */
  .cs-cta__links {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  /* ── Journey / persona flow: stacked ────────────────────────── */
  .cs-journeys {
    flex-direction: column;
  }

  .cs-journey-flow {
    flex-direction: column;
  }

  /* ── Two-col feature / characteristic cards: single column ──── */
  .cs-cards--two-col {
    grid-template-columns: 1fr;
  }

  /* ── Wireframe / image grids: row, smaller sizes ────────────── */
  .cs-image-grid {
    gap: var(--space-3);
  }

  .cs-image-grid--3 .cs-image {
    width: 30%;
  }

  .cs-image-grid--2 .cs-image {
    width: 45%;
  }

  /* ── FigJam / bleed images: cancel negative margins ─────────── */
  .cs-image-bleed {
    margin: 0 !important;
    border-radius: var(--border-radius-lg) !important;
  }

  /* ── Color palette: 2 columns ───────────────────────────────── */
  .cs-palette {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Figma prototype embeds: stack + shorter height ─────────── */
  .cs-prototype-grid {
    flex-direction: column;
  }

  .cs-prototype-embed {
    height: 560px;
  }

  /* ── Bento cards: clip any negative-margin bleed ────────────── */
  .cs-bento-card {
    overflow: hidden;
  }


}