/* PracExam free Shorts - shared styles for the landing "Featured Short" band and /videos.
   Uses the site's existing tokens (--navy, --accent, --accent-tint, --border-clr ...) only. */

/* ── 9:16 player frame (used by both pages) ───────────────── */
.vx-frame{
  position:relative; width:100%; aspect-ratio:9 / 16; max-height:70vh;
  border-radius:26px; overflow:hidden; background:var(--navy);
  border:1px solid var(--border-strong);
  box-shadow:0 22px 48px -18px rgba(53,70,73,.45);
}
.vx-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.vx-poster{
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer;
  background:var(--navy); display:block;
}
.vx-poster img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.vx-poster .vx-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px; text-align:center; color:#fff; font-weight:700; font-size:18px;
  background:linear-gradient(160deg, var(--navy), var(--navy-mid));
}
.vx-fallback small{font-size:13px; font-weight:600; opacity:.85;}
.vx-play{
  /* small, in the bottom-right corner, so it never covers the text inside the thumbnail */
  position:absolute; right:12px; bottom:12px; width:46px; height:46px;
  border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.35); transition:transform .15s;
}
.vx-play svg{width:20px; height:20px; margin-left:3px; fill:#fff;}
.vx-poster:hover .vx-play, .vx-poster:focus-visible .vx-play{transform:scale(1.08);}
.vx-poster:focus-visible{outline:3px solid var(--accent); outline-offset:-3px;}
.vx-badge{
  position:absolute; left:12px; bottom:12px; z-index:2;
  background:rgba(35,46,48,.88); color:#fff; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:999px; letter-spacing:.02em; pointer-events:none;
}

/* ── skeleton ─────────────────────────────────────────────── */
.vx-skel{
  background:linear-gradient(100deg, rgba(53,70,73,.08) 30%, rgba(53,70,73,.16) 50%, rgba(53,70,73,.08) 70%);
  background-size:200% 100%; animation:vx-shimmer 1.4s linear infinite;
}
@keyframes vx-shimmer{to{background-position:-200% 0;}}
@media (prefers-reduced-motion:reduce){ .vx-skel{animation:none;} }

/* ── EN | KO toggle ───────────────────────────────────────── */
.vx-toggle{display:inline-flex; border:1.5px solid var(--border-strong); border-radius:8px; overflow:hidden;}
.vx-toggle button{
  font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:.05em;
  padding:6px 12px; border:none; background:var(--white); color:var(--text-muted); cursor:pointer;
}
.vx-toggle button[aria-pressed="true"]{background:var(--navy); color:var(--white);}
.vx-toggle button:disabled{opacity:.4; cursor:not-allowed;}
.vx-toggle button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}

.vx-pill{
  display:inline-block; font-size:12px; font-weight:700; color:var(--navy);
  background:var(--accent-tint); border:1px solid var(--accent-border);
  padding:3px 10px; border-radius:999px;
}

/* ── landing: Featured Short band (option A) ──────────────── */
.fs-section{
  padding:40px 0;
  background:var(--accent-tint);
  border-top:1px solid var(--accent-border); border-bottom:1px solid var(--accent-border);
}
.fs-grid{display:grid; grid-template-columns:auto 1fr; gap:clamp(32px,6vw,72px); align-items:center;}
.fs-media{position:relative; width:236px;} /* 9:16 -> about 420px tall: big enough to read the thumbnail, still one screen */
.fs-media .vx-frame{border-radius:20px;}
.fs-media::before{
  content:""; position:absolute; inset:-14% -22%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(111,163,158,.35), rgba(111,163,158,0));
}
.fs-media .vx-frame{position:relative; z-index:1;}
.fs-text{min-width:0;}
.fs-text h2{margin:10px 0 12px; font-size:clamp(20px,2.1vw,26px); line-height:1.35;}
.fs-text .vx-pill{margin-bottom:12px;}
.fs-desc{
  max-width:520px; margin-bottom:20px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fs-text .vx-toggle{margin-bottom:22px;}
.fs-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.fs-yt{display:inline-block; margin-top:14px; font-size:13px; color:var(--text-muted);}
.fs-yt:hover{color:var(--navy);}
.fs-skel-line{height:18px; border-radius:8px; margin-bottom:12px;}
@media (max-width:767px){
  .fs-section{padding:32px 0;}
  .fs-grid{grid-template-columns:1fr; justify-items:center; text-align:center; gap:22px;}
  .fs-media{width:min(60vw,220px);}
  .fs-desc{margin-left:auto; margin-right:auto;}
  .fs-actions{justify-content:center; flex-direction:column; width:100%;}
  .fs-actions .btn{width:100%; max-width:340px;}
}

/* ── /videos page ─────────────────────────────────────────── */
.vp-head{padding:48px 0 20px;}
.vp-head p{max-width:560px; margin-top:8px;}
.vp-filters{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin:18px 0 28px;}
.vp-filters label{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-right:8px;}
.vp-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:26px;}
.vp-card{display:flex; flex-direction:column; gap:12px; min-width:0;}
.vp-card .vx-frame{max-height:none;}
.vp-card h3{font-size:16px; line-height:1.35; margin:0;}
.vp-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-start;}
/* the pill is narrow inside a card: keep it tidy when the topic wraps to a second line */
.vp-meta .vx-pill{display:block; width:100%; text-align:center; line-height:1.35; padding:5px 12px; border-radius:16px; text-wrap:balance;}
.vp-empty{padding:48px 0; text-align:center; color:var(--text-muted);}
.vp-cta{margin:44px 0 64px; text-align:center;}
@media (max-width:560px){ .vp-grid{grid-template-columns:1fr; justify-items:center;} .vp-card{width:min(78vw,320px);} }
@media (min-width:561px) and (max-width:900px){ .vp-grid{grid-template-columns:repeat(2, 1fr);} }

[hidden]{display:none !important;}