/* =========================================================
   คลัง Video — dark "streaming" layout: hero clip, rows of
   clips that scroll sideways, and one player window.
   Loaded only on page-templates/template-videos.php.
   ========================================================= */

.tk-vl{
  --vl-bg:#0B0D12;
  --vl-surface:#151922;
  --vl-line:rgba(255,255,255,.1);
  --vl-text:#F1F5F9;
  --vl-soft:#CBD5E1;
  --vl-muted:#94A3B8;
  --vl-gap:clamp(8px,.9vw,12px);
  --vl-n:2.15;
  /* The page's left edge lines up with .container. Left unresolved on
     purpose: the % resolves where it is used, against a full-width box. */
  --vl-inset:max(var(--gutter),calc((100% - var(--container)) / 2));
  background:var(--vl-bg);
  color:var(--vl-text);
  padding-bottom:clamp(40px,6vw,72px);
}
@media(min-width:600px){.tk-vl{--vl-n:3.2}}
@media(min-width:960px){.tk-vl{--vl-n:4.25}}
@media(min-width:1440px){.tk-vl{--vl-n:5.25}}

.tk-vl-ico{width:1em;height:1em;flex:none;display:block}
.tk-vl-dot{color:var(--vl-muted)}

/* ---------------------------------------------------------------- buttons */
.tk-vl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border-radius:6px;font-size:1rem;font-weight:600;line-height:1;transition:background-color .2s,transform .2s}
.tk-vl-btn .tk-vl-ico{width:22px;height:22px}
.tk-vl-btn:active{transform:scale(.97)}
.tk-vl-btn--light{background:#FFFFFF;color:#0B0D12}
.tk-vl-btn--light:hover{background:rgba(255,255,255,.8)}
.tk-vl-btn--glass{background:rgba(109,109,110,.7);color:#FFFFFF}
.tk-vl-btn--glass:hover{background:rgba(109,109,110,.45)}
.tk-vl-btn:focus-visible,.tk-vl-round:focus-visible,.tk-vl-chip:focus-visible,.tk-vl-next:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}

.tk-vl-round{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(11,13,18,.35);color:#FFFFFF;transition:background-color .2s,border-color .2s}
.tk-vl-round:hover{background:rgba(255,255,255,.14);border-color:#FFFFFF}
.tk-vl-round .tk-vl-ico{width:20px;height:20px}
.tk-vl-round--sm{width:40px;height:40px;border-color:rgba(255,255,255,.3);background:rgba(11,13,18,.6)}

.tk-vl-tag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:4px;background:var(--color-primary);color:#FFFFFF;font-size:.72rem;font-weight:600;line-height:1.6}

/* ------------------------------------------------------------------- hero */
.tk-vl-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(460px,74vh,780px);overflow:hidden;isolation:isolate}
.tk-vl-hero__media{position:absolute;inset:0;z-index:-2;background:#000}
.tk-vl-hero__img,.tk-vl-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tk-vl-hero__img{transition:opacity .6s ease}
.tk-vl-hero__img--blank{background:radial-gradient(circle at 70% 40%,color-mix(in srgb,var(--color-primary) 45%,#000) 0%,#0B0D12 70%)}
.tk-vl-hero__video{opacity:0;transition:opacity .9s ease}
.tk-vl-hero.is-previewing .tk-vl-hero__video{opacity:1}
.tk-vl-hero__yt{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .9s ease}
.tk-vl-hero.is-previewing .tk-vl-hero__yt{opacity:1}
.tk-vl-hero__yt iframe{position:absolute;top:50%;left:50%;border:0;transform:translate(-50%,-50%)}
.tk-vl-hero.is-switching .tk-vl-hero__img{opacity:.25}
.tk-vl-hero__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,13,18,.94) 0%,rgba(11,13,18,.62) 34%,rgba(11,13,18,.08) 66%,rgba(11,13,18,0) 100%),
    linear-gradient(0deg,var(--vl-bg) 0%,rgba(11,13,18,.55) 18%,rgba(11,13,18,0) 42%);}
.tk-vl-hero__body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end;padding-block:clamp(56px,8vw,96px) clamp(40px,6vw,72px)}
.tk-vl-hero__eyebrow,.tk-vl-hero__copy,.tk-vl-hero__actions{grid-column:1}
.tk-vl-hero__eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--vl-soft);font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.tk-vl-hero__mark{width:5px;height:20px;border-radius:2px;background:var(--color-primary)}
.tk-vl-hero__copy{max-width:min(660px,100%);transition:opacity .35s ease}
.tk-vl-hero.is-switching .tk-vl-hero__copy{opacity:0}
.tk-vl-hero__title{color:#FFFFFF;font-size:clamp(1.75rem,4vw,3.3rem);font-weight:700;line-height:1.22;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.tk-vl-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;color:var(--vl-soft);font-size:.92rem}
.tk-vl-hero__meta:empty{display:none}
.tk-vl-hero__summary{max-width:560px;margin-top:14px;color:#E2E8F0;font-size:clamp(.92rem,1.1vw,1.05rem);line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.tk-vl-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.tk-vl-hero__side{grid-column:2;grid-row:1 / span 3;align-self:end;display:flex;align-items:center;gap:14px}
.tk-vl-hero__dots{display:flex;align-items:center;gap:4px}
.tk-vl-hero__dot{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:6px}
.tk-vl-hero__dot span{display:block;width:16px;height:4px;border-radius:2px;background:rgba(255,255,255,.4);transition:width .3s var(--ease),background-color .3s}
.tk-vl-hero__dot:hover span{background:rgba(255,255,255,.75)}
.tk-vl-hero__dot.is-active span{width:28px;background:#FFFFFF}
.tk-vl-hero__dot:focus-visible{outline:2px solid #FFFFFF;outline-offset:0}

/* --------------------------------------------------------------- category chips */
.tk-vl-jump{position:relative;z-index:1;margin-bottom:clamp(8px,1.5vw,16px)}
.tk-vl-jump__inner{display:flex;gap:8px;overflow-x:auto;padding:4px var(--vl-inset) 8px;scrollbar-width:none}
.tk-vl-jump__inner::-webkit-scrollbar{display:none}
.tk-vl-chip{flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#E2E8F0;font-size:.88rem;line-height:1.4;transition:background-color .2s,border-color .2s}
.tk-vl-chip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.42)}
.tk-vl-chip__n{color:var(--vl-muted);font-size:.74rem}

/* ------------------------------------------------------------------- rows */
.tk-vl-rows{display:grid;gap:clamp(20px,3vw,40px)}
.tk-vl-row{scroll-margin-top:90px}
.tk-vl-row__head{display:flex;align-items:baseline;gap:12px;padding-inline:var(--vl-inset)}
.tk-vl-row__title{color:#F8FAFC;font-size:clamp(1.05rem,1.6vw,1.4rem);font-weight:600;line-height:1.4}
.tk-vl-row__count{color:var(--vl-muted);font-size:.8rem}
.tk-vl-row__viewport{position:relative}
.tk-vl-row__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--vl-n) - 1) * var(--vl-gap)) / var(--vl-n));gap:var(--vl-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--vl-inset);padding:12px var(--vl-inset) 22px;scrollbar-width:none}
.tk-vl-row__track::-webkit-scrollbar{display:none}
.tk-vl-row__cell{scroll-snap-align:start;min-width:0}
.tk-vl-row__nav{position:absolute;top:12px;bottom:22px;z-index:4;display:flex;align-items:center;justify-content:center;width:48px;color:#FFFFFF;background:rgba(11,13,18,.62);opacity:0;transition:opacity .2s,background-color .2s}
.tk-vl-row__nav .tk-vl-ico{width:30px;height:30px;transition:transform .2s}
.tk-vl-row__nav:hover{background:rgba(11,13,18,.82)}
.tk-vl-row__nav:hover .tk-vl-ico{transform:scale(1.2)}
.tk-vl-row__nav--prev{left:max(0px,calc((100% - var(--container)) / 2 - 56px));border-radius:0 6px 6px 0}
.tk-vl-row__nav--next{right:max(0px,calc((100% - var(--container)) / 2 - 56px));border-radius:6px 0 0 6px}
.tk-vl-row__viewport:hover .tk-vl-row__nav,.tk-vl-row__nav:focus-visible{opacity:1}
.tk-vl-row__nav:focus-visible{outline:2px solid #FFFFFF;outline-offset:-2px}
@media(hover:none){.tk-vl-row__nav{display:none!important}}

/* ------------------------------------------------------------------- card */
.tk-vl-card{position:relative;display:block;border-radius:6px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tk-vl-card:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.tk-vl-card__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:var(--vl-surface)}
.tk-vl-card__img{width:100%;height:100%;object-fit:cover}
.tk-vl-card__img--blank{display:flex;align-items:center;justify-content:center;color:#475569}
.tk-vl-card__img--blank .tk-vl-ico{width:36px;height:36px}
.tk-vl-card__preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.tk-vl-card.is-previewing .tk-vl-card__preview{opacity:1}
.tk-vl-card__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.3) 42%,rgba(0,0,0,0) 68%);pointer-events:none}
.tk-vl-card__badge{position:absolute;top:8px;left:8px;padding:1px 8px;border-radius:3px;background:var(--color-primary);color:#FFFFFF;font-size:.68rem;font-weight:600;line-height:1.7}
.tk-vl-card__len{position:absolute;top:8px;right:8px;padding:1px 7px;border-radius:3px;background:rgba(0,0,0,.72);color:#FFFFFF;font-size:.7rem;line-height:1.7;font-variant-numeric:tabular-nums}
.tk-vl-card__play{position:absolute;left:50%;top:42%;display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.92);color:#0B0D12;opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s var(--ease)}
.tk-vl-card__play .tk-vl-ico{width:22px;height:22px;margin-left:2px}
.tk-vl-card__body{position:absolute;left:0;right:0;bottom:0;z-index:1;display:grid;gap:2px;padding:10px 12px;pointer-events:none}
.tk-vl-card__title{color:#FFFFFF;font-size:.92rem;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.tk-vl-card__meta{display:flex;gap:6px;overflow:hidden;color:var(--vl-soft);font-size:.72rem;line-height:1.5;white-space:nowrap}
.tk-vl-card__meta:empty{display:none}
@media(hover:hover) and (pointer:fine){
  .tk-vl-card:hover{z-index:2;transform:scale(1.06);box-shadow:0 16px 34px rgba(0,0,0,.6)}
  .tk-vl-card:hover .tk-vl-card__play{opacity:1;transform:scale(1)}
  .tk-vl-card.is-previewing .tk-vl-card__play{opacity:0}
}
.tk-vl-card:focus-visible .tk-vl-card__play{opacity:1;transform:scale(1)}

/* ------------------------------------------------------------------ empty */
.tk-vl-empty{padding-block:clamp(72px,12vw,140px);text-align:center}
.tk-vl-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 22%,transparent);color:#FFFFFF}
.tk-vl-empty__icon .tk-vl-ico{width:34px;height:34px;margin-left:4px}
.tk-vl-empty__eyebrow{margin-top:18px;color:var(--vl-muted);font-size:.82rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.tk-vl-empty__title{margin-top:6px;color:#FFFFFF;font-size:clamp(1.4rem,2.6vw,2rem)}
.tk-vl-empty__text{max-width:520px;margin:10px auto 0;color:var(--vl-soft)}

/* ------------------------------------------------------------------ modal */
.tk-vl-modal{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;color:#E2E8F0}
.tk-vl-modal__backdrop{position:absolute;inset:0;background:rgba(3,4,8,.84);opacity:0;transition:opacity .25s ease}
/* The clip area takes the shape of the clip itself (--vl-arn, set by the
   player from the file's own width and height), so a clip fills it edge to
   edge with no black bars; the window as a whole stays within 80% of the
   screen — 80% wide, or 80% tall on a wide, short screen (the info strip is
   a fixed height so the width can be worked out in CSS alone). */
.tk-vl-modal__frame{--vl-info-h:184px;--vl-arn:1.7778;position:relative;width:min(80vw,calc((80vh - var(--vl-info-h)) * var(--vl-arn)));width:min(80vw,calc((80dvh - var(--vl-info-h)) * var(--vl-arn)));opacity:0;transform:translateY(14px) scale(.97);transition:opacity .25s ease,transform .3s var(--ease)}
.tk-vl-modal.is-open .tk-vl-modal__backdrop{opacity:1}
.tk-vl-modal.is-open .tk-vl-modal__frame{opacity:1;transform:none}
.tk-vl-modal__frame:focus{outline:none}
.tk-vl-modal__bar{position:absolute;right:0;bottom:100%;display:flex;gap:8px;padding-bottom:10px}
.tk-vl-modal__box{display:flex;flex-direction:column;overflow:hidden;border-radius:12px;background:#11141B;box-shadow:0 30px 90px rgba(0,0,0,.65)}

/* min-height:0 matters: as a flex item the stage would otherwise be pushed
   to the clip's own height (a phone recording made the window twice as tall
   as the screen) instead of following aspect-ratio. */
.tk-vl-stage{position:relative;display:flex;flex:none;min-height:0;overflow:hidden;aspect-ratio:var(--vl-arn,16/9);background:#000}
.tk-vl-stage__video{width:100%;height:100%;object-fit:contain;background:#000}
.tk-vl-stage__yt{position:absolute;inset:0;background:#000}
.tk-vl-stage__yt iframe{display:block;width:100%;height:100%;border:0}
.tk-vl-stage__msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;color:#CBD5E1;text-align:center}
.tk-vl-stage__msg a{color:#FFFFFF;font-weight:600;text-decoration:underline}
.tk-vl-stage:fullscreen{width:100%;height:100%;aspect-ratio:auto}
.tk-vl-stage:-webkit-full-screen{width:100%;height:100%;aspect-ratio:auto}
/* Full screen hides the bar above the window: a way out sits top centre,
   clear of YouTube's title (left) and icons (right). */
.tk-vl-stage__exit{position:absolute;top:14px;left:50%;z-index:5;display:none;transform:translateX(-50%);transition:opacity .3s}
.tk-vl-stage.is-full .tk-vl-stage__exit{display:inline-flex}
.tk-vl-stage.is-idle .tk-vl-stage__exit{opacity:0}

.tk-vl-over{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;background:rgba(0,0,0,.74);text-align:center}
.tk-vl-over__label{color:var(--vl-soft,#CBD5E1);font-size:.95rem}
.tk-vl-over__card{display:flex;align-items:center;gap:14px;max-width:min(560px,100%);text-align:left}
.tk-vl-over__img{flex:none;width:clamp(110px,16vw,200px);aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#1E2230}
.tk-vl-over__title{color:#FFFFFF;font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.4}
.tk-vl-over__bar{width:min(420px,80%);height:4px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.2)}
.tk-vl-over__bar span{display:block;width:0;height:100%;background:var(--color-primary)}
.tk-vl-over__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

.tk-vl-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);align-content:start;gap:12px 24px;height:var(--vl-info-h);overflow:auto;padding:16px 20px 18px;border-top:1px solid rgba(255,255,255,.06)}
.tk-vl-info__title{color:#FFFFFF;font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:600;line-height:1.4}
.tk-vl-info__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;color:#94A3B8;font-size:.82rem}
.tk-vl-info__meta:empty{display:none}
.tk-vl-info__summary{margin-top:8px;color:#CBD5E1;font-size:.9rem;line-height:1.65;white-space:pre-line}
.tk-vl-info__summary:empty{display:none}
.tk-vl-info__products{margin-top:12px}
.tk-vl-info__label{display:block;margin-bottom:8px;color:#94A3B8;font-size:.76rem;font-weight:600;letter-spacing:.06em}
.tk-vl-info__list{display:flex;flex-wrap:wrap;gap:8px}
.tk-vl-prod{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 6px 5px 5px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.05)}
.tk-vl-prod__img{flex:none;width:34px;height:34px;border-radius:5px;background:#FFFFFF;object-fit:cover}
.tk-vl-prod__name{min-width:0;max-width:230px;overflow:hidden;color:#E2E8F0;font-size:.8rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.tk-vl-prod__name:hover{color:#FFFFFF;text-decoration:underline}
.tk-vl-prod__add{flex:none;padding:5px 10px;border-radius:6px;background:var(--color-primary);color:#FFFFFF;font-size:.74rem;font-weight:600;line-height:1.4;transition:background-color .2s}
.tk-vl-prod__add:hover{background:var(--color-primary-hover)}
.tk-vl-info__side{display:flex;flex-direction:column;gap:12px}

.tk-vl-switch{position:relative;display:flex;align-items:center;gap:10px;color:#E2E8F0;font-size:.86rem;line-height:1.4;cursor:pointer;user-select:none}
.tk-vl-switch input{position:absolute;width:1px;height:1px;opacity:0}
.tk-vl-switch__track{position:relative;flex:none;width:40px;height:22px;border-radius:11px;background:#475569;transition:background-color .2s}
.tk-vl-switch__track span{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;transition:transform .2s var(--ease)}
.tk-vl-switch input:checked + .tk-vl-switch__track{background:var(--color-primary)}
.tk-vl-switch input:checked + .tk-vl-switch__track span{transform:translateX(18px)}
.tk-vl-switch input:focus-visible + .tk-vl-switch__track{outline:2px solid #FFFFFF;outline-offset:2px}

.tk-vl-next{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.05);color:#E2E8F0;text-align:left;transition:background-color .2s}
.tk-vl-next:hover{background:rgba(255,255,255,.1)}
.tk-vl-next__img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:5px;background:#1E2230}
.tk-vl-next__text{min-width:0}
.tk-vl-next__text small{display:block;color:#94A3B8;font-size:.7rem;line-height:1.5}
.tk-vl-next__text strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.84rem;font-weight:600;line-height:1.4}
.tk-vl-next .tk-vl-ico{width:20px;height:20px}

html.tk-vl-lock,html.tk-vl-lock body{overflow:hidden}

/* A tall clip (a phone recording) on a wide screen: the picture takes the
   height and the details sit beside it, the way a phone-shaped video is
   watched everywhere else. */
@media(min-width:900px){
  .tk-vl-modal__frame.is-portrait{width:auto}
  .tk-vl-modal__frame.is-portrait .tk-vl-modal__box{flex-direction:row;align-items:stretch}
  .tk-vl-modal__frame.is-portrait .tk-vl-stage{height:min(80vh,820px);height:min(80dvh,820px);width:calc(min(80vh,820px) * var(--vl-arn));width:calc(min(80dvh,820px) * var(--vl-arn));aspect-ratio:auto}
  .tk-vl-modal__frame.is-portrait .tk-vl-info{width:min(34vw,340px);height:auto;max-height:min(80vh,820px);max-height:min(80dvh,820px);grid-template-columns:minmax(0,1fr);align-content:start;border-top:0;border-left:1px solid rgba(255,255,255,.06)}
}

/* ------------------------------------------------------------- small screens */
@media(max-width:767px){
  .tk-vl-hero{flex-direction:column;align-items:stretch;min-height:0}
  .tk-vl-hero__media{position:relative;inset:auto;aspect-ratio:16/10}
  .tk-vl-hero__shade{bottom:auto;height:calc(100vw * 10 / 16);background:linear-gradient(0deg,var(--vl-bg) 0%,rgba(11,13,18,.35) 35%,rgba(11,13,18,0) 60%)}
  .tk-vl-hero__body{grid-template-columns:minmax(0,1fr);margin-top:-72px;padding-block:0 28px}
  .tk-vl-hero__side{grid-column:1;grid-row:auto;justify-self:start;margin-top:14px}
  .tk-vl-hero__actions .tk-vl-btn{flex:1 1 0;padding:0 16px}
  .tk-vl-row__head{flex-wrap:wrap}
  /* Narrow cards: the title goes under the picture instead of over it. */
  .tk-vl-card__body{position:static;padding:8px 2px 0}
  .tk-vl-card__title{font-size:.86rem;text-shadow:none}
  .tk-vl-card__meta{color:var(--vl-muted)}
  .tk-vl-card__shade{background:linear-gradient(0deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 40%)}

  /* A phone is too narrow for 80%: the player takes nearly the full width. */
  .tk-vl-modal__frame{width:96vw}
  .tk-vl-modal__box{max-height:calc(92vh - 54px);max-height:calc(92dvh - 54px);overflow-y:auto}
  .tk-vl-info{grid-template-columns:minmax(0,1fr);height:auto;overflow:visible;padding:14px 16px 16px}
  .tk-vl-over{gap:10px;padding:12px}
  .tk-vl-over__img{display:none}
  .tk-vl-btn{min-height:42px;padding:0 18px;font-size:.92rem}
}
@media(max-height:520px) and (min-width:768px){
  .tk-vl-modal__frame{--vl-info-h:112px}
}

@media(prefers-reduced-motion:reduce){
  .tk-vl-card,.tk-vl-card__play,.tk-vl-modal__frame,.tk-vl-hero__img,.tk-vl-hero__video,.tk-vl-hero__copy{transition:none}
  .tk-vl-card:hover{transform:none}
}

/* =========================================================
   Plain layout (.tk-vl--grid): the site's usual light page,
   a category filter and the clips in columns. The player
   window above is shared with the Netflix layout.
   ========================================================= */
.tk-vl--grid{background:var(--color-bg);color:var(--color-text)}
.tk-vl--grid .tk-page-head{margin-bottom:clamp(20px,3vw,32px)}
.tk-vg__grid{--vg-cols:4;display:grid;grid-template-columns:repeat(var(--vg-cols),minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
@media(max-width:1099px){.tk-vg__grid{grid-template-columns:repeat(min(3,var(--vg-cols)),minmax(0,1fr))}}
@media(max-width:859px){.tk-vg__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:539px){.tk-vg__grid{grid-template-columns:minmax(0,1fr)}}
.tk-vg__cell{min-width:0}
.tk-vg-card{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid var(--color-line);border-radius:var(--radius-md);background:#FFFFFF;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.tk-vg-card:hover{border-color:color-mix(in srgb,var(--color-primary) 35%,var(--color-line));box-shadow:var(--shadow-md);transform:translateY(-2px)}
.tk-vg-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.tk-vg-card__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#E5E7EB}
.tk-vg-card__img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.tk-vg-card:hover .tk-vg-card__img{transform:scale(1.04)}
.tk-vg-card__play{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(0,0,0,.55);color:#FFFFFF;transition:background-color .2s,transform .2s var(--ease)}
.tk-vg-card__play .tk-vl-ico{width:22px;height:22px;margin-left:3px}
.tk-vg-card:hover .tk-vg-card__play{background:var(--color-primary);transform:scale(1.08)}
.tk-vg-card__badge{position:absolute;top:8px;left:8px;padding:1px 8px;border-radius:4px;background:var(--color-primary);color:#FFFFFF;font-size:.7rem;font-weight:600;line-height:1.7}
.tk-vg-card__len{position:absolute;right:8px;bottom:8px;padding:1px 7px;border-radius:4px;background:rgba(0,0,0,.75);color:#FFFFFF;font-size:.72rem;line-height:1.7;font-variant-numeric:tabular-nums}
.tk-vg-card__body{display:grid;gap:4px;padding:12px 14px 14px}
.tk-vg-card__title{color:var(--color-text);font-size:.98rem;font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-vg-card:hover .tk-vg-card__title{color:var(--color-primary)}
.tk-vg-card__meta{display:flex;flex-wrap:wrap;gap:6px;color:var(--color-muted);font-size:.78rem;line-height:1.5}
.tk-vg-card__meta:empty{display:none}
.tk-vg-card__summary{color:#475569;font-size:.84rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-vl--grid .tk-promos__empty .tk-vl-ico{width:44px;height:44px;margin:0 auto;color:var(--color-primary);opacity:.55}
@media(prefers-reduced-motion:reduce){.tk-vg-card,.tk-vg-card__img,.tk-vg-card__play{transition:none}.tk-vg-card:hover{transform:none}.tk-vg-card:hover .tk-vg-card__img{transform:none}}