/* LiveTV page: only banner/hero-specific overrides. */
.live-tv-page .live-tv-hero-section {
  padding-top: 7rem;
}

.live-tv-page .live-tv-hero-carousel .carousel-item {
  min-height: auto;
  aspect-ratio: 1536 / 530;
}

.live-tv-page .live-tv-hero-media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.live-tv-page .live-tv-hero-media img,
.live-tv-page .live-tv-hero-media .hero-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.live-tv-page .live-tv-hero-overlay {
  background: linear-gradient(90deg, rgba(10, 11, 15, 0.88) 0%, rgba(10, 11, 15, 0.58) 32%, rgba(10, 11, 15, 0.18) 60%, rgba(10, 11, 15, 0.08) 100%),
              linear-gradient(180deg, rgba(10, 11, 15, 0.08) 0%, rgba(10, 11, 15, 0.18) 52%, rgba(10, 11, 15, 0.78) 100%);
}

@media (max-width: 991.98px) {
  .live-tv-page .live-tv-hero-carousel .carousel-item {
    min-height: 420px;
  }
}

@media (max-width: 767.98px) {
  .live-tv-page .live-tv-hero-carousel .carousel-item {
    min-height: 320px;
  }
}

@media (max-width: 768px) {
    .livetv-hero,
    .hero-carousel,
    .carousel-item {
        position: relative !important;
        height: 78vh !important;
        min-height: 520px !important;
        max-height: 760px !important;
        overflow: hidden !important;
        border-radius: 0 0 24px 24px;
        background: #000 !important;
    }

        .carousel-item img,
        .hero-carousel img,
        .hero-banner img,
        .hero-media img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center center !important;
            display: block !important;
        }

        /* dark cinematic overlay */
        .livetv-hero::before,
        .hero-carousel::before,
        .carousel-item::before {
            content: "" !important;
            position: absolute !important;
            inset: 0 !important;
            background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.45) 32%, rgba(0,0,0,0.12) 55%, rgba(0,0,0,0.18) 100%) !important;
            z-index: 1 !important;
            display: block !important;
        }

    /* content block */
    .hero-content,
    .livetv-hero-content,
    .carousel-caption,
    .hero-overlay-content {
        position: absolute !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 26px !important;
        top: auto !important;
        transform: none !important;
        z-index: 2 !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

        /* title */
        .hero-title,
        .livetv-title,
        .carousel-caption h1,
        .carousel-caption h2,
        .carousel-caption h3 {
            font-size: 1.8rem !important;
            line-height: 1.1 !important;
            margin: 0 0 6px 0 !important;
            color: #fff !important;
        }

        /* description */
        .hero-description,
        .livetv-description,
        .carousel-caption p {
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            font-size: 0.98rem !important;
            line-height: 1.45 !important;
            color: rgba(255,255,255,0.9) !important;
            margin: 0 !important;
        }

    /* buttons stack nicely */
    .hero-actions,
    .banner-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 6px 0 0 0 !important;
    }

        .hero-actions .btn,
        .banner-actions .btn,
        .watch-now-btn,
        .watch-trailer-btn {
            width: 100% !important;
            min-height: 50px !important;
            border-radius: 999px !important;
        }

    /* move arrows to center */
    .carousel-control-prev,
    .carousel-control-next {
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        z-index: 3 !important;
        width: 44px !important;
    }

    /* indicators */
    .carousel-indicators {
        bottom: 10px !important;
        z-index: 3 !important;
        margin-bottom: 0 !important;
    }
}