/* KPT Production — Single Video Page Styles */

.kpt-video-hero {
    background: var(--kpt-bg-secondary);
    border-radius: var(--kpt-radius-md);
    overflow: hidden;
    margin-bottom: var(--kpt-space-lg);
}

.kpt-video-hero__trigger {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}
.kpt-video-hero__trigger .kpt-video-card__thumb {
    border-radius: var(--kpt-radius-md);
    border-bottom: 0;
}
.kpt-video-hero__trigger .kpt-video-card__play {
    opacity: 1;
}
.kpt-video-hero__trigger:focus-visible {
    outline: 2px solid var(--kpt-gold);
    outline-offset: 4px;
}

.kpt-video-info { padding-block: var(--kpt-space-lg); }
.kpt-video-info__title {
    font-size: var(--kpt-text-xl);
    font-weight: var(--kpt-weight-bold);
    margin-bottom: var(--kpt-space-sm);
}
.kpt-video-info__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--kpt-space-sm);
    padding-bottom: var(--kpt-space-md);
    border-bottom: 1px solid var(--kpt-border-subtle);
    margin-bottom: var(--kpt-space-md);
}
.kpt-video-info__stats {
    font-size: var(--kpt-text-sm);
    color: var(--kpt-text-muted);
}
.kpt-video-info__actions { display: flex; gap: var(--kpt-space-xs); }

.kpt-video-info__desc {
    background: var(--kpt-surface);
    border-radius: var(--kpt-radius-sm);
    padding: var(--kpt-space-md);
    font-size: var(--kpt-text-sm);
    line-height: var(--kpt-leading-relaxed);
    color: var(--kpt-text-secondary);
}

.kpt-related-videos { margin-top: var(--kpt-space-xl); }

.kpt-live-now-banner {
    display: flex;
    align-items: center;
    gap: var(--kpt-space-sm);
    background: var(--kpt-surface-elevated);
    border: 1px solid rgba(229,62,62,0.4);
    border-radius: var(--kpt-radius-sm);
    padding: var(--kpt-space-sm) var(--kpt-space-md);
    margin-bottom: var(--kpt-space-md);
}

/* ============================================================
   MORE / LESS DESCRIPTION (spec §14-15)
   Full content stays in the DOM for SEO at all times; only the
   VISIBLE height is collapsed via max-height + fade mask.
   ============================================================ */
.kpt-more-less__content {
    max-height: 4.8em; /* ~3 lines at relaxed line-height */
    overflow: hidden;
    position: relative;
    transition: max-height var(--kpt-transition-slow);
}
.kpt-more-less:not(.is-expanded) .kpt-more-less__content::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2.4em;
    background: linear-gradient(to bottom, transparent, var(--kpt-surface));
    pointer-events: none;
}
.kpt-more-less.is-expanded .kpt-more-less__content {
    max-height: 2000px;
}
.kpt-more-less__toggle {
    margin-top: var(--kpt-space-xs);
    font-size: var(--kpt-text-sm);
    font-weight: var(--kpt-weight-semibold);
    color: var(--kpt-gold);
}
.kpt-more-less__toggle:hover { color: var(--kpt-gold-light); }

/* ============================================================
   UPCOMING VIDEO HERO (spec §35 — never a false play button)
   ============================================================ */
.kpt-video-hero--upcoming {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--kpt-radius-md);
    overflow: hidden;
}
.kpt-video-hero--upcoming img {
    width: 100%; height: 100%; object-fit: cover;
}
.kpt-video-hero__upcoming-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--kpt-space-xs);
    padding: var(--kpt-space-md);
}
.kpt-video-hero__schedule {
    color: #fff;
    font-size: var(--kpt-text-md);
    font-weight: var(--kpt-weight-semibold);
}

/* ============================================================
   ERROR HERO (spec §53, §99)
   ============================================================ */
.kpt-video-hero--error {
    aspect-ratio: 16/9;
    background: var(--kpt-surface);
    border-radius: var(--kpt-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   NATIVE HTML5 PLAYER (External source — spec §79-80)
   ============================================================ */
.kpt-video-native {
    display: block;
    object-fit: contain;
    background: #000;
}

/* ============================================================
   PLAYER CONTAINMENT FIX
   The click-to-load hero is a stable 16:9 box (position:relative
   + aspect-ratio). The injected iframe/video is absolutely
   positioned INSIDE it, so the player can never expand to the
   viewport, never covers the header/footer/comments and never
   creates a duplicate fullscreen layer.
   ============================================================ */
.kpt-video-hero[data-kpt-embed] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--kpt-bg-tertiary);
}
.kpt-video-hero[data-kpt-embed] > iframe,
.kpt-video-hero[data-kpt-embed] > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.kpt-video-hero[data-kpt-embed] > .kpt-skeleton {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================
   NEWS ARTICLE — featured image keeps its ORIGINAL aspect ratio
   (never stretched / never force-cropped on the article page)
   ============================================================ */
.kpt-news-featured-image {
    width: 100%;
    margin: 0 0 var(--kpt-space-lg);
    overflow: hidden;
    border-radius: var(--kpt-radius-md);
    background: var(--kpt-surface);
}
.kpt-news-featured-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   NEWS ARTICLE — optional YouTube video at the bottom
   Responsive 16:9 embed, position inside its own box only.
   ============================================================ */
.kpt-news-youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    border-radius: var(--kpt-radius-md);
    background: #000;
    margin: 0 0 var(--kpt-space-lg);
}
.kpt-news-youtube iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Compact action row at the end of single articles */
.kpt-article-actions {
    display: flex;
    align-items: center;
    gap: var(--kpt-space-xs);
    margin-top: var(--kpt-space-md);
}