/* ============================================================
   Árboc Közhasznú Egyesület — publikus stílus
   A prototípus (elonezet/arboc-onepager-egszinkek.html) stílusa,
   saját kiszolgálású betűkkel és a CMS-blokkok kiegészítéseivel.
   ============================================================ */

/* ---- Betűk (saját kiszolgálás, nem külső szolgáltatótól) ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('betuk/inter.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 449;font-display:swap;
  src:url('betuk/cormorant.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:450 700;font-display:swap;
  src:url('betuk/cormorant-medium.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
  src:url('betuk/cormorant-italic.woff2') format('woff2')}


:root{
  --kek-mely:#0B3F63; --kek:#15679F; --kek-vil:#3D9BD6; --kek-csucs:#1B7CBC;
  --arany:#C9A227;          /* dekoracio: keretek, pontok, gomb hatter */
  --arany-szoveg:#8A6D12;   /* kis szoveg vilagos hatteren - AA 4.67:1 */
  --arany-hal:#EFE3BE;      /* kis szoveg sotet kek hatteren - AA 4.72:1 */
  --tinta:#15241D; --halvany:#5C6F66; --vonal:#DCE6ED;
  --ivory:#F7FBFD; --ivory-mely:#E9F2F8; --feher:#FFFFFF;
  --mert:1180px; --keskeny:760px;
  --ki:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:112px}
body{
  margin:0; background:var(--ivory); color:var(--tinta);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; line-height:1.15; margin:0; letter-spacing:.002em}
p{margin:0 0 1.15em}
.wrap{max-width:var(--mert); margin-inline:auto; padding-inline:clamp(20px,5vw,48px)}
.keskeny{max-width:var(--keskeny)}

/* ---- Eyebrow / szekciofej ---- */
.eyebrow{
  font-family:'Inter',sans-serif; font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--arany-szoveg);
  display:flex; align-items:center; gap:.9em; margin:0 0 1.1em;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--vonal)}
.szekcio{padding:clamp(72px,10vw,132px) 0}
.szekcio-cim{font-size:clamp(2rem,4.4vw,3.4rem); margin-bottom:.5em; max-width:18ch}
.bevezeto{font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--halvany); max-width:62ch}

/* ---- Fejlec ---- */
.fejlec{
  position:fixed; inset:0 0 auto 0; z-index:60; height:112px;
  display:flex; align-items:center;
  transition:height .32s var(--ki), background-color .32s var(--ki), box-shadow .32s var(--ki);
}
.fejlec .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.fejlec.tapad{height:92px; background:rgba(251,249,245,.92); backdrop-filter:saturate(180%) blur(14px); box-shadow:0 1px 0 var(--vonal)}
.marka{display:flex; align-items:center; gap:.7em; text-decoration:none}
.marka img{height:76px; width:auto; transition:height .32s var(--ki)}
.fejlec.tapad .marka img{height:64px}
.marka span{font-family:'Cormorant Garamond',serif; font-size:1.18rem; letter-spacing:.04em; color:var(--feher); transition:color .32s var(--ki); white-space:nowrap}
.fejlec.tapad .marka span{color:var(--tinta)}
.menu{display:flex; gap:clamp(14px,2vw,30px); align-items:center}
.menu a{
  text-decoration:none; font-size:.86rem; font-weight:500; letter-spacing:.05em;
  color:rgba(255,255,255,.86); padding:.4em 0; position:relative; transition:color .28s var(--ki);
}
.fejlec.tapad .menu a{color:var(--halvany)}
.menu a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ki)}
.menu a:hover::after,.menu a.aktiv::after{transform:scaleX(1)}
.menu a:hover,.menu a.aktiv{color:var(--feher)}
.fejlec.tapad .menu a:hover,.fejlec.tapad .menu a.aktiv{color:var(--kek)}
.menugomb{display:none; background:none; border:0; padding:8px; cursor:pointer}
.menugomb span{display:block; width:24px; height:1.5px; background:var(--feher); margin:5px 0; transition:background .3s}
.fejlec.tapad .menugomb span{background:var(--tinta)}

/* ---- Hero ---- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:radial-gradient(120% 100% at 15% 0%, var(--kek-csucs) 0%, var(--kek) 45%, var(--kek-mely) 100%);
  color:var(--feher); overflow:hidden; padding:150px 0 70px;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:26px 26px; opacity:.55;
}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,6vw,80px); align-items:center}
.hero-kicker{
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--arany-hal); margin-bottom:1.6em; display:block;
}
.hero h1{font-size:clamp(2.5rem,6vw,4.6rem); font-weight:400; line-height:1.05; margin-bottom:.42em; letter-spacing:-.01em}
.hero h1 em{font-style:italic; color:var(--arany-hal)}
.hero-lead{font-size:clamp(1.04rem,1.7vw,1.22rem); color:rgba(255,255,255,.82); max-width:52ch; margin-bottom:2.2em; font-weight:300}
.hero-gombok{display:flex; gap:14px; flex-wrap:wrap}
.gomb{
  display:inline-flex; align-items:center; gap:.6em; text-decoration:none;
  font-size:.88rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  padding:1.05em 2.4em; border-radius:999px; border:1px solid transparent;
  transition:background-color .3s var(--ki), color .3s var(--ki), border-color .3s var(--ki), transform .3s var(--ki);
}
.gomb-elsodleges{background:var(--arany); color:var(--kek-mely)}
.gomb-elsodleges:hover{background:var(--arany-hal); transform:translateY(-2px)}
.gomb-masodlagos{border-color:rgba(255,255,255,.38); color:var(--feher)}
.gomb-masodlagos:hover{border-color:var(--feher); background:rgba(255,255,255,.08); transform:translateY(-2px)}
/* A kep pereme elmosodik, a hattere pedig melyen arnyekolt.
   A lagy peremet maszk adja (mind a negy oldalon atmenet), az arnyekot pedig a
   szulo elemre tett drop-shadow - igy az arnyek a lagy koronturat koveti,
   nem egy eles teglalapot. A box-shadow itt nem lenne jo: az a dobozt rajzolna. */
.hero-kep{
  position:relative;
  filter:
    drop-shadow(0 6px 10px rgba(2,16,28,.42))
    drop-shadow(0 22px 34px rgba(2,16,28,.46))
    drop-shadow(0 52px 68px rgba(2,16,28,.52))
    drop-shadow(0 90px 120px rgba(2,16,28,.55));
}
.hero-kep img{
  display:block; border-radius:3px;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.hero-le{position:absolute; left:50%; bottom:30px; transform:translateX(-50%); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.8)}

/* ---- Aktualis sav ---- */
.aktualis{background:var(--kek-mely); color:var(--feher)}
.aktualis .wrap{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(24px,4vw,56px); align-items:center; padding-block:clamp(40px,5vw,60px)}
.aktualis img{max-height:var(--kep-magassag,111px); width:auto}
/* A sav logoja a nyitokephez hasonlo lagy peremet kap; sotet hatteren
   vilagosabb arnyek kell, kulonben a kek savon nem latszik. */
.aktualis .lagykep{
  filter:
    drop-shadow(0 3px 6px rgba(0,0,0,.35))
    drop-shadow(0 10px 18px rgba(0,0,0,.32))
    drop-shadow(0 26px 36px rgba(0,0,0,.30));
}   /* eredeti szinekkel, a magassag az adminbol allithato */
.aktualis .cimke{font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--arany-hal); display:block; margin-bottom:.7em}
.aktualis h2{font-size:clamp(1.35rem,2.4vw,1.9rem); margin-bottom:.35em; font-weight:400}
.aktualis p{color:rgba(255,255,255,.76); margin:0; font-size:.96rem; max-width:64ch}

/* ---- Rolunk ---- */
.rolunk{background:var(--feher)}
.rolunk-racs{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:start}
.idezet{
  font-family:'Cormorant Garamond',serif; font-size:clamp(1.5rem,2.8vw,2.15rem);
  font-style:italic; font-weight:400; line-height:1.35; color:var(--kek);
  border-left:2px solid var(--arany); padding-left:clamp(20px,3vw,34px); margin:0 0 1.4em;
}
.alairas{display:flex; align-items:center; gap:.8em; margin-top:2em; font-size:.9rem; color:var(--halvany)}
.alairas::before{content:""; width:38px; height:1px; background:var(--arany)}
.alairas strong{font-weight:500; color:var(--tinta)}

/* ---- Szamok ---- */
.szamok{background:var(--ivory-mely)}
.szamok .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px); text-align:center; padding-block:clamp(52px,7vw,84px)}
.szam-ertek{font-family:'Cormorant Garamond',serif; font-size:clamp(2.6rem,6vw,4.2rem); font-weight:400; color:var(--kek); line-height:1; display:block}
.szam-cimke{font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--halvany); margin-top:.9em; display:block}

/* ---- Tevekenysegek ---- */
.tevekenyseg{background:var(--feher)}
.szolg-racs{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:1px; background:var(--vonal); border:1px solid var(--vonal); margin-top:clamp(38px,5vw,60px)}
.szolg{background:var(--feher); padding:clamp(30px,3.6vw,46px); transition:background-color .35s var(--ki)}
.szolg:hover{background:var(--ivory)}
.szolg .szam{font-family:'Cormorant Garamond',serif; font-size:.95rem; color:var(--arany-szoveg); letter-spacing:.1em; display:block; margin-bottom:1.5em}
.szolg h3{font-size:1.55rem; margin-bottom:.3em}
.szolg .alcim{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--halvany); margin-bottom:1.4em}
.szolg .leiras{font-size:.95rem; color:var(--halvany); margin:0}

/* ---- Csapat ---- */
.csapat{background:var(--ivory)}
.csapat-racs{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(28px,4vw,52px); margin-top:clamp(38px,5vw,60px)}
.tagkep{overflow:hidden; border-radius:2px; margin-bottom:1.6em; aspect-ratio:4/5}
.tagkep img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.02); transition:filter .6s var(--ki), transform .8s var(--ki)}
.tag:hover .tagkep img{filter:grayscale(0); transform:scale(1.03)}
.tag h3{font-size:1.7rem; margin-bottom:.15em}
.szerep{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--arany-szoveg); margin-bottom:1.2em}
.tag .leiras{font-size:.94rem; color:var(--halvany); margin:0}

/* ---- Eredmenyek ---- */
.eredmenyek{background:var(--kek); color:var(--feher)}
.eredmenyek .eyebrow{color:var(--arany-hal)}
.eredmenyek .eyebrow::after{background:rgba(255,255,255,.2)}
.eredmenyek .bevezeto{color:rgba(255,255,255,.82)}
.int-lista{columns:3; column-gap:clamp(24px,4vw,56px); list-style:none; padding:0; margin:clamp(34px,4vw,52px) 0 0;
  max-height:270px; overflow:hidden; transition:max-height .7s var(--ki)}
.int-lista.nyitva{max-height:2400px}
.int-lista li{break-inside:avoid; font-size:.9rem; color:rgba(255,255,255,.82); padding:.5em 0 .5em 1.1em; position:relative; border-bottom:1px solid rgba(255,255,255,.09)}
.int-lista li::before{content:""; position:absolute; left:0; top:1.12em; width:4px; height:4px; border-radius:50%; background:var(--arany)}
.tovabb{margin-top:1.8em; background:none; border:0; border-bottom:1px solid var(--arany); color:var(--arany-hal);
  font-family:'Inter',sans-serif; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; padding:.5em 0; cursor:pointer; transition:color .3s}
.tovabb:hover{color:var(--feher)}

/* ---- Partnerek ---- */
.partnerek{background:var(--feher)}
.partner-racs{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1px; background:var(--vonal); border:1px solid var(--vonal); margin-top:clamp(38px,5vw,60px)}
.partner{background:var(--feher); aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; padding:22px}
.partner img{max-height:100%; width:auto; object-fit:contain; filter:grayscale(1); opacity:.5; transition:filter .4s var(--ki), opacity .4s var(--ki)}
.partner:hover img{filter:grayscale(0); opacity:1}

/* ---- Kapcsolat ---- */
.kapcsolat{background:var(--ivory-mely)}
.kapcsolat-racs{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:start}
.adatsor{border-top:1px solid var(--vonal); padding:1.15em 0; display:grid; grid-template-columns:150px 1fr; gap:1em; align-items:baseline}
.adatsor:last-child{border-bottom:1px solid var(--vonal)}
.adatsor dt{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--halvany)}
.adatsor dd{margin:0; font-size:1.02rem}
.adatsor dd a{text-decoration:none; border-bottom:1px solid var(--vonal); transition:border-color .3s}
.adatsor dd a:hover{border-color:var(--kek)}
.kozossegi{display:flex; gap:12px; margin-top:2em; flex-wrap:wrap}
.kozossegi a{
  display:inline-flex; align-items:center; gap:.55em; text-decoration:none; font-size:.84rem; letter-spacing:.04em;
  border:1px solid var(--vonal); border-radius:999px; padding:.85em 1.7em; transition:border-color .3s var(--ki), background-color .3s var(--ki), color .3s var(--ki);
}
.kozossegi a:hover{border-color:var(--kek); background:var(--kek); color:var(--feher)}

/* ---- Lablec ---- */
.lablec{background:var(--kek-mely); color:rgba(255,255,255,.62); padding:clamp(26px,3vw,38px) 0 clamp(16px,2vw,22px)}
.lablec-fo{display:flex; justify-content:space-between; align-items:flex-end; gap:clamp(28px,5vw,64px); flex-wrap:wrap}
.lablec-marka{display:block; line-height:0}
.lablec-tamogato{display:flex; flex-direction:column; align-items:flex-end; gap:.85em}
.lablec-cimke{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5)}
/* A sajat marka egyszinu feher a sotet kek savon; a tamogatoi logok viszont
   eredeti szinukkel, vilagos lapon - a fekete feliratuk kek hatteren olvashatatlan lenne,
   es az allami logok hasznalati elvarasa is a vilagos alap. */
.lablec img{max-height:78px; width:auto}
.lablec-marka img{max-height:82px; filter:brightness(0) invert(1)}
/* A tamogatoi lap ugyanazt a kezelest kapja, mint a nyitokep: ivelt sarok,
   lagyan elmosodo perem es retegzett arnyek. A hatteret kulon reteg rajzolja,
   csak azt maszkoljuk - a logok igy elesek maradnak. A lagyulas a belso
   terkozre esik, tehat a szelso logo alatt is tomor feher marad. */
.lablec-tabla{
  display:inline-block; position:relative; line-height:0; padding:22px 34px;
  filter:
    drop-shadow(0 2px 4px rgba(2,16,28,.26))
    drop-shadow(0 9px 16px rgba(2,16,28,.24))
    drop-shadow(0 22px 32px rgba(2,16,28,.22));
}
.lablec-tabla::before{
  content:""; position:absolute; inset:0; border-radius:18px; background:#fff;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.lablec-tabla img{position:relative; max-height:74px}
.lablec-also{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:clamp(20px,2.4vw,28px); padding-top:clamp(13px,1.6vw,18px);
  border-top:1px solid rgba(255,255,255,.15); font-size:.8rem;
}

/* ---- Reveal ---- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ki), transform .8s var(--ki)}
.reveal.lathato{opacity:1; transform:none}

/* ---- Fokusz ---- */
:focus-visible{outline:2px solid var(--arany); outline-offset:3px}

/* ---- Reszponziv ---- */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-kep{display:none}
  .rolunk-racs,.kapcsolat-racs{grid-template-columns:1fr}
  .int-lista{columns:2}
  .aktualis .wrap{grid-template-columns:1fr; text-align:left}
  .aktualis img{max-height:calc(var(--kep-magassag,111px) * .75)}
  .kepszoveg-racs{grid-template-columns:1fr}
  .kepszoveg.forditva .kepszoveg-kep{order:0}
  .cta .wrap{grid-template-columns:1fr}
  .aktualis.nincs-kep .wrap,.aktualis.nincs-gomb .wrap{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .menu{
    position:fixed; inset:92px 0 auto 0; background:var(--feher); flex-direction:column; gap:0;
    padding:8px 0 18px; box-shadow:0 18px 40px -20px rgba(0,0,0,.3); display:none;
  }
  .menu.nyitva{display:flex}
  .menu a{color:var(--tinta) !important; padding:.95em clamp(20px,5vw,48px); width:100%; font-size:.95rem}
  .menu a::after{display:none}
  .menugomb{display:block}
  .szamok .wrap{grid-template-columns:1fr; gap:38px}
  .int-lista{columns:1}
  .adatsor{grid-template-columns:1fr; gap:.2em}
  .szamok .wrap{grid-template-columns:1fr}
  .urlap-sor{grid-template-columns:1fr}
  body.belso{padding-top:84px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
}

/* ============================================================
   CMS-kiegészítések
   ============================================================ */

/* ---- Ugrás a tartalomra (billentyűzetes böngészéshez) ---- */
.atugras{position:absolute; left:-9999px; top:0; z-index:200; background:var(--kek-mely); color:#fff;
  padding:.9em 1.4em; font-size:.85rem; letter-spacing:.06em; text-decoration:none}
.atugras:focus{left:12px; top:12px}

/* ---- Háttérváltozatok ---- */
.szekcio.hatter-feher{background:var(--feher)}
.szekcio.hatter-ivory{background:var(--ivory)}
.szekcio.hatter-kek{background:var(--kek); color:var(--feher)}
.szekcio.hatter-kek .eyebrow{color:var(--arany-hal)}
.szekcio.hatter-kek .eyebrow::after{background:rgba(255,255,255,.2)}
.szekcio.hatter-kek .bevezeto,.szekcio.hatter-kek p{color:rgba(255,255,255,.82)}
.szekcio.hatter-kek .idezet{color:var(--arany-hal); border-left-color:var(--arany)}
.eredmenyek.hatter-feher,.eredmenyek.hatter-ivory{color:var(--tinta)}
.eredmenyek.hatter-feher .eyebrow,.eredmenyek.hatter-ivory .eyebrow{color:var(--arany-szoveg)}
.eredmenyek.hatter-feher .eyebrow::after,.eredmenyek.hatter-ivory .eyebrow::after{background:var(--vonal)}
.eredmenyek.hatter-feher .bevezeto,.eredmenyek.hatter-ivory .bevezeto{color:var(--halvany)}
.eredmenyek.hatter-feher .int-lista li,.eredmenyek.hatter-ivory .int-lista li{color:var(--halvany); border-bottom-color:var(--vonal)}
.eredmenyek.hatter-feher .tovabb,.eredmenyek.hatter-ivory .tovabb{color:var(--arany-szoveg)}
.eredmenyek.hatter-feher .tovabb:hover,.eredmenyek.hatter-ivory .tovabb:hover{color:var(--kek)}

/* ---- Számsor: hasábszám a blokkból ---- */
.szamok .wrap{grid-template-columns:repeat(var(--oszlop,3),1fr)}

/* ---- Kiemelt sáv változatai ---- */
.aktualis.nincs-kep .wrap{grid-template-columns:1fr auto}
.aktualis.nincs-gomb .wrap{grid-template-columns:auto 1fr}
.aktualis.nincs-kep.nincs-gomb .wrap{grid-template-columns:1fr}

/* ---- Belső oldal fejléce ---- */
body.belso{padding-top:92px}
.fejlec.allando{background:rgba(251,249,245,.94)}
.oldalfej{background:var(--ivory-mely); padding:clamp(54px,7vw,88px) 0 clamp(38px,5vw,56px)}
.oldalfej h1{font-size:clamp(2.1rem,4.6vw,3.5rem); max-width:20ch; margin-bottom:.2em}
.oldalfej .eyebrow a{text-decoration:none; border-bottom:1px solid var(--vonal)}
.vazlat-jelzo{margin:0; background:var(--arany-hal); color:#4a3a06; text-align:center;
  padding:.85em 1.2em; font-size:.84rem; letter-spacing:.06em}

/* ---- Harmadik gombváltozat ---- */
.gomb-vonalas{border-color:var(--vonal); color:var(--kek); background:transparent}
.gomb-vonalas:hover{border-color:var(--kek); background:var(--kek); color:var(--feher); transform:translateY(-2px)}

/* ---- Képblokk ---- */
.kepblokk figure{margin:0}
.kepblokk figcaption{margin-top:.9em; font-size:.84rem; color:var(--halvany); letter-spacing:.02em}
.kep-teljes{margin:0}
.kep-teljes img{width:100%; max-height:70vh; object-fit:cover}
.kep-teljes figcaption{max-width:var(--mert); margin:.9em auto 0; padding-inline:clamp(20px,5vw,48px); font-size:.84rem; color:var(--halvany)}

/* ---- Kép és szöveg ---- */
.kepszoveg-racs{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.kepszoveg.forditva .kepszoveg-kep{order:2}
.kepszoveg-kep{position:relative}
.kepszoveg-kep img{border-radius:3px; width:100%}

/* ---- Hírek ---- */
.hir-racs{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(24px,3vw,40px); margin-top:clamp(38px,5vw,60px)}
.hir-kartya{background:var(--feher); border:1px solid var(--vonal); border-radius:2px; overflow:hidden;
  transition:transform .4s var(--ki), box-shadow .4s var(--ki), border-color .4s var(--ki)}
.hir-kartya:hover{transform:translateY(-4px); box-shadow:0 26px 44px -28px rgba(11,63,99,.4); border-color:var(--kek-vil)}
.hir-kartya a{display:block; text-decoration:none; height:100%}
.hir-kep{aspect-ratio:16/10; overflow:hidden; background:var(--ivory-mely)}
.hir-kep img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ki)}
.hir-kartya:hover .hir-kep img{transform:scale(1.04)}
.hir-kartya time{display:block; padding:1.6em clamp(22px,2.4vw,30px) 0; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--arany-szoveg)}
.hir-kartya h3{font-size:1.5rem; margin:.45em 0 .4em; padding-inline:clamp(22px,2.4vw,30px)}
.hir-kartya .leiras{font-size:.93rem; color:var(--halvany); padding-inline:clamp(22px,2.4vw,30px); margin-bottom:1.2em}
.hir-kartya .tovabblink{display:inline-block; margin:0 clamp(22px,2.4vw,30px) 1.9em;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--kek);
  border-bottom:1px solid var(--arany); padding-bottom:.35em}
.hir-datum{display:block; margin-top:1.2em; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--arany-szoveg)}
.hir-boritokep{background:var(--ivory-mely); padding-bottom:clamp(28px,4vw,44px)}
.hir-boritokep img{width:100%; max-height:60vh; object-fit:cover; border-radius:2px}
.hir-egy .szekcio p{color:var(--halvany)}
.hir-egy .szekcio .keskeny h2{margin:1.4em 0 .4em}

/* ---- Üzenetküldő űrlap ---- */
.urlap{margin-top:2.6em; display:grid; gap:1.1em}
.urlap-sor{display:grid; grid-template-columns:1fr 1fr; gap:1.1em}
.urlap label{display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--halvany)}
.urlap input,.urlap textarea{
  display:block; width:100%; margin-top:.6em; font:inherit; font-size:1rem; color:var(--tinta);
  background:var(--feher); border:1px solid var(--vonal); border-radius:12px; padding:.85em 1.05em;
  transition:border-color .3s var(--ki), box-shadow .3s var(--ki);
}
.urlap input:focus,.urlap textarea:focus{outline:none; border-color:var(--kek); box-shadow:0 0 0 3px rgba(21,103,159,.12)}
.urlap textarea{resize:vertical; min-height:130px}
.urlap button{justify-self:start; cursor:pointer; font-family:inherit; margin-top:.4em}
.mezcsapda{position:absolute; left:-9999px; height:0; overflow:hidden}
.urlap-uzenet{padding:.95em 1.2em; border-radius:12px; font-size:.94rem; margin:0}
.urlap-uzenet.siker{background:#E6F2E9; color:#1C4F30; border:1px solid #BFDCC8}
.urlap-uzenet.hiba{background:#FBEAEA; color:#7A2223; border:1px solid #EBC6C6}

/* ---- Közösségi gombok márkaszínnel ----
   A hivatalos árnyalatnál 4-7%-kal sötétebb, hogy a fehér felirat elérje a 4,5:1
   kontrasztot (a márkaszín pontosan: #1877F2 és #FF0000 - szemmel nem különböznek). */
.kozossegi a.kozossegi-facebook{background:#1772E8; border-color:#1772E8; color:#fff}
.kozossegi a.kozossegi-facebook:hover{background:#1157B6; border-color:#1157B6; color:#fff}
.kozossegi a.kozossegi-youtube{background:#ED0000; border-color:#ED0000; color:#fff}
.kozossegi a.kozossegi-youtube:hover{background:#B80000; border-color:#B80000; color:#fff}

/* ---- Felhívás sáv ---- */
.cta{background:var(--kek); color:var(--feher); padding:clamp(46px,6vw,72px) 0}
.cta .wrap{display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,56px); align-items:center}
.cta h2{font-size:clamp(1.5rem,2.8vw,2.2rem); margin-bottom:.3em; font-weight:400}
.cta p{color:rgba(255,255,255,.82); margin:0; max-width:62ch}

/* ---- Lágy peremű, árnyékolt képek ----
   Ugyanaz a kezelés, mint a nyitóképen: a peremet maszk mossa el, az árnyékot a
   burkoló elem adja (drop-shadow), így az árnyék a lágy körvonalat követi.
   A képaláírás és a kártyaszöveg szándékosan kimarad a burkolóból. */
.tagkep,
.lagykep,
.kepszoveg-kep,
.hir-boritokep .wrap{
  filter:
    drop-shadow(0 3px 6px rgba(2,16,28,.26))
    drop-shadow(0 12px 20px rgba(2,16,28,.28))
    drop-shadow(0 30px 44px rgba(2,16,28,.32));
}
.tagkep img,
.lagykep img,
.kepszoveg-kep img,
.hir-boritokep img{
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}
.lagykep{display:block}
.kep-teljes .lagykep img{width:100%; max-height:70vh; object-fit:cover}

/* ---- Reszponzív kiegészítések ---- */



/* Csak a felolvasó számára látható szöveg (a képernyőn nem jelenik meg) */
.csak-felolvasonak{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* A fókuszált visszajelzés ne kapjon zavaró keretet, de látható maradjon */
.urlap-uzenet:focus{outline:2px solid var(--kek); outline-offset:3px}