/* =====================================================================
   VIDEO GALLERY + LIGHTBOX — real Fetraco trip footage
   .vfilm  = homepage dark "cinema" showcase section
   .vgal   = responsive card grid (reused on light sub-page sections too)
   .vcard  = thumbnail card (button=YouTube lightbox / a=Facebook out)
   .vlb    = click-to-play lightbox (YouTube embed)
   Uses :root tokens (--ink/--gold/--gold-soft/--font-*); never redefines them.
   ===================================================================== */
.vfilm{ position:relative; background:var(--ink,#0d0f0c); color:#f3efe6; padding:clamp(56px,8vh,104px) 0; overflow:hidden; isolation:isolate; }
.vfilm::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(120% 90% at 85% 0%, rgba(201,162,75,.14), transparent 60%); pointer-events:none; }
.vfilm__inner{ width:min(1240px,92%); margin:0 auto; position:relative; z-index:1; }
.vfilm__head{ max-width:700px; margin:0 0 clamp(26px,4vw,44px); }
.vfilm__eyebrow{ font-family:var(--font-ui,sans-serif); text-transform:uppercase; letter-spacing:.22em; font-size:.74rem; font-weight:600; color:var(--gold-soft,#e6c585); margin:0 0 14px; }
.vfilm__title{ font-family:var(--font-display,sans-serif); font-weight:700; letter-spacing:-.02em; line-height:1.04; font-size:clamp(2rem,4.6vw,3.4rem); margin:0 0 16px; }
.vfilm__lead{ font-family:var(--font-ui,sans-serif); color:#c9c5ba; font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.62; margin:0; }

.vgroup{ margin-top:clamp(30px,4vw,48px); }
.vgroup__label{ display:flex; align-items:center; gap:16px; font-family:var(--font-ui,sans-serif); text-transform:uppercase; letter-spacing:.16em; font-size:.82rem; font-weight:700; color:#f3efe6; margin:0 0 18px; }
.vgroup__label::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(201,162,75,.55), transparent); }

.vgal{ display:grid; gap:clamp(16px,1.9vw,24px); grid-template-columns:repeat(auto-fill, minmax(262px,1fr)); }

/* poster-style card: image + corner play button, then title / author / meta on white */
.vcard{ position:relative; display:flex; flex-direction:column; width:100%; margin:0; padding:0; cursor:pointer; text-align:left;
  border:1px solid rgba(13,15,12,.07); border-radius:18px; overflow:hidden; background:#fff;
  box-shadow:0 18px 42px -28px rgba(13,15,12,.5); color:inherit; font:inherit;
  transition:transform .42s cubic-bezier(.2,.7,.2,1), box-shadow .42s; }
.vcard:hover, .vcard:focus-visible{ transform:translateY(-6px); box-shadow:0 34px 64px -26px rgba(13,15,12,.62); outline:none; }
.vcard__media{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#15171a; }
.vcard__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.vcard:hover .vcard__media img{ transform:scale(1.06); }
.vcard__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.22)); opacity:0; transition:opacity .4s; }
.vcard:hover .vcard__media::after{ opacity:1; }
.vcard__play{ position:absolute; right:13px; bottom:13px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:#fff; box-shadow:0 10px 22px -6px rgba(0,0,0,.45); z-index:2; transition:transform .35s cubic-bezier(.2,.7,.2,1), background .35s; }
.vcard:hover .vcard__play{ transform:scale(1.12); background:var(--gold,#c9a24b); }
.vcard__play svg{ width:17px; height:17px; fill:var(--brand-teal,#1f7a8c); margin-left:2px; transition:fill .35s; }
.vcard:hover .vcard__play svg{ fill:#fff; }
.vcard__info{ display:flex; flex-direction:column; gap:5px; padding:15px 16px 17px; }
.vcard__title{ font-family:var(--font-display,sans-serif); font-weight:700; font-size:1.04rem; line-height:1.28; letter-spacing:-.01em; color:var(--ink,#0d0f0c);
  display:-webkit-box; -webkit-line-clamp:1; line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.vcard__author{ font-family:var(--font-ui,sans-serif); font-size:.82rem; color:#7f857c; }
.vcard__meta{ display:flex; align-items:center; gap:8px; font-family:var(--font-ui,sans-serif); font-size:.76rem; color:#a6aaa0; }
.vcard__meta i{ font-style:normal; width:3px; height:3px; border-radius:50%; background:currentColor; flex:none; }
.vcard--fb .vcard__play svg{ fill:#1877f2; }
.vcard--fb:hover .vcard__play{ background:#1877f2; }
.vcard--fb:hover .vcard__play svg{ fill:#fff; }

/* lightbox */
.vlb{ position:fixed; inset:0; z-index:1200; display:none; }
.vlb.is-open{ display:block; }
.vlb__backdrop{ position:absolute; inset:0; background:rgba(8,9,7,.84); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:vlb-fade .25s ease; }
.vlb__dialog{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(1000px,94vw); animation:vlb-pop .32s cubic-bezier(.2,.7,.2,1); }
.vlb__frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 40px 90px -28px rgba(0,0,0,.85); }
.vlb__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vlb__close{ position:absolute; top:-48px; right:0; width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(255,255,255,.42); background:rgba(255,255,255,.1); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .3s, transform .3s; }
.vlb__close:hover{ background:rgba(255,255,255,.26); transform:rotate(90deg); }
@keyframes vlb-fade{ from{opacity:0} to{opacity:1} }
@keyframes vlb-pop{ from{opacity:0; transform:translate(-50%,-46%) scale(.96)} to{opacity:1; transform:translate(-50%,-50%) scale(1)} }
@media (max-width:560px){ .vlb__dialog{ width:96vw; } .vlb__close{ top:-44px; } .vgal{ grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); } }
@media (prefers-reduced-motion:reduce){ .vcard, .vcard__thumb img, .vcard__play, .vlb__dialog, .vlb__backdrop{ transition:none; animation:none; } }

/* sub-page footer social row (homepage uses existing .ft__social) */
.pfoot__social{ display:flex; gap:10px; margin-top:18px; list-style:none; padding:0; flex-wrap:wrap; }
.pfoot__social a{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#cdbfa3; border:1px solid rgba(230,197,133,.28); transition:color .3s, background .3s, border-color .3s, transform .3s; }
.pfoot__social a:hover{ color:#1a1407; background:var(--gold-soft,#e6c585); border-color:var(--gold-soft,#e6c585); transform:translateY(-2px); }
.pfoot__social svg{ width:17px; height:17px; }