/* ==========================================================================
   Homepage video section (school.php) — dark, admin-managed video playlist.

   One featured "stage" player plus a list of the other videos beside it.
   Everything is namespaced `tv-` (TopTech Video) so nothing here can collide
   with the theme's main.css. Loaded only by school.php.

   YouTube videos are lazy: the stage shows a poster until the visitor presses
   play, then the iframe is created. No third-party JS is loaded on page view.
   ========================================================================== */

.tv-sec {
    --tv-ink: #ffffff;
    --tv-muted: rgba(226, 235, 255, 0.68);
    --tv-line: rgba(255, 255, 255, 0.14);
    --tv-glass: rgba(255, 255, 255, 0.055);
    --tv-glass-hi: rgba(255, 255, 255, 0.1);
    --tv-accent: #f2a227;
    --tv-accent-2: #22a3d1;
    --tv-radius: 20px;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 110px 0 115px;
    background-color: #0b1730;
    color: var(--tv-ink);
}

/* Photo backdrop, kept faint so text stays readable and the panel reads dark. */
.tv-sec::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("/assets/public/video-bg.png");
    background-size: cover;
    background-position: center;
    opacity: 0.34;
    filter: grayscale(0.3);
}

/* Navy wash + two brand-coloured glows for depth. */
.tv-sec::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 520px at 78% 12%, rgba(34, 163, 209, 0.28), transparent 62%),
        radial-gradient(720px 480px at 6% 88%, rgba(242, 162, 39, 0.16), transparent 60%),
        linear-gradient(168deg, rgba(9, 20, 44, 0.92) 0%, rgba(16, 33, 70, 0.86) 46%, rgba(8, 18, 40, 0.95) 100%);
}

/* ------------------------------ section head ---------------------------- */
.tv-head {
    max-width: 760px;
    margin: 0 0 54px;
}

.tv-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 12px;
    border: 1px solid var(--tv-line);
    border-radius: 999px;
    background: var(--tv-glass);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.tv-kicker img {
    width: 16px;
    height: auto;
}

.tv-title {
    color: var(--tv-ink);
    font-size: 54px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 18px;
}

.tv-title em {
    font-style: normal;
    color: var(--tv-accent);
}

.tv-lead {
    color: var(--tv-muted);
    font-size: 17px;
    line-height: 1.72;
    margin: 0;
    max-width: 62ch;
}

/* ------------------------------- layout --------------------------------- */
.tv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: 26px;
    align-items: stretch;
}

/* Single video: the stage takes the full width, no playlist rail. */
.tv-grid.is-solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 980px;
}

/* -------------------------------- stage --------------------------------- */
.tv-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--tv-radius);
    overflow: hidden;
    border: 1px solid var(--tv-line);
    background: linear-gradient(135deg, #22345c, #0f1c39);
    box-shadow: 0 34px 70px rgba(3, 9, 24, 0.55);
}

/* Older browsers without aspect-ratio still get a 16:9 box. */
@supports not (aspect-ratio: 16 / 9) {
    .tv-stage { height: 0; padding-bottom: 56.25%; }
}

.tv-stage-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.tv-stage:hover .tv-stage-poster {
    transform: scale(1.035);
}

.tv-stage-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(6, 14, 32, 0.9) 0%, rgba(6, 14, 32, 0.18) 46%, rgba(6, 14, 32, 0.34) 100%);
}

/* The whole poster is the play control. */
.tv-stage-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.tv-play {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--tv-accent);
    color: #12203f;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 34px rgba(242, 162, 39, 0.42);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease;
}

.tv-play svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
    margin-left: 4px;
}

/* Two staggered rings, the theme's own "pulsing play button" idiom. */
.tv-play::before,
.tv-play::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    animation: tvPulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.tv-play::after {
    animation-delay: 1.3s;
}

@keyframes tvPulse {
    0%   { transform: scale(1);    opacity: 0.75; }
    100% { transform: scale(1.75); opacity: 0; }
}

.tv-stage-btn:hover .tv-play,
.tv-stage-btn:focus-visible .tv-play {
    transform: scale(1.07);
    background: #ffb340;
}

.tv-stage-btn:focus-visible {
    outline: 2px solid var(--tv-accent);
    outline-offset: -6px;
}

/* Caption sitting on the poster. */
.tv-stage-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    pointer-events: none;
}

.tv-stage-cap h3 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.tv-stage-cap p {
    color: rgba(233, 240, 255, 0.78);
    font-size: 15px;
    line-height: 1.55;
    margin: 8px 0 0;
    max-width: 56ch;
}

.tv-chip {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(9, 18, 40, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.tv-stage-dur {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(9, 18, 40, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Once playing, the poster layers are swapped out for the real player. */
.tv-stage-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.tv-stage.is-playing .tv-stage-veil,
.tv-stage.is-playing .tv-stage-btn,
.tv-stage.is-playing .tv-stage-cap,
.tv-stage.is-playing .tv-stage-poster {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}

/* ------------------------------- playlist -------------------------------- */
.tv-rail {
    border: 1px solid var(--tv-line);
    border-radius: var(--tv-radius);
    background: rgba(10, 21, 46, 0.5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.tv-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 4px 0;
}

.tv-rail-head h4 {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.tv-rail-head span {
    color: var(--tv-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.tv-list {
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* flex-basis 0 + min-height 0 keeps the list from driving the row height,
       so the rail ends level with the stage and scrolls inside instead. */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}

.tv-list::-webkit-scrollbar { width: 6px; }
.tv-list::-webkit-scrollbar-track { background: transparent; }
.tv-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
}

.tv-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--tv-glass);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.tv-item:hover {
    background: var(--tv-glass-hi);
    border-color: var(--tv-line);
    transform: translateX(3px);
}

.tv-item:focus-visible {
    outline: 2px solid var(--tv-accent);
    outline-offset: 2px;
}

.tv-item.is-active {
    background: rgba(242, 162, 39, 0.14);
    border-color: rgba(242, 162, 39, 0.5);
}

.tv-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 112px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #2b3f68, #16264a);
    display: grid;
    place-items: center;
}

.tv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Small play glyph over each thumbnail; turns amber on the active row. */
.tv-thumb::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(10, 20, 42, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 55% 50% / 13px 13px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    transition: background-color 0.25s ease;
}

.tv-item.is-active .tv-thumb::after {
    background-color: var(--tv-accent);
}

.tv-dur {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 2;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(6, 13, 30, 0.86);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

.tv-meta {
    min-width: 0;
}

.tv-meta b {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    /* Two lines then ellipsis, so long titles never break the row height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tv-meta small {
    display: block;
    margin-top: 3px;
    color: var(--tv-muted);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --------------------------------- cta ---------------------------------- */
.tv-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
    margin-top: 44px;
}

.tv-cta-note {
    color: var(--tv-muted);
    font-size: 15px;
    margin: 0;
}

/* --------------------------- entrance animation -------------------------- */
/* The `tv-anim` class is added by JS, so without JS everything is visible. */
.tv-anim .tv-reveal {
    opacity: 0;
    transform: translateY(18px);
}

.tv-anim .tv-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--d, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
    .tv-anim .tv-reveal { opacity: 1; transform: none; }
    .tv-play::before,
    .tv-play::after { animation: none; }
    .tv-stage:hover .tv-stage-poster { transform: none; }
    .tv-item:hover { transform: none; }
}

/* ------------------------------ responsive ------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tv-title { font-size: 46px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tv-title { font-size: 40px; }
    .tv-grid { gap: 20px; }
    .tv-thumb { width: 96px; }
}

/* Tablet and below: the rail becomes a horizontal, snapping strip. */
@media (max-width: 991px) {
    .tv-sec { padding: 90px 0 95px; }
    .tv-head { margin-bottom: 40px; }
    .tv-title { font-size: 38px; }

    .tv-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    .tv-list {
        flex: 0 0 auto;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .tv-list::-webkit-scrollbar { height: 6px; }

    .tv-item {
        flex: 0 0 auto;
        width: 264px;
        scroll-snap-align: start;
    }

    .tv-item:hover { transform: none; }
    .tv-stage-cap { padding: 20px; }
    .tv-stage-cap h3 { font-size: 20px; }
    .tv-stage-cap p { display: none; }
}

@media (max-width: 575px) {
    .tv-sec { padding: 72px 0 78px; }
    .tv-title { font-size: 30px; }
    .tv-lead { font-size: 15.5px; }
    .tv-kicker { font-size: 12px; }

    .tv-play { width: 66px; height: 66px; }
    .tv-play svg { width: 22px; height: 22px; }

    .tv-stage-cap { padding: 16px; }
    .tv-stage-cap h3 { font-size: 17px; }
    .tv-chip { margin-bottom: 8px; font-size: 11px; }

    .tv-rail { padding: 14px; border-radius: 16px; }
    .tv-item { width: 230px; }
    .tv-thumb { width: 92px; }
    .tv-meta b { font-size: 14px; }
    .tv-cta { margin-top: 32px; }
}