/* =====================================================
   Sunny Suitcase Travel by Stacy — Mobile Stylesheet
   mobile.css · Created: 2026-04-11
   Breakpoints: 768px (tablet) · 480px (phone)
   ===================================================== */

/* =====================================================
   TABLET (≤ 1024px)
   ===================================================== */
@media (max-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 34px; }

  .hero-full h1 { font-size: 48px; }
  .hero-content { padding-left: 5%; max-width: 600px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-grid .footer-brand { grid-column: 1 / -1; }

  .services-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .about-intro-grid { gap: 40px; }
  .bio-grid { gap: 40px; }

  .process-grid { grid-template-columns: repeat(2, 1fr); }

  /* Navigation — collapses to hamburger starting here; the full desktop
     row (logo + contact + links + CTA) doesn't fit below ~1024px. */
  .site-nav .container { position: relative; flex-direction: column; justify-content: flex-start; height: auto; padding: 16px 56px 16px 16px; }
  .nav-logo-wrap { flex-direction: column; align-items: center; gap: 8px; margin: 0 auto; text-align: center; }
  .nav-logo { flex-direction: column; text-align: center; gap: 8px; }
  .nav-logo img { width: 76px; height: 76px; }
  .nav-logo-text { align-items: center; }
  .nav-logo-text .brand { font-size: 17px; text-align: center; }
  .nav-contact { flex-direction: row; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .nav-hamburger { display: flex; position: absolute; right: 12px; top: 16px; }
  .site-nav { position: sticky; top: 0; }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--navy);
    flex-direction: column;
    padding: 16px 24px 24px;
    border-top: 2px solid var(--orange);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 999;
    gap: 4px;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { width: 100%; padding: 12px 16px; border-radius: 8px; color: rgba(255,255,255,0.92) !important; }
  .nav-menu a:hover, .nav-menu a.active { background: rgba(255,255,255,0.12) !important; color: var(--white) !important; }
  .nav-menu a.nav-cta { margin: 8px 0 0; justify-content: center; text-align: center; border-radius: 50px; background: var(--orange) !important; }
}

/* =====================================================
   TABLET PORTRAIT (≤ 768px)
   ===================================================== */
@media (max-width: 768px) {
  :root { --section-padding: 56px; }

  h1 { font-size: 38px; }
  h2 { font-size: 30px; }
  h3 { font-size: 22px; }

  /* Demo notice */
  .demo-notice { font-size: 12px; padding: 8px 12px; }

  /* Utility bar */
  .utility-bar { height: auto; padding: 8px 0; }
  .utility-bar .container { flex-direction: column; gap: 6px; }
  .utility-bar .contact-info { font-size: 12px; }

  /* Hero full */
  .hero-full { min-height: 100svh; align-items: flex-start; padding-top: 60px; }
  .hero-full h1 { font-size: 36px; }
  .hero-full .hero-subtitle { font-size: 17px; }
  .hero-content { padding: 0 24px; max-width: 100%; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; justify-content: center; }
  .hero-scroll { display: none; }

  /* Hero short */
  .hero-short { padding: 56px 0 48px; }
  .hero-short h1 { font-size: 34px; }
  .hero-short .hero-subtitle { font-size: 17px; }

  /* Section header */
  .section-header { margin-bottom: 40px; }
  .section-header p { font-size: 16px; }

  /* Trust bar */
  .trust-grid { grid-template-columns: 1fr; gap: 28px; }

  /* About intro */
  .about-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-img-placeholder { aspect-ratio: 4/3; font-size: 60px; }

  /* Services */
  .services-preview-grid { grid-template-columns: 1fr; gap: 20px; }
  .service-card { display: flex; gap: 20px; align-items: flex-start; }
  .service-card .card-icon { font-size: 32px; flex-shrink: 0; margin-bottom: 0; }

  /* Destinations grid */
  .destinations-grid { grid-template-columns: 1fr; }

  /* Steps */
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .steps-grid::before { display: none; }

  /* Testimonials */
  .testimonial-slide { padding: 0 16px; }
  .testimonial-slide blockquote { font-size: 17px; }

  /* CTA banner */
  .cta-banner h2 { font-size: 30px; }
  .cta-banner p { font-size: 16px; }
  .btn-white-orange { width: 100%; justify-content: center; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom .container { flex-direction: column; align-items: center; text-align: center; }
  .footer-links { justify-content: center; }

  /* About page */
  .bio-grid { grid-template-columns: 1fr; }
  .bio-img-placeholder.primary { aspect-ratio: 4/3; font-size: 64px; }
  .bio-text h2 { font-size: 28px; }
  .fun-facts-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .values-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Services page */
  .service-block-grid { grid-template-columns: 1fr; gap: 32px; }
  .service-block-grid.reverse .service-text { order: 0; }
  .service-text { border-left: none; padding-left: 0; border-top: 4px solid var(--teal); padding-top: 20px; }
  .process-grid { grid-template-columns: 1fr; }

  /* Destinations page */
  .filter-tabs { gap: 8px; }
  .filter-tab { font-size: 13px; padding: 7px 16px; }

  /* Contact page */
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-wrap { padding: 28px 24px; }
  .reassurance-grid { grid-template-columns: 1fr; gap: 8px; }

  /* Thank you */
  .thank-you-card { padding: 48px 28px; }
}

/* =====================================================
   PHONE (≤ 480px)
   ===================================================== */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  h1 { font-size: 32px; }
  h2 { font-size: 26px; }

  .hero-full h1 { font-size: 30px; }
  .hero-badge { font-size: 11px; padding: 5px 14px; }

  .btn { padding: 14px 28px; font-size: 15px; }
  .btn-sm { padding: 9px 20px; font-size: 13px; }

  .section { padding: 48px 0; }

  .cta-banner h2 { font-size: 26px; }

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

  .fun-facts-grid { grid-template-columns: 1fr 1fr; }
  .fun-fact-item .fact-number { font-size: 36px; }

  .dest-img { height: 160px; font-size: 44px; }

  .service-card { flex-direction: column; }
  .service-card .card-icon { margin-bottom: 0; }

  .testimonial-quote-mark { font-size: 56px; }
  .testimonial-slide blockquote { font-size: 16px; }

  .footer-social a { width: 32px; height: 32px; font-size: 13px; }
}