/* Midlife Mentor videos: article embeds, watch pages, video hub. Uses the tokens in articles.css. */
.vid-embed{max-width:760px;margin:28px auto 0;padding:0 24px}
.vid-embed-2{margin:44px auto 0}
.vid-eyebrow{font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 4px}
.vid-embed h2{font-family:var(--serif);font-size:clamp(22px,3vw,26px);line-height:1.2;color:var(--green);margin:0 0 12px}
.yt-lite{position:relative;aspect-ratio:16/9;background:var(--green-deep);border-radius:8px;overflow:hidden;box-shadow:0 10px 26px rgba(40,25,12,.16);border:1px solid rgba(200,155,60,.5)}
.yt-lite iframe,.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{display:block;position:absolute;inset:0;cursor:pointer}
.yt-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.yt-play:hover img{transform:scale(1.02)}
.yt-btn{position:absolute;left:78%;top:76%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(88,4,28,.92);border:3px solid var(--gold);box-shadow:0 8px 24px rgba(40,25,12,.35);transition:transform .15s ease}
.yt-btn:after{content:"";position:absolute;left:33px;top:24px;border-style:solid;border-width:18px 0 18px 28px;border-color:transparent transparent transparent #FBF6E6}
.yt-play:hover .yt-btn,.yt-play:focus-visible .yt-btn{transform:scale(1.08)}
.yt-play:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.vdur{position:absolute;right:10px;bottom:10px;background:rgba(40,25,12,.85);color:#FBF6E6;font-size:13px;font-weight:600;padding:3px 8px;border-radius:4px;letter-spacing:.02em}
.vid-meta{font-size:14.5px;color:var(--ink-soft);margin:10px 0 0}
.vid-meta a{color:var(--green);font-weight:600}
@media(max-width:620px){.vid-embed{padding:0 16px}.yt-btn{left:74%;top:56%;width:68px;height:68px;margin:-34px 0 0 -34px}.yt-btn:after{left:26px;top:19px;border-width:15px 0 15px 23px}}

/* watch page */
.vplayer{max-width:900px;margin:26px auto 0;padding:0 24px}
.vframe{position:relative;aspect-ratio:16/9;background:var(--green-deep);border-radius:8px;overflow:hidden;box-shadow:0 12px 30px rgba(40,25,12,.18);border:1px solid rgba(200,155,60,.5)}
.vcap{font-size:14px;color:var(--ink-soft);margin:10px 0 0}
.vcap a{color:var(--green);font-weight:600}
.vid-intro{padding-top:22px}
.vid-crisis{max-width:760px;margin:22px auto 0}
.vid-arts{padding-top:44px}
.rel-grid.n1{grid-template-columns:minmax(0,440px);justify-content:center}
.rel-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin:0 auto}
@media(max-width:860px){.rel-grid.n1,.rel-grid.n2{grid-template-columns:1fr}}
.vtx{max-width:760px;margin:40px auto 0;padding:0 24px}
.vtx details{background:var(--surface);border:1px solid rgba(200,155,60,.5);border-radius:6px}
.vtx summary{cursor:pointer;list-style:none;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.vtx summary::-webkit-details-marker{display:none}
.vtx summary h2{font-family:var(--serif);font-size:20px;color:var(--green);margin:0}
.vtx summary:after{content:"+";font-size:26px;line-height:1;color:var(--gold-ink);font-weight:600}
.vtx details[open] summary:after{content:"\2212"}
.vtx-body{padding:0 22px 16px;font-size:16.5px;line-height:1.75}
.vtx-body p{margin:0 0 14px}
.vtx-note{font-size:13.5px;color:var(--ink-soft);font-style:italic}
@media(max-width:620px){.vplayer,.vtx{padding:0 16px}.vtx-body{font-size:16px}}

/* video cards (hub and 'more videos') */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid rgba(200,155,60,.5);border-radius:8px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.vcard:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(40,25,12,.12)}
.vthumb{position:relative;display:block;aspect-ratio:16/9;background:var(--green-deep)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vbody{display:flex;flex-direction:column;padding:14px 16px 16px;flex:1}
.vcard h3{font-family:var(--serif);font-size:18.5px;line-height:1.25;color:var(--green);margin:0 0 10px}
.vcard .go{margin-top:auto;font-weight:700;font-size:14px;color:var(--green)}
@media(max-width:860px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.vgrid{grid-template-columns:1fr}}
.vid-hub .art-head{max-width:900px}
.vh-lede{font-size:18px;line-height:1.65;color:var(--ink);margin:14px 0 0;max-width:760px}
.vid-all{padding-top:30px}

/* link band on /articles/ */
.vid-hubband{margin:18px 0 0}
.vid-hubband a{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--cream-deep);border:1px solid rgba(200,155,60,.6);border-left:5px solid var(--gold);border-radius:6px;padding:10px 16px;font-weight:600;font-size:15.5px;color:var(--green);text-decoration:none}
.vid-hubband a:hover{background:#F0E3BF}
.vhb-k{background:var(--green);color:#FBF6E6;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:3px}
.vh-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.vfull{font-size:16px;background:var(--cream-deep);border-left:4px solid var(--gold);padding:12px 16px;border-radius:4px}
.vfull a{color:var(--green);font-weight:600}
.vcard:focus-visible,.vtx summary:focus-visible,.vid-hubband a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.vcard,.vcard:hover,.yt-play img,.yt-play:hover img,.yt-btn{transition:none;transform:none}.yt-play:hover .yt-btn{transform:none}}