/* ============================================================================
   Responsive layer.

   The desktop rules above are the design, untouched. Everything here is a
   narrowing override, so a wide viewport renders pixel-identical to the
   Claude design files and only narrow viewports diverge.

   Breakpoints
     1180px  gutters tighten, mega menu stops overflowing
      980px  four-up grids become two-up
      900px  two-column page layouts stack; sticky sidebars become action bars
      760px  admin sidebar goes off-canvas; tables become stacked cards
      560px  two-up grids become one-up
   ========================================================================= */

@media (max-width: 1180px) {
  :root { --gutter: 24px; }

  .mega { width: min(680px, calc(100vw - 48px)); left: -16px; }
  .hero__headline { font-size: 46px; }
  .footer__grid { gap: 28px; }
}

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 32px; padding-block: 44px 26px; }
  .hero__headline { font-size: 40px; max-width: none; }
  .hero__media { order: -1; }
  .hero__tabs { grid-template-columns: repeat(2, 1fr); gap: 0 16px; padding-bottom: 32px; }

  .buying-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 24px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .catalog__grid { grid-template-columns: 1fr; }
  .pay-tabs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* --- header: nav collapses behind a disclosure button --------------- */

  /* The top row must never wrap — the drawer hangs below it instead, so the
     logo, cart and burger always sit on one line however narrow the screen. */
  .masthead__inner { gap: 12px; flex-wrap: nowrap; }
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand__logo { height: 24px; }
  .cart-button, .burger { flex: none; }
  .burger {
    display: grid; place-items: center; width: 40px; height: 40px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--card); cursor: pointer; flex: none;
  }
  .burger__bars { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
  .burger__bars::before, .burger__bars::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink);
  }
  .burger__bars::before { top: -6px; }
  .burger__bars::after { top: 6px; }

  /* Anchored to the sticky masthead, so opening it never reflows the top row. */
  .masthead__mobile {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(10, 26, 38, .12);
    padding: 14px var(--gutter) 18px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    z-index: 25;
  }
  .masthead__mobile.is-open { display: grid; gap: 12px; }
  .masthead__mobile .currency-select { width: 100%; }

  /* Everything except the logo, the cart and the burger moves into the drawer, so
     the header stays a single row on a phone. The drawer itself is a div, so the
     child-combinator on `form` leaves its currency and sign-out forms alone. */
  .nav,
  .masthead > .shell > form,
  .masthead > .shell > .masthead__link { display: none; }

  /* The mega menu becomes a plain list inside the mobile disclosure. */
  .mega {
    position: static; width: auto; box-shadow: none; border: 0;
    padding: 0; grid-template-columns: 1fr; gap: 2px;
  }
  .mega__footer { grid-column: span 1; flex-direction: column; align-items: flex-start; gap: 10px; }

  /* --- page layouts stack --------------------------------------------- */
  .product__layout,
  .product__buy,
  .cart-layout,
  .auth { grid-template-columns: 1fr; gap: 24px; }

  /* Stacked, the gallery has nothing to stick alongside. */
  .product__gallery { position: static; }

  .product__name { font-size: 30px; }
  .page-title, .quote__title { font-size: 26px; }
  .confirm__title { font-size: 28px; }

  /* Sticky sidebars stop being sticky; their CTA moves to the action bar. */
  .configurator, .summary { position: static; top: auto; }

  /* The configurator's own submit button is redundant next to the action bar. */
  .configurator__submit, .summary__submit { display: none; }

  .feature-grid { grid-template-columns: 1fr; }
  .upgrade-banner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .quote__form { grid-template-columns: 1fr; }
  .quote__form > .span-2 { grid-column: span 1; }

  .auth__aside { order: -1; }
}

@media (max-width: 760px) {
  :root { --gutter: 18px; }

  .topbar__inner { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; }

  .hero__headline { font-size: 32px; }
  .hero__body { font-size: 16px; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__from { width: 100%; margin-left: 0; }

  .buying-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 26px; padding-block: 36px 20px; }
  .footer__legal { flex-direction: column; gap: 8px; }

  .card { padding: 20px; }
  .card--tight, .card--pad24 { padding: 20px; }
  .auth__card { padding: 22px; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-2 > .span-2 { grid-column: span 1; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .card-grid > .span-3 { grid-column: span 2; }

  .edition { grid-template-columns: 22px 1fr; }
  .edition__price { grid-column: 2; text-align: left; margin-top: 10px; }

  .cart-line__head { flex-wrap: wrap; }
  .cart-line__amount { text-align: left; width: 100%; }
  .cart-line__foot { flex-direction: column; align-items: flex-start; gap: 12px; }

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

  /* --- tables become stacked cards ------------------------------------ */
  .table__head { display: none; }
  .table__row {
    grid-template-columns: 1fr !important;
    gap: 6px; padding: 16px var(--gutter);
    border-bottom: 8px solid var(--page);
  }
  .table__row > * { min-width: 0; }
  .table__cell {
    display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  }
  .table__label {
    display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted-2); flex: none;
  }
  .status { justify-self: start; }
}

@media (max-width: 560px) {
  .hero__tabs { grid-template-columns: 1fr; }
  .hero__tab { padding-right: 0; }
  .card-grid { grid-template-columns: 1fr; }
  .card-grid > .span-3 { grid-column: span 1; }
  .pay-tabs { grid-template-columns: 1fr; }
  .product__links .btn { width: 100%; }
  .key-chip { flex-direction: column; align-items: flex-start; }
}

/* Users who prefer less motion get no slide animation or transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}