/* ═══════════════════════════════════════════════════════════════
   CLARITY — responsive.css
   All Media Queries — ALWAYS load last
   Breakpoints: 1200px · 992px · 768px · 480px
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1200px — Large desktop → standard desktop
   ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --section-py: 80px; }

  /* Layout */
  .container { padding-inline: 32px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

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

  /* Hero */
  .hero-content h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); }

  /* Shop grid */
  .shop-products-grid { grid-template-columns: repeat(3, 1fr); }

  /* Booking */
  .booking-layout { gap: 40px; }
}

/* ─────────────────────────────────────────────
   992px — Tablet landscape / small desktop
   ───────────────────────────────────────────── */
@media (max-width: 992px) {
  :root {
    --section-py: 70px;
    --nav-height: 70px;
  }

  /* Navigation — hide desktop links, show hamburger */
  .nav-links  { display: none; }
  .nav-cta    { display: none; }  /* hide Book button — it's in mobile menu */
  .nav-hamburger { display: flex; }

  /* Layout */
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }

  /* Hero two-column → stacked */
  .hero-two-col { flex-direction: column; text-align: center; }
  .hero-two-col .hero-content { max-width: 100%; }
  .hero-two-col .hero-image { max-width: 500px; margin: 0 auto; }

  /* About page */
  .about-founder-layout { grid-template-columns: 1fr; }
  .about-founder-img { max-width: 480px; margin: 0 auto; }
  .about-approach-layout { grid-template-columns: 1fr; }

  /* Services */
  .service-cards-grid { grid-template-columns: repeat(2, 1fr); }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Resources */
  .resources-grid { grid-template-columns: repeat(2, 1fr); }

  /* Shop */
  .shop-products-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { display: none; } /* replaced by filter bar on mobile */

  /* Booking */
  .booking-layout { grid-template-columns: 1fr; }
  .booking-summary { position: static; order: -1; }

  /* Community */
  .community-stories-grid { grid-template-columns: 1fr; }

  /* Testimonial slider */
  .testimonial-track { gap: 20px; }

  /* Footer */
  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  /* Step indicator — smaller labels */
  .step-label { display: none; }

  /* Pricing */
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }

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

  /* Section header */
  .section-header { max-width: 560px; }
}

/* ─────────────────────────────────────────────
   768px — Tablet portrait / large phone
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-py: 60px;
    --gap: 24px;
    --gap-lg: 36px;
  }

  /* Typography */
  h1 { font-size: clamp(2.2rem, 7vw, 3rem); }
  h2 { font-size: clamp(1.8rem, 5vw, 2.5rem); }
  h3 { font-size: clamp(1.5rem, 4vw, 2rem); }

  /* Layout */
  .container { padding-inline: 20px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-auto { grid-template-columns: 1fr; }
  .col-span-2 { grid-column: span 1; }

  /* Section header */
  .section-header { margin-bottom: 40px; }

  /* Buttons */
  .btn-xl { padding: 16px 36px; font-size: 1rem; }
  .btn-lg { padding: 14px 28px; }

  /* Hero */
  .hero-section { min-height: auto; padding-block: 100px 60px; }
  .hero-stat-card { display: none; }
  .hero-content { padding-top: 0; padding-bottom: 0; }
  .hero-actions { flex-direction: column; align-items: center; gap: 12px; }
  .hero-actions .btn { width: 100%; max-width: 300px; justify-content: center; }

  /* Stats strip */
  .stats-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .stat-divider { display: none; }

  /* Nav logo text */
  .nav-logo .logo-text { display: inline; }

  /* Mobile menu */
  .mobile-menu { width: 100%; }

  /* Service cards */
  .service-cards-grid { grid-template-columns: 1fr; }

  /* Testimonials */
  .testimonial-grid { grid-template-columns: 1fr; }

  /* Resources filter */
  .resources-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .resources-filter-tags { overflow-x: auto; padding-bottom: 8px; }

  /* Shop */
  .shop-products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .cart-drawer { width: 100%; }
  .shop-filter-bar { flex-wrap: wrap; gap: 10px; }

  /* Product card */
  .shop-product-body { padding: 16px; }
  .product-price { font-size: 1.2rem; }

  /* Booking calendar */
  .calendar-grid { gap: 4px; }
  .calendar-day  { font-size: 0.85rem; height: 40px; }

  /* Multi-step form */
  .step-indicator { gap: 0; }
  .step-item::after { width: 30px; }

  /* Book page service select */
  .service-select-grid { grid-template-columns: 1fr; }

  /* Time slots */
  .time-slots-grid { grid-template-columns: repeat(3, 1fr); }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; }

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

  /* Privacy / Terms */
  .legal-content { padding: 40px 24px; }

  /* 404 */
  .error-404-number { font-size: clamp(6rem, 20vw, 10rem); }

  /* Newsletter form */
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { border-radius: var(--radius-full); }

  /* Tab list */
  .tab-list { width: 100%; justify-content: stretch; }
  .tab-trigger { flex: 1; text-align: center; padding: 10px 16px; }

  /* Cookie banner */
  .cookie-banner { bottom: 0; left: 0; right: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

  /* Chat widget */
  .chat-widget { bottom: 24px; right: 16px; }

  /* About values grid */
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  /* Community grid */
  .community-grid { grid-template-columns: 1fr; }

  /* Process / How it works */
  .process-grid { grid-template-columns: 1fr; }
  .process-step::after { display: none; }

  /* Quote section */
  .quote-section blockquote { font-size: 1.2rem; }

  /* Shop modal */
  .modal-container { max-width: 100%; }
  .product-modal-layout { grid-template-columns: 1fr; }
  .product-modal-info { padding: 28px 24px; }
}

/* ─────────────────────────────────────────────
   480px — Mobile portrait
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --section-py: 48px;
    --gap: 20px;
    --gap-lg: 28px;
    --radius: 10px;
    --radius-lg: 16px;
  }

  /* Typography */
  h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  h3 { font-size: 1.5rem; }
  .lead { font-size: 1rem; }

  /* Container */
  .container { padding-inline: 16px; }
  .container-sm { padding-inline: 16px; }

  /* Nav */
  .clarity-nav { height: 64px; }
  :root { --nav-height: 64px; }
  .nav-logo { font-size: 1.1rem; gap: 6px; }
  .nav-logo-icon { height: 28px; }
  .logo-tagline {
    display: block;
    white-space: normal;
    max-width: 108px;
    font-size: 0.42rem;
    letter-spacing: 0.09em;
    line-height: 1.3;
  } /* smaller, wrapped tagline instead of hiding it */
  .nav-actions { gap: 4px; }

  /* Buttons */
  .btn { padding: 12px 24px; font-size: 0.9rem; }
  .btn-xl { padding: 14px 28px; font-size: 0.95rem; }
  .btn-lg { padding: 12px 24px; }

  /* Hero */
  .hero-section { padding-block: 80px 48px; }
  .hero-badge-float { display: none; } /* hide floating elements on small screens */

  /* Stats */
  .stats-strip-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .stat-number { font-size: 2rem; }

  /* Testimonial card */
  .testimonial-card { padding: 24px 20px; }
  .testimonial-card blockquote { font-size: 0.95rem; }

  /* Service card */
  .service-card { padding: 28px 20px; }

  /* Feature card */
  .feature-card { padding: 24px 20px; }

  /* Resource card */
  .resource-card-body { padding: 20px 16px; }

  /* Products */
  .shop-products-grid { grid-template-columns: 1fr; gap: 20px; }
  .shop-product-img { aspect-ratio: 4/3; }

  /* Shop filter */
  .shop-sort-select { width: 100%; }
  .shop-filter-tags { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }

  /* Cart drawer */
  .cart-item { flex-direction: column; gap: 12px; }
  .cart-item-img { width: 100%; height: 140px; border-radius: var(--radius); object-fit: cover; }

  /* Booking */
  .time-slots-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-form-card { padding: 24px 20px; }

  /* Step indicator */
  .step-dot { width: 28px; height: 28px; font-size: 0.75rem; }
  .step-item::after { width: 20px; }

  /* Calendar */
  .calendar-day-name { font-size: 0.7rem; }
  .calendar-day { height: 36px; font-size: 0.8rem; }

  /* Accordion */
  .accordion-trigger { padding: 16px 18px; }
  .accordion-content { padding: 0 18px 18px; }

  /* Modal */
  .modal-header, .modal-body, .modal-footer { padding-inline: 20px; }
  .modal-header { padding-top: 20px; }

  /* Footer */
  .footer-social a { width: 36px; height: 36px; }
  .clarity-footer { padding-top: 60px; }

  /* Tags */
  .tag { padding: 6px 14px; font-size: 0.8rem; }

  /* Toast */
  .toast-container { bottom: 16px; right: 16px; left: 16px; }
  .toast { min-width: unset; max-width: 100%; }

  /* Cookie banner */
  .cookie-banner { padding: 20px; gap: 12px; }
  .cookie-banner-actions { gap: 8px; }
  .cookie-banner-actions .btn { flex: 1; }

  /* Values */
  .values-grid { grid-template-columns: 1fr; }

  /* Quote */
  .quote-section blockquote { font-size: 1.05rem; }

  /* Community */
  .community-stat-number { font-size: 2.5rem; }

  /* Blog post hero */
  .post-hero-img { aspect-ratio: 16/9; }

  /* 404 page */
  .error-404-content { padding: 40px 20px; }
  .error-404-number { font-size: 7rem; }
  .error-404-actions { flex-direction: column; }
  .error-404-actions .btn { width: 100%; justify-content: center; }

  /* Scroll indicator */
  .scroll-indicator { display: none; }

  /* Chat widget button */
  .chat-trigger { width: 48px; height: 48px; }

  /* Legal pages */
  .legal-content h2 { font-size: 1.3rem; }
  .legal-content p, .legal-content li { font-size: 0.9rem; }
}

/* ─────────────────────────────────────────────
   Print styles
   ───────────────────────────────────────────── */
@media print {
  .clarity-nav,
  .cookie-banner,
  .chat-widget,
  .scroll-progress-bar,
  .mobile-menu,
  .mobile-menu-overlay { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  a[href]::after { content: " (" attr(href) ")"; }
  .container { max-width: 100%; }
  .page-header { background: #f0f0f0 !important; color: #000 !important; }
  .clarity-footer { background: #f0f0f0 !important; color: #000 !important; }
}

/* ─────────────────────────────────────────────
   Dark mode preference (optional enhancement)
   ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Uncomment to enable dark mode
  :root {
    --warm-white: #0F1A1A;
    --pure-white: #1A2828;
    --charcoal: #E8F4F0;
    --slate: #A8C5BF;
  }
  */
}