/**
 * Mobile Hero — compact, peek-next-section layout (≤768px only).
 * Desktop heroes are untouched. Loads after mobile-layout.css.
 */

@media (max-width: 768px) {
  :root {
    --mobile-hero-h: clamp(160px, 22vh, 220px);
    --mobile-hero-pad-y: clamp(20px, 4vw, 24px);
    --mobile-hero-header-clear: max(46px, calc(42px + env(safe-area-inset-top, 0px)));
    --mobile-hero-title: clamp(1.625rem, 6.5vw, 1.75rem); /* 26–28px */
    --mobile-hero-lead: clamp(0.875rem, 2.3vw, 0.9375rem); /* 14–15px */
    --mobile-hero-gap-copy: clamp(8px, 2vw, 12px);
    --mobile-hero-gap-cta: clamp(12px, 3vw, 16px);
  }

  /* ── Hero shells: ≤25vh, capped at 220px ── */
  :is(
    .home-page .home-exec-hero,
    .products-page .products-hero.eco-hero,
    .solx-page .solx-hero,
    .company-page .cmp-hero,
    .demo-page .demo-hero,
    .solution-builder-page .solution-builder-hero,
    .comparison-hero,
    .legal-hero,
    .hardware-page .hw-hero
  ) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--mobile-hero-h) !important;
    max-height: min(25vh, 220px) !important;
    height: auto !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  /* ── Inner layout: header clearance + tight vertical rhythm ── */
  :is(
    .home-page .home-exec-hero-inner,
    .products-page .products-hero-layout,
    .products-page .eco-hero-layout,
    .solx-page .solx-hero-inner,
    .company-page .cmp-hero-layout,
    .demo-page .demo-hero-inner,
    .solution-builder-page .solution-builder-hero > .section-inner,
    .comparison-hero-inner,
    .legal-hero > .section-inner,
    .hardware-page .hw-hero > .section-inner
  ) {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding-top: calc(var(--mobile-hero-header-clear) + 4px) !important;
    padding-bottom: var(--mobile-hero-pad-y) !important;
    padding-inline: var(--page-gutter, 1.25rem) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
  }

  /* ── Copy stacks ── */
  :is(
    .home-exec-hero-copy,
    .eco-hero-copy,
    .products-hero-copy,
    .solx-hero-copy,
    .cmp-hero-copy,
    .demo-hero-copy
  ) {
    display: grid !important;
    gap: var(--mobile-hero-gap-copy) !important;
    width: 100% !important;
    max-width: none !important;
    justify-items: start !important;
  }

  /* Hide non-essential hero chrome (.home-hero-partners stays visible; wraps on small screens) */
  :is(
    .home-exec-hero .eyebrow,
    .eco-hero-copy .eyebrow,
    .products-hero-copy .eyebrow,
    .solx-hero-brand,
    .cmp-hero-copy .eyebrow,
    .demo-hero .eyebrow,
    .solution-builder-hero .eyebrow,
    .comparison-hero .eyebrow,
    .legal-hero .eyebrow,
    .hardware-page .hw-hero .eyebrow,
    .eco-hero-partners
  ) {
    display: none !important;
  }

  /* ── Typography ── */
  :is(
    .home-page .home-exec-hero h1,
    .products-page .products-hero-copy h1,
    .products-page .eco-hero-copy h1,
    .solx-page .solx-hero-copy h1,
    .company-page .cmp-hero-copy h1,
    .demo-page .demo-hero h1,
    .solution-builder-page .solution-builder-hero h1,
    .comparison-hero h1,
    .legal-hero h1,
    .hardware-page .hw-hero h1
  ) {
    font-size: var(--mobile-hero-title) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-wrap: balance;
  }

  :is(
    .home-exec-hero-lead,
    .eco-hero-lead,
    .products-hero-copy .hero-lead,
    .solx-hero-lead,
    .cmp-hero-lead,
    .demo-hero-lead,
    .builder-hero-lead,
    .comparison-hero-inner > p:not(.eyebrow),
    .legal-hero > .section-inner > p:not(.eyebrow),
    .hardware-page .hw-hero-lead
  ) {
    font-size: var(--mobile-hero-lead) !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  :is(
    .builder-hero-lead,
    .comparison-hero-inner > p:not(.eyebrow),
    .legal-hero > .section-inner > p:not(.eyebrow),
    .hardware-page .hw-hero-lead
  ) {
    -webkit-line-clamp: 3 !important;
  }

  @media (max-height: 740px) {
    :is(
      .home-exec-hero-lead,
      .eco-hero-lead,
      .solx-hero-lead,
      .cmp-hero-lead,
      .demo-hero-lead
    ) {
      -webkit-line-clamp: 1 !important;
    }
  }

  /* ── CTAs: one row when space allows, else wrap ── */
  :is(
    .hero-actions,
    .cmp-hero-actions,
    .solx-hero-actions
  ) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: var(--mobile-hero-gap-cta) !important;
    width: 100% !important;
  }

  :is(
    .hero-actions > .primary-action,
    .hero-actions > .secondary-action,
    .hero-actions > a,
    .cmp-hero-actions > .primary-action,
    .cmp-hero-actions > .secondary-action,
    .solx-hero-actions > .primary-action,
    .solx-hero-actions > .secondary-action
  ) {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: min(100%, 8.75rem) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 0.75rem !important; /* 12px */
    justify-content: center !important;
  }

  .company-page .cmp-hero-copy {
    text-align: left !important;
    max-width: none !important;
  }

  .solx-page .solx-hero-copy {
    max-width: none !important;
  }

  .products-page--ecosystem .eco-hero--illustration .eco-hero-copy {
    max-width: none !important;
  }

  /* ── Background / illustration: subdued on phone ── */
  .home-page .home-exec-hero-bg img {
    opacity: 0.5;
    object-position: 70% center;
    transform: scale(1.05);
  }

  .home-page .home-exec-hero-bg::after {
    background:
      linear-gradient(90deg, rgba(7, 30, 51, 0.92) 0%, rgba(7, 30, 51, 0.72) 55%, rgba(7, 30, 51, 0.45) 100%),
      linear-gradient(180deg, rgba(7, 30, 51, 0.25) 0%, rgba(7, 30, 51, 0.65) 100%) !important;
  }

  .products-page--ecosystem .eco-hero--illustration .eco-hero-media {
    opacity: 0.4;
  }

  .products-page--ecosystem .eco-hero--illustration .eco-hero-illustration {
    object-position: 80% center;
    transform: scale(0.92);
    transform-origin: center right;
  }

  .products-page--ecosystem .eco-hero--illustration .eco-hero-media-shade {
    background:
      linear-gradient(90deg, rgba(8, 74, 140, 0.82) 0%, rgba(10, 120, 207, 0.45) 50%, transparent 72%),
      linear-gradient(180deg, rgba(6, 55, 110, 0.35) 0%, transparent 40%, rgba(6, 55, 110, 0.2) 100%) !important;
  }

  .solx-page .solx-hero-bg {
    background-position: 78% center !important;
    transform: scale(1.08);
    opacity: 0.55;
  }

  .solx-page .solx-hero-scrim {
    background:
      linear-gradient(90deg, rgba(5, 18, 40, 0.9) 0%, rgba(5, 18, 40, 0.65) 48%, rgba(5, 18, 40, 0.2) 72%, transparent 85%),
      linear-gradient(180deg, rgba(5, 18, 40, 0.2) 0%, transparent 50%, rgba(5, 18, 40, 0.35) 100%) !important;
  }

  .company-page .cmp-hero::after {
    opacity: 0.35 !important;
    transform: scale(1.02) !important;
  }

  .company-page .cmp-hero::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.88) 100%
    ) !important;
  }

  /* ── Hardware hero: hide secondary blocks ── */
  .hardware-page .hw-trust-list,
  .hardware-page .hw-jump-nav {
    display: none !important;
  }

  .hardware-page .hw-back,
  .comparison-back {
    margin-bottom: 6px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  /* ── Tighten gap to next section (home marquee / ecosystem) ── */
  .home-page .home-eco-flow {
    margin-top: 0 !important;
  }

  .home-page .home-hero-partners {
    margin-top: 6px;
    padding-top: 4px;
  }

  .home-page .home-hero-partner-logos {
    column-gap: 14px;
    row-gap: 12px;
    justify-content: space-evenly;
  }

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

  .solx-page .solx-nav-sentinel {
    height: 0 !important;
  }
}

/**
 * Site-wide: hide hero eyebrows on all viewports (desktop + mobile).
 * Markup is removed; this is a safety net if CMS/legacy content reappears.
 */
:is(
  .home-exec-hero .eyebrow,
  .eco-hero-copy .eyebrow,
  .products-hero-copy .eyebrow,
  .solx-hero-brand,
  .solx-hero-copy > .eyebrow,
  .cmp-hero-copy > .eyebrow,
  .demo-hero .eyebrow,
  .solution-builder-hero .eyebrow,
  .comparison-hero .eyebrow,
  .comparison-hero-inner > .eyebrow,
  .legal-hero .eyebrow,
  .legal-hero > .section-inner > .eyebrow,
  .hardware-page .hw-hero .eyebrow,
  .hw-hero > .section-inner > .eyebrow,
  .device-hero .eyebrow,
  .device-copy > .eyebrow
) {
  display: none !important;
}

/* Very narrow phones: stack CTAs if side-by-side is too tight */
@media (max-width: 640px) {
  :root {
    --mobile-hero-h: clamp(140px, 20vh, 190px);
    --mobile-hero-pad-y: clamp(14px, 3.5vw, 18px);
    --mobile-hero-title: clamp(1.5rem, 6vw, 1.625rem);
    --mobile-hero-lead: clamp(0.8125rem, 2.2vw, 0.875rem);
    --mobile-hero-gap-copy: 6px;
    --mobile-hero-gap-cta: 10px;
  }

  /* Let hero grow with stacked CTAs — keep short but never clip actions */
  :is(
    .home-page .home-exec-hero,
    .products-page .products-hero.eco-hero,
    .solx-page .solx-hero,
    .company-page .cmp-hero,
    .demo-page .demo-hero,
    .solution-builder-page .solution-builder-hero,
    .comparison-hero,
    .legal-hero,
    .hardware-page .hw-hero
  ) {
    min-height: var(--mobile-hero-h) !important;
    max-height: none !important;
    height: auto !important;
  }

  :is(
    .hero-actions,
    .cmp-hero-actions,
    .solx-hero-actions
  ) {
    flex-direction: column !important;
    gap: 8px !important;
  }

  :is(
    .hero-actions > .primary-action,
    .hero-actions > .secondary-action,
    .hero-actions > a,
    .cmp-hero-actions > .primary-action,
    .cmp-hero-actions > .secondary-action,
    .solx-hero-actions > .primary-action,
    .solx-hero-actions > .secondary-action
  ) {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 40px !important;
  }
}

@media (max-width: 360px) {
  :is(
    .hero-actions,
    .cmp-hero-actions,
    .solx-hero-actions
  ) {
    flex-direction: column !important;
  }

  :is(
    .hero-actions > .primary-action,
    .hero-actions > .secondary-action,
    .hero-actions > a,
    .cmp-hero-actions > .primary-action,
    .cmp-hero-actions > .secondary-action,
    .solx-hero-actions > .primary-action,
    .solx-hero-actions > .secondary-action
  ) {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}