/* ==========================================================================
   responsive.css — breakpoint adjustments
   Breakpoints are based on layout needs, not device names.
   Mobile-first tokens live in main.css via clamp(); this file handles
   structural shifts (columns, nav shape, effect intensity).
   ========================================================================== */

/* ---- Up to ~640px: single-column mobile ---- */
@media (max-width: 640px) {
  :root {
    --container-pad: 1.25rem;
  }

  .glass-floating,
  .glass-ultra {
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }

  .atmosphere__orb {
    filter: blur(60px);
  }

  .site-footer {
    flex-direction: column;
    text-align: center;
  }

  .site-footer__social {
    align-items: center;
  }

  .design-switcher {
    top: 4.2rem;
    gap: 0.1rem;
    padding: 0.25rem;
  }

  .design-switcher__btn {
    padding: 0.35rem 0.5rem;
    font-size: 0.65rem;
  }
}

/* ---- 641px–1024px: tablet ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  .section {
    padding-block: var(--space-5);
  }
}

/* ---- 1025px and up: desktop — full cinematic spacing, tilt/reflection
   effects are enabled by JS feature detection, not CSS breakpoints ---- */
@media (min-width: 1025px) {
  .section {
    padding-block: var(--space-6);
  }
}

/* ---- Hover-dependent affordances only apply where hover truly exists ---- */
@media (hover: none) {
  .glass-interactive:hover {
    transform: none;
  }
}

/* ---- Hero stacking — below the width where a two-column hero with the
   orb has room to breathe, stack to a single column, content first. ---- */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: var(--space-5);
    text-align: center;
  }

  .hero__content {
    max-width: none;
    margin-inline: auto;
  }

  .hero__lede {
    margin-inline: auto;
  }

  .hero__ctas {
    justify-content: center;
  }

  .hero__visual {
    min-height: 240px;
  }

  .hero-chip {
    display: none;
  }
}

/* ---- Navigation collapse — below the width where five links comfortably
   fit inline in the pill, swap to a compact bar + toggled dropdown. ---- */
@media (max-width: 760px) {
  /* Redefining the token (not duplicating literals) means body's
     padding-top and every anchor section's scroll-margin-top adjust
     together automatically — nothing here to keep in sync by hand for
     a future anchor target. */
  :root {
    --nav-clearance: 5.5rem;
  }

  .nav {
    left: var(--space-3);
    right: var(--space-3);
    width: auto;
    transform: none;
    /* Was space-between — but .nav__links is position:absolute when
       collapsed (removed from flex flow), leaving .nav__toggle as the
       ONLY actual flex participant. space-between with a single item
       just left-aligns it, stranding the toggle button at the edge of
       an otherwise-empty-looking pill. center puts it where it visibly
       reads as "the button for this pill," not off to one side. */
    justify-content: center;
  }

  .nav__toggle {
    display: inline-flex;
  }

  .nav__links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-2);
    border-radius: var(--radius-card);
    /* Solid-ish, not the usual low-opacity glass tier: this panel sits
       directly over page content on mobile and must stay legible even
       if backdrop-filter doesn't render on a given browser (it's a
       known weak spot on some mobile WebKit builds combined with
       fixed-position + transform ancestors) — confirmed as a real
       issue on a user's phone, where the near-transparent
       --glass-floating-bg (10% white) left the hero text showing
       straight through with no blur to obscure it. Function over the
       glass aesthetic for this one component. */
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(var(--glass-floating-blur)) saturate(var(--glass-floating-saturate));
    -webkit-backdrop-filter: blur(var(--glass-floating-blur)) saturate(var(--glass-floating-saturate));
    border: 1px solid var(--glass-floating-border);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-glass),
      transform var(--duration-normal) var(--ease-glass);
  }

  .nav__links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Dark-theme counterpart to the solid light background above — same
     "must stay legible without depending on backdrop-filter" reasoning,
     just a dark solid instead of a light one. */
  [data-theme="dark"] .nav__links {
    background: rgba(12, 19, 25, 0.94);
  }

  .nav__link {
    justify-content: center;
    padding: 0.85rem 1.25rem;
  }

}