/* ============================================================
   WELLSHIP CLINIC — RESPONSIVE STYLES
   Breakpoints: 1440 / 1024 / 768 / 480 / 320
   ============================================================ */

/* ---- 1440px — Wide screens ---- */
@media (min-width: 1440px) {
  .hero-title { font-size: 6rem; }
  .mega-dropdown-inner { padding: var(--space-12) var(--space-8); }
}

/* ---- Below 1200px ---- */
@media (max-width: 1200px) {
  :root { --container: 1080px; }

  .grid-4,
  .treatment-cards,
  .concerns-grid { grid-template-columns: repeat(3, 1fr); }

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

  .mega-dropdown-inner { grid-template-columns: repeat(3, 1fr); }

  .stats-grid { gap: 0; }
}

/* ---- Below 1024px — Tablet ---- */
@media (max-width: 1024px) {
  :root {
    --nav-height: 70px;
    --container: 100%;
  }

  /* Nav — hide desktop menu, show hamburger */
  .nav-menu, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  /* Show mobile overlay */
  .nav-mobile-overlay { display: flex; }

  /* Hero */
  .hero-title { font-size: clamp(2.5rem, 5vw, 4rem); max-width: 640px; }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: var(--space-4); }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .about-image-wrap { max-width: 480px; margin: 0 auto; }
  .about-content { padding-right: 0; }
  .about-content-side { padding: var(--space-10) var(--space-6); }

  /* Grids */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4,
  .treatment-cards,
  .concerns-grid { grid-template-columns: 1fr 1fr; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(2)::after { display: none; }
  .stat-item:nth-child(4)::after { display: none; }

  /* Callback */
  .callback-inner { grid-template-columns: 1fr; }
  .callback-inner { padding: var(--space-10); }

  /* Offer */
  .offer-inner { grid-template-columns: 1fr; gap: var(--space-8); }

  /* Offer deals page */
  .offers-deals-grid { grid-template-columns: 1fr 1fr; }
  .oph-inner { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .oph-badges { flex-direction: row; align-items: center; width: 100%; justify-content: center; }
  .master-offer-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .master-offer-cta { align-items: flex-start; min-width: 0; }
  .master-offer-price-wrap { text-align: left; }

  /* Locations */
  .locations-grid { grid-template-columns: 1fr 1fr; }

  /* Services */
  .services-grid { grid-template-columns: 1fr 1fr; }
  .srv-desc-grid { grid-template-columns: 1fr; }
  .srv-desc-sidebar { display: none; }
  .srv-benefits-grid { grid-template-columns: 1fr 1fr; }

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

  /* Instagram */
  .instagram-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

  /* Section spacing */
  .section { padding: var(--space-16) 0; }
  .section-lg { padding: var(--space-20) 0; }

  /* Disable 3D effects on tablet */
  .concern-card:hover,
  .treatment-card:hover { transform: translateY(-4px); }
  .testimonial-card.active { transform: scale(1.02); }
  .testimonial-card.side { transform: scale(0.98); }
}

/* ---- Below 768px — Mobile ---- */
@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
    --space-8: 1.5rem;
  }

  /* Hero video shown on mobile */
  .hero-video { display: block; }

  /* Container */
  .container { padding: 0 var(--space-6); }

  /* Typography scaling */
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2.25rem; line-height: 1.18; }
  h3 { font-size: 1.5rem; line-height: 1.25; }
  h4 { font-size: 1.125rem; }

  /* Navbar */
  .nav-inner { padding: 0 var(--space-4); }
  .nav-logo-tagline { display: none; }

  /* Hero — mobile overrides (white overlay, matches desktop) */
  #hero { min-height: 100vh; min-height: 100svh; background: var(--white); padding-bottom: var(--space-6); }
  .hero-overlay {
    background: linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.72) 45%,
      rgba(255, 255, 255, 0.10) 100%
    );
  }
  .hero-title { font-size: 2.8rem; line-height: 1.05; }
  .hero-actions { flex-direction: column; gap: var(--space-3); }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-content { padding: 0 var(--space-5); padding-top: var(--nav-height); }
  .hero-meta { display: none; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.08); padding: 0; }
  .stats-grid .stat-item { background: transparent; }
  .stat-item { padding: var(--space-4) var(--space-3); overflow: hidden; }
  .stat-item::after { display: none; }
  .stat-number, .stat-value { font-size: 2rem; }
  .stat-label { font-size: 0.68rem; letter-spacing: 0.07em; word-break: break-word; }

  /* About */
  .about-image-accent { width: 130px; height: 130px; }
  .about-accent-number { font-size: 2.25rem; }

  /* Concerns / Treatments */
  .concerns-grid,
  .treatment-cards,
  .grid-3 { grid-template-columns: 1fr; }

  /* Concern tile thumbnails — show full branded image on mobile (portrait images) */
  /* right top: portrait thumbnails (2000×2200) render narrower than the tile, so centering
     shows white strips on both sides. Anchoring right+top makes the image flush with the
     right card edge; the left gap blends with the adjacent tile or grid padding. */
  .concern-tile-img {
    background: #fff;
  }
  .concern-tile-img img {
    object-fit: contain;
    object-position: right top;
  }

  /* Treatment cards — collapse horizontal to vertical */
  .treatment-card { grid-template-columns: 1fr; }
  .treatment-card-img { min-height: 240px; }

  /* Treatment cards — horizontal scroll on mobile */
  [data-treatments-home] {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [data-treatments-home]::-webkit-scrollbar { display: none; }
  [data-treatments-home] .treatment-card {
    min-width: 280px;
    flex-shrink: 0;
    grid-template-columns: 1fr;
  }

  /* Filter tabs — scroll horizontally */
  .concerns-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: var(--space-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .concerns-filter::-webkit-scrollbar { display: none; }
  .filter-btn { white-space: nowrap; flex-shrink: 0; }

  /* Concern cards — readable text on mobile */
  .concern-card-name { font-size: 1.05rem; }
  .concern-card-desc { font-size: 0.9rem; -webkit-line-clamp: 3; }
  .concern-card-link { font-size: 0.8rem; }

  /* Before/After */
  .ba-slider { border-radius: var(--radius-lg); }
  .ba-handle-circle { width: 40px; height: 40px; }
  .ba-info { flex-direction: column; align-items: center; }

  /* Gallery — single column so before/after sliders are wide enough to drag */
  .gallery-grid { grid-template-columns: 1fr; }

  /* Compact mobile banner (concern/treatment detail) — only when a mobile image is set */
  .treatment-hero-img.has-square-mobile { aspect-ratio: auto; max-height: 320px; height: auto; object-fit: cover; }

  /* Testimonials — full-width single card, clipped by overflow:hidden */
  .testimonials-carousel { overflow: hidden; width: 100%; }

  /* Instagram */
  .instagram-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

  /* Offer */
  .countdown-timer { gap: var(--space-3); }
  .countdown-number { font-size: 2.25rem; min-width: 48px; }

  /* Locations — mobile */
  .locations-grid { grid-template-columns: 1fr; }
  .pincode-input-row { flex-direction: column; width: 100%; }
  .pincode-input { width: 100%; }
  .pincode-btn { width: 100%; justify-content: center; }

  /* Services — mobile */
  .services-grid { grid-template-columns: 1fr; }
  .srv-hero-inner { flex-direction: column; gap: var(--space-5); }
  .srv-hero-icon { width: 64px; height: 64px; font-size: 2rem; }
  .srv-benefits-grid { grid-template-columns: 1fr; }

  /* Offer deals page — mobile single column, reset orphan-centering rule */
  .offers-deals-grid { grid-template-columns: 1fr; }
  .offers-deals-grid > .offer-deal-card:last-child:nth-child(3n + 1) { grid-column: auto; }
  .offers-page-hero { padding: calc(var(--nav-height) + var(--space-10)) 0 var(--space-10); }
  .offers-page-hero::after { display: none; }
  .offers-page-hero::before { display: none; }
  .odc-title { padding-right: var(--space-12); font-size: var(--text-xl); }
  .odc-price-row { padding: var(--space-3) var(--space-4); }
  .odc-timer-blocks { gap: var(--space-2); }
  .odc-timer-unit { min-width: 40px; }
  .odc-num { font-size: var(--text-lg); }
  .master-offer-card { padding: var(--space-6); }
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; }
  .filter-bar::-webkit-scrollbar { display: none; }

  /* Callback */
  .form-row { grid-template-columns: 1fr; }
  .callback-inner { padding: var(--space-8); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .footer-policy-links { gap: var(--space-3); flex-wrap: wrap; }

  /* Buttons — allow text to wrap on mobile so long labels don't overflow their border */
  .btn { white-space: normal; line-height: 1.3; text-align: center; justify-content: center; }
  /* Preserve nowrap for nav pills and filter chips that must stay single-line */
  .filter-btn, .concerns-filter .btn, .filter-bar .btn { white-space: nowrap; }

  /* Floating CTAs */
  .floating-cta-right { bottom: var(--space-6); right: var(--space-4); }
  .floating-cta-left  { bottom: var(--space-6); left: var(--space-4); }
  .fab { width: 50px; height: 50px; }
  .fab svg { width: 22px; height: 22px; }

  /* Push footer copyright above floating buttons on mobile */
  .footer-bottom { padding-bottom: 100px; }

  /* Section spacing */
  .section { padding: var(--space-12) 0; }
  .section-sm { padding: var(--space-10) 0; }

  /* Section header */
  .section-header { margin-bottom: var(--space-10); }

  /* Mobile nav links bigger tap target */
  .mobile-nav-link { padding-bottom: var(--space-5); }

  /* Page header */
  .page-header { padding: calc(var(--nav-height) + var(--space-8)) 0 var(--space-6); }
  .about-content-side { padding: var(--space-10) var(--space-6); }
}

/* ---- Below 480px — Small mobile ---- */
@media (max-width: 480px) {
  .hero-title { font-size: 2rem; }
  .hero-kicker { display: none; }

  h2 { font-size: 2rem; }
  h3 { font-size: 1.375rem; }
  .page-header h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }

  .about-image-accent { width: 110px; height: 110px; right: -12px; bottom: -12px; }

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

  .stat-number, .stat-value { font-size: 1.65rem; }

  .testimonials-nav { gap: var(--space-2); }
  .testimonials-btn { min-height: 44px; flex-shrink: 0; white-space: nowrap; }

  .faq-question { font-size: var(--text-lg); }
  #faq-cta-btn { width: 100%; justify-content: center; text-align: center; }

  .countdown-timer { gap: var(--space-2); }
  .countdown-number { font-size: 1.75rem; min-width: 40px; padding: var(--space-1) var(--space-2); }
  .countdown-sep { font-size: 1.5rem; }

  /* Concern treatment chips — single column on small phones */
  .concern-treatments-grid { grid-template-columns: 1fr; }
}

/* ---- 320px — Minimum support ---- */
@media (max-width: 360px) {
  .container { padding: 0 var(--space-4); }
  .hero-title { font-size: 1.875rem; }
  .nav-inner { padding: 0 var(--space-3); }
  .fab { width: 46px; height: 46px; }
  .stat-item { padding: var(--space-3) var(--space-2); }
  .stat-number, .stat-value { font-size: 1.45rem; }
  .stat-label { font-size: 0.6rem; }
}

/* ---- Touch devices ---- */
@media (hover: none) and (pointer: coarse) {
  /* Increase all tap targets */
  .btn { min-height: 48px; }
  .form-input, .form-select { min-height: 48px; }
  .faq-question { min-height: 56px; }
  .filter-btn { min-height: 48px; }

  /* Disable hover effects on touch */
  .concern-card:hover,
  .treatment-card:hover {
    transform: none;
    border-left-width: 1px;
  }

  /* Instagram */
  .instagram-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
}

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

/* ---- Performance hints ---- */
/* compositor-layer hints on things that animate frequently */
.concern-card,
.treatment-card,
.testimonial-card,
.reveal { will-change: transform; }

/* once revealed, stop holding the layer */
.reveal.visible { will-change: auto; }

/* skip rendering off-screen page sections (major paint savings on long pages) */
.section, .section-sm, .section-lg, footer {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* ---- Mobile performance — strip expensive effects ---- */
@media (max-width: 768px) {
  /* No parallax transforms, no 3D card tilts */
  .hero-bg { transform: none !important; }
  .concern-card, .treatment-card, .testimonial-card { will-change: auto; }

  /* Faster stagger so the page feels snappy */
  .reveal { transition-duration: 0.35s !important; }
}

/* ---- Print ---- */
@media print {
  #navbar, .floating-cta, #hero-canvas { display: none; }
  body { color: #000; background: #fff; }
  a { color: inherit; }
  .section { page-break-inside: avoid; }
}