/* Mobile-only hero banner — mobile landing hero
   Beats typography.css mobile .hero-title / .hero-desc overrides
*/

@media (max-width: 991.98px) {
  /* .hero-bg-image .hero-mobile-banner {
    min-height: 100%;
  } */

  .hero-section-overlay {
    min-height: 41.125rem; /* h-[658px] */
    height: 41.125rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }

  .hero-section-overlay > .container {
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-left: var(--space-7);
    padding-right: var(--space-7);
    padding-bottom: var(--space-21); /* pb-16 */
  }

  .hero-section-overlay .hero-content {
    width: 100%;
    max-width: 20rem; /* w-80 */
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .hero-section-overlay .hero-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-9); /* gap-5 */
  }

  .hero-section-overlay .hero-panel .hero-company-image {
    justify-content: center;
  }

  /* Mobile/H1 — 32/120 (IBM Plex Sans, Regular + Bold accent) */
  .hero-section-overlay .hero-title {
    width: 100%;
    max-width: 19.625rem; /* ~314px title frame */
    margin: 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-32); /* 32px */
    line-height: 1.2; /* 120% → 38.4px */
    font-weight: var(--font-weight-normal);
    letter-spacing: 0;
    text-align: center;
    color: var(--bs-white);
  }

  .hero-section-overlay .hero-title strong,
  .hero-section-overlay .hero-title b {
    color: var(--bs-success);
    font-weight: var(--font-weight-bold) !important; /* Mobile/H1 Bold */
  }

  /* text-sm / cyan-100 — must win over typography 18px !important */
  .hero-section-overlay .hero-desc,
  .hero-section-overlay .hero-desc p {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-14) !important; /* text-sm */
    line-height: 1.25rem !important; /* leading-5 */
    font-weight: var(--font-weight-normal);
    text-align: center;
    color: var(--bs-primary-25) !important;
  }

  .hero-section-overlay .hero-btn-section {
    width: 100%;
    max-width: 20rem;
    margin-top: 0;
    display: flex;
    justify-content: center;
  }

  .hero-section-overlay .hero-btn-section .btn-hero {
    width: 100%;
    max-width: 20rem;
    height: 2.5rem;
    padding: var(--space-1) var(--space-7);
    border-radius: var(--radius-2xl); /* rounded-2xl, not pill */
    justify-content: center;
    gap: var(--space-3);
    background-color: var(--bs-secondary-400);
    border-color: var(--bs-secondary-400);
    color: var(--bs-black);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    line-height: 1.25rem;
  }

  .hero-section-overlay .hero-btn-section .btn-hero:hover {
    background-color: var(--bs-secondary-500);
    border-color: var(--bs-secondary-500);
  }

  .hero-section-overlay .hero-btn-section .btn-hero .chev {
    display: inline-flex;
    align-items: center;
    margin-left: 0;
  }

  .hero-section-overlay .hero-btn-section .btn-hero .chev svg {
    width: 0.375rem;
    height: auto;
  }

  /* Bottom → top scrim — stops supplied by the client for text readability:
     the mid-tone carries to 80% so the fade reaches well above the copy. */
  .hero-section-overlay .hero-scrim {
    background: linear-gradient(
      360deg,
      var(--bs-primary-800) 0%,
      var(--bs-primary-800) 13%,
      rgba(var(--bs-primary-800-rgb), 0.55) 80%,
      rgba(var(--bs-primary-800-rgb), 0) 100%
    );
  }
}