/*
 * News. — "Video" design style (video & podcast first), News. — Theme & Colors → Design style.
 * Loaded after the base styles. Preset: dark first, black one-row header (logo left), red accent,
 * Montserrat headlines, Inter text. A player-style lead, "Up next", durations on every picture.
 * Front-page top section: template-parts/home/featured-video.php.
 */

.style-video{
  --vd-accent: var(--red);
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 14px;
}
html[data-theme="dark"] .style-video{
  --paper:#0F0F10; --paper-2:#1A1A1C; --line:#2A2A2E; --border-bottom:#26262A; --ink:#F1F1F2; --muted:#A3A3AA; --muted-light:#86868E;
  --vd-accent:color-mix(in srgb, var(--red) 70%, #fff);
}
html:not([data-theme="dark"]) .style-video{ --paper:#FFFFFF; --paper-2:#F2F2F3; --line:#E4E4E7; --border-bottom:#E4E4E7; --ink:#0F0F10; --muted:#5F5F66; }
html[data-theme="dark"] body.style-video.header-light{ --header-bg:#0F0F10; }

/* ---- Type ---- */
.style-video h1, .style-video h2, .style-video h3,
.style-video .featured__headline, .style-video .story-card__headline, .style-video .article-title,
.style-video .feature-title, .style-video .cover-card h3, .style-video .showbiz-card__title{
  font-family:var(--display); font-weight:700; letter-spacing:-.01em;
}

/* ---- Section heads ---- */
.style-video .section__dot{ display:none; }
.style-video .section__head{ border:0; }
.style-video .section__title,
.style-video .shead__title{ font-family:var(--display); font-size:22px; font-weight:800; }
.style-video .section__title::before,
.style-video .shead__title::before{ content:""; display:inline-block; width:0; height:0; margin-right:10px; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent var(--vd-accent); vertical-align:.12em; }

/* ---- Labels ---- */
.style-video .tag{ border-radius:4px; }
.style-video .kicker{ color:var(--vd-accent); }

/* ---- Header ---- */
.style-video .site-header{ border-bottom:1px solid #1F1F22; }
.style-video .nav-link{ font-weight:600; font-size:14px; letter-spacing:0; }
.style-video .nav-link::after{ height:3px; border-radius:3px 3px 0 0; background:var(--red); }
.style-video .nav-link.is-active, .style-video .nav-item.is-open .nav-link{ color:#fff; }
.style-video .breaking{ background:var(--paper-2); border-bottom:1px solid var(--border-bottom); }
.style-video .breaking__track li{ color:var(--ink); }
.style-video .live-tag{ border-radius:4px; }
.style-video .btn{ border-radius:99px; }

/* ---- Cards ---- */
.style-video .story-card, .style-video .cover-card, .style-video .featured__mini, .style-video .featured__thumb,
.style-video .showbiz-card__media, .style-video .scitech-card__media, .style-video .tv-card__media,
.style-video .studio__feature, .style-video .studio__gallery, .style-video .market-card__media{ border-radius:var(--radius-m); }

/* =====================================================================
   FRONT PAGE TOP (featured-video.php)
   ===================================================================== */
.vd-top{ padding-top:clamp(18px, 2.2vw, 28px); }
.vd-kicker{ display:block; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--vd-accent, var(--red)); }
.vd-meta{ display:block; font-size:12.5px; color:var(--muted); }
.vd-label{ margin:0 0 12px; font-family:var(--display); font-size:15px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); }

.vd-play{
  position:absolute; left:50%; top:50%; width:68px; height:68px; margin:-34px 0 0 -34px; display:grid; place-items:center;
  border-radius:50%; background:rgba(0,0,0,.55); color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.75) inset;
  transition:transform .2s ease, background .2s ease;
}
.vd-play svg{ margin-left:3px; }
.vd-dur{ position:absolute; right:8px; bottom:8px; padding:2px 6px; border-radius:4px; background:rgba(0,0,0,.78); color:#fff; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }

.vd-stage{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; align-items:start; }
.vd-lead{ display:flex; flex-direction:column; gap:10px; color:var(--ink); }
.vd-lead__media{ position:relative; display:block; aspect-ratio:16/9; border-radius:var(--radius-l); overflow:hidden; background:#000; }
.vd-lead__media img{ width:100%; height:100%; object-fit:cover; opacity:.92; transition:transform .6s ease, opacity .3s; }
.vd-lead:hover .vd-lead__media img{ transform:scale(1.02); opacity:1; }
.vd-lead:hover .vd-play, .vd-card:hover .vd-play{ transform:scale(1.08); background:var(--red); }
.vd-lead .vd-play{ width:84px; height:84px; margin:-42px 0 0 -42px; }
.vd-lead .vd-play svg{ width:36px; height:36px; }
.vd-lead__body{ display:flex; flex-direction:column; gap:6px; padding-top:4px; }
.vd-lead__title{ margin:0; font-family:var(--display); font-size:clamp(24px, 2.4vw, 32px); font-weight:800; line-height:1.18; }
.vd-lead:hover .vd-lead__title{ color:var(--vd-accent, var(--red)); }

.vd-next{ display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:var(--radius-l); background:var(--paper-2); }
.vd-item{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:start; color:var(--ink); }
.vd-item__media{ position:relative; display:block; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#000; }
.vd-item__media img{ width:100%; height:100%; object-fit:cover; }
.vd-item__txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.vd-item__title{ font-family:var(--display); font-size:14px; font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.vd-item:hover .vd-item__title{ color:var(--vd-accent, var(--red)); }

.vd-row{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; margin-top:30px; }
.vd-card{ display:flex; flex-direction:column; gap:8px; min-width:0; color:var(--ink); }
.vd-card__media{ position:relative; display:block; aspect-ratio:16/9; border-radius:var(--radius-m); overflow:hidden; background:#000; margin-bottom:2px; }
.vd-card__media img{ width:100%; height:100%; object-fit:cover; }
.vd-card .vd-play{ width:48px; height:48px; margin:-24px 0 0 -24px; }
.vd-card .vd-play svg{ width:22px; height:22px; }
.vd-card__title{ margin:0; font-family:var(--display); font-size:16px; font-weight:700; line-height:1.3; }
.vd-card:hover .vd-card__title{ color:var(--vd-accent, var(--red)); }

.vd-pods{ margin-top:32px; }
.vd-pods__grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.vd-pod{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:var(--radius-m); background:var(--paper-2); color:var(--ink); }
.vd-pod__cover{ flex:none; width:64px; height:64px; border-radius:8px; overflow:hidden; background:#000; }
.vd-pod__cover img{ width:100%; height:100%; object-fit:cover; }
.vd-pod__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; font-size:14px; line-height:1.3; }
.vd-top .ad-wrap{ margin-top:26px; }

@media (max-width:1100px){
  .vd-stage{ grid-template-columns:minmax(0,1fr); }
  .vd-next{ display:grid; grid-template-columns:1fr 1fr; }
  .vd-next .vd-label{ grid-column:1 / -1; margin:0; }
  .vd-row, .vd-pods__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .vd-next{ grid-template-columns:minmax(0,1fr); }
  .vd-item{ grid-template-columns:128px minmax(0,1fr); }
  .vd-pods__grid{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce){ .vd-lead__media img, .vd-play{ transition:none; } }