/* === WATCH PAGE CSS === */

.video-wrap {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}
.video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lede {
    font-size: 1.06em;
    color: #333;
    margin: .6rem 0 1.2rem;
}

/* shared box style */
.ai-overview, .transcript {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 1rem;
    background: #fafafa;
}
.ai-overview h2, .transcript h2 {
    margin-top: 0;
}

details {
    margin-top: .5rem;
}
details > summary {
    cursor: pointer;
    font-weight: 600;
}

.hero-subtitle {
    color: #444;
    margin: .2rem 0 .8rem;
    font-size: 1.05em;
}

/* optional but kept for template consistency */
.grid-2-div {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 18px;
}
@media (max-width: 768px) {
    .grid-2-div {
        grid-template-columns: 1fr;
    }
}

/* === TRANSCRIPT EXPAND/COLLAPSE === */

.transcript h2 {
    margin: 0 0 .5rem 0;
}

/* Container that controls clamp behavior */
.transcript-frame {
    --lh: 1.6;
    --lines: 10;
    line-height: var(--lh);
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}

/* collapsed: initial state */
.transcript-frame.is-clamped {
    max-height: calc(var(--lh) * var(--lines) * 1em);
}

/* expanded: scrolling state */
.transcript-frame.is-scrolling {
    max-height: 50vh;
    overflow: auto;
}

/* fade-out overlay for collapsed mode */
.transcript-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3rem;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
}
.transcript-frame.is-scrolling .transcript-fade {
    display: none;
}

.transcript-more {
    margin-top: .6rem;
    padding: .5rem .8rem;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font: inherit;
}

.transcript-more:hover {
    background: #f3f6ff;
}