/* ==========================================================================
   BLACKSMITH — Responsive overrides
   Breakpoints: 1920 / 1440 / 1366 / 1024 / 768 / 430 / 390 / 375
   ========================================================================== */

/* ---------- Large desktop refinement ---------- */
@media (min-width:1600px){
  .ceo__inner{ gap:120px; }
  .hero__headline{ font-size:clamp(54px,5.4vw,88px); }
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width:1366px){
  .ceo__inner{ grid-template-columns:1fr 1fr; }
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  :root{ --header-h:112px; }

  .ceo{ padding-right:clamp(24px,6vw,80px); }
  .ceo__inner{ grid-template-columns:1fr; text-align:left; }
  .ceo__art{ justify-self:start; max-width:480px; margin-top:12px; }

  .mega-menu{ width:min(320px,88vw); }
}

/* ---------- Mobile (phones + small tablets) : full-screen nav takeover ---------- */
@media (max-width:860px){
  .brand__mark{ width:68px; }

  .nav-trigger__label{ font-size:10.5px; letter-spacing:.2em; }

  /* Mega menu becomes a near-fullscreen centered takeover */
  .mega-menu{
    position:fixed; top:0; left:0; right:0;
    width:100%; height:0; max-height:none;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(170deg, rgba(5,5,5,.97), rgba(14,12,10,.96));
    border:none;
    transition:height var(--dur-slow) var(--ease);
    overflow-y:auto;
  }
  .mega-menu.is-open{ height:100vh; height:100svh; }
  .mega-menu__list{
    width:100%; padding:calc(var(--header-h) + 20px) 0 40px;
    display:flex; flex-direction:column; align-items:center; gap:2px;
  }
  .mega-menu__item{ width:100%; max-width:380px; text-align:center; border-top:none; }
  .mega-menu__item + .mega-menu__item{ border-top:1px solid rgba(201,160,106,.1); }
  .mega-menu__item > a{ padding:18px 0; font-size:15px; letter-spacing:.22em; }
  .mega-menu__item:hover > a,.mega-menu__item > a:focus-visible{ padding-left:0; }
  .mega-menu__item > a::before{ display:none; }

  /* Flyout becomes inline accordion under BRAND/PRODUCTS */
  .mega-menu__item.has-flyout{ display:flex; flex-direction:column; align-items:center; }
  .flyout{
    position:static; width:100%; max-width:380px;
    opacity:1; visibility:visible; transform:none;
    background:none; backdrop-filter:none; border:none;
    max-height:0; overflow:hidden;
    transition:max-height var(--dur-med) var(--ease);
  }
  .mega-menu__item.has-flyout.is-flyout-open .flyout{ max-height:260px; }
  .flyout a{ text-align:center; padding:12px 0; font-size:12.5px; }
  .flyout a:hover{ padding-left:0; }

  .search-overlay__form{ width:92vw; }
}

@media (max-width:768px){
  :root{ --header-h:104px; }
  .hero__content{ padding-bottom:calc(var(--header-h) * 1.1); gap:16px; }
  .hero__headline{ font-size:clamp(30px,8vw,46px); }
  .hero__eyebrow{ font-size:9.5px; letter-spacing:.26em; }

  .film{ padding:28px 0 34px; }
  .film__controls{ left:14px; bottom:14px; }
  .film__control{ width:40px; height:40px; }

  .ceo{ padding:36px 20px 44px; }
  .ceo__headline{ font-size:clamp(30px,8vw,42px); margin-bottom:26px; }
  .ceo__art{ max-width:100%; aspect-ratio:5/4; }

  .bestsellers{ padding:28px 0 38px; }
  .bestsellers__header{ margin-bottom:20px; }

  .site-footer__top{ grid-template-columns:1fr; text-align:center; gap:40px; }
  .site-footer__brand{ align-items:center; }
  .site-footer__tagline{ max-width:none; }
}

@media (max-width:430px){
  :root{ --header-h:92px; }
  .brand__mark{ width:56px; }
  .header__bar{ padding:0 16px; }

  .hero__arrow{ width:38px; height:38px; }
  .hero__headline{ font-size:clamp(26px,9vw,38px); }

  .btn{ padding:14px 26px; font-size:10.5px; }

  .ceo__name{ font-size:14px; }
}

@media (max-width:375px){
  .hero__content{ padding-left:16px; padding-right:16px; }
}

/* ---------- Touch devices: disable hover-only affordances ---------- */
@media (hover:none){
  .cursor{ display:none; }
  .flyout{ transition:none; }
}

/* ---------- Reduced motion: flatten heavy parallax ---------- */
@media (prefers-reduced-motion: reduce){
  .hero__image,.ceo__crown,.bestsellers__img{ transform:none !important; }
}
