/* ========================================================================== 
   Tecovoo Homepage Hero Mobile v13 — 6.7.7
   Mobile is intentionally composed as its own hero, not a scaled desktop one.
   Desktop/tablet presentation is untouched.
   ========================================================================== */

@media (max-width: 47.99rem) {
  .home .hero {
    --hero-mobile-height: clamp(33rem, 72svh, 39rem);
    min-height: 0 !important;
    overflow: hidden;
    background: var(--color-primary-deep);
  }

  .home .hero__viewport {
    display: grid !important;
    height: var(--hero-mobile-height) !important;
    min-height: 0 !important;
  }

  .home .hero__slide {
    position: relative !important;
    display: grid !important;
    align-items: end !important;
    height: var(--hero-mobile-height) !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .home .hero__picture {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .home .hero__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: scale(1.002);
  }

  /* Mobile text needs a predictable reading surface. This keeps the room and
     appliance visible while preventing copy from sitting on a bright wall. */
  .home .hero__slide::after,
  .home .hero__slide[data-overlay='none']::after,
  .home .hero__slide[data-overlay='soft']::after,
  .home .hero__slide[data-overlay='medium']::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none;
    background:
      linear-gradient(
        180deg,
        rgb(7 24 39 / .04) 0%,
        rgb(7 24 39 / .08) 28%,
        rgb(7 24 39 / .32) 53%,
        rgb(7 24 39 / .86) 82%,
        rgb(7 24 39 / .97) 100%
      ),
      linear-gradient(
        90deg,
        rgb(7 24 39 / .58) 0%,
        rgb(7 24 39 / .24) 48%,
        rgb(7 24 39 / 0) 82%
      ) !important;
  }

  .home .hero__content {
    position: relative !important;
    z-index: 1 !important;
    grid-area: 1 / 1 !important;
    align-self: end !important;
    width: 100% !important;
    max-width: none !important;
    padding:
      0
      max(1rem, var(--gutter))
      calc(4.75rem + env(safe-area-inset-bottom)) !important;
  }

  .home .hero__slide[data-align='center'] .hero__content-inner,
  .home .hero__slide[data-align='right'] .hero__content-inner,
  .home .hero__content-inner {
    display: grid !important;
    gap: .62rem !important;
    width: min(100%, 22.5rem) !important;
    max-width: 22.5rem !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .home .hero__eyebrow {
    gap: .55rem !important;
    margin: 0 !important;
    color: rgb(255 255 255 / .78) !important;
    font-size: .68rem !important;
    font-weight: 720 !important;
    line-height: 1.25 !important;
    letter-spacing: .13em !important;
  }

  .home .hero__eyebrow::before {
    width: 1.65rem !important;
    flex: 0 0 1.65rem;
  }

  .home .hero__title {
    max-width: 11ch !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(2.35rem, 10.2vw, 3.15rem) !important;
    font-weight: 720 !important;
    line-height: .96 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance;
    text-shadow: 0 2px 20px rgb(2 14 24 / .22);
  }

  .home .hero__body {
    display: -webkit-box !important;
    max-width: 33ch !important;
    margin: .05rem 0 0 !important;
    overflow: hidden !important;
    color: rgb(255 255 255 / .82) !important;
    font-size: .94rem !important;
    line-height: 1.48 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .home .hero__actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: .55rem !important;
    width: 100% !important;
    margin-top: .35rem !important;
  }

  .home .hero__actions .btn {
    min-width: 0 !important;
    min-height: 2.875rem !important;
    padding-inline: .95rem !important;
    border-radius: .7rem !important;
    font-size: .78rem !important;
    white-space: nowrap;
  }

  .home .hero__actions .btn:first-child {
    flex: 1 1 auto;
  }

  .home .hero__actions .btn:not(:first-child) {
    flex: 0 1 auto;
  }

  /* Swipe is the primary previous/next gesture on touch. Keep dots and pause
     for discoverability/accessibility without a bulky four-control pill. */
  .home .hero__controls {
    left: auto !important;
    right: max(1rem, var(--gutter)) !important;
    bottom: calc(.9rem + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    width: auto !important;
    min-height: 2.65rem !important;
    gap: .15rem !important;
    padding: .2rem .25rem .2rem .45rem !important;
    background: rgb(8 25 40 / .56) !important;
    border: 1px solid rgb(255 255 255 / .18) !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 34px rgb(0 0 0 / .16);
    backdrop-filter: blur(15px) saturate(1.15) !important;
  }

  .home .hero__nav--prev,
  .home .hero__nav--next {
    display: none !important;
  }

  .home .hero__pagination {
    gap: 0 !important;
    padding: 0 !important;
  }

  .home .hero__dot {
    width: 1.45rem !important;
    min-width: 1.45rem !important;
    min-height: 2.25rem !important;
    padding: 0 !important;
  }

  .home .hero__dot::before {
    width: .8rem !important;
    height: 2px !important;
    background: rgb(255 255 255 / .38) !important;
  }

  .home .hero__dot[aria-selected='true']::before {
    width: 1.25rem !important;
    background: var(--color-accent) !important;
  }

  .home .hero__nav--play {
    display: inline-flex !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    margin-left: .1rem;
    color: #fff !important;
    background: rgb(255 255 255 / .08) !important;
  }

  .home .hero__nav--play svg {
    width: .9rem !important;
    height: .9rem !important;
  }

  /* Disable desktop alignment variants on narrow screens. Stable placement is
     more important than editorial left/centre/right variation here. */
  .home .hero__slide[data-valign='top'],
  .home .hero__slide[data-valign='middle'],
  .home .hero__slide[data-valign='bottom'] {
    align-items: end !important;
  }

  .home .hero--fallback,
  .home .hero__fallback-inner {
    min-height: var(--hero-mobile-height) !important;
  }

  .home .hero__fallback-inner {
    align-content: end !important;
    padding:
      3.5rem
      max(1rem, var(--gutter))
      calc(2rem + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 22.5rem) {
  .home .hero {
    --hero-mobile-height: clamp(32rem, 76svh, 37rem);
  }

  .home .hero__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .home .hero__actions .btn {
    width: 100% !important;
  }

  .home .hero__content {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 47.99rem) and (max-height: 43rem) {
  .home .hero {
    --hero-mobile-height: 31.5rem;
  }

  .home .hero__body {
    -webkit-line-clamp: 2;
  }

  .home .hero__title {
    font-size: clamp(2.15rem, 9vw, 2.7rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 47.99rem) {
  .home .hero__image,
  .home .hero__controls,
  .home .hero__dot::before {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}