/* ==========================================================
   dimosTV Design System
   DS4.4 — Premium Live Strip
========================================================== */

.dtv-live-strip {
    position: relative;
    z-index: 8;

    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: center;

    margin: -52px 0 clamp(56px, 6vw, 92px) !important;
    padding: 22px 26px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--dtv-radius-2xl, 28px);

    background:
        radial-gradient(circle at 12% 20%, rgba(204,0,0,.22), transparent 30%),
        linear-gradient(135deg, #0F172A 0%, #1A2E4A 58%, #101827 100%);

    color: var(--dtv-color-text-inverse, #ffffff);

    box-shadow:
        var(--dtv-shadow-lg, 0 28px 80px rgba(15,23,42,.22)),
        inset 0 0 0 1px rgba(255,255,255,.04);

    overflow: hidden;

    isolation: isolate;
}

.dtv-live-strip::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,0) 38%,
            rgba(255,255,255,.04)
        );

    pointer-events: none;
}

.dtv-live-strip__status {
    display: flex;
    gap: 14px;
    align-items: center;
}

.dtv-live-strip__live-dot {
    position: relative;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--dtv-color-primary, #CC0000);
    box-shadow:
        0 0 0 6px rgba(204,0,0,.14),
        0 0 22px rgba(204,0,0,.45);

    animation: dtvLivePulse 1.8s infinite;
}

.dtv-live-strip__live-dot::after {
    content: "";

    position: absolute;
    inset: -10px;

    border-radius: inherit;

    border: 1px solid rgba(204,0,0,.28);

    animation: dtvLiveRing 1.8s infinite;
}

.dtv-live-strip__label {
    display: block;

    font-family: var(--dtv-font-heading, Oswald, sans-serif);
    font-size: 24px;
    font-weight: var(--dtv-font-weight-black, 900);
    line-height: 1;
    letter-spacing: .03em;

    color: #fff;
}

.dtv-live-strip__status p,
.dtv-live-strip__info p {
    margin: 6px 0 0;

    color: rgba(255,255,255,.72);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

/* Current live */
.dtv-live-strip__current {
    display: grid;
    grid-template-columns: 178px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.dtv-live-strip__thumb {
    position: relative;

    height: 104px;

    border-radius: var(--dtv-radius-lg, 18px);
    overflow: hidden;

    background:
        radial-gradient(circle at 50% 40%, rgba(204,0,0,.32), transparent 44%),
        linear-gradient(135deg, rgba(204,0,0,.92), rgba(0,102,204,.88)),
        var(--dtv-color-surface-dark, #0F172A);

    box-shadow: 0 18px 42px rgba(0,0,0,.26);
}

.dtv-live-strip__thumb::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5,10,20,.72),
            rgba(5,10,20,.08)
        );

    pointer-events: none;
}

.dtv-live-strip__badge {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 10px;

    border-radius: var(--dtv-radius-pill, 999px);

    background: var(--dtv-color-primary, #CC0000);
    color: #ffffff;

    font-size: 11px;
    font-weight: var(--dtv-font-weight-black, 900);
    line-height: 1;
    letter-spacing: .06em;

    box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.dtv-live-strip__info h4 {
    margin: 0;

    font-family: var(--dtv-font-heading, Oswald, sans-serif);
    color: #ffffff;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: var(--dtv-font-weight-black, 900);
    line-height: 1.05;
}

.dtv-live-strip__watch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 14px;
    padding: 10px 15px;

    border-radius: var(--dtv-radius-pill, 999px);

    background: var(--dtv-color-primary, #CC0000);
    color: #fff;

    font-size: 12px;
    font-weight: var(--dtv-font-weight-black, 900);
    line-height: 1;
    letter-spacing: .04em;
    text-decoration: none;

    box-shadow: 0 14px 34px rgba(204,0,0,.28);

    transition:
        transform var(--dtv-motion-normal, .22s ease),
        background var(--dtv-motion-normal, .22s ease),
        box-shadow var(--dtv-motion-normal, .22s ease);
}

.dtv-live-strip__watch:hover,
.dtv-live-strip__watch:focus-visible {
    transform: translateY(-2px);
    background: var(--dtv-color-primary-hover, #E00000);
    box-shadow: 0 18px 44px rgba(204,0,0,.34);
}

.dtv-live-strip__watch:focus-visible {
    outline: 3px solid var(--dtv-color-secondary, #0066CC);
    outline-offset: 4px;
}

.dtv-live-strip__watch svg {
    display: block;

    width: 14px;
    height: 14px;

    margin-left: 1px;
}

/* EPG */
.dtv-live-strip__epg {
    border-left: 1px solid rgba(255,255,255,.14);
    padding-left: 26px;
}

.dtv-live-strip__epg h5 {
    margin: 0 0 12px;

    color: rgba(255,255,255,.62);

    font-size: 12px;
    font-weight: var(--dtv-font-weight-black, 900);
    letter-spacing: .10em;
    text-transform: uppercase;
}

.dtv-live-strip__epg-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;

    padding: 7px 0;
}

.dtv-live-strip__epg-row.is-next {
    margin: 4px 0;
    padding: 9px 11px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--dtv-radius-md, 14px);

    background: rgba(255,255,255,.08);

    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.dtv-live-strip__time {
    color: #ff6b6b;

    font-size: 13px;
    font-weight: var(--dtv-font-weight-black, 900);
}

.dtv-live-strip__show {
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes dtvLivePulse {
    0%,
    100% {
        opacity: .70;
        transform: scale(.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.16);
    }
}

@keyframes dtvLiveRing {
    0% {
        opacity: .75;
        transform: scale(.76);
    }

    100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

/* Tablet */
@media (max-width: 1100px) {
    .dtv-live-strip {
        grid-template-columns: 1fr;
        gap: 22px;

        margin-top: -34px !important;
    }

    .dtv-live-strip__current {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .dtv-live-strip__epg {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.14);

        padding-left: 0;
        padding-top: 18px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .dtv-live-strip {
        gap: 20px;

        margin: -24px 0 58px !important;
        padding: 20px;

        border-radius: var(--dtv-radius-xl, 22px);
    }

    .dtv-live-strip__status {
        align-items: flex-start;
    }

    .dtv-live-strip__label {
        font-size: 22px;
    }

    .dtv-live-strip__current {
        grid-template-columns: 1fr;
    }

    .dtv-live-strip__thumb {
        height: 150px;
        border-radius: var(--dtv-radius-lg, 18px);
    }

    .dtv-live-strip__info h4 {
        font-size: 26px;
    }

    .dtv-live-strip__watch {
        width: 100%;
        min-height: 44px;
    }

    .dtv-live-strip__epg-row {
        grid-template-columns: 54px minmax(0, 1fr);
    }
}

/* ==========================================================
   CMS 1.4C.2 — Live Strip compact preview
========================================================== */

.dtv-live-strip__preview {
    display: block;
    color: inherit;
    text-decoration: none;
}

.dtv-live-strip__preview iframe,
.dtv-live-strip__preview video,
.dtv-live-strip__preview-frame,
.dtv-live-strip__preview-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    background: #050a14;
    pointer-events: none;
}

.dtv-live-strip__preview::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.10), transparent 34%),
        linear-gradient(to top, rgba(5,10,20,.72), rgba(5,10,20,.12) 55%, rgba(5,10,20,.26));
    pointer-events: none;
}

.dtv-live-strip__preview::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    pointer-events: none;
}

.dtv-live-strip__preview-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(204,0,0,.34), transparent 42%),
        linear-gradient(135deg, rgba(204,0,0,.92), rgba(0,102,204,.88)),
        #0f172a;
}

.dtv-live-strip__preview-play {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    color: #fff;
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px rgba(0,0,0,.24);
}

.dtv-live-strip__preview-fallback strong {
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dtv-live-strip__preview-fallback small {
    max-width: 86%;
    color: rgba(255,255,255,.74);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dtv-live-strip__preview-caption {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    max-width: calc(100% - 20px);
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(5,10,20,.66);
    color: rgba(255,255,255,.92);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(10px);
}

.dtv-live-strip__meta {
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

.dtv-live-strip__preview:hover,
.dtv-live-strip__preview:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 22px 52px rgba(0,0,0,.32);
}

.dtv-live-strip__preview:focus-visible {
    outline: 3px solid var(--dtv-color-secondary, #0066CC);
    outline-offset: 4px;
}

.dtv-live-strip__preview:hover .dtv-live-strip__preview-caption,
.dtv-live-strip__preview:focus-visible .dtv-live-strip__preview-caption {
    background: rgba(204,0,0,.86);
}

@media (max-width: 768px) {
    .dtv-live-strip__preview-caption {
        right: 12px;
        bottom: 12px;
        font-size: 11px;
    }

    .dtv-live-strip__preview-play {
        width: 52px;
        height: 52px;
    }
}


/* ==========================================================
   CMS 1.4C.3 — Live Strip UI tune
   - larger live preview card
   - no preview caption overlay
   - source moved under current program title
   - safer hover colors
   - updated upcoming copy / empty state
========================================================== */

.dtv-live-strip {
    grid-template-columns: 190px minmax(520px, 1fr) 390px;
    gap: 30px;
    padding: 24px 28px;
}

.dtv-live-strip__current {
    grid-template-columns: clamp(220px, 18vw, 280px) minmax(0, 1fr);
    gap: 22px;
}

.dtv-live-strip__thumb,
.dtv-live-strip__preview {
    min-height: 132px;
    height: 132px;
}

.dtv-live-strip__preview-caption {
    display: none !important;
}

.dtv-live-strip__source-name {
    margin-top: 8px !important;
    color: rgba(255,255,255,.78) !important;
    font-weight: 800 !important;
}

.dtv-live-strip__watch,
.dtv-live-strip__watch:visited,
.dtv-live-strip__watch:hover,
.dtv-live-strip__watch:focus,
.dtv-live-strip__watch:focus-visible,
.dtv-live-strip__watch:hover span,
.dtv-live-strip__watch:focus-visible span,
.dtv-live-strip__watch svg {
    color: #ffffff !important;
}

.dtv-live-strip__watch:hover,
.dtv-live-strip__watch:focus-visible {
    background: #b80000;
}

.dtv-live-strip__epg h5 {
    text-transform: none;
    letter-spacing: .02em;
    color: rgba(255,255,255,.74);
}

.dtv-live-strip__epg-row.is-empty {
    display: block;
    padding: 12px 0 0;
}

.dtv-live-strip__epg-row.is-empty .dtv-live-strip__show {
    color: rgba(255,255,255,.62);
    white-space: normal;
    font-weight: 700;
}

@media (max-width: 1200px) {
    .dtv-live-strip {
        grid-template-columns: 1fr;
    }

    .dtv-live-strip__current {
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .dtv-live-strip__current {
        grid-template-columns: 1fr;
    }

    .dtv-live-strip__thumb,
    .dtv-live-strip__preview {
        min-height: 190px;
        height: 190px;
    }
}


/* ==========================================================
   CMS 1.4C.4 — Live Strip empty live state
   When there is no active live program, the strip becomes an
   upcoming-only block and hides all live-now controls/preview.
========================================================== */

.dtv-live-strip--no-live {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 24px 28px;
}

.dtv-live-strip--no-live .dtv-live-strip__status,
.dtv-live-strip--no-live .dtv-live-strip__current,
.dtv-live-strip--no-live .dtv-live-strip__live-dot,
.dtv-live-strip--no-live .dtv-live-strip__label,
.dtv-live-strip--no-live .dtv-live-strip__watch,
.dtv-live-strip--no-live .dtv-live-strip__thumb,
.dtv-live-strip--no-live .dtv-live-strip__badge,
.dtv-live-strip--no-live .dtv-live-strip__info,
.dtv-live-strip--no-live .dtv-live-strip__meta,
.dtv-live-strip--no-live .dtv-live-strip__source-name {
    display: none !important;
}

.dtv-live-strip__epg--standalone {
    border-left: 0;
    padding-left: 0;
    width: 100%;
}

.dtv-live-strip__epg--standalone h5 {
    margin-bottom: 14px;
    color: #ffffff;
    font-family: var(--dtv-font-heading, Oswald, sans-serif);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: var(--dtv-font-weight-black, 900);
    line-height: 1.05;
}

.dtv-live-strip__epg--standalone .dtv-live-strip__epg-row {
    max-width: 720px;
}

.dtv-live-strip__epg--standalone .dtv-live-strip__epg-row.is-empty {
    max-width: none;
    padding-top: 4px;
}

.dtv-live-strip__epg--standalone .dtv-live-strip__epg-row.is-empty .dtv-live-strip__show {
    color: rgba(255,255,255,.68);
    font-size: 15px;
}

@media (max-width: 768px) {
    .dtv-live-strip--no-live {
        padding: 20px;
    }

    .dtv-live-strip__epg--standalone .dtv-live-strip__epg-row {
        max-width: none;
    }
}