/* ==========================================================================
   Referenciák – idővonal + prémium kártyarács
   A szolgáltatás- és település-oldalak dizájn-nyelvét követi (gf-* / tp-*):
   üveg-kártya, arany akcentus, Cinzel címek. Színek KIZÁRÓLAG márkatokenből.

   A LÉNYEG: a fotóanyag 88%-a ÁLLÓ. A régi rács fix `height:240px`-es fekvő
   dobozt használt, amiben egy 3:4-es kép 180×240-re zsugorodott, kétoldalt
   ~90 px üres háttérrel. Itt a doboz igazodik a kép tájolásához.
   ========================================================================== */

/* ---------- Átvett dizájn-elemek ----------
   A `gf-kicker`, `gf-gold` és `lp-btn` a szolgáltatás-oldalak, illetve a
   landing CSS-ében élnek – azokat ez az oldal NEM tölti be, ráadásul a
   gf-* szabályok `.svc-fold` alá vannak scope-olva. Emiatt itt stílus nélkül
   jelentek meg (a gomb szövege sötétbarna volt átlátszó háttéren, olvashatatlanul).
   Ezért az oldal SAJÁT MAGA hozza őket, a forrással azonos értékekkel. */
.rf .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: 14px;
}
.rf .gf-gold{
  background: linear-gradient(180deg,#e6c877 0%,#c8a44d 55%,#b58848 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rf .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);
}
.rf .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);
}
.rf .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);
}
@media (prefers-reduced-motion: reduce){ .rf .lp-btn{ transition:none; } .rf .lp-btn--primary:hover{ transform:none; } }

/* ---------- Hero ---------- */
.rf-hero{ padding: 8px 0 4px; max-width: 62ch; }
.rf-hero__cim{
  margin: 10px 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;
}
.rf-hero__lead{ color: var(--silver); font-size: 1.02rem; line-height: 1.7; margin: 0; }

/* ---------- Tény-sáv ---------- */
.rf-tenyek{
  display: grid; gap: 12px; margin: 26px 0 24px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.rf-teny{
  padding: 15px 17px;
  border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
  background: rgba(255,255,255,.04);
}
.rf-teny__v{
  display: block; color: var(--primary);
  font-size: 1.7rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rf-teny__t{
  display: block; margin-top: 3px;
  color: var(--muted); font-size: .78rem; letter-spacing: .4px;
}

/* ---------- Szűrősor ---------- */
.rf-szuro{
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.10);
}
.rf-chipek{ display: flex; flex-wrap: wrap; gap: 8px; }
.rf-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);
}
.rf-chip:hover, .rf-chip:focus-visible{ border-color: rgba(200,164,77,.42); color: var(--primary); }
.rf-chip.is-aktiv{
  border-color: rgba(200,164,77,.48); background: rgba(200,164,77,.12); color: var(--primary);
}
.rf-chip__db{ opacity: .6; font-weight: 500; margin-left: 2px; }

.rf-kereso{ position: relative; flex: 0 1 260px; }
.rf-kereso input{
  width: 100%; padding: 9px 32px 9px 14px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 99px;
  background: rgba(255,255,255,.04); color: var(--text); font: inherit; font-size: .88rem;
}
.rf-kereso input::placeholder{ color: var(--muted); }
.rf-kereso input:focus-visible{ outline: none; border-color: rgba(200,164,77,.45); }
.rf-kereso button{
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer;
}
.rf-kereso button:hover{ color: var(--primary); }

/* ---------- Hónap-szakasz ---------- */
.rf-honap{ margin-top: 30px; }
.rf-honap[hidden]{ display: none; }
.rf-honap__fej{
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 16px; font-weight: 400;
}
.rf-honap__nev{
  font-family:"Cinzel","Inter",system-ui,sans-serif;
  font-size: 1.05rem; color: var(--text); white-space: nowrap;
}
.rf-honap__ev{ color: var(--muted); font-size: .92em; }
.rf-honap__vonal{ flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.rf-honap__db{ color: var(--muted); font-size: .74rem; letter-spacing: .5px; white-space: nowrap; }

/* ---------- Kártyarács ---------- */
.rf-racs{
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.rf-kartya{
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(255,255,255,.10); border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(200,164,77,.06), transparent 55%),
    rgba(255,255,255,.035);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.rf-kartya:hover{ border-color: rgba(200,164,77,.28); transform: translateY(-2px); }
.rf-kartya.is-rejtett{ display: none; }
.rf-kartya[hidden]{ display: none; }

/* A kép-doboz a TÁJOLÁSHOZ igazodik – ez a fix magasság helyett jött.
   Így sem az álló, sem a fekvő fotó nem letterboxol a kártyán. */
.rf-kartya__kep{
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  position: relative; background: rgba(0,0,0,.35);
}
.rf-kartya__kep.is-allo { aspect-ratio: 3 / 4; }
.rf-kartya__kep.is-fekvo{ aspect-ratio: 4 / 3; }
.rf-kartya__kep img{
  width: 100%; height: 100%; display: block;
  /* A tájolás-helyes dobozban a `cover` már nem vág le lényeget, viszont
     kitölti a kártyát. A NAGYÍTÁSBAN `contain` marad – ott a teljes kép kell. */
  object-fit: cover;
}
/* Előtte/utána montázs borítóként: a két félkép EGYÜTT a mondanivaló, a
   `cover` viszont pont a széleket – a feliratokat – vágná le. Itt tehát
   `contain` kell, és a doboz is a montázs arányát veszi fel. */
.rf-kartya__kep.is-osszehasonlito{ aspect-ratio: 3 / 2; }
.rf-kartya__kep.is-osszehasonlito img{ object-fit: contain; }
.rf-kartya__db{
  position: absolute; right: 9px; bottom: 9px;
  padding: 3px 9px; border-radius: 99px;
  background: rgba(8,10,13,.72); border: 1px solid rgba(255,255,255,.14);
  color: var(--silver); font-size: .7rem; font-weight: 600; letter-spacing: .3px;
}

/* „Videó” jelvény – csak azokon a munkákon, amikhez tényleg van felvétel.
   A videó-oldal `refSlug` mezője köti a kettőt össze. */
.rf-kartya__video{
  position: absolute; left: 10px; top: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 8px; border-radius: 99px;
  background: rgba(8,10,13,.82);
  border: 1px solid rgba(200,164,77,.45);
  color: var(--primary); font-size: .7rem; font-weight: 700; letter-spacing: .3px;
  text-decoration: none; backdrop-filter: blur(3px);
  transition: background .2s var(--ease);
}
.rf-kartya__video:hover{ background: rgba(200,164,77,.22); }
.rf-kartya{ position: relative; }

.rf-kartya__test{ padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 8px; }
.rf-kartya__meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  color: var(--muted); font-size: .72rem; letter-spacing: .5px; text-transform: uppercase;
}
.rf-pont{ opacity: .5; }
.rf-kartya__cim{
  margin: 0; color: var(--text);
  font-family:"Cinzel","Inter",system-ui,sans-serif;
  font-size: 1.02rem; line-height: 1.3; font-weight: 400; text-wrap: balance;
}
.rf-kartya__leiras{
  margin: 0; color: var(--silver); font-size: .86rem; line-height: 1.6;
}
.rf-cimke{
  align-self: flex-start;
  padding: 3px 10px; border-radius: 99px;
  border: 1px solid rgba(200,164,77,.28); background: rgba(200,164,77,.08);
  color: var(--primary); font-size: .72rem; font-weight: 600; letter-spacing: .2px;
}
.rf-kartya__tovabb{
  margin-top: 2px; color: var(--primary);
  font-size: .82rem; font-weight: 600; text-decoration: none;
}
.rf-kartya__tovabb:hover{ text-decoration: underline; }

/* ---------- Továbbiak / üres ---------- */
.rf-tovabb{ text-align: center; margin-top: 28px; }
.rf-ures{
  margin: 34px auto; text-align: center; color: var(--muted); line-height: 1.7;
}

/* ---------- Nagyítás ---------- */
.rf-lb[hidden]{ display: none; }
.rf-lb{ position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 18px; }
.rf-lb__hatter{ position: absolute; inset: 0; background: rgba(6,8,10,.88); backdrop-filter: blur(3px); }
.rf-lb__panel{
  position: relative; width: min(1000px, 100%); max-height: 92vh;
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12); background: #0c0e11;
}
.rf-lb__zar{
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: var(--text); font-size: 1.3rem; line-height: 1;
}
.rf-lb__zar:hover{ border-color: rgba(200,164,77,.45); color: var(--primary); }
.rf-lb__fej{ padding-right: 44px; }
.rf-lb__cim{
  margin: 0; font-family:"Cinzel","Inter",system-ui,sans-serif;
  font-size: 1.15rem; font-weight: 400; color: var(--text);
}
.rf-lb__meta{ margin: 4px 0 0; color: var(--muted); font-size: .8rem; letter-spacing: .4px; }
.rf-lb__szinpad{ position: relative; display: grid; place-items: center; min-height: 0; }
.rf-lb__szinpad img{
  max-width: 100%; max-height: 66vh;
  object-fit: contain;           /* a nagyításban a TELJES kép kell */
  border-radius: 10px; display: block;
}
.rf-lb__nyil{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(8,10,13,.7);
  color: var(--text); font-size: 1.5rem; line-height: 1;
}
.rf-lb__nyil:hover{ border-color: rgba(200,164,77,.45); color: var(--primary); }
.rf-lb__nyil--elozo{ left: 6px; }
.rf-lb__nyil--kovetkezo{ right: 6px; }
.rf-lb__nyil[disabled]{ opacity: .3; cursor: default; }
.rf-lb__felirat{ margin: 0; color: var(--silver); font-size: .88rem; line-height: 1.6; min-height: 1.6em; }
.rf-lb__szamlalo{ margin: 0; color: var(--muted); font-size: .76rem; letter-spacing: .5px; }

/* Nyitott nagyításnál a háttér NEM görgethető.
   A régi kód `lb-open` osztályt tett a body-ra, de CSS nem tartozott hozzá.
   A `html`-t IS zárolni kell: az `01-base.css` `html, body { overflow-y: auto }`
   szabálya miatt a görgető elem a <html>, így a bodyra tett `overflow:hidden`
   önmagában nem állítja meg a hátteret.
   Az `!important` sem stílus-kérdés: az 01-base.css `overflow-y: auto !important`-ot
   ír, amit specificitással nem lehet felülírni – csak ugyanilyen erősségű
   szabállyal. Mindkettőt méréssel találtuk meg, nem feltételezéssel. */
html.rf-lb-nyitva, body.rf-lb-nyitva{ overflow: hidden !important; }

/* ---------- Mobil ---------- */
@media (max-width: 720px){
  .rf-racs{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .rf-szuro{ flex-direction: column; align-items: stretch; }
  .rf-kereso{ flex: 1 1 auto; }
  .rf-lb__panel{ padding: 16px 14px; }
  .rf-lb__szinpad img{ max-height: 56vh; }
  .rf-honap__db{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .rf-kartya, .rf-chip{ transition: none; }
  .rf-kartya:hover{ transform: none; }
}

/* Év-szűrő. Külön sor a szakterület-chipek alatt: a kettő EGYÜTT szűr,
   ezért vizuálisan is el kell válniuk, különben a néző azt hinné, egy
   csoportból választ. */
.rf-chipek--ev{
  width: 100%;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.10);
}
.rf-chip--ev{ font-variant-numeric: tabular-nums; }