/**
 * Mobile optimization layer for /work showcase + case demos.
 * Loaded after stamp/main/case CSS. Safe-area, type, panels, and touch.
 */

/* Safe areas: notched phones (viewport-fit=cover on pages). */
@supports (padding: max(0px)) {
  :root {
    --gutter-safe: max(
      var(--gutter),
      env(safe-area-inset-left, 0px),
      env(safe-area-inset-right, 0px)
    );
  }
}

/* Canvas: never capture scroll on non-interactive stages; interactive
   stages take one-finger orbit without fighting page scroll on case pages. */
.stage {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.stage--interactive {
  touch-action: none;
}

/* Prefer reduced motion: freeze scroll-hint pulse if any. */
@media (prefers-reduced-motion: reduce) {
  .scrollhint {
    transition: none !important;
  }
}

/* ── Phone / narrow tablet ─────────────────────────────────────── */
@media (max-width: 48rem) {
  :root {
    /* Slightly tighter type scale so titles don't dominate the viewport. */
    --t-poster: clamp(2.4rem, 1.4rem + 7vw, 4.2rem);
    --t-hero: clamp(2rem, 1.3rem + 4.5vw, 3.4rem);
    --t-h2: clamp(1.45rem, 1.15rem + 1.6vw, 2.1rem);
    --gutter: clamp(1rem, 4.5vw, 1.5rem);
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: clip;
  }

  /* Chrome */
  .topbar {
    padding-top: max(0.85rem, env(safe-area-inset-top, 0px));
    padding-bottom: 0.75rem;
    gap: 0.5rem;
  }

  .topbar__cta {
    font-size: 0.7rem;
    padding: 0.45em 0.75em;
    white-space: nowrap;
  }

  .topbar__mark {
    font-size: 0.7rem;
  }

  /* Showcase hero */
  .hero {
    min-height: 100svh;
    min-height: 100dvh;
    padding-block: max(5.5rem, calc(env(safe-area-inset-top, 0px) + 4.25rem)) 2.25rem;
    gap: var(--sp-4);
  }

  .hero__foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  .hero__foot .btn {
    align-self: flex-start;
  }

  .lede {
    max-width: none;
  }

  /* Case cards: always tappable; show accent rail without hover */
  .case__link {
    grid-template-columns: 2.25rem 1fr;
    gap: 0.35rem 0.85rem;
    padding: 1.15rem 0.15rem 1.15rem 0.35rem;
    min-height: 3.5rem;
    -webkit-tap-highlight-color: transparent;
  }

  .case__link:before {
    opacity: 1;
    transform: none;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--case-accent, var(--accent)) 18%, transparent),
        transparent 70%
      ),
      #ffffffcc;
  }

  .case__link:hover,
  .case__link:focus-visible {
    padding-left: 0.35rem;
  }

  .case__name {
    font-size: var(--step-1);
    flex-wrap: wrap;
  }

  .case__name:after {
    opacity: 0.7;
    transform: none;
  }

  .case__n {
    padding-top: 0.35em;
  }

  /* Specs grid: 2-up not crushed 4-up */
  .specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }

  .steps {
    display: grid;
    gap: var(--sp-4);
  }

  .contact__title {
    font-size: var(--step-2);
  }

  .contact__title br {
    display: none;
  }

  .foot__inner {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
  }

  /* ── Case demos ─────────────────────────────────────────────── */
  .case-hero {
    min-height: 100svh;
    min-height: 100dvh;
    padding-block: max(5.5rem, calc(env(safe-area-inset-top, 0px) + 4rem)) 3rem;
    gap: var(--sp-3);
    width: min(var(--shell), 100% - 2 * var(--gutter));
  }

  .case-hero__title {
    max-width: 12ch;
    font-size: var(--step-3);
  }

  .case-hero__sub {
    max-width: 28ch;
    font-size: var(--step-0);
    line-height: 1.45;
  }

  /* Shorter chapters so demos feel less like a long empty scroll. */
  .chapter {
    min-height: auto;
    min-height: 72svh;
    padding-block: 3.5rem;
    width: min(var(--shell), 100% - 2 * var(--gutter));
    align-content: center;
  }

  .chapter--end {
    min-height: 55svh;
  }

  .panel,
  .panel--right {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 1.15rem 1.1rem;
    /* Cheaper composite on low-end phones */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fffffff0;
  }

  .panel--dark,
  body[data-ground="dark"] .panel {
    background: #0b0b0df2;
  }

  .panel__title {
    font-size: var(--step-1);
  }

  /* Tech tag + scroll hint: stack cleanly, avoid collision */
  .techtag {
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    left: var(--gutter-safe);
    max-width: calc(100% - 6.5rem);
    font-size: 0.65rem;
    padding: 0.4em 0.7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fffffff0;
  }

  body[data-ground="dark"] .techtag {
    background: #0b0b0df0;
  }

  .scrollhint {
    bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
    right: var(--gutter-safe);
    font-size: 0.65rem;
  }

  .handoff__inner {
    width: min(var(--shell), 100% - 2 * var(--gutter));
  }

  .handoff__title {
    font-size: var(--step-1);
  }
}

/* Very small phones */
@media (max-width: 22.5rem) {
  .case__link {
    grid-template-columns: 1.75rem 1fr;
  }

  .specs {
    grid-template-columns: 1fr;
  }

  .techtag {
    display: none; /* free bottom chrome; technique is also in page body */
  }
}

/* ── Configurator demo (07) ───────────────────────────────────── */
@media (max-width: 60rem) {
  .cfg {
    inset: auto var(--gutter-safe) max(0.65rem, env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: min(48svh, 22rem);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.95rem 1rem 1rem;
    gap: 0.75rem;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fffffff5;
    border-radius: 12px;
  }

  .cfg__title {
    font-size: var(--step-1);
  }

  .cfg__lede {
    display: none; /* reclaim vertical for the 3D stage */
  }

  .cfg__group {
    padding-top: 0.65rem;
    gap: 0.4rem;
  }

  .sw {
    width: 3.1rem;
  }

  .sw__chip {
    min-height: 44px; /* touch target */
  }

  .sw__name {
    font-size: 0.6rem;
  }

  .cfg__foot {
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .cfg__cta {
    min-height: 44px;
    padding: 0.7em 1.1em;
  }

  .cfg__hint {
    font-size: 0.62rem;
  }

  .cfg__hint::after {
    content: " · one finger to orbit";
  }

  /* Hotspots: keep off mobile (too dense); CSS already hides under 60rem in
     configurator sheet — reinforce. */
  .hotspots {
    display: none !important;
  }

  /* Leave the top 52%+ of the screen clear for the model */
  body:has(.cfg) .stage {
    /* no-op: stage is full viewport; cfg is bottom sheet */
  }
}

@media (max-width: 30rem) {
  .cfg {
    max-height: min(46svh, 20rem);
    padding: 0.85rem 0.9rem;
  }

  .cfg__brand {
    font-size: 0.65rem;
  }
}

/* Landscape phone: keep configurator from covering the whole canvas */
@media (max-height: 28rem) and (orientation: landscape) {
  .cfg {
    max-height: 88svh;
    width: min(20rem, 46vw);
    inset: auto max(0.5rem, env(safe-area-inset-right, 0px)) max(0.5rem, env(safe-area-inset-bottom, 0px)) auto;
    left: auto;
  }

  .case-hero,
  .chapter {
    min-height: 100svh;
    padding-block: 3rem;
  }

  .techtag,
  .scrollhint {
    display: none;
  }
}