/* ==========================================================
   SCI MEDIA — RESPONSIVE
   Breakpoint adjustments only. Component structure lives in
   components.css; this file adjusts spacing/visibility per
   viewport, following the brief's priority breakpoints:

   Desktop:  1440px / 1280px
   Tablet:   1024px / 768px
   Mobile:   480px / 390px / 360px
   ========================================================== */

/* ---------- ≥1024px: desktop navigation appears ---------- */
@media (min-width: 1024px) {
  :root {
    --container-pad: 2.5rem;
  }

  .brand-logo__img {
    height: 46px;
  }

  .site-nav {
    display: block;
  }

  .site-header__cta {
    display: inline-flex;
  }

  .nav-toggle,
  .mobile-nav {
    display: none;
  }
}

/* ---------- ≥1280px: generous container padding ---------- */
@media (min-width: 1280px) {
  :root {
    --container-pad: 3rem;
  }
}

/* ---------- ≥1440px: cap section padding for very wide screens ---------- */
@media (min-width: 1440px) {
  :root {
    --container-pad: 4rem;
  }
}

/* ---------- ≤767px: tighten spacing scale slightly ---------- */
@media (max-width: 767px) {
  :root {
    --container-pad: 1.25rem;
  }

  .card {
    padding: var(--space-6);
  }
}

/* ---------- ≤480px: compact header + full-width buttons in flows ---------- */
@media (max-width: 480px) {
  :root {
    --container-pad: 1rem;
  }

  .site-header__logo {
    font-size: var(--fs-body);
  }

  /* Keep the two hero CTAs on one row instead of stacking: shrink
     the buttons and their icon circles just enough to both fit. */
  .hero__actions {
    gap: var(--space-2);
  }

  .hero__cta.btn {
    padding-right: var(--space-3);
    font-size: var(--fs-small);
  }

  .hero__cta-icon,
  .hero__cta-arrow {
    width: 26px;
    height: 26px;
  }

  .hero__cta-icon svg,
  .hero__cta-arrow svg {
    width: 13px;
    height: 13px;
  }
}

/* ---------- ≤360px: smallest supported width ---------- */
@media (max-width: 360px) {
  .btn {
    padding-inline: var(--space-4);
  }
}