/* =====================================================================
   EVOLVIX PHYSIOTHERAPY CLINIC — RESPONSIVE OVERRIDES
   Comprehensive mobile-first responsive system.
   Breakpoints: xs <375 | sm 375–575 | md 576–767 | tablet 768–991 |
                lg 992–1199 | xl 1200–1399 | xxl 1400+
   ===================================================================== */

/* =====================================================================
   1.  GLOBAL SCROLL GUARDS & BASE
   ===================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
html { scroll-behavior: smooth; }

/* =====================================================================
   2.  PREMIUM SCROLLBAR (desktop only — no visual noise on touch)
   ===================================================================== */
@media (min-width: 992px) {
  ::-webkit-scrollbar              { width: 9px; height: 9px; }
  ::-webkit-scrollbar-track        { background: var(--color-bg-soft); }
  ::-webkit-scrollbar-thumb        { background: var(--color-border-strong); border-radius: var(--radius-sm); border: 2px solid var(--color-bg-soft); }
  ::-webkit-scrollbar-thumb:hover  { background: var(--color-text-faint); }
}

/* =====================================================================
   3.  iOS INPUT-ZOOM PREVENTION
       Any focusable field must be at least 16 px on mobile
   ===================================================================== */
@media (max-width: 767.98px) {
  .evolvix-form-control,
  .admin-form-control,
  .evolvix-footer-newsletter-form input,
  select { font-size: 16px !important; }
}

/* =====================================================================
   4.  RETINA / HIGH-DPI RENDERING
   ===================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body { -webkit-font-smoothing: subpixel-antialiased; }
}

/* =====================================================================
   5.  REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .evolvix-hero-slide          { transition: opacity 1.4s ease; transform: none !important; }
  .aos-fade-up                 { transition: none !important; opacity: 1; transform: none; }
  .evolvix-service-card,
  .evolvix-feature-card,
  .evolvix-testimonial-card,
  .evolvix-contact-card,
  .btn-evolvix                 { transition: none !important; }
}

/* =====================================================================
   6.  TOUCH DEVICE — disable hover-lift, use :active instead
   ===================================================================== */
@media (hover: none) {
  .evolvix-service-card:hover,
  .evolvix-feature-card:hover,
  .evolvix-testimonial-card:hover,
  .evolvix-contact-card:hover,
  .evolvix-gallery-item:hover  { transform: none; box-shadow: var(--shadow-card); }

  .evolvix-service-card:active,
  .evolvix-feature-card:active { transform: scale(0.98); }

  /* Restore border on touch so cards still look interactive */
  .evolvix-service-card:hover  { border-color: var(--color-border); }
}

/* =====================================================================
   7.  GLOBAL TAP TARGETS — 44 px minimum (WCAG 2.5.5 / Apple HIG)
   ===================================================================== */
@media (max-width: 991.98px) {
  .btn-evolvix,
  .evolvix-card-link,
  .evolvix-nav a,
  .evolvix-hamburger,
  .evolvix-mobile-close,
  .evolvix-float-btn,
  .evolvix-mobile-sticky-cta a,
  .admin-icon-btn,
  .admin-btn { min-height: 44px; }

  /* Expand hero dot tap area without changing the visual dot */
  .evolvix-hero-dots button { position: relative; }
  .evolvix-hero-dots button::before {
    content: '';
    position: absolute;
    inset: -14px;
  }

  .evolvix-footer-links a      { min-height: 36px; }
  .evolvix-footer-social a     { width: 46px; height: 46px; }
  .evolvix-accordion-header    { min-height: 56px; }
}

/* =====================================================================
   8.  MOBILE STICKY BAR & BODY PADDING
   ===================================================================== */
@media (max-width: 991.98px) {
  body                              { padding-bottom: 60px; }
  .evolvix-float-stack              { bottom: calc(60px + var(--space-sm)); }
}
@media (min-width: 992px) {
  .evolvix-mobile-sticky-cta        { display: none; }
  body                              { padding-bottom: 0; }
}

/* =====================================================================
   9.  SECTION VERTICAL PADDING SCALING
   ===================================================================== */
@media (max-width: 767.98px) {
  section { padding: var(--space-xl) 0; }
}
@media (max-width: 575.98px) {
  section { padding: calc(var(--space-xl) * 0.85) 0; }
}

/* =====================================================================
   10. CONTAINER PADDING — tighten on small screens
   ===================================================================== */
@media (max-width: 767.98px) {
  .container-evolvix { padding-left: 1.15rem; padding-right: 1.15rem; }
}
@media (max-width: 480px) {
  .container-evolvix { padding-left: 1rem; padding-right: 1rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container-evolvix { padding-left: var(--space-lg); padding-right: var(--space-lg); }
}

/* =====================================================================
   11. CONTAINER MAX-WIDTH SCALING (large desktops)
   ===================================================================== */
@media (min-width: 1400px) { :root { --container-max: 1320px; } }
@media (min-width: 1800px) { :root { --container-max: 1440px; } }

/* =====================================================================
   12. TYPOGRAPHY SCALING
   ===================================================================== */

/* --- Extra-small (< 376 px) --- */
@media (max-width: 375.98px) {
  .evolvix-logo-text          { font-size: 1.1rem; }
  .btn-evolvix                { padding: 0.75rem 1.2rem; font-size: 0.875rem; }
  .section-heading h2,
  .section-heading-center h2  { font-size: 1.6rem; }
}

/* --- Small phones (376–575 px) --- */
@media (max-width: 575.98px) {
  .section-heading h2,
  .section-heading-center h2  { font-size: 1.75rem; }
  .section-eyebrow            { font-size: 0.72rem; letter-spacing: 0.08em; }
  .evolvix-form-card          { padding: 1.25rem; }
  .evolvix-cta-band           { padding: var(--space-xl) var(--space-md); }
  .evolvix-cta-band h2        { font-size: 1.55rem; }
  .evolvix-testimonial-card,
  .evolvix-feature-card,
  .evolvix-contact-card       { padding: var(--space-md) 1rem; }
  .evolvix-feature-icon       { width: 54px; height: 54px; font-size: 1.4rem; }
  .evolvix-accordion-header   { font-size: 0.95rem; }
  .evolvix-about-media img    { max-height: 320px; object-fit: cover; }
}

/* =====================================================================
   13. LOGO IMAGE — breakpoint-specific heights
   ===================================================================== */
@media (max-width: 575.98px) {
  .evolvix-logo-img                        { height: 44px !important; max-height: 44px !important; }
  .evolvix-header.is-scrolled .evolvix-logo-img { height: 36px !important; max-height: 36px !important; }
}

/* =====================================================================
   14. HEADER — small-screen height & padding alignment
   ===================================================================== */
@media (max-width: 991.98px) {
  .evolvix-header {
    padding-left: calc(1.25rem + env(safe-area-inset-left)) !important;
    padding-right: calc(1.25rem + env(safe-area-inset-right)) !important;
  }
  .evolvix-header .container-evolvix {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 575.98px) {
  /* Keep header slightly shorter on very small phones */
  .evolvix-header:not(.is-scrolled) { height: calc(var(--header-height) - 4px); }
  .evolvix-header {
    padding-left: calc(1rem + env(safe-area-inset-left)) !important;
    padding-right: calc(1rem + env(safe-area-inset-right)) !important;
  }
}

/* =====================================================================
   15. HERO
   ===================================================================== */

/* Tablet & below: full height, top-aligned content, darker overlay */
@media (max-width: 991.98px) {
  .evolvix-hero {
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-start;
    padding-top: calc(var(--header-height) + 4.5rem) !important;
    padding-bottom: calc(64px + 3.5rem); /* above sticky bar */
  }
  .evolvix-hero-content      { max-width: 100%; }
  .evolvix-hero-overlay::after {
    background: linear-gradient(180deg, rgba(6,15,44,0.6) 0%, rgba(6,15,44,0.88) 100%);
  }
  .hero-br { display: none; }
}

/* Large tablet: minor padding tweak */
@media (max-width: 767.98px) {
  .evolvix-hero { padding-top: calc(var(--header-height) + 4.25rem) !important; }
}

/* Small phones */
@media (max-width: 575.98px) {
  .evolvix-hero {
    padding-top: calc(var(--header-height) + 4rem) !important;
    padding-bottom: calc(60px + 2.5rem);
  }
  .evolvix-hero h1 {
    font-size: clamp(1.65rem, 7.5vw, 2rem);
    line-height: 1.25;
    margin-bottom: var(--space-sm);
  }
  .evolvix-hero p {
    font-size: var(--fs-body);
    margin-bottom: var(--space-md);
    line-height: 1.5;
  }
  .evolvix-hero-dots          { bottom: calc(60px + 0.75rem); }
  .evolvix-hero-actions       { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .evolvix-hero-actions .btn-evolvix { width: 100%; justify-content: center; }
}

/* Extra-small phones */
@media (max-width: 375.98px) {
  .evolvix-hero h1 { font-size: 1.5rem; }
}

/* Landscape phones (short viewport) */
@media (max-height: 480px) and (orientation: landscape) {
  .evolvix-hero {
    min-height: auto;
    padding-top:    calc(var(--header-height) + 1rem);
    padding-bottom: 2rem;
  }
  .evolvix-hero-dots { display: none; }
}

/* Mid desktop range */
@media (max-width: 1199.98px) and (min-width: 992px) {
  .evolvix-hero-content { max-width: 560px; }
}

/* =====================================================================
   16. ABOUT SECTION BADGE
   ===================================================================== */
/* Hide on phones where image width doesn't give room for badge to sit outside */
@media (max-width: 767.98px) { .evolvix-about-badge { display: none; } }
@media (min-width: 768px)    { .evolvix-about-badge { display: block; } }

/* On tablet the image is full-width; adjust badge position so it doesn't
   overflow the section container */
@media (min-width: 768px) and (max-width: 991.98px) {
  .evolvix-about-badge { left: 1rem; bottom: -1rem; }
}

/* =====================================================================
   17. SERVICE CARDS
   ===================================================================== */
@media (max-width: 767.98px) { .evolvix-service-card-img { height: 200px; } }
@media (max-width: 575.98px) { .evolvix-service-card-img { height: 180px; } }
@media (min-width: 768px) and (max-width: 991.98px) { .evolvix-service-card-img { height: 200px; } }

/* =====================================================================
   18. FEATURE CARDS — 2-column on phones, 4-col on desktop
       The grid is handled by Bootstrap col classes in HTML, but
       we ensure card layout stays clean on every width.
   ===================================================================== */
@media (max-width: 575.98px) {
  /* col-6 gives two columns; reduce horizontal padding so content fits */
  .evolvix-feature-card { padding: 1rem 0.85rem; }
  .evolvix-feature-card h4 { font-size: 0.95rem; }
}

/* =====================================================================
   19. TREATMENT PROCESS — mobile vertical layout
   ===================================================================== */
@media (max-width: 767.98px) {
  .evolvix-process-dot  { width: 44px; height: 44px; font-size: 1rem; }
  .evolvix-process-step { padding-bottom: var(--space-md); }
}

/* =====================================================================
   20. TESTIMONIALS
   ===================================================================== */
@media (max-width: 575.98px) {
  .evolvix-testimonial-card p.quote { font-size: var(--fs-body); }
}

/* =====================================================================
   21. FAQ ACCORDION
   ===================================================================== */
@media (max-width: 575.98px) {
  .evolvix-accordion-header { padding: 0.85rem 0; font-size: 0.92rem; }
  .evolvix-accordion-panel-inner { font-size: var(--fs-small); }
}

/* =====================================================================
   22. CTA BAND
   ===================================================================== */
@media (max-width: 575.98px) {
  .evolvix-cta-band { border-radius: var(--radius-card); }
}
@media (max-width: 767.98px) {
  .evolvix-cta-band { border-radius: var(--radius-card); }
}

/* =====================================================================
   23. CONTACT PAGE — map min-height on larger screens
   ===================================================================== */
@media (min-width: 992px) {
  .evolvix-contact-map-wrap,
  .evolvix-contact-map-wrap .evolvix-map-frame { min-height: 420px; }
}

/* =====================================================================
   24. PAGE BANNER (inner pages)
   ===================================================================== */
@media (max-width: 991.98px) {
  .evolvix-page-banner {
    padding: calc(var(--header-height) + 4.5rem) 0 3.5rem !important;
  }
}
@media (max-width: 575.98px) {
  .evolvix-page-banner {
    padding: calc(var(--header-height) + 4rem) 0 3rem !important;
  }
  .evolvix-page-banner h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* =====================================================================
   25. GALLERY IMAGES — height scaling
   ===================================================================== */
@media (max-width: 575.98px) { .evolvix-gallery-item img { height: 180px; } }
@media (min-width: 576px)    { .evolvix-gallery-item img { height: 240px; } }
@media (min-width: 768px)    { .evolvix-gallery-item img { height: 280px; } }

/* =====================================================================
   26. FOOTER
   ===================================================================== */
@media (max-width: 767.98px) {
  /* Stack the footer bottom bar vertically */
  .evolvix-footer-bottom      { flex-direction: column; text-align: center; }
  .evolvix-footer-bottom-links { justify-content: center; }
  .evolvix-footer p           { max-width: 100%; }
}

@media (max-width: 575.98px) {
  .evolvix-footer             { padding: var(--space-xl) 0 0; }
  .evolvix-footer-social a    { width: 44px; height: 44px; }
  /* Newsletter form: stack on very narrow screens */
  .evolvix-footer-newsletter-form { flex-direction: column; gap: 0.6rem; }
  .evolvix-footer-newsletter-form button { width: 100%; height: 46px; border-radius: var(--radius-sm); }
}

/* =====================================================================
   27. FLOATING ACTION BUTTONS — avoid sticky bar overlap
   ===================================================================== */
@media (max-width: 575.98px) {
  .evolvix-float-btn          { width: 50px; height: 50px; font-size: 1.25rem; }
}

/* =====================================================================
   28. MOBILE MENU — full-height safe-area support
   ===================================================================== */
@media (max-width: 991.98px) {
  .evolvix-mobile-menu {
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  }
  .evolvix-mobile-sticky-cta {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* =====================================================================
   29. ADMIN PANEL RESPONSIVE
   ===================================================================== */
@media (max-width: 991.98px) {
  .admin-content        { padding: var(--space-md); }
  .admin-page-header    { margin-bottom: var(--space-md); }
  .admin-table th,
  .admin-table td       { padding: 0.65rem var(--space-sm); }
  .admin-card-header    { padding: var(--space-sm) var(--space-md); }
}
@media (max-width: 575.98px) {
  .admin-stat-card      { flex-direction: column; text-align: center; gap: 0.5rem; padding: var(--space-sm); }
  .admin-stat-icon      { width: 44px; height: 44px; font-size: 1.2rem; }
  .admin-login-card     { padding: var(--space-lg) var(--space-md); }
}

/* =====================================================================
   30. SAFE-AREA INSETS — iPhone notch / home indicator
   ===================================================================== */
.evolvix-mobile-sticky-cta {
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}
.evolvix-float-stack {
  right:   calc(var(--space-md) + env(safe-area-inset-right));
  bottom:  calc(var(--space-md) + env(safe-area-inset-bottom));
}
@media (max-width: 991.98px) {
  .evolvix-float-stack {
    bottom: calc(60px + env(safe-area-inset-bottom) + var(--space-sm));
  }
}