/* GST videos page (/videos/). Builds on gst_v2.css. Orange is an accent only (play button). */
.vd-h1 { font-size: clamp(38px, 10vw, 96px); line-height: .92; margin: 12px 0 16px; }
.vd-lede { max-width: 820px; color: var(--g5); font-size: clamp(16px, 2.2vw, 19px); }
.vd-follow { font-weight: 700; margin-top: 10px; }

.vd-long { margin: 10px 0 30px; }
.vd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 16px; margin: 10px 0 30px; }
.vd-card { min-width: 0; display: flex; flex-direction: column; }
.vd-frame { position: relative; aspect-ratio: 9 / 16; background: var(--g1); border: 2px solid var(--g3); overflow: hidden; }
.vd-wide .vd-links { flex-direction: row; align-items: center; gap: 14px; margin-top: 0; }
.vd-wide .vd-frame { aspect-ratio: 16 / 9; max-width: 960px; }
.vd-frame iframe, .vd-play, .vd-play img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vd-play { padding: 0; background: none; cursor: pointer; }
.vd-play img { object-fit: cover; }
.vd-icon { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--orange); box-shadow: 0 4px 18px rgba(0, 0, 0, .5); }
.vd-icon::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--white); }
.vd-play:hover .vd-icon, .vd-play:focus-visible .vd-icon { transform: scale(1.08); }
.vd-title { font-size: clamp(18px, 2.4vw, 22px); margin: 12px 0 6px; }
.vd-line { color: var(--g5); font-size: 15px; margin: 0 0 12px; }
.vd-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-weight: 700; font-size: 14px; margin: auto 0 0; }
.vd-share { font: 700 14px/1 var(--body); color: var(--white); background: none; border: 2px solid var(--g3); padding: 6px 10px; cursor: pointer; }
.vd-share:hover { border-color: var(--orange); }
.vd-note { font-size: 13px; color: var(--g4); max-width: 820px; }
@media (max-width: 520px) {
  .vd-icon { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .vd-icon::after { left: 20px; top: 15px; border-width: 11px 0 11px 17px; }
  .vd-title { font-size: 16px; }
  .vd-line { font-size: 14px; }
}