/* Project video gallery — shared by the homepage and /portfolio/. Videos come from /api/videos. */
.vg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 300px)); justify-content: center; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.vg-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(215,169,40,.4); border-radius: 14px; background: #fff; box-shadow: 0 14px 36px rgba(7,26,49,.1); }
.vg-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--navy, #090f20); }
.vg-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vg-poster { position: absolute; inset: 0; display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 1.2rem; border: 0; color: #fff; background: radial-gradient(circle at 30% 20%, #1a2747, var(--navy, #090f20) 70%); font: inherit; text-align: center; cursor: pointer; }
.vg-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.vg-poster::after { position: absolute; inset: 0; content: ""; background: linear-gradient(rgba(7,26,49,0) 55%, rgba(7,26,49,.55)); pointer-events: none; }
.vg-poster:hover img { transform: scale(1.04); }
.vg-play { position: relative; z-index: 1; display: grid; width: 68px; height: 68px; place-items: center; border-radius: 50%; color: var(--navy, #090f20); background: var(--gold, #d7a928); box-shadow: 0 12px 30px rgba(0,0,0,.3); transition: transform .2s; }
.vg-play svg { width: 28px; height: 28px; margin-left: 4px; fill: currentColor; }
.vg-poster:hover .vg-play, .vg-poster:focus-visible .vg-play { transform: scale(1.08); }
.vg-poster:focus-visible { outline: 3px solid var(--gold, #d7a928); outline-offset: -3px; }
.vg-external .vg-play { width: 58px; height: 58px; color: #fff; background: #1877f2; }
.vg-external .vg-play svg { margin-left: 0; }
.vg-external-text { position: relative; z-index: 1; display: grid; gap: .25rem; max-width: 220px; }
.vg-external-text strong { font-size: .95rem; }
.vg-external-text span { color: rgba(255,255,255,.72); font-size: .74rem; line-height: 1.45; }
.vg-badge { position: absolute; z-index: 2; top: .7rem; left: .7rem; display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .6rem; border-radius: 999px; color: var(--navy, #090f20); background: rgba(255,255,255,.94); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.vg-badge svg { width: 13px; height: 13px; fill: currentColor; }
.vg-frame.is-playing .vg-badge { display: none; }
.vg-meta { display: grid; gap: .2rem; padding: 1rem 1.1rem 1.15rem; }
.vg-meta h3 { margin: 0; color: var(--navy, #090f20); font-family: var(--sans, sans-serif); font-size: .92rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.vg-meta p { margin: 0; color: var(--muted, #5d6876); font-size: .74rem; }
.vg-link { justify-self: start; margin-top: .45rem; color: var(--navy, #090f20); font-size: .74rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vg-link:hover { color: #8a6514; }
.vg-status { margin: 0; color: var(--muted, #5d6876); font-size: .85rem; text-align: center; }
@media (max-width: 520px) { .vg-grid { grid-template-columns: minmax(0, 340px); } }
@media (prefers-reduced-motion: reduce) { .vg-poster img, .vg-play { transition: none; } .vg-poster:hover img { transform: none; } }