/**
 * Evolabs Global Mobile Design System
 *
 * Component-level responsive rules for the entire site.
 * Desktop (≥1025px) is untouched — every rule lives inside max-width media queries.
 *
 * Covers: typography, buttons, containers, cards, sections, nav, forms,
 * footer, images, icons, grids, spacing, CTAs.
 */

/* ══════════════════════════════════════════════════════════════
   TABLET — 2-column grids, container rhythm
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 769px) {
  .header-inner,
  .footer-shell,
  .footer-inner {
    padding-inline: var(--page-gutter);
  }

  main :is(
    [class*="-grid"]:not(.mega-menu-grid):not(.footer-links-grid),
    [class*="-rail"]:not(.home-partner-marquee-track)
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-card-gap) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — global component system (≤768px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Viewport safety ── */
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  :is(main, header, footer, .section, .section-inner) {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* ── Typography ── */
  :is(h1, h2, h3, h4, p, li, .section-heading h2, .section-heading p, .eco-section-lead, .suite-desc, .muted) {
    text-wrap: pretty;
    overflow-wrap: break-word;
    word-break: normal;
  }

  h1 {
    font-size: var(--text-hero) !important;
    line-height: 1.2 !important;
    font-weight: 800;
  }

  h2,
  .section-heading h2,
  .section .section-heading h2 {
    font-size: var(--text-section) !important;
    line-height: var(--leading-heading) !important;
    max-width: 100%;
  }

  h3,
  :is(.suite-card-head h3, .eco-cat-card strong, .eco-integ-card strong, .cmp-impact-item h3) {
    font-size: var(--text-card-title) !important;
    line-height: 1.3 !important;
  }

  h4 {
    font-size: var(--text-card-title) !important;
  }

  :is(body, p, .section-intro, .hero-lead, li, .suite-desc, .eco-section-lead) {
    font-size: var(--text-body) !important;
    line-height: var(--leading-body) !important;
  }

  :is(small, .caption, .eyebrow, label span) {
    font-size: var(--text-small) !important;
  }

  .section-heading {
    margin-bottom: var(--space-head) !important;
  }

  .section-heading :is(h2, h3) {
    margin-bottom: var(--space-head) !important;
  }

  /* ── Containers (header keeps compact padding — do not apply section pad) ── */
  .section-inner,
  .footer-shell.section-inner {
    width: min(100%, calc(100% - 2 * var(--page-gutter))) !important;
    padding-inline: var(--page-gutter) !important;
    padding-block: var(--space-section) !important;
    margin-inline: auto;
  }

  .header-inner {
    width: min(100%, calc(100% - 2 * var(--page-gutter))) !important;
    padding-inline: var(--page-gutter) !important;
    margin-inline: auto;
    box-sizing: border-box;
  }

  .site-footer .footer-shell.section-inner {
    padding-top: var(--space-section) !important;
    padding-bottom: var(--space-section-sm) !important;
  }

  /* ── Buttons (global) ── */
  :is(
    .primary-action,
    .secondary-action,
    .demo-button,
    .suite-demo,
    .suite-learn,
    .footer-pill,
    .footer-cta,
    .demo-submit,
    .demo-cta-primary,
    .eco-cta,
    .prod-hw-catalog-cta,
    .platform-band-demo,
    .platform-band-learn,
    .home-plat-cinema-cta,
    .solx-ctas .primary-action,
    .solx-ctas .secondary-action,
    button.suite-demo
  ) {
    min-height: var(--btn-height) !important;
    font-size: var(--btn-font) !important;
    padding-inline: var(--btn-pad-x) !important;
    border-radius: 999px;
  }

  :is(.primary-action, .secondary-action).btn-liquid {
    padding: 4px 6px 4px var(--btn-pad-x) !important;
    min-height: var(--btn-height) !important;
    font-size: var(--btn-font) !important;
  }

  :is(
    .primary-action svg,
    .secondary-action svg,
    .primary-action.btn-liquid svg,
    .footer-cta.btn-liquid svg,
    .demo-button svg
  ) {
    width: var(--btn-icon) !important;
    height: var(--btn-icon) !important;
    min-width: var(--btn-icon) !important;
    min-height: var(--btn-icon) !important;
    padding: 0 !important;
    flex-shrink: 0;
  }

  .demo-button {
    padding-inline: var(--btn-pad-x) !important;
  }

  /* ── Cards (global) ── */
  :is(
    [class*="-card"],
    .suite-card,
    .eco-cat-card,
    .eco-integ-card,
    .eco-industry-card,
    .eco-hw-product,
    .prod-hw-category-card,
    .prod-rfid-hw-card,
    .prod-rfid-feature,
    .prod-erp-item,
    .cmp-impact-item,
    .cmp-industries-grid article,
    .home-why-card,
    .trust-logo-card,
    .hw-device-card,
    .hw-offering-card,
    .device-related-card,
    .builder-panel,
    .demo-side,
    .platform-panel
  ) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box;
  }

  :is(
    .suite-card-body,
    .prod-hw-category-body,
    .eco-cat-card,
    .eco-integ-card,
    .builder-panel,
    .hw-card-body,
    .hw-offering-card,
    .device-details-grid article,
    .cta-panel,
    .sol-cta-panel
  ) {
    padding: var(--space-card-pad) !important;
  }

  /* ── Grids: 1 column on phone (catch-all + explicit) ── */
  main :is(
    [class*="-grid"]:not(.mega-menu-grid),
    [class*="-rail"]:not(.home-partner-marquee-track):not(.footer-links-grid),
    .builder-layout,
    .device-layout,
    .device-meta,
    .cmp-who-layout,
    .platform-band-grid,
    .platform-band-grid--reverse
  ) {
    grid-template-columns: 1fr !important;
    gap: var(--space-card-gap) !important;
    width: 100% !important;
    max-width: none !important;
  }

  .u-grid-auto {
    grid-template-columns: 1fr !important;
    gap: var(--space-card-gap) !important;
  }

  /* ── Images & icons ── */
  :is(img, video, svg, iframe) {
    max-width: 100%;
    height: auto;
  }

  :is(.eco-hero-illustration, .home-exec-hero-bg img, .solx-media img, .cmp-hero::after) {
    object-fit: cover;
  }

  :is(
    .home-partner-marquee img,
    .eco-hero-partner-logos img,
    .footer-proof-grid img,
    .trust-logo-card img
  ) {
    max-height: 28px;
    width: auto;
    object-fit: contain;
  }

  :is(.mega-item-icon svg, .eco-cat-icon svg, .home-trust-icon svg) {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* ── Navigation ── */
  .mobile-menu a {
    min-height: 48px;
    padding: 0 var(--page-gutter);
    font-size: clamp(0.9375rem, 3.8vw, 1rem);
    border-radius: 10px;
  }

  .mobile-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .solx-nav-track {
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .solx-nav-track a {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
    font-size: var(--text-small);
    white-space: nowrap;
  }

  /* ── Forms ── */
  :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .builder-input,
    .builder-textarea,
    .demo-field input,
    .demo-field select,
    .demo-field textarea
  ) {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font-size: var(--text-body) !important;
    border-radius: 10px;
    box-sizing: border-box;
  }

  textarea,
  .builder-textarea {
    min-height: 88px;
  }

  .builder-field,
  .demo-field {
    gap: 6px;
  }

  .builder-step-title {
    font-size: var(--text-card-title) !important;
    margin-bottom: var(--space-head);
  }

  /* ── Footer ── */
  .footer-top-band {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-card-gap);
    padding-bottom: var(--space-card-gap);
  }

  .footer-cta-cluster {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-card-gap);
  }

  .footer-cta-pills {
    flex-direction: column;
    width: 100%;
  }

  .footer-pill {
    width: 100%;
    justify-content: center;
  }

  .footer-links-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-section-sm) !important;
  }

  .footer-proof-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-card-gap) !important;
  }

  .footer-brand-name {
    font-size: var(--text-card-title) !important;
  }

  /* ── CTA sections ── */
  :is(.cta-panel, .sol-cta-panel, .eco-cta-band, .hw-cta-band) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-card-gap) !important;
    padding: var(--space-card-pad) !important;
    text-align: left;
  }

  :is(.cta-panel, .sol-cta-panel) :is(.primary-action, .secondary-action) {
    width: 100%;
    justify-content: center;
  }

  .eco-cta-actions,
  .solx-ctas,
  .cmp-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-card-gap);
    width: 100%;
  }

  .eco-cta-actions :is(.primary-action, .secondary-action),
  .cmp-hero-actions :is(.primary-action, .secondary-action),
  .solx-ctas :is(.primary-action, .secondary-action) {
    width: 100%;
    justify-content: center;
  }

  /* Hero CTAs: compact row when space allows (mobile-hero.css may override) */
  .hero-actions:not(.hero-actions--stack) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .hero-actions:not(.hero-actions--stack) :is(.primary-action, .secondary-action) {
    flex: 1 1 calc(50% - 5px);
    min-width: min(100%, 8.75rem);
    width: auto;
    justify-content: center;
  }

  /* ── Reduce mobile clutter (≤767px only — never affects desktop) ── */
  :is(
    .evo-reveal,
    .motion-reveal-item
  ) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Decorative-only blocks hidden on phone */
  :is(
    .eco-hero-partners,
    .home-exec-hero .eyebrow,
    .solx-hero-brand
  ) {
    display: none !important;
  }

  /* Tighten oversized page-specific spacing */
  :is(
    .home-plat-cinema,
    .solx-section .section-inner,
    .products-page .platform-band-grid
  ) {
    min-height: 0 !important;
  }

  .home-page .home-eco-flow {
    margin-top: 0 !important;
  }

  .home-page .home-eco-flow > .section-inner {
    padding-top: var(--space-section-gap) !important;
  }

  /* ── Overflow audit ── */
  :is(
    .section,
    .section-inner,
    table,
    pre,
    .mega-menu,
    .home-partner-marquee-viewport
  ) {
    max-width: 100%;
    overflow-x: clip;
  }

  .brand,
  .brand.brand--wordmark {
    min-width: unset;
  }
}

/* ══════════════════════════════════════════════════════════════
   SMALL PHONE — denser spacing & tap targets (≤640px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  .section-inner,
  .footer-shell.section-inner {
    padding-block: var(--space-section) !important;
    padding-inline: var(--page-gutter) !important;
  }

  .site-footer .footer-shell.section-inner {
    padding-top: var(--space-section-sm) !important;
    padding-bottom: clamp(1rem, 4vw, 1.25rem) !important;
  }

  .section-heading {
    margin-bottom: var(--space-head) !important;
    gap: 6px !important;
  }

  :is(
    .primary-action,
    .secondary-action,
    .demo-button,
    .suite-demo,
    .suite-learn,
    .footer-pill,
    .footer-cta,
    .demo-submit,
    .eco-cta,
    .prod-hw-catalog-cta
  ) {
    min-height: var(--btn-height) !important;
    font-size: var(--btn-font) !important;
  }

  .hero-actions:not(.hero-actions--stack) {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .hero-actions:not(.hero-actions--stack) :is(.primary-action, .secondary-action) {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .mobile-menu a {
    min-height: 44px;
    font-size: clamp(0.875rem, 3.6vw, 0.9375rem);
  }

  .footer-links-grid,
  .footer-proof-grid {
    gap: var(--space-card-gap) !important;
  }

  :is(.cta-panel, .sol-cta-panel, .eco-cta-band, .hw-cta-band) {
    padding: var(--space-card-pad) !important;
    gap: 10px !important;
  }

  :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .builder-input,
    .demo-field input,
    .demo-field select,
    .demo-field textarea
  ) {
    min-height: 44px;
    font-size: 16px !important; /* prevent iOS zoom */
  }
}

/* ── Touch: no hover lifts; minimum tap targets ── */
@media (hover: none) and (pointer: coarse) {
  :is(
    .suite-card,
    .prod-hw-category-card,
    .eco-cat-card,
    .eco-integ-card,
    .mega-item,
    .hw-device-card
  ):hover {
    transform: none !important;
  }

  :is(a, button, .demo-button, .footer-pill, .home-eco-chip, .home-plat-dot) {
    min-height: 44px;
  }
}