/*
 * swasthe-mobile-responsive.css
 * Responsive overrides for Swasthe CMS HTML block body sections.
 * These target the CMS-generated HTML blocks served by ElintOm API.
 * All overrides use specific selectors to not affect other pages.
 *
 * Breakpoints:
 *   ≤1024px  Tablet
 *   ≤768px   Mobile landscape / small tablet
 *   ≤480px   Mobile portrait
 */

/* ============================================================
   GLOBAL PAGE OVERFLOW GUARD
   ============================================================ */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

.home-shell,
.home-container,
.home-cms-body,
.gp-body-content,
.cms-html-block {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ============================================================
   CONTAINER — make all containers safe on mobile
   ============================================================ */
.container-wide,
.container {
  width: 100%;
  padding-left: clamp(12px, 4vw, 24px);
  padding-right: clamp(12px, 4vw, 24px);
  box-sizing: border-box;
}

/* ============================================================
   HERO SECTION
   Desktop: two-column layout (text | image)
   Mobile: single column stacked
   ============================================================ */
@media (max-width: 768px) {
  /* Hero text + image: stack */
  .home-cms-body .flex.items-center.justify-between,
  .home-cms-body [class*="flex"][class*="justify-between"] {
    flex-direction: column !important;
  }

  /* Hero image: full width */
  .hero-inner img,
  .home-cms-body img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Hero inner: fix padding */
  .hero-inner {
    padding: 10px 12px 0 !important;
  }

  .hero-content {
    padding: 20px 16px !important;
    max-width: 100% !important;
  }

  .hero h1 {
    font-size: clamp(24px, 6vw, 40px) !important;
  }

  .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .hero-actions a,
  .hero-actions button {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ============================================================
   TRUST STRIP (4-col → 2-col → 1-col)
   ============================================================ */
@media (max-width: 992px) {
  .trust-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .trust-strip {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   SWASTHE CMS HTML BLOCKS — BODY SECTIONS
   These target Tailwind grid/flex patterns used in CMS blocks.
   We use :is() and [class*="grid-cols"] to handle Tailwind CDN classes.
   ============================================================ */

/* ---- Features / Benefits grid: 4-col → 2-col → 1-col ---- */
@media (max-width: 900px) {
  .home-cms-body [class*="grid-cols-4"]:not(.sw-trust-bar-grid),
  .gp-body-content [class*="grid-cols-4"]:not(.sw-trust-bar-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  .home-cms-body [class*="grid-cols-4"]:not(.sw-trust-bar-grid),
  .gp-body-content [class*="grid-cols-4"]:not(.sw-trust-bar-grid) {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Services / How-it-works grids: 6-col → 2-col → 1-col ---- */
@media (max-width: 900px) {
  .home-cms-body .sw-home-services-grid,
  .home-cms-body .sw-home-steps-grid,
  .gp-body-content .sw-home-services-grid,
  .gp-body-content .sw-home-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .home-cms-body .sw-home-services-grid,
  .home-cms-body .sw-home-steps-grid,
  .gp-body-content .sw-home-services-grid,
  .gp-body-content .sw-home-steps-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Why / Resources grids ---- */
@media (max-width: 900px) {
  .home-cms-body .sw-home-why-grid,
  .home-cms-body .sw-home-resources-grid,
  .gp-body-content .sw-home-why-grid,
  .gp-body-content .sw-home-resources-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .home-cms-body .sw-home-why-grid,
  .home-cms-body .sw-home-resources-grid,
  .gp-body-content .sw-home-why-grid,
  .gp-body-content .sw-home-resources-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Legacy broad selectors (non-sw-home grids) ---- */
@media (max-width: 900px) {
  .home-cms-body [class*="grid-cols-3"]:not([class*="sw-home"]),
  .gp-body-content [class*="grid-cols-3"]:not([class*="sw-home"]),
  .home-cms-body [class*="grid-cols-6"]:not([class*="sw-home"]),
  .gp-body-content [class*="grid-cols-6"]:not([class*="sw-home"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .home-cms-body [class*="grid-cols-3"]:not([class*="sw-home"]),
  .gp-body-content [class*="grid-cols-3"]:not([class*="sw-home"]),
  .home-cms-body [class*="grid-cols-6"]:not([class*="sw-home"]),
  .gp-body-content [class*="grid-cols-6"]:not([class*="sw-home"]) {
    grid-template-columns: 1fr !important;
  }
}

/* ---- 2-col grids: remain 2-col until very small ---- */
@media (max-width: 480px) {
  .home-cms-body [class*="grid-cols-2"]:not(.sw-resources-page-grid),
  .gp-body-content [class*="grid-cols-2"]:not(.sw-resources-page-grid) {
    grid-template-columns: 1fr !important;
  }

  .home-cms-body .sw-resources-page-grid,
  .gp-body-content .sw-resources-page-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- How It Works (step-arrow row): 6-steps → wrap 2 or 1 ---- */
@media (max-width: 900px) {
  .home-cms-body .step-arrow,
  .gp-body-content .step-arrow {
    position: relative !important;
    overflow: visible !important;
  }
}

/* ---- Resources cards with right-positioned chevron ---- */
.home-cms-body [class*="flex-row"]:not(.sw-final-cta-inner):not([class*="sw-final-cta"]),
.gp-body-content [class*="flex-row"]:not(.sw-final-cta-inner):not([class*="sw-final-cta"]) {
  flex-wrap: wrap !important;
}

@media (max-width: 768px) {
  /* Right-pinned chevron arrows in resource cards */
  .home-cms-body [style*="position: absolute"][style*="right"],
  .gp-body-content [style*="position: absolute"][style*="right"] {
    position: static !important;
    display: inline-block !important;
    margin-left: 8px !important;
  }
}

/* ---- Final CTA section: desktop grid → mobile stack ---- */
@media (max-width: 768px) {
  .home-cms-body .sw-final-cta-inner,
  .gp-body-content .sw-final-cta-inner,
  .cms-html-block .sw-final-cta-inner,
  .gp-html-block .sw-final-cta-inner,
  .home-cms-body .container-wide.rounded-3xl[class*="justify-between"],
  .gp-body-content .container-wide.rounded-3xl[class*="justify-between"],
  .cms-html-block .container-wide.rounded-3xl[class*="justify-between"],
  .gp-html-block .container-wide.rounded-3xl[class*="justify-between"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: 16px !important;
    padding: 1.5rem !important;
  }

  .home-cms-body .sw-final-cta-inner .sw-final-cta-content,
  .gp-body-content .sw-final-cta-inner .sw-final-cta-content,
  .cms-html-block .sw-final-cta-inner .sw-final-cta-content,
  .gp-html-block .sw-final-cta-inner .sw-final-cta-content,
  .home-cms-body .container-wide.rounded-3xl[class*="justify-between"] > .flex.items-center.gap-8,
  .gp-body-content .container-wide.rounded-3xl[class*="justify-between"] > .flex.items-center.gap-8,
  .cms-html-block .container-wide.rounded-3xl[class*="justify-between"] > .flex.items-center.gap-8,
  .gp-html-block .container-wide.rounded-3xl[class*="justify-between"] > .flex.items-center.gap-8 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .home-cms-body .sw-final-cta-inner > a,
  .gp-body-content .sw-final-cta-inner > a,
  .cms-html-block .sw-final-cta-inner > a,
  .gp-html-block .sw-final-cta-inner > a,
  .home-cms-body .container-wide.rounded-3xl[class*="justify-between"] > a,
  .gp-body-content .container-wide.rounded-3xl[class*="justify-between"] > a,
  .cms-html-block .container-wide.rounded-3xl[class*="justify-between"] > a,
  .gp-html-block .container-wide.rounded-3xl[class*="justify-between"] > a {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .home-cms-body .flex.items-center.gap-4,
  .gp-body-content .flex.items-center.gap-4,
  .home-cms-body [class*="flex"][class*="items-center"][class*="justify-between"]:not(.sw-final-cta-inner),
  .gp-body-content [class*="flex"][class*="items-center"][class*="justify-between"]:not(.sw-final-cta-inner) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
}

/* ============================================================
   SWASTHE SPECIFIC LAYOUT PATTERNS
   Target explicit class names used in the Swasthe CMS HTML blocks
   ============================================================ */

/* Who We Help section: cards */
@media (max-width: 900px) {
  .home-cms-body .methodology-step,
  .gp-body-content .methodology-step {
    /* Already handled by grid-cols override above */
    position: relative !important;
  }
  /* Hide connecting arrows on mobile */
  .home-cms-body .methodology-step::after,
  .gp-body-content .methodology-step::after {
    display: none !important;
  }
}

/* Why Swasthe comparison cards */
@media (max-width: 600px) {
  .home-cms-body [class*="border-2"],
  .gp-body-content [class*="border-2"] {
    margin-bottom: 12px !important;
  }
}

/* ============================================================
   IMAGES — always constrained
   ============================================================ */
.home-cms-body img,
.gp-body-content img,
.cms-html-block img {
  max-width: 100% !important;
  height: auto !important;
}

/* ============================================================
   TABLE overflow
   ============================================================ */
.home-cms-body table,
.gp-body-content table,
.cms-html-block table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
@media (max-width: 768px) {
  .home-cms-body h1,
  .home-cms-body h2,
  .gp-body-content h1,
  .gp-body-content h2 {
    font-size: clamp(1.25rem, 5vw, 2rem) !important;
  }

  .section-head--ruled h2 {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important;
    gap: 12px !important;
  }

  .section-head--ruled h2::before,
  .section-head--ruled h2::after {
    max-width: 60px !important;
  }
}

/* ============================================================
   SWASTHE SW-FOOTER (alternative footer used by CMS pages)
   ============================================================ */
@media (max-width: 767px) {
  .sw-footer__newsletter {
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
  }

  .sw-footer__newsletter-form {
    max-width: 100% !important;
    width: 100% !important;
  }

  .sw-footer__newsletter-input {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .sw-footer__social {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  .sw-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .sw-footer__brand {
    grid-column: 1 !important;
  }
}

/* ============================================================
   CATEGORY / PRODUCT GRIDS
   Matches the existing swasthecom category grid system
   ============================================================ */
@media (max-width: 768px) {
  .gp-cg-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .gp-pc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 380px) {
  .gp-cg-grid,
  .gp-pc-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   HOME CONTAINER PADDING
   ============================================================ */
@media (max-width: 700px) {
  .home-container {
    padding: 0 12px !important;
  }

  .hero-inner {
    padding: 10px 12px 0 !important;
  }

  .hero-inner img {
    border-radius: 12px !important;
  }
}

@media (max-width: 480px) {
  .trust-strip {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}