/* ============================================================
   RESPONSIVE — Breakpoints
   - Desktop: > 1024px (default)
   - Tablet:  769–1024px
   - Mobile:  481–768px
   - Phone:   ≤ 480px
   ============================================================ */

/* iOS safe area (iPhone notch) */
@supports (padding: max(0px)) {
  .header,
  .footer {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* ===== TABLET (≤ 1024px) ===== */
@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-title { font-size: 2.4rem !important; }
  .container { padding: 0 20px; }
}

/* ===== MOBILE (≤ 768px) ===== */
@media (max-width: 768px) {
  html { font-size: 15.5px; }

  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.45rem; }
  h3 { font-size: 1.2rem; }

  .container { padding: 0 16px; }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Header more compact */
  .header { padding: 8px 0; }
  .header .container { gap: 8px; }
  .header-logo {
    font-size: 1.1rem;
    gap: 8px;
  }
  .header-logo .logo-img {
    height: 40px;
  }

  .header-nav { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .header-nav a:not(.btn) {
    font-size: 0.85rem;
  }
  .header-nav .btn {
    padding: 7px 12px;
    font-size: 0.8rem;
  }

  /* App page header on mobile */
  .header-app { gap: 8px; }
  .header-app .logo-img { height: 34px; }
  .header-app .app-title { font-size: 0.95rem; }
  .header-back { width: 30px; height: 30px; font-size: 0.95rem; }

  /* Hero */
  .hero { padding: 40px 0 32px !important; }
  .hero-title { font-size: 2rem !important; }
  .hero-subtitle { font-size: 1rem !important; }
  .hero-actions {
    flex-direction: column;
    gap: 10px !important;
  }
  .hero-actions .btn-lg { width: 100%; }

  /* Sections */
  .features,
  .how-it-works,
  .pricing { padding: 40px 0 !important; }
  .section-title { margin-bottom: 20px !important; }

  /* Cards & app cards */
  .app-card { padding: 24px 16px !important; }
  .app-card .app-icon { font-size: 2.4rem !important; }
  .app-card .feature-icon { font-size: 2.5rem !important; }
  .app-card h3 { font-size: 1.1rem; }
  .app-card p { font-size: 0.85rem; }
  .feature-card { padding: 24px 18px; }

  /* Buttons full width when stacked */
  .btn { min-height: 44px; touch-action: manipulation; }
  .btn-lg { padding: 12px 20px; font-size: 1rem; }

  /* Forms */
  .form-input,
  .form-textarea,
  .form-select {
    font-size: 16px !important; /* prevent iOS auto-zoom */
    min-height: 44px;
  }

  /* Footer */
  .footer { padding: 24px 0; }
  .footer .container {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
  }

  /* Modal */
  .modal {
    width: calc(100% - 32px);
    max-width: 480px;
    padding: 22px;
    max-height: 90vh;
    overflow-y: auto;
  }
  .modal-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .modal-actions .btn { width: 100%; }

  /* Announcement bar */
  .announcement-bar {
    font-size: 0.8rem !important;
    padding: 8px 12px !important;
    line-height: 1.45;
  }
  .announcement-bar .new-tag {
    font-size: 0.65rem !important;
  }

  /* Pricing card */
  .pricing-card { padding: 24px !important; }
  .pricing-price { font-size: 2.2rem !important; }

  /* Children grid */
  .children-grid { grid-template-columns: 1fr; }

  /* Snackbar */
  .snackbar {
    bottom: 16px;
    left: 12px;
    right: 12px;
    width: auto;
    text-align: center;
  }

  /* Step illustrations */
  .step { gap: 14px !important; }
  .step-number { width: 40px !important; height: 40px !important; min-width: 40px !important; font-size: 1rem !important; }
}

/* ===== PHONE (≤ 480px) ===== */
@media (max-width: 480px) {
  html { font-size: 15px; }

  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.3rem; }

  .container { padding: 0 12px; }

  /* Header even more compact */
  .header-logo { font-size: 1rem; gap: 6px; }
  .header-logo .logo-img { height: 36px; }
  .header-logo .logo-text { white-space: nowrap; }
  .header-nav {
    gap: 6px;
  }
  .header-nav .btn-sm {
    padding: 6px 10px;
    font-size: 0.75rem;
  }

  /* Hero */
  .hero { padding: 28px 0 24px !important; }
  .hero-title { font-size: 1.7rem !important; }
  .hero-subtitle { font-size: 0.92rem !important; }

  /* Tighter cards */
  .card { padding: 16px !important; }
  .app-card { padding: 20px 14px !important; }
  .feature-card { padding: 20px 14px; }
  .feature-icon { font-size: 2.2rem !important; margin-bottom: 12px !important; }

  /* Badges wrap better */
  .badge,
  .badge-mobile,
  .badge-college {
    font-size: 0.7rem !important;
    padding: 2px 7px !important;
  }

  /* Pricing */
  .pricing-price { font-size: 1.9rem !important; }

  /* Announcement bar — hide the discover link if too cramped */
  .announcement-bar a {
    display: inline-block;
    margin-top: 2px;
  }
}

/* ===== LANDSCAPE PHONE (height-constrained) ===== */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 20px 0 !important; }
  .hero-title { font-size: 1.5rem !important; }
  .hero-subtitle { font-size: 0.9rem !important; margin-bottom: 16px !important; }
}

/* ===== TOUCH DEVICES ===== */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover-only effects on touch */
  .card-clickable:hover { transform: none; }
  .header-logo:hover .brand-unicorn { transform: none; }

  /* Larger touch targets */
  .btn-sm { min-height: 40px; min-width: 40px; }
  .child-delete,
  .header-back {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ===== PRINT ===== */
@media print {
  .header, .footer, .announcement-bar, .btn,
  .header-nav, .child-delete { display: none !important; }
  body { background: white; color: black; }
  .card { border: 1px solid #ccc; box-shadow: none; }
}