/* Single video template.
 *
 * Tokens and the shared components (.kf-btn, .kf-pcard, .kf-ctaband) come from kf-about.css,
 * which is enqueued as a dependency. Only what is specific to this page is here.
 */

.kf-sec.kf-video { --kf-v-measure: min(1200px, 100% - 80px); }
.kf-sec.kf-video { padding-top: 72px; padding-bottom: 72px; }
.kf-sec.kf-video.kf-video--flush { padding-top: 0; padding-bottom: 0; }
.kf-sec.kf-video.kf-video--wash  { background: var(--kf-paper); }
.kf-sec.kf-video.kf-video--dark  { background: #0E0F10; }

.kf-video [class$="__eyebrow"] {
    display: block; font-family: var(--kf-body); font-size: 10px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--kf-mute);
}

/* ------------------------------------------------------------------ player */
.kf-vhero__inner { max-width: var(--kf-v-measure); margin: 0 auto; padding: 40px 0 56px; }
.kf-vhero__back { display: inline-block; font-size: 12px; font-weight: 500; color: var(--kf-on-dark); text-decoration: none; }
.kf-vhero__back:hover { color: var(--kf-yellow); }

.kf-vhero__player {
    position: relative;
    margin-top: 30px;
    aspect-ratio: 16 / 9;
    background: var(--kf-ink-2);
    border-radius: var(--kf-card-radius);
    overflow: hidden;
}
.kf-vhero__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.kf-vhero__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The button is the whole frame, so the target is the video rather than a 76px circle. */
.kf-vhero__play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: transparent; border: 0; cursor: pointer;
}
.kf-vhero__playicon {
    display: block; width: 76px; height: 76px; border-radius: 50%;
    background: var(--kf-yellow); position: relative;
    transition: transform .15s ease-out;
}
.kf-vhero__playicon::after {
    content: ""; position: absolute; left: 31px; top: 24px;
    border-left: 20px solid var(--kf-ink);
    border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
.kf-vhero__play:hover .kf-vhero__playicon { transform: scale(1.06); }
.kf-vhero__play:focus-visible { outline: 3px solid var(--kf-yellow); outline-offset: -3px; }
.kf-vhero__player.is-playing .kf-vhero__play,
.kf-vhero__player.is-playing .kf-vhero__poster { display: none; }

/* ------------------------------------------------------------------ title and details */
.kf-vintro { max-width: var(--kf-v-measure); margin: 0 auto; }
.kf-vintro__title {
    font-family: var(--kf-display); font-weight: 700;
    font-size: clamp(28px, 3vw, 42px); line-height: 1.16;
    color: var(--kf-ink); margin: 14px 0 0; max-width: 1000px; text-wrap: balance;
}
.kf-vintro__meta { font-size: 13px; color: var(--kf-mute); margin: 18px 0 0; }
.kf-vintro__head { position: relative; }
.kf-vintro__share { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px; margin: 0; }
.kf-vintro__sharelabel { font-size: 12px; font-weight: 500; color: var(--kf-mute); }
.kf-vintro__sharelink { font-size: 12px; font-weight: 500; color: var(--kf-ink); text-decoration: none; }
.kf-vintro__sharelink:hover { text-decoration: underline; }

.kf-vintro__body {
    display: grid;
    grid-template-columns: minmax(0, 700fr) minmax(0, 420fr);
    gap: 80px;
    margin-top: 44px;
    padding-top: 44px;
    border-top: 1px solid var(--kf-line);
}
.kf-vintro__subhead { font-family: var(--kf-display); font-weight: 700; font-size: 24px; margin: 0; color: var(--kf-ink); }
.kf-vintro__text { font-size: 16px; line-height: 27px; color: var(--kf-ink-3); margin: 18px 0 0; }

/* A description list, not a row of chips: these are facts about the video, and half of them are
   links to more of the same. */
.kf-vintro__dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 0; margin: 20px 0 0; }
.kf-vintro__dl dt { font-size: 12px; color: var(--kf-mute); padding: 11px 0; border-top: 1px solid var(--kf-line); }
.kf-vintro__dl dd { font-size: 13px; font-weight: 500; color: var(--kf-ink); margin: 0; padding: 11px 0; border-top: 1px solid var(--kf-line); }
.kf-vintro__dl dt:first-of-type, .kf-vintro__dl dd:first-of-type { border-top: 0; }
.kf-vintro__dl a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--kf-line-dark); }
.kf-vintro__dl a:hover { border-bottom-color: var(--kf-yellow); }

/* ------------------------------------------------------------------ fixtures */
.kf-vprod { max-width: var(--kf-v-measure); margin: 0 auto; }
.kf-vprod__head, .kf-vrel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.kf-vprod__title, .kf-vrel__title {
    font-family: var(--kf-display); font-weight: 700; font-size: 32px; line-height: 1.1;
    color: var(--kf-ink); margin: 8px 0 0;
}
.kf-vprod__all, .kf-vrel__all { font-size: 12px; font-weight: 500; color: var(--kf-ink); text-decoration: none; white-space: nowrap; }
.kf-vprod__all:hover, .kf-vrel__all:hover { text-decoration: underline; }
.kf-vprod__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: 44px; }

/* ------------------------------------------------------------------ keep watching */
.kf-vrel { max-width: var(--kf-v-measure); margin: 0 auto; }
.kf-vrel__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.kf-vrel__card { display: block; text-decoration: none; color: inherit; }
.kf-vrel__media {
    position: relative; display: block; aspect-ratio: 16 / 9;
    background: var(--kf-paper); border-radius: var(--kf-card-radius); overflow: hidden;
}
.kf-vrel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kf-vrel__play {
    position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border-radius: 50%; background: var(--kf-yellow);
}
.kf-vrel__play::after {
    content: ""; position: absolute; left: 16px; top: 12px;
    border-left: 12px solid var(--kf-ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.kf-vrel__name { display: block; font-family: var(--kf-display); font-weight: 700; font-size: 17px; line-height: 23px; margin-top: 16px; }
.kf-vrel__card:hover .kf-vrel__name { color: var(--kf-ink-2); text-decoration: underline; }
.kf-vrel__meta { display: block; font-size: 9px; font-weight: 500; letter-spacing: .08em; color: var(--kf-mute); margin-top: 10px; }

/* ------------------------------------------------------------------ reflow */
@media (max-width: 1199px) {
    .kf-vprod__grid, .kf-vrel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kf-vintro__body { gap: 48px; }
}
@media (max-width: 959px) {
    .kf-vintro__body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .kf-vintro__share { position: static; margin-top: 20px; }
    .kf-vprod__grid, .kf-vrel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kf-vhero__playicon { width: 60px; height: 60px; }
    .kf-vhero__playicon::after { left: 25px; top: 19px; border-left-width: 16px; border-top-width: 11px; border-bottom-width: 11px; }
}
@media (max-width: 639px) {
    .kf-vprod__grid, .kf-vrel__grid { grid-template-columns: minmax(0, 1fr); }
    .kf-vintro__dl { grid-template-columns: 100px minmax(0, 1fr); }
}

/* An element that has nothing to show returns before it renders anything, but the section wrapper
   around it still exists — on a video with no series that left a 144px band of empty grey between
   the summary and Keep watching. Collapse any of these bands whose element produced no output. */
.kf-sec.kf-video:not(:has(.kf-vhero)):not(:has(.kf-vintro)):not(:has(.kf-vprod)):not(:has(.kf-vrel)):not(:has(.kf-ctaband)) {
    display: none;
}