/* =========================================================
   ScholarERP — Marketing pages mobile conversion
   Beats inline grid styles; stacks desktop sections properly.
   Scoped to page body ids used across the site.
   ========================================================= */

:is(#modules-page, #pricing-page, #ai-page, #resources-page, #audiences-page, #features-page) {
  overflow-x: clip;
}

/* Shared split helpers (replace inline 2-col grids) */
.mkt-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}

.mkt-split--equal {
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.mkt-split--rev {
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
}

.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.mkt-stat-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.mkt-auto-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 28px;
}

/* ---- Tablet / mobile ---- */
@media (max-width: 992px) {
  /* Universal hero section clearance beneath floating sticky header (#site-header) */
  .homepage-hero,
  .features-hero,
  .modules-hero,
  .sup-hero,
  .about-hero,
  .ai-hero,
  .res-hero,
  .solutions-hero,
  .demo-hero,
  .trial-hero,
  .seo-hero-section,
  .hero-grid--pricing {
    padding-top: 130px !important;
  }

  .mkt-split,
  .mkt-split--equal,
  .mkt-split--rev {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  .mkt-split > *,
  .mkt-split--equal > *,
  .mkt-split--rev > * {
    min-width: 0;
    max-width: 100%;
  }

  .pricing-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .mkt-stat-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  /* Nuclear: leftover inline multi-col grids (exclude cards/grids we style explicitly) */
  #modules-page [style*="grid-template-columns"]:not(.pricing-cards-grid):not(.mkt-split):not(.mkt-stat-trio):not(.mkt-auto-cards),
  #ai-page [style*="grid-template-columns"]:not(.mkt-stat-trio):not(.mkt-split),
  #resources-page [style*="grid-template-columns"]:not(.mkt-auto-cards):not(.mkt-split),
  #audiences-page [style*="grid-template-columns"]:not(.mkt-split) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #pricing-page [style*="grid-template-columns"]:not(.pricing-cards-grid):not(.pricing-cards-container):not(.cmp-overview):not(.mkt-split) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #audiences-page [style*="grid-template-columns:1fr auto"],
  #audiences-page [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr auto !important;
  }

  /* Critical: prevent grid/flex children from forcing page wider than viewport */
  :is(#modules-page, #pricing-page, #ai-page, #resources-page, #audiences-page) .container,
  :is(#modules-page, #pricing-page, #ai-page, #resources-page, #audiences-page) [class*="hero-layout"],
  :is(#modules-page, #pricing-page, #ai-page, #resources-page, #audiences-page) [class*="-layout"] {
    max-width: 100%;
  }

  :is(#modules-page, #pricing-page, #ai-page, #resources-page, #audiences-page) .hero-layout > *,
  :is(#modules-page, #pricing-page, #ai-page, #resources-page, #audiences-page) .ai-hero-layout > *,
  :is(#modules-page, #pricing-page, #ai-page, #resources-page, #audiences-page) .res-hero-layout > *,
  :is(#modules-page, #pricing-page, #ai-page, #resources-page, #audiences-page) .copilot-layout > *,
  :is(#modules-page, #pricing-page, #ai-page, #resources-page, #audiences-page) .mkt-split > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ---- Modules ---- */
  #modules-page .modules-hero {
    padding: 100px 0 48px;
    min-height: 0;
  }

  #modules-page .modules-hero h1 {
    font-size: clamp(28px, 7vw, 36px);
    letter-spacing: -1px;
    line-height: 1.15;
  }

  #modules-page .modules-hero p {
    font-size: 15.5px;
    max-width: none;
  }

  #modules-page .hero-ctas,
  #modules-page .hero-ctas.cluster {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #modules-page .hero-ctas .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  #modules-page .hero-stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
    max-width: 100%;
  }

  #modules-page .marketplace-grid,
  #modules-page .addon-plan-row,
  #modules-page .ai-modules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #modules-page .role-matrix-container,
  #modules-page .spotlight-grid,
  #modules-page .sync-scenarios,
  #modules-page .modules-library-grid,
  #modules-page .addon-studio__steps {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #modules-page .workflow-timeline {
    flex-direction: column !important;
    gap: 20px !important;
  }

  #modules-page .workflow-timeline::before {
    display: none !important;
  }

  /* ---- Pricing ---- */
  #pricing-page .pricing-cards-grid,
  #pricing-page .pricing-cards-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
  }

  #pricing-page .price-card-box {
    padding: 22px 18px !important;
    min-width: 0;
    max-width: 100%;
  }

  #pricing-page .price-card-box h3 {
    font-size: 18px !important;
  }

  #pricing-page .price-card-box [id^="price-"] {
    font-size: 28px !important;
  }

  #pricing-page .pricing-app-toggle {
    flex-wrap: wrap !important;
    gap: 12px !important;
    font-size: 15px !important;
    max-width: 100%;
  }

  #pricing-page .feature-matrix-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  #pricing-page .cmp-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #pricing-page .mb-scale__caps,
  #pricing-page .mb-scale__tiers,
  #pricing-page .price-addon-studio,
  #pricing-page .modules-core-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #pricing-page .price-core {
    max-width: 100%;
  }

  #pricing-page .hero-benefits-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  #pricing-page h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
    letter-spacing: -1px;
  }

  #pricing-page .hero-ctas,
  #pricing-page .cluster {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    max-width: 100%;
  }

  #pricing-page .hero-ctas .btn,
  #pricing-page .cluster .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  /* ---- AI ---- */
  #ai-page .ai-hero-layout,
  #ai-page .copilot-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    text-align: left;
  }

  #ai-page .ai-hero-layout .hero-ctas,
  #ai-page .ai-hero-layout .cluster {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #ai-page .ai-hero-layout .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  #ai-page .pulse-indicator-grid,
  #ai-page .mkt-stat-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #ai-page h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
  }

  /* ---- Resources ---- */
  #resources-page .res-hero-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  #resources-page .mkt-auto-cards {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #resources-page h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
  }

  #resources-page .search-input-field {
    min-width: 0 !important;
    width: 100% !important;
  }

  #resources-page .res-hero .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  #resources-page .res-hero .hero-ctas .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }

  #resources-page .constellation-wrap {
    max-width: min(420px, 100%);
    margin-inline: auto;
  }

  /* ---- Solutions (audiences) ---- */
  #audiences-page .hero-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  #audiences-page .hero-layout .hero-text {
    max-width: 100% !important;
    width: 100%;
  }

  #audiences-page .hero-ticker {
    max-width: 100% !important;
    width: 100%;
  }

  #audiences-page .hud-wrapper,
  #audiences-page .hud-panel {
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
  }

  #audiences-page .hud-panel {
    transform: none;
  }

  #audiences-page .compliance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #audiences-page .solutions-hero h1,
  #audiences-page h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
    letter-spacing: -1px;
  }

  #audiences-page .hero-ctas,
  #audiences-page .cluster {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: 100%;
  }

  #audiences-page .hero-ctas .btn,
  #audiences-page .cluster .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

@media (max-width: 576px) {
  .pricing-cards-grid,
  #pricing-page .pricing-cards-grid,
  #pricing-page .pricing-cards-container {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #modules-page .marketplace-grid,
  #modules-page .addon-plan-row,
  #modules-page .ai-modules-grid,
  #modules-page .hero-stats-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #pricing-page .cmp-overview {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #ai-page .pulse-indicator-grid,
  #ai-page .mkt-stat-trio {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #audiences-page .compliance-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #modules-page .btn-lg,
  #pricing-page .btn-lg,
  #ai-page .btn-lg,
  #resources-page .btn-lg,
  #audiences-page .btn-lg {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}