/* ═══════════════════════════════════════════
   RESPONSIVE.CSS — Media queries (360px–1200px+)
   MUST be loaded last before utilities.css
═══════════════════════════════════════════ */

/* ── Large Screens (≥1200px) ── */
@media (min-width: 1200px) {
  .value-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Tablets (≤1024px) ── */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-left {
    align-items: center;
  }

  .hero-kicker {
    justify-content: center;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-right {
    display: none;
  }

  .compliance-pillars-grid {
    grid-template-columns: 1fr;
  }

  .ftab-layout {
    grid-template-columns: 1fr;
  }

  .ftab-screenshot img {
    min-height: 240px;
    object-fit: cover;
    object-position: top;
  }

  .calculator-card {
    grid-template-columns: 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ── Tablets Portrait (≤768px) ── */
@media (max-width: 768px) {
  :root {
    --container-pad: 1.25rem;
  }

  .desktop-nav {
    display: none;
  }

  .nav-actions .btn-access {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .mobile-drawer {
    display: block;
  }

  .content-section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .hero-section {
    min-height: auto;
    padding-top: calc(var(--nav-height) + var(--space-12));
    padding-bottom: var(--space-16);
  }

  .hero-headline {
    /* Don't inflate font size per GeoICON rules */
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .hero-metrics-strip {
    justify-content: center;
    gap: var(--space-3);
  }

  .metric-divider {
    display: none;
  }

  .metric-item {
    min-width: 60px;
  }

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

  .feature-tab-nav {
    gap: var(--space-1);
  }

  .ftab-btn {
    font-size: 0.65rem;
    padding: var(--space-1) var(--space-2);
  }

  .compliance-pillars-grid {
    grid-template-columns: 1fr;
  }

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

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

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

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

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

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

/* ── Mobile (≤480px) ── */
@media (max-width: 480px) {
  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-primary,
  .btn-secondary {
    text-align: center;
    justify-content: center;
  }

  .hero-metrics-strip {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .metric-item {
    min-width: 80px;
  }

  .audit-score .score-num {
    font-size: 3rem;
  }

  .ftab-panel {
    border-radius: var(--radius-lg);
  }

  .ftab-layout {
    border-radius: var(--radius-lg);
  }

  .ftab-screenshot img {
    min-height: 180px;
  }
}

/* ── Small Mobile (≤360px) ── */
@media (max-width: 360px) {
  :root {
    --container-pad: 1rem;
  }

  .hero-headline {
    font-size: 1.75rem;
  }

  .section-title {
    font-size: 1.4rem;
  }

  /* Prevent wrapping issues — let text wrap naturally */
  h1, h2, h3 {
    white-space: normal;
    overflow-wrap: break-word;
  }

  .ftab-btn {
    font-size: 0.6rem;
    padding: 4px var(--space-2);
  }
}