/* ==========================================================================
   KOBRO — MOBILE LAYER
   Loaded last, scoped almost entirely to <=760px. Turns the narrow view from
   a squeezed desktop page into something that behaves like an app: thumb-level
   navigation, a bottom-sheet cart, horizontal rails, and touch-sized targets.
   ========================================================================== */

/* Tab bar is hidden by default so nothing changes on desktop. */
.tabbar{display:none}

@media (max-width:760px){

  /* ------------------------------------------------------------------------
     Frame
     ------------------------------------------------------------------------ */
  :root{--pad:20px;--header:56px;--tabbar:64px}

  html{-webkit-text-size-adjust:100%}
  body{
    padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom));
    overscroll-behavior-y:none;
  }
  a,button{-webkit-tap-highlight-color:transparent}

  /* Nothing should hover on a touch screen. */
  a:hover,button:hover{opacity:1}

  /* ------------------------------------------------------------------------
     Top bar: wordmark and cart only. Navigation moves to the thumb.
     ------------------------------------------------------------------------ */
  .site-header{
    height:calc(var(--header) + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
    grid-template-columns:1fr auto;
    background:color-mix(in srgb,var(--paper) 92%,transparent);
    backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
  }
  /* The bar stays put — the cart must always be one tap away. */
  .site-header.header-hidden{transform:none}
  .nav,.menu-btn{display:none !important}
  .brand-lockup-header .brand-word{width:88px}
  .header-actions{display:flex;gap:6px;align-items:center}
  .header-actions .icon-btn{min-height:38px;padding:0 14px;border-radius:999px}
  .header-actions .theme-btn{width:38px;padding:0;display:grid;place-items:center}

  main{padding-top:calc(var(--header) + env(safe-area-inset-top))}
  .hero-v3,.page-hero-v3,.case-hero,.trip-hero,.article-head-v3,.card-detail-hero{padding-top:24px}

  /* ------------------------------------------------------------------------
     Bottom tab bar
     ------------------------------------------------------------------------ */
  .tabbar{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:400;
    height:calc(var(--tabbar) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--paper) 94%,transparent);
    backdrop-filter:blur(20px) saturate(1.3);
    -webkit-backdrop-filter:blur(20px) saturate(1.3);
    border-top:1px solid var(--line);
  }
  .tabbar a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    text-decoration:none;
    color:var(--muted);
    font:600 10px/1 var(--sans,system-ui);
    letter-spacing:.02em;
    transition:color .15s;
  }
  .tabbar svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a.active{color:var(--ink)}
  .tabbar a.active svg{stroke-width:2}
  .tabbar a:active{transform:scale(.94)}
  body.dark .tabbar{background:color-mix(in srgb,var(--paper) 90%,transparent)}

  /* ------------------------------------------------------------------------
     Cart becomes a bottom sheet
     ------------------------------------------------------------------------ */
  .cart-drawer{
    top:auto;
    bottom:0;
    left:0;right:0;
    width:100%;
    height:auto;
    max-height:86dvh;
    border-left:0;
    border-top:1px solid var(--line);
    border-radius:22px 22px 0 0;
    transform:translateY(100%);
    box-shadow:0 -20px 50px -20px rgba(0,0,0,.35);
    padding-bottom:env(safe-area-inset-bottom);
    overscroll-behavior:contain;
  }
  .cart-drawer.open{transform:none}
  .cart-drawer:before{
    content:'';
    display:block;
    width:38px;height:4px;
    border-radius:999px;
    background:var(--line);
    margin:10px auto 0;
    flex:0 0 auto;
  }
  .cart-items{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .cart-foot .checkout{min-height:52px;border-radius:999px;font-size:15px}

  /* ------------------------------------------------------------------------
     Type: display sizes tuned for a 390px viewport
     ------------------------------------------------------------------------ */
  .brand-lockup-hero .brand-word{width:min(78%,300px)}
  .hero-v3{min-height:auto;padding-block:8px 40px;align-content:start;row-gap:18px}
  .hero-bear{top:4%;right:-34px;height:190px;opacity:.2}
  .hero-footer h2{font-size:30px}
  .page-hero-v3 h1,.journal-hero h1{font-size:clamp(46px,15vw,64px)}
  .page-hero-v3 .lede{font-size:17px;max-width:none}
  .section-title-v3 h2{font-size:28px;max-width:none}
  .editorial-split h2{font-size:38px}
  .statement p{font-size:32px}
  .newsletter-v3 h2{font-size:36px}
  .footer-big{font-size:44px}
  .case-hero h1,.trip-hero h1,.article-head-v3 h1{font-size:34px}
  .card-detail-copy h1{font-size:32px}
  .market-note h2{font-size:30px}
  .missing h1,.success-page h1{font-size:36px}
  .project-card h2,.post-card h2,.trip-card h2{font-size:21px}
  .article-body{font-size:17px;line-height:1.72}

  .section-v3{padding-block:44px}

  /* ------------------------------------------------------------------------
     Cards: full-bleed tiles with real press feedback
     ------------------------------------------------------------------------ */
  .project-card,.post-card,.product-card-v3,.trip-card{
    border-radius:16px;
    overflow:hidden;
    transition:transform .12s ease;
  }
  .project-card:active,.post-card:active,.trip-card:active{transform:scale(.985)}
  .project-media,.post-art{height:210px}
  .blog-grid,.project-grid{gap:22px}

  /* Shop reads as a store: two tiles across, tighter. */
  .product-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .product-card-v3 .product-image{height:150px}
  .product-card-v3 h3{font-size:16px}
  .product-card-v3 p{display:none}

  /* The 1px-line grid trick leaves a grey empty cell when the item count is
     odd, so on mobile the cards carry their own surface. */
  .product-grid{background:none;border:0}
  .product-card-v3{background:var(--paper);border:1px solid var(--line)}
  .product-card-v3 .product-bottom{display:block}
  .product-card-v3 .price{display:block;margin-bottom:8px;font-size:15px}
  .product-card-v3 .add-btn{min-height:42px;width:100%;border-radius:999px;white-space:nowrap}
  .product-card-v3 .product-copy{padding:12px}
  .product-topline{font-size:9px}

  /* Keep the toast clear of the tab bar and the cart sheet. */
  .toast{bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 16px);width:max-content;max-width:calc(100% - 40px)}

  /* ------------------------------------------------------------------------
     Horizontal rails instead of long vertical stacks
     ------------------------------------------------------------------------ */
  .home-feature-grid{
    display:grid;
    grid-template-columns:none;   /* release the desktop 3-col track */
    grid-auto-flow:column;
    grid-auto-columns:78%;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1);
  }
  .home-feature-grid::-webkit-scrollbar{display:none}
  .home-feature-grid>*{scroll-snap-align:start}
  .home-feature-grid .project-media{height:190px}

  /* Filter pills scroll sideways rather than wrapping into three rows. */
  .filter-row{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
    padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1);
    scroll-padding-inline:var(--pad);
  }
  .filter-row::-webkit-scrollbar{display:none}
  .filter{flex:0 0 auto;min-height:38px;padding:0 16px;display:inline-flex;align-items:center;border-radius:999px}

  .journal-controls{flex-direction:column;align-items:stretch;gap:12px}
  .journal-controls .section-tally{align-self:flex-end}

  /* ------------------------------------------------------------------------
     Forms: 16px minimum stops iOS from zooming on focus
     ------------------------------------------------------------------------ */
  input,textarea,select{font-size:16px !important}
  .newsletter-v3 form{gap:12px}
  .newsletter-v3 input{min-height:48px}
  .newsletter-v3 button,.text-link{min-height:44px;display:inline-flex;align-items:center}

  /* ------------------------------------------------------------------------
     Trim decoration that only costs scroll on a phone
     ------------------------------------------------------------------------ */
  .index-strip{display:none}          /* the tab bar already does this job */
  .atlas-canvas{height:240px}
  .route-stage{height:230px;padding:20px}
  .case-placeholder{height:220px}
  .market-note img{max-height:200px}
  .mascot-stage img,.mascot-pose-duo>div img{height:180px}
  .editorial-split{display:block}
  .editorial-split>div{padding:28px 0}
  .editorial-split>div:first-child{border-right:0;border-bottom:1px solid var(--line)}

  footer{padding-bottom:32px}
}

/* Small phones */
@media (max-width:400px){
  .tabbar a{font-size:9px}
  .product-grid{gap:10px}
  .page-hero-v3 h1,.journal-hero h1{font-size:44px}
}

/* Someone on a phone who prefers less movement gets less movement. */
@media (prefers-reduced-motion:reduce){
  .cart-drawer,.tabbar a,.project-card,.post-card{transition:none}
}