/* ==========================================================================
   TomiGuide - Responsive layer
   Mobile is a different layout, not a squeezed desktop:
     * the primary nav collapses into a drawer with a real information hierarchy
     * explore filters become a full-height sheet instead of a cramped column
     * the product page grows a sticky buy bar so the CTA is always one tap away
     * the course player switches from side-by-side to lesson list on demand
   ========================================================================== */

/* ---------- <= 1180px : tighten the wide layouts -------------------------- */
@media (max-width: 1180px) {
  .pdp { grid-template-columns: minmax(0, 1fr) 330px; gap: var(--sp-6); }
  .checkout { grid-template-columns: minmax(0, 1fr) 330px; }
  .player { grid-template-columns: 300px minmax(0, 1fr); }
}

/* ---------- <= 1024px : the header loses its inline search ---------------- */
@media (max-width: 1024px) {
  .header-search { max-width: 260px; }
  .nav__link { padding: 0.5rem 0.5rem; }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .split { gap: var(--sp-6); }
}

/* ---------- <= 960px : drawer navigation --------------------------------- */
@media (max-width: 960px) {
  :root { --header-h: 60px; }

  .site-header__inner { gap: var(--sp-3); }
  .nav--primary,
  .header-search,
  .header-actions .desktop-only { display: none; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The search moves under the header on interior pages */
  .mobile-search { display: block; }

  .dash { grid-template-columns: 1fr; gap: var(--sp-4); }
  .dash__side {
    position: static;
    padding: var(--sp-2);
  }
  .dash__nav {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--sp-1);
    scrollbar-width: none;
  }
  .dash__nav::-webkit-scrollbar { display: none; }
  .dash__nav a { white-space: nowrap; }
  .dash__nav-title { display: none; }

  .pdp,
  .checkout { grid-template-columns: minmax(0, 1fr); }

  .pdp__buybox { position: static; }
  .pdp__buybox-media { display: block; }

  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth__aside { display: none; }
  .auth__main { padding-block: var(--sp-7); }

  .split { grid-template-columns: 1fr; }
  .split--reverse > *:first-child { order: 2; }

  /* Explore filters become an off-canvas sheet */
  .explore { grid-template-columns: 1fr !important; }
  .explore__filters {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    background: var(--surface);
    overflow-y: auto;
    /* The desktop rule caps this to the viewport minus the header; as a
       full-screen sheet it must be free to fill the whole screen. */
    max-height: none;
    padding: var(--sp-4);
    transform: translateY(100%);
    transition: transform var(--t-slow);
    border-radius: 0;
    border: 0;
    display: block;
  }
  .explore__filters.is-open { transform: none; }
  .explore__filters-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: calc(var(--sp-4) * -1);
    background: var(--surface);
    padding-top: var(--sp-4);
    margin-top: calc(var(--sp-4) * -1);
  }
  .filters-toggle { display: inline-flex !important; }

  .player { grid-template-columns: 1fr; }
  .player__side {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    order: 2;
  }
  .player__main { order: 1; padding: var(--sp-4); }
}

/* ---------- <= 760px : phone layout -------------------------------------- */
@media (max-width: 760px) {
  :root {
    --sp-9: 3rem;
    --sp-10: 3.5rem;
    --fs-3xl: 1.875rem;
    --fs-2xl: 1.5rem;
  }

  .container { padding-inline: var(--sp-4); }

  .hero { padding-block: var(--sp-8) var(--sp-7); }
  .hero__sub { font-size: var(--fs-md); }

  .searchbox__form {
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    gap: var(--sp-3);
  }
  .searchbox--hero .searchbox__form { padding-left: var(--sp-4); }
  .searchbox__input { padding: var(--sp-1) 0; }
  .searchbox--hero .btn { width: 100%; }

  .popular { justify-content: flex-start; }

  .grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .grid--categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  .product-card__body { padding: var(--sp-3); gap: var(--sp-1); }
  .product-card__desc { display: none; }
  .product-card__title { font-size: var(--fs-base); }
  .product-card__foot { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .price__now { font-size: var(--fs-md); }

  .category-card { padding: var(--sp-4); }
  .category-card__desc { display: none; }

  .section-head { margin-bottom: var(--sp-4); }
  .section-head .link-more { font-size: var(--fs-sm); }

  .check-list--2col { grid-template-columns: 1fr; }

  .cart-line__thumb { width: 84px; }
  .cart-line { gap: var(--sp-3); }

  .rating-summary { gap: var(--sp-4); }

  .modal { max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal__foot { border-radius: 0; }
  .modal__foot .btn { flex: 1; }

  .toast-region {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: var(--sp-3);
    max-width: none;
  }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-4); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  .cta-band { padding: var(--sp-6) var(--sp-4); }
  .cta-band__actions .btn { width: 100%; }

  .table th, .table td { padding: var(--sp-3); }

  .dash__head { flex-direction: column; align-items: stretch; }
  .dash__head .btn { width: 100%; }

  /* Sticky purchase bar on the product page ------------------------------ */
  .buy-bar {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-4);
    align-items: center;
    gap: var(--sp-3);
    box-shadow: 0 -4px 16px rgba(18, 23, 43, 0.08);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  }
  .buy-bar .price { flex: none; }
  .buy-bar .btn { flex: 1; }
  body.has-buy-bar { padding-bottom: 76px; }
}

/* ---------- <= 420px : very small phones --------------------------------- */
@media (max-width: 420px) {
  .grid--products { grid-template-columns: 1fr; }
  .product-card__desc { display: -webkit-box; }
  .grid--categories { grid-template-columns: 1fr; }
  .category-card__desc { display: block; }
  .logo__text { font-size: 1.0625rem; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Elements that only exist on one breakpoint ------------------- */
.mobile-search { display: none; }
.filters-toggle { display: none; }
.explore__filters-head { display: none; }
.buy-bar { display: none; }

@media (min-width: 961px) {
  .mobile-only { display: none !important; }
}

/* ---------- Tablet portrait tuning --------------------------------------- */
@media (min-width: 761px) and (max-width: 960px) {
  .grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Larger screens ------------------------------------------------ */
@media (min-width: 1440px) {
  .grid--products { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
}

/* ---------- Reduced data / dark UI preference ---------------------------- */
@media (prefers-contrast: more) {
  :root {
    --border: #b8c0d0;
    --border-strong: #8d97ad;
    --muted: #4c5570;
  }
}