/* =============================================================
   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 28px;
    position: sticky;
    top: 12px;
    z-index: 100;
  }

  .nav__links {
    gap: 20px;
  }


  /* ── 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;
  }

  /* Hide the standalone tall headshot — photo moves into the card */
  .about-headshot {
    display: none;
  }

  /* Card identity row: headshot left, name/title right */
  .about-card__identity {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .about-headshot--card {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
  }

  .about-card {
    width: 100%;
  }

  .about-card .about-divider {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .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 {
    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 */
  .work-panel {
    width: 100% !important;
    opacity: 1 !important;
    overflow: visible !important;
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-card);
    flex: 1;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
  }

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

  /* Arrow visible on mobile (no hover state) */
  .work-item__arrow {
    opacity: 0.4;
  }

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

  /* ── 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;
  }


  /* =============================================================
     Mobile Work Preview Modal — bottom sheet
     Activated by mobile.js when a non-protected work item is tapped.
     ============================================================= */

  .mobile-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }

  .mobile-preview-modal.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-preview-sheet {
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-height: 88dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .mobile-preview-modal.is-open .mobile-preview-sheet {
    transform: translateY(0);
  }

  /* Drag handle pill */
  .mobile-preview-sheet__handle {
    width: 36px;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
  }

  .mobile-preview-sheet__header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 20px 4px;
    flex-shrink: 0;
  }

  .mobile-preview-sheet__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    border: none;
    flex-shrink: 0;
  }

  .mobile-preview-sheet__image {
    width: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 20px 16px;
    flex-shrink: 0;
  }

  .mobile-preview-sheet__image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  .mobile-preview-sheet__content {
    padding: 4px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
  }

  .mobile-preview-sheet__title {
    font-family: var(--font-accent);
    font-size: var(--scale-5);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
  }

  .mobile-preview-sheet__desc {
    font-family: var(--font-primary);
    font-size: var(--scale-3);
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
  }

  .mobile-preview-sheet__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2c2c2c;
    color: #f5f5f5;
    font-family: var(--font-primary);
    font-size: var(--scale-3);
    font-weight: 700;
    border-radius: 8px;
    padding: 16px 28px;
    text-decoration: none;
    transition: opacity 150ms ease;
  }

  .mobile-preview-sheet__cta:hover,
  .mobile-preview-sheet__cta:active {
    opacity: 0.85;
  }

}