/* ============================================================
   PASSPORT GATEWAY — Responsive, Print, Reduced-Motion
   ============================================================ */

/* Mid-size phones / phablets (540-719px): contact grid in 2 cols */
@media (min-width: 540px) and (max-width: 719px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

/* Tablet and up (≥720px): contact cards in 3-column grid */
@media (min-width: 720px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

/* Phones (≤560px): stack CTA groups vertically */
@media (max-width: 560px) {
  .cta-groups {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-group { width: 100%; }
  .cta-row {
    flex-direction: column;
    align-items: center;
  }
}

/* Compact phones (≤480px): tighten brand + trust-row */
@media (max-width: 480px) {
  .brand-text strong { font-size: 1rem; }
  .brand-text .brand-sub { font-size: 0.62rem; letter-spacing: 0.16em; }
  .brand-logo { width: 46px; height: 46px; }

  .trust-row {
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-6);
  }
}

/* Ultra-narrow phones (≤360px): tighten gutter + brand + hero padding */
@media (max-width: 360px) {
  :root { --gutter: 0.875rem; }
  .brand-logo { width: 40px; height: 40px; }
  .brand-text strong { font-size: 0.92rem; }
  .brand-text .brand-sub { font-size: 0.58rem; letter-spacing: 0.14em; }
  .lang-switch button { padding: 0.35rem 0.65rem; font-size: 0.72rem; }
  .hero { padding-block: 2.5rem; }
  .hero-lede { margin-bottom: var(--space-6); }
  .cta-row { margin-bottom: var(--space-6); }
  .cta-groups { margin-bottom: var(--space-6); }
  /* Drop the scroll indicator label — keep just the icon */
  .scroll-indicator { padding: 0.55rem 0.7rem; gap: 0; }
  .scroll-indicator-label { display: none; }
}

/* Print (graceful fallback) */
@media print {
  .site-header, .site-footer, .lang-switch, .skip-link { display: none; }
  .hero { background: none; color: black; padding: 0; }
  .hero-title, .hero-lede, .contact-card, .contact-card-name { color: black; }
}

/* Reduced motion (a11y) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}