/* ═══ Video cards (sermons, songs, ministry) — used with js/videos.js ═══ */
.vgrid { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin:0 auto; }
.vgrid--2 { max-width:900px; }
.vgrid--2 .vcard { max-width:420px; }
.vcard { flex:1 1 280px; max-width:370px; margin:0; display:flex; flex-direction:column; background:linear-gradient(150deg,#fff 40%,#fdf0ec 100%); border:1px solid rgba(155,28,28,0.13); border-top:3px solid var(--crimson); border-radius:var(--radius-md); overflow:hidden; box-shadow:0 2px 16px rgba(155,28,28,0.09); transition:transform var(--transition), box-shadow var(--transition); }
.vcard:hover { transform:translateY(-5px); box-shadow:0 10px 30px rgba(155,28,28,0.16); }
.vcard--gold { border-top-color:var(--gold); }
.vthumb { position:relative; display:block; aspect-ratio:16/9; background:#1a0a06; overflow:hidden; cursor:pointer; }
.vthumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
.vcard:hover .vthumb img { transform:scale(1.04); }
.vthumb iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vplay { position:absolute; left:50%; top:50%; width:62px; height:44px; transform:translate(-50%,-50%); background:rgba(155,28,28,0.92); border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,0.45); transition:background var(--transition-fast), transform var(--transition-fast); }
.vplay::after { content:''; position:absolute; left:50%; top:50%; transform:translate(-35%,-50%); border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent #fff; }
.vthumb:hover .vplay, .vthumb:focus-visible .vplay { background:var(--gold); transform:translate(-50%,-50%) scale(1.08); }
.vthumb:focus-visible { outline:3px solid var(--gold); outline-offset:-3px; }
.vlen { position:absolute; right:0.5rem; bottom:0.5rem; background:rgba(0,0,0,0.78); color:#fff; font-size:0.7rem; font-weight:600; padding:0.15rem 0.45rem; border-radius:var(--radius-xs); font-variant-numeric:tabular-nums; }
.vcard figcaption { padding:0.95rem 1rem 1.1rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.35rem; }
.vtag { font-size:0.64rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--crimson); opacity:0.8; }
.vcard--gold .vtag { color:var(--gold-dark); }
.vtitle { font-size:0.95rem; font-weight:600; color:var(--text-dark); line-height:1.4; text-wrap:balance; }
.vnote { font-size:0.8rem; color:var(--text-light); line-height:1.5; }
.vgroup { margin-top:3rem; }
.vgroup:first-child { margin-top:0; }
.vgroup-head { text-align:center; max-width:640px; margin:0 auto 1.5rem; }
.vgroup-head h3 { font-family:'Playfair Display',serif; font-size:clamp(1.25rem,2.6vw,1.6rem); color:var(--text-dark); margin:0 0 0.4rem; text-wrap:balance; }
.vgroup-head p { font-size:0.9rem; color:var(--text-mid); line-height:1.7; margin:0; }
.vmore { display:flex; justify-content:center; flex-wrap:wrap; gap:0.75rem; margin-top:1.5rem; }
.vlinks { display:flex; justify-content:center; flex-wrap:wrap; gap:0.5rem; margin-top:1rem; }
.vlink { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.78rem; font-weight:700; color:var(--crimson); text-decoration:none; border:1.5px solid rgba(155,28,28,0.35); border-radius:var(--radius-full); padding:0.35rem 0.85rem; transition:background var(--transition-fast), color var(--transition-fast); }
.vlink:hover, .vlink:focus-visible { background:var(--crimson); color:#fff; }
.vbtn { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.88rem; font-weight:700; color:var(--crimson); background:#fff; text-decoration:none; border:2px solid var(--crimson); border-radius:var(--radius-full); padding:0.6rem 1.4rem; transition:background var(--transition-fast), color var(--transition-fast); }
.vbtn:hover, .vbtn:focus-visible { background:var(--crimson); color:#fff; }
@media (max-width:600px) { .vcard, .vgrid--2 .vcard { flex-basis:100%; max-width:100%; } }
@media (prefers-reduced-motion:reduce) { .vcard, .vthumb img, .vplay { transition:none; } .vcard:hover { transform:none; } .vcard:hover .vthumb img { transform:none; } }