/* ==========================================================================
   Videók – álló (9:16) videótár, néma előnézettel és immerzív lejátszóval
   A referencia-oldal (rf-*) és a település-oldalak (tp-*) dizájn-nyelvét viszi
   tovább: üveg-kártya, arany akcentus, Cinzel címek, márkatokenes színek.

   A LÉNYEG: a videótár MINDEN eleme álló. Egy 16:9-es rács mindet levágná
   vagy fekete sávok közé szorítaná, ezért itt 9:16-os keretek vannak.
   ========================================================================== */

/* ---------- Átvett dizájn-elemek ----------
   A `gf-kicker`, `gf-gold` és `lp-btn` a szolgáltatás-, illetve a landing
   CSS-ében élnek – azokat ez az oldal nem tölti be, a gf-* ráadásul `.svc-fold`
   alá van scope-olva. Ugyanaz a csapda, mint a referencia-oldalon: enélkül a
   gomb szövege sötétbarna lenne átlátszó háttéren. Ezért itt is saját másolat. */
.vd .gf-kicker{
  display:inline-block;
  font-size:.74rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  background: linear-gradient(90deg,#e6c877,#c8a44d);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom: 12px;
}
.vd .gf-gold{
  background: linear-gradient(180deg,#e6c877 0%,#c8a44d 55%,#b58848 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vd .lp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 26px; border:0; border-radius:8px; cursor:pointer;
  font: inherit; font-size:.94rem; font-weight:700; text-decoration:none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.vd .lp-btn--primary{
  background: linear-gradient(135deg,#e6c877 0%,#c8a44d 52%,#b58848 100%);
  color:#241a06;
  box-shadow: 0 4px 16px rgba(200,164,77,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.vd .lp-btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(200,164,77,.42), inset 0 1px 0 rgba(255,255,255,.35); }
.vd .lp-btn--ghost{
  background: transparent; color: var(--text);
  border: 1.5px solid rgba(255,255,255,.16);
}
.vd .lp-btn--ghost:hover{ border-color: rgba(200,164,77,.5); color: var(--primary); }

/* ---------- Nyitósáv ---------- */
.vd-hero{
  display:grid; gap:26px; align-items:center;
  grid-template-columns: 1fr 260px;
  padding: 8px 0 4px;
}
.vd-hero__cim{
  margin: 0 0 12px;
  font-family:"Cinzel","Inter",system-ui,sans-serif;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.14; color: var(--text); text-wrap: balance;
}
.vd-hero__lead{ color: var(--silver); font-size: 1.02rem; line-height: 1.7; margin: 0 0 14px; max-width: 54ch; }
.vd-hero__jelzes{
  display:inline-flex; align-items:center; gap:8px; margin:0;
  padding: 6px 13px; border-radius: 99px;
  background: rgba(200,164,77,.10); border: 1px solid rgba(200,164,77,.30);
  color: var(--primary); font-size: .8rem; font-weight: 600;
}
.vd-pont{ width:6px; height:6px; border-radius:50%; background: var(--primary); flex:0 0 auto; }

.vd-hero__jatszo{ position: relative; }
/* Elmosott, sötétített borító a keret mögött – a videó saját színvilága adja a
   hátteret, extra kép nélkül (ugyanaz a poster, CSS-ből elmosva). */
.vd-hero__hatter{
  position:absolute; inset:-26px -18px; border-radius: 22px;
  background-size: cover; background-position: center;
  filter: blur(28px) saturate(1.15) brightness(.42);
  opacity:.85; pointer-events:none; z-index:0;
}
.vd-hero__jatszo .vd-keret{ position: relative; z-index: 1; }

/* ---------- A 9:16-os keret (közös: hero + kártya) ---------- */
.vd-keret{
  display:block; width:100%; padding:0; border:0; cursor: pointer;
  position: relative; overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: #07090b;
  border: 1px solid rgba(255,255,255,.10);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.vd-keret:hover, .vd-keret:focus-visible{ border-color: rgba(200,164,77,.42); }
.vd-hero__jatszo .vd-keret{ border-color: rgba(200,164,77,.30); }
.vd-elonezet{
  width:100%; height:100%; display:block;
  /* A keret ÉS a videó is 9:16, tehát a cover nem vág le semmit – csak azt a
     pár pixelt, ami az egyetlen 1080×1908-as forrásnál eltér. */
  object-fit: cover;
}
.vd-jel{
  position:absolute; padding:3px 9px; border-radius:99px;
  background: rgba(8,10,13,.78); border:1px solid rgba(255,255,255,.14);
  color: var(--silver); font-size:.68rem; font-weight:600; letter-spacing:.3px;
}
.vd-jel--nema{ left:9px; top:9px; }
.vd-jel--hossz{ right:9px; bottom:9px; font-variant-numeric: tabular-nums; }
.vd-lejatszas{
  position:absolute; inset:0; margin:auto;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(8,10,13,.55); border:1px solid rgba(255,255,255,.22);
  color:#fff; backdrop-filter: blur(3px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.vd-lejatszas svg{ margin-left:3px; }
/* Amíg megy az előnézet, a gomb halványabb – nem takarja a mozgást. */
.vd-keret.is-jatszik .vd-lejatszas{ opacity:.32; }
.vd-keret:hover .vd-lejatszas{ opacity:1; transform: scale(1.06); }

/* ---------- Szűrő ---------- */
.vd-szuro{ padding: 22px 0 18px; border-bottom: 1px solid rgba(255,255,255,.10); }
.vd-chipek{ display:flex; flex-wrap:wrap; gap:8px; }
.vd-chip{
  padding:7px 14px; border-radius:99px; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  color: var(--silver); font: inherit; font-size:.84rem; font-weight:600;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.vd-chip:hover, .vd-chip:focus-visible{ border-color: rgba(200,164,77,.42); color: var(--primary); }
.vd-chip.is-aktiv{ border-color: rgba(200,164,77,.48); background: rgba(200,164,77,.12); color: var(--primary); }
.vd-chip__db{ opacity:.6; font-weight:500; }

/* ---------- Szakasz-fejléc ---------- */
.vd-szakasz{ margin-top: 28px; }
.vd-szakasz__fej{ display:flex; align-items:center; gap:14px; margin:0 0 16px; font-weight:400; }
.vd-szakasz__nev{
  font-family:"Cinzel","Inter",system-ui,sans-serif;
  font-size:1.05rem; color: var(--text); white-space:nowrap;
}
.vd-szakasz__vonal{ flex:1; height:1px; background: rgba(255,255,255,.12); }
.vd-szakasz__sugo{ color: var(--muted); font-size:.72rem; letter-spacing:.5px; white-space:nowrap; }

/* ---------- A szalag ---------- */
.vd-szalag{
  display:grid; gap:16px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,164,77,.35) transparent;
}
.vd-szalag::-webkit-scrollbar{ height:8px; }
.vd-szalag::-webkit-scrollbar-thumb{ background: rgba(200,164,77,.32); border-radius:99px; }
.vd-szalag::-webkit-scrollbar-track{ background: transparent; }

.vd-kartya{ scroll-snap-align: start; min-width: 0; }
.vd-kartya[hidden]{ display:none; }
.vd-kartya:hover .vd-keret{ transform: translateY(-2px); }

.vd-kartya__test{ padding: 11px 2px 0; }
.vd-kartya__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  color: var(--muted); font-size:.7rem; letter-spacing:.5px; text-transform:uppercase;
  margin-bottom: 5px;
}
.vd-pontjel{ opacity:.5; }
.vd-kartya__cim{
  margin:0 0 6px; color: var(--text);
  font-family:"Cinzel","Inter",system-ui,sans-serif;
  font-size:.98rem; line-height:1.3; font-weight:400; text-wrap: balance;
}
.vd-kartya__ref{ color: var(--primary); font-size:.78rem; font-weight:600; text-decoration:none; }
.vd-kartya__ref:hover{ text-decoration: underline; }

.vd-ures{ margin: 34px auto; text-align:center; color: var(--muted); line-height:1.7; }

/* ---------- Záró ---------- */
.vd-zaro{ margin: 40px 0 8px; text-align:center; }
.vd-zaro__cim{
  margin:0 0 8px; font-family:"Cinzel","Inter",system-ui,sans-serif;
  font-size:1.5rem; font-weight:400; color: var(--text);
}
.vd-zaro__lead{ margin:0 0 18px; color: var(--silver); }
.vd-zaro__cta{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* ---------- Immerzív lejátszó ---------- */
.vd-lb[hidden]{ display:none; }
.vd-lb{ position:fixed; inset:0; z-index:900; display:grid; place-items:center; padding:16px; }
.vd-lb__hatter{ position:absolute; inset:0; background: rgba(4,5,7,.93); backdrop-filter: blur(4px); }
.vd-lb__panel{
  position:relative; width:min(980px,100%); max-height:94vh;
  display:grid; gap:16px; grid-template-columns: minmax(0,auto) minmax(0,1fr);
  align-items:center;
}
.vd-lb__zar{
  position:absolute; top:-6px; right:-6px; z-index:3;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background: rgba(12,14,17,.9);
  color: var(--text); font-size:1.4rem; line-height:1;
}
.vd-lb__zar:hover{ border-color: rgba(200,164,77,.5); color: var(--primary); }

.vd-lb__szinpad{ position:relative; display:grid; place-items:center; min-width:0; }
.vd-lb__video{
  max-height: 82vh; max-width: 100%;
  aspect-ratio: 9 / 16; height: 82vh; width: auto;
  border-radius: 14px; background:#000; display:block;
  object-fit: contain;          /* a teljes kép kell, semmi levágás */
}
.vd-lb__nyil{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:50%; cursor:pointer; z-index:2;
  border:1px solid rgba(255,255,255,.16); background: rgba(12,14,17,.78);
  color: var(--text); font-size:1.5rem; line-height:1;
}
.vd-lb__nyil:hover{ border-color: rgba(200,164,77,.5); color: var(--primary); }
.vd-lb__nyil--elozo{ left:-52px; }
.vd-lb__nyil--kovetkezo{ right:-52px; }
.vd-lb__nyil[disabled]{ opacity:.28; cursor:default; }

.vd-lb__test{ min-width:0; }
.vd-lb__cim{
  margin:0 0 6px; font-family:"Cinzel","Inter",system-ui,sans-serif;
  font-size:1.3rem; font-weight:400; color: var(--text); text-wrap: balance;
}
.vd-lb__meta{ margin:0 0 12px; color: var(--muted); font-size:.8rem; letter-spacing:.4px; text-transform:uppercase; }
.vd-lb__leiras{ margin:0 0 16px; color: var(--silver); line-height:1.7; font-size:.94rem; }
.vd-lb__ref{
  display:inline-block; padding:9px 18px; border-radius:99px;
  border:1px solid rgba(200,164,77,.42); background: rgba(200,164,77,.10);
  color: var(--primary); font-size:.86rem; font-weight:600; text-decoration:none;
}
.vd-lb__ref:hover{ background: rgba(200,164,77,.18); }
.vd-lb__ref[hidden]{ display:none; }
.vd-lb__szamlalo{ margin:14px 0 0; color: var(--muted); font-size:.76rem; letter-spacing:.5px; font-variant-numeric: tabular-nums; }

/* Nyitott lejátszónál a háttér NEM görgethető.
   A `html`-t IS zárolni kell, és `!important`-tal: az `01-base.css`
   `html, body { overflow-y: auto !important }`-ot ír, amit specificitással
   nem lehet felülírni. Ezt a referencia-nagyításnál méréssel találtuk meg. */
html.vd-lb-nyitva, body.vd-lb-nyitva{ overflow: hidden !important; }

/* ---------- Mobil ---------- */
@media (max-width: 900px){
  .vd-hero{ grid-template-columns: 1fr; }
  .vd-hero__jatszo{ max-width: 260px; margin: 0 auto; }
  .vd-lb__panel{ grid-template-columns: 1fr; gap: 12px; }
  .vd-lb__video{ height: auto; max-height: 58vh; margin: 0 auto; }
  .vd-lb__nyil--elozo{ left: 6px; }
  .vd-lb__nyil--kovetkezo{ right: 6px; }
  .vd-lb__zar{ top: 4px; right: 4px; }
  .vd-lb__cim{ font-size: 1.1rem; }
}
@media (max-width: 720px){
  .vd-szalag{
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 62%;
  }
  .vd-szakasz__sugo{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .vd-keret, .vd-chip, .vd-lejatszas, .vd .lp-btn{ transition:none; }
  .vd-kartya:hover .vd-keret, .vd .lp-btn--primary:hover{ transform:none; }
}