/* ==================================================================
   ALINA Web — responsive layer (mobile-first, min-width queries)
   Base styles in style.css target small phones (~360–375px).
   Breakpoints: 600px (large phones) · 768px (tablets) ·
                1080px (laptops, desktop navigation) · 1320px (large)
   ================================================================== */

/* Small phones: hide decorative status cards that would crowd the mockup. */
@media (max-width: 599px) {
  .float-card { display: none; }
  .btn-group--stack-sm > .btn { width: 100%; }
  .site-mock { padding: 12px; }
  .site-mock-nav { margin-bottom: 16px; }
}

/* ---------- ≥ 600px: large phones / small tablets ---------- */
@media (min-width: 600px) {
  :root { --gutter: 1.5rem; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .plan-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .form-card { padding: var(--sp-7); }
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid--2 > .field--full { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: var(--sp-8); }
}

/* ---------- ≥ 768px: tablets ---------- */
@media (min-width: 768px) {
  :root { --section-y: 5.5rem; --gutter: 2rem; }

  .hero { padding-block: var(--sp-9) 5rem; }
  .page-hero { padding-block: var(--sp-9); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  /* Thin connector line between the three process steps. */
  .steps--connected { position: relative; }
  .steps--connected .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--sp-6) + 20px);
    left: calc(var(--sp-6) + 48px);
    right: calc(-1 * var(--sp-5) - 1px);
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px);
  }
  .cta-band { grid-template-columns: 1fr auto; }
  .accordion-trigger { font-size: var(--fs-lg); }
}

/* ---------- ≥ 1080px: laptops — desktop navigation ---------- */
@media (min-width: 1080px) {
  :root { --header-h: 76px; }

  .nav-toggle { display: none; }

  /* Frosted header only on desktop: on mobile, backdrop-filter would become the
     containing block of the fixed menu panel and clip it. */
  @supports (backdrop-filter: blur(8px)) {
    .site-header { background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(160%) blur(8px); }
  }

  .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    gap: var(--sp-5);
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
  }
  .nav-list { flex-direction: row; align-items: center; gap: 2px; margin-inline: auto; }
  .nav-list a {
    position: relative;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text);
  }
  .nav-list a:hover { background: var(--bg-alt); color: var(--navy); }
  /* Active page: short brand-blue underline. */
  .nav-list a[aria-current="page"] { color: var(--navy); }
  .nav-list a[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0.7rem; right: 0.7rem; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--blue);
  }
  .nav-actions { flex-direction: row; }

  .brand img { width: 168px; }

  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-9); }
  .split--hero { grid-template-columns: 1.02fr 1fr; }
  .split--wide-left { grid-template-columns: 1.2fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.15fr; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .plan-grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
  .plan { padding: var(--sp-6) var(--sp-5); }
  .spec-list li { grid-template-columns: auto 1fr; align-items: start; }
  .spec-list li > .icon { grid-row: span 2; margin-top: 0.2em; }
  .spec-value { text-align: left; }

  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr 1.35fr; align-items: start; }
  .register-layout { grid-template-columns: 1fr 1.1fr; align-items: start; }
}

/* ---------- ≥ 1320px: large screens ---------- */
@media (min-width: 1320px) {
  :root { --section-y: 6.5rem; }
  .nav-list a { padding-inline: 0.85rem; }
  .nav-list a[aria-current="page"]::after { left: 0.85rem; right: 0.85rem; }
  .plan { padding: var(--sp-6); }
}