/* ==========================================================
   DimosTV F2.0-R02.3 — Canonical Homepage Rail Presentation
   Authoritative presentation layer for the six automatic R02 rails.
   Data/state contracts remain owned by R02.2 and carousel.js.
========================================================== */

:is(
    .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
    .dtv-carousel-section[data-dtv-section-key="news"],
    .dtv-carousel-section[data-dtv-section-key="politics"],
    .dtv-carousel-section[data-dtv-section-key="backstage"],
    .dtv-carousel-section[data-dtv-section-key="shows"],
    .dtv-carousel-section[data-dtv-section-key="highlights"]
) {
    --dtv-rail-gap: 24px;
    --dtv-rail-inline-pad: 8px;
}

:is(
    .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
    .dtv-carousel-section[data-dtv-section-key="news"],
    .dtv-carousel-section[data-dtv-section-key="politics"],
    .dtv-carousel-section[data-dtv-section-key="backstage"],
    .dtv-carousel-section[data-dtv-section-key="shows"],
    .dtv-carousel-section[data-dtv-section-key="highlights"]
) .dtv-carousel-shell {
    position: relative;
    width: 100%;
    min-width: 0;
}

:is(
    .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
    .dtv-carousel-section[data-dtv-section-key="news"],
    .dtv-carousel-section[data-dtv-section-key="politics"],
    .dtv-carousel-section[data-dtv-section-key="backstage"],
    .dtv-carousel-section[data-dtv-section-key="shows"],
    .dtv-carousel-section[data-dtv-section-key="highlights"]
) .dtv-carousel-row {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: var(--dtv-rail-gap) !important;
    padding: 10px var(--dtv-rail-inline-pad) 28px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--dtv-rail-inline-pad);
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

:is(
    .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
    .dtv-carousel-section[data-dtv-section-key="news"],
    .dtv-carousel-section[data-dtv-section-key="politics"],
    .dtv-carousel-section[data-dtv-section-key="backstage"],
    .dtv-carousel-section[data-dtv-section-key="shows"],
    .dtv-carousel-section[data-dtv-section-key="highlights"]
) .dtv-carousel-row::-webkit-scrollbar {
    display: none;
}

:is(
    .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
    .dtv-carousel-section[data-dtv-section-key="news"],
    .dtv-carousel-section[data-dtv-section-key="politics"],
    .dtv-carousel-section[data-dtv-section-key="backstage"],
    .dtv-carousel-section[data-dtv-section-key="shows"],
    .dtv-carousel-section[data-dtv-section-key="highlights"]
) .dtv-carousel-row > .dtv-video-card {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    scroll-snap-align: start;
}

/* Wide desktop: four short cards or three landscape cards. */
@media (min-width: 1200px) {
    :is(
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) .dtv-video-card--short {
        flex-basis: calc((100% - 72px) / 4) !important;
        width: calc((100% - 72px) / 4) !important;
        max-width: none !important;
    }

    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="shows"]
    ) .dtv-video-card--landscape {
        flex-basis: calc((100% - 48px) / 3) !important;
        width: calc((100% - 48px) / 3) !important;
        max-width: none !important;
    }
}

/* Compact desktop: three short cards or two landscape cards. */
@media (min-width: 900px) and (max-width: 1199px) {
    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="shows"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) {
        --dtv-rail-gap: 20px;
    }

    :is(
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) .dtv-video-card--short {
        flex-basis: calc((100% - 40px) / 3) !important;
        width: calc((100% - 40px) / 3) !important;
        max-width: none !important;
    }

    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="shows"]
    ) .dtv-video-card--landscape {
        flex-basis: calc((100% - 20px) / 2) !important;
        width: calc((100% - 20px) / 2) !important;
        max-width: none !important;
    }
}

/* Tablet: explicit two-card short rhythm; landscape remains intentionally wider. */
@media (min-width: 769px) and (max-width: 899px) {
    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="shows"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) {
        --dtv-rail-gap: 20px;
    }

    :is(
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) .dtv-video-card--short {
        flex-basis: calc((100% - 20px) / 2) !important;
        width: calc((100% - 20px) / 2) !important;
        max-width: none !important;
    }

    /* Councils: size against the rail viewport, not the browser viewport.
       Keep the first landscape card fully visible while preserving a
       deliberate continuation cue for the next item. */
    .dtv-carousel-section[data-dtv-section-key="municipal-councils"] .dtv-video-card--landscape {
        flex-basis: calc(100% - 44px) !important;
        width: calc(100% - 44px) !important;
        max-width: none !important;
    }

    /* Shows retain the established tablet landscape geometry. */
    .dtv-carousel-section[data-dtv-section-key="shows"] .dtv-video-card--landscape {
        flex-basis: min(72vw, 620px) !important;
        width: min(72vw, 620px) !important;
        max-width: none !important;
    }
}

/* Mobile: native swipe, one readable card with a visible next-card cue. */
@media (max-width: 768px) {
    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="shows"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) {
        --dtv-rail-gap: 14px;
        --dtv-rail-inline-pad: 18px;
    }

    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="shows"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) .dtv-carousel-shell {
        padding: 0 0 8px !important;
        overflow: hidden !important;
    }

    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="shows"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) .dtv-carousel-shell::before,
    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="shows"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) .dtv-carousel-shell::after {
        content: none !important;
        display: none !important;
    }

    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="shows"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) .dtv-carousel-row {
        padding: 8px 18px 18px !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    :is(
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) .dtv-video-card--short {
        flex-basis: min(82vw, 360px) !important;
        width: min(82vw, 360px) !important;
        max-width: min(82vw, 360px) !important;
    }

    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="shows"]
    ) .dtv-video-card--landscape {
        flex-basis: min(84vw, 520px) !important;
        width: min(84vw, 520px) !important;
        max-width: min(84vw, 520px) !important;
    }

    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="shows"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) .dtv-carousel-arrow {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="shows"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) .dtv-carousel-progress {
        height: 3px !important;
        margin: 0 18px !important;
    }
}

/* Shows: retain the established single-item exception without implying more content. */
.dtv-carousel-section[data-dtv-section-key="shows"][data-dtv-item-count="1"] .dtv-video-card--landscape {
    flex-basis: min(760px, 100%) !important;
    width: min(760px, 100%) !important;
    max-width: 760px !important;
}

.dtv-carousel-section[data-dtv-section-key="shows"][data-dtv-item-count="1"] .dtv-carousel-arrow,
.dtv-carousel-section[data-dtv-section-key="shows"][data-dtv-item-count="1"] .dtv-carousel-progress {
    display: none !important;
}

@media (max-width: 768px) {
    .dtv-carousel-section[data-dtv-section-key="shows"][data-dtv-item-count="1"] .dtv-video-card--landscape {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        .dtv-carousel-section[data-dtv-section-key="municipal-councils"],
        .dtv-carousel-section[data-dtv-section-key="news"],
        .dtv-carousel-section[data-dtv-section-key="politics"],
        .dtv-carousel-section[data-dtv-section-key="backstage"],
        .dtv-carousel-section[data-dtv-section-key="shows"],
        .dtv-carousel-section[data-dtv-section-key="highlights"]
    ) .dtv-carousel-row {
        scroll-behavior: auto !important;
    }
}

/* F2.0-R02.3 Correction 02 — Tablet Municipal Councils full-card geometry.
   The rail itself owns the inline padding inside its declared 100% width;
   the councils card then fills that content box exactly. This removes the
   right-edge crop while keeping the existing card design and controls. */
@media (min-width: 769px) and (max-width: 899px) {
    .dtv-carousel-section[data-dtv-section-key="municipal-councils"] .dtv-carousel-row {
        box-sizing: border-box !important;
    }

    .dtv-carousel-section[data-dtv-section-key="municipal-councils"] .dtv-video-card--landscape {
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* F2.0-R02.3 Correction 04 — selector contract alignment.
   HomepageConfig emits data-dtv-section-key="municipal-councils".
   Previous R02.3 rules incorrectly targeted "councils" and therefore never
   matched the rendered Municipal Councils rail. */