:root{
  --brand:#379340;
  --bg:#f9aa4418;      /* háttér + ikonok színe */
  --ink:#000000;     /* alap szövegszín */
  --muted:#5c6a60;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(16,24,16,.08);
  --radius:16px;
  --bubble-bg: rgba(255,255,255); 
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* utils */
.container{width:min(1100px, 92%); margin-inline:auto}
.narrow{width:min(800px, 92%); margin-inline:auto}
.section{padding:64px 0}
.section.alt{background:#37934030}
.grid2{display:grid; gap:32px; grid-template-columns:1.2fr 1fr}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.small{font-size:.95rem; color:var(--muted)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.cta-center{display:flex; justify-content:center; margin-top:16px}

.btn{
  --pad:12px 16px;
  border-radius:999px;
  padding:var(--pad);
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--brand);
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  will-change:transform;
}
.btn.solid{background:var(--brand); color:#fff}
.btn.ghost{background:transparent; color:var(--brand)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid #1e7d27; outline-offset:2px}

/* header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--brand);
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.nav-bar{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px;
}
.hamburger{
  background:transparent; border:0; cursor:pointer; padding:10px; border-radius:10px;
  color:#FDFAF6;
}
.hamburger .ico{width:28px; height:28px; fill:currentColor}

.brand{display:flex; align-items:center; justify-content:center}
.brand .horse{width:44px; height:44px; fill:#FDFAF6}

/* Fejléc márkanév: vegyük le a link-hatást */
.site-header .brand{
  text-decoration: none !important;
  cursor: default;
  color: inherit;
}
.site-header .brand:hover,
.site-header .brand:active{
  text-decoration: none !important;
  color: inherit !important;
}
.site-header .brand:focus,
.site-header .brand:focus-visible{
  outline: none;
}

/* Fejléc felirat (logó helyett) */
.site-header .brand .brand-name{
  color:#FDFAF6;          /* fehér a zöld háttéren */
  font-weight:800;
  letter-spacing:.3px;
  line-height:1;
  white-space:nowrap;      /* ne törjön két sorba a headerben */
  font-size:clamp(1.05rem, 3.4vw, 1.6rem);
  display:block;
  padding:4px 8px;         /* kis légzés, hogy optikailag középen álljon */
  text-shadow:0 1px 0 rgba(0,0,0,.06); /* finom kontraszt */
}

.top-nav{display:flex; gap:10px}
@media (max-width:900px){.top-nav{display:none}}

.mobile-nav{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:grid; place-items:center;
}
.mobile-nav[hidden]{display:none}
.mobile-nav ul{
  list-style:none; padding:24px; margin:0;
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:grid; gap:10px; min-width:min(90vw, 420px);
}
.mobile-nav a{
  display:block; padding:12px 16px; border-radius:10px; text-decoration:none;
  color:var(--ink); text-align:center; font-weight:600;
  transition:background .2s ease, transform .2s ease;
}
.mobile-nav a:hover{background:rgba(103,174,110,.12); transform:translateY(-1px)}

/* hero */
.hero .hero-copy h1{
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.1; margin:0 0 12px;
}
.hero .hero-copy p{margin:0 0 16px; color:var(--muted)}
/* HERO – korábban aspect-ratio volt; most rem alapú, lépcsőzetes magasság */
.hero-img{
  height: 18rem;                 /* mobil */
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 480px){
  .hero-img{ height: 22rem; }    /* kis tablet */
}
@media (min-width: 768px){
  .hero-img{ height: 28rem; }    /* tablet */
}
@media (min-width: 1100px){
  .hero-img{ height: 20rem; }    /* desktop */
}
.hero-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-img img,
.feature-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.hero .container.grid2{
  /* bal: szöveg, jobb: kép */
  grid-template-columns: minmax(18rem, 34rem) minmax(26rem, 48rem);
}
@media (max-width: 900px){
  .hero .container.grid2{ grid-template-columns: 1fr; }
}

/* cards / content */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{
  background:var(--card); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(16,24,16,.12)}
.card h3{margin:0 0 8px}

.features{align-items:center}
.feature-list{margin:0; padding-left:20px}
/* === FEATURE MEDIA – nagyobb kép rem-ben, reszponzívan === */
/* Ezt tedd a styles.css VÉGÉRE. Ha volt korábbi feature-media szabályod,
   az itt lévő magasság/objekt illeszkedés felülírja. */

.feature-media{
  height: 14rem;            /* mobil */
  overflow: hidden;          /* a kép ne lógjon ki */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (min-width: 480px){
  .feature-media{ height: 18rem; }   /* kis tablet */
}
@media (min-width: 768px){
  .feature-media{ height: 22rem; }   /* tablet */
}
@media (min-width: 1100px){
  .feature-media{ height: 26rem; }   /* desktop */
}

/* a tényleges kép töltse ki a dobozt torzulás nélkül */
.feature-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* vágás a dobozhoz, arány megtartás mellett */
  display: block;
}

.features.grid2{
  /* bal: feature-list (szöveg), jobb: feature-media (kép) */
  grid-template-columns: minmax(18rem, 30rem) minmax(26rem, 44rem);
}
@media (max-width: 900px){
  .features.grid2{ grid-template-columns: 1fr; }
}


/* gallery */
.gallery-preview{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.gallery-preview .g-item{height: 16rem; overflow:hidden; border-radius:12px; box-shadow:var(--shadow)}

@media (min-width: 480px){
  .gallery-preview .g-item{ height: 12rem; }
}
@media (min-width: 768px){
  .gallery-preview .g-item{ height: 14rem; }
}
@media (min-width: 1100px){
  .gallery-preview .g-item{ height: 16rem; }
}

.gallery-preview img{width:100%; height:100%; object-fit:cover; display:block}

.gallery-page .gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
@media (max-width:900px){.gallery-page .gallery-grid{grid-template-columns:1fr 1fr}}
.gallery-page img{width:100%; height:100%; object-fit:cover; border-radius:12px; box-shadow:var(--shadow)}

/* árak */
.price-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 egyforma oszlop desktopon */
  gap: 16px;
}

@media (max-width:1100px){
  .price-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* tablet: 2x2 */
  }
}

@media (max-width:700px){
  .price-cards{
    grid-template-columns: 1fr; /* mobil: egymás alatt */
  }
}

/* Árak cím – középen, kis fehér kapszulában */
#arak .price-title{
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

#arak .price-title h2{
  background: var(--card);
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  margin: 0;
}

/* Árak – kiegészítő árfrissítés doboz */
#arak .price-note{
  margin-top: 24px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}

#arak .price-note h3{
  margin: 0 0 8px;
  text-align: center;
  font-size: 1.05rem;
}

#arak .price-note p{
  margin: 0 0 6px;
  text-align: center;
}

#arak .price-note p:last-child{
  margin-bottom: 0;
}


.price{
  background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);
}
.price .amount{font-weight:800; color:var(--brand)}

/* contact */
.contact-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-item{
  background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.highlight{font-weight:600}

/* footer
   Megjegyzés: a kért footer szín #0000 (teljesen transzparens RGBA),
   ezért kap egy felső elválasztó vonalat a kontrasztért. */
.site-footer{
  background:var(--bg); /* átlátszó, a kérés szerint */
  border-top:1px solid rgba(0,0,0,.08);
  padding:24px 0;
}
.footer-grid{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.f-left p{margin:.2rem 0}
.f-right{display:flex; gap:10px}
.social{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--brand)}
.social .ico{width:22px; height:22px; fill:#FDFAF6}

/* accessibility / helpers */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:12px; top:12px; width:auto; height:auto; padding:10px 14px;
  background:#fff; border:2px solid var(--brand); border-radius:10px; z-index:1000;
}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* cookie banner */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#ffffff; border-top:1px solid rgba(0,0,0,.08);
  padding:12px 0; box-shadow:0 -10px 30px rgba(0,0,0,.04);
  display:none;
}
.cookie-banner .container{display:flex; gap:12px; align-items:center; justify-content:space-between}
.cookie-banner a{color:var(--brand); text-decoration:none}
.privacy{background:#fff; border-top:1px solid rgba(0,0,0,.08)}

/* ---- Gallery fejléc középre igazított logó + vissza nyíl ---- */
.site-header.simple{
  background: var(--brand);
  color:#fff;
}
.site-header.simple .nav-bar{
  /* három oszlop: bal (nyíl), közép (logó), jobb (spacer) */
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  min-height:64px;
}
.back-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:0; background:transparent; text-decoration:none;
  color:#FDFAF6; border-radius:10px;
}
.back-btn .ico{width:28px; height:28px}
.site-header.simple .brand{justify-self:center}
.site-header.simple .brand .horse{fill:#FDFAF6}
.nav-spacer{display:block; width:44px; height:44px}

/* --- Base link style: fekete, nincs underline; hoverre underline --- */
a{
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a:hover{
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A gombként használt <a> ne kapjon aláhúzást hoverre sem */
a.btn:hover{ text-decoration: none; }

.cookie-banner a{ color: var(--ink); text-decoration: none; }

/* --- Contact inline-akciók (szöveg + kis ikon gomb) --- */
.contact-inline{
  display: inline-flex;        /* inline, hogy mondatban is szépen álljon */
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--brand);
  color: #FDFAF6;
  border: 2px solid var(--brand);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.icon-btn .ico{ width: 20px; height: 20px; fill: currentColor; }
.icon-btn:hover{
  transform: translateY(-1px);
  background: transparent;
  color: var(--brand);
}

/* === GALÉRIA ELŐNÉZET: PORTRÉBAN EGY OSZLOP, LANDSCAPE-BEN MELLÉRENDEZVE === */

/* Alapértelmezés: 1 oszlop (mobil + tablet ÁLLÓ nézet) */
.gallery-preview{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

/* Landscape – kisebb szélességnél 2 oszlop (pl. mobil landscape / kisebb tablet) */
@media (orientation: landscape) and (min-width: 600px){
  .gallery-preview{ grid-template-columns: repeat(2, 1fr); }
}

/* Landscape – tablet/desktop széles nézet: 3 oszlop */
@media (orientation: landscape) and (min-width: 900px){
  .gallery-preview{ grid-template-columns: repeat(3, 1fr); }
}

/* === GALÉRIA ELŐNÉZET: PORTRÉBAN EGY OSZLOP, LANDSCAPE-BEN MELLÉRENDEZVE === */

/* Alapértelmezés: 1 oszlop (mobil + tablet ÁLLÓ nézet) */
.gallery-preview{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

/* Landscape – kisebb szélességnél 2 oszlop (pl. mobil landscape / kisebb tablet) */
@media (orientation: landscape) and (min-width: 600px){
  .gallery-preview{ grid-template-columns: repeat(2, 1fr); }
}

/* Landscape – tablet/desktop széles nézet: 3 oszlop */
@media (orientation: landscape) and (min-width: 900px){
  .gallery-preview{ grid-template-columns: repeat(3, 1fr); }
}

/* Kapcsolat: egységes távolság a cím (h3) és az első tartalom között */
.contact-item > h3{
  margin: 0;                /* nullázza a böngésző default margóit */
  margin-bottom: 28px;      /* << Itt állítod az egységes rést */
  line-height: 1.2;
}

/* Ne legyen plusz felső margó azonnal a h3 után következő elemeken */
.contact-item > h3 + *{
  margin-top: 0 !important;
}

/* (Ajánlott) Egységes bekezdésmargók a kártyákon belül */
.contact-item p{ margin: 0 0 8px; }
.contact-item p:last-child{ margin-bottom: 0; }

/* Helyszín blokk: kis margó az első cím sor alá */
.contact-grid .contact-item:nth-child(3) p:first-of-type{
  margin-bottom: 25px; /* állíthatod pl. 4–10px között */
}

/* RÓLUNK + LÓSZÁLLÍTÁS – leíró bekezdések nagyobbra */
#rolunk p,
#loszallitas .container > p:not(.highlight){
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.275rem);
  line-height: 1.75;
}

/* BÉRTARTÁS – listaelemek nagyobbra */
#bertartas .feature-list li{
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.2rem);
  line-height: 1.7;
}

/* BÉRTARTÁS – finom sorköz a pontok között */
#bertartas .feature-list li + li{
  margin-top: 6px;
}

/* Globális H2 méret – kicsit nagyobb, de a H1 alatt marad */
h2{
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.25;
  margin: 0 0 0.6em;
}

/* LOVAGOLTATÁS – kártyák leíró szövegei kicsit nagyobbra */
#lovagoltas .card p{
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  line-height: 1.7;
}

/* LOVAGOLTATÁS – a kártyákon levő <a> link-stílusok elrejtése */
#lovagoltas .cards a{
  display: block;                     /* a teljes kártya legyen kattintható */
  color: inherit !important;          /* ne színezze át a szöveget */
  text-decoration: none !important;   /* ne legyen aláhúzás */
  -webkit-tap-highlight-color: transparent;
}

/* Hover/active alatt se jelenjen meg link-hatás */
#lovagoltas .cards a:hover,
#lovagoltas .cards a:active{
  color: inherit !important;
  text-decoration: none !important;
}

/* Fókuszjelzés finoman (a11y), de ne a default kék keret */
#lovagoltas .cards a:focus{ outline: none; }
#lovagoltas .cards a:focus-visible{
  outline: 3px solid rgba(103,174,110,.5);
  outline-offset: 4px;
  border-radius: var(--radius);
}

/* A kártya eredeti hover effektje működjön a teljes kattintható területen */
#lovagoltas .cards a:hover .card{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(16,24,16,.12);
}

/* LOVAGOLTATÁS – minden kártya azonos magasságú */
#lovagoltas .cards{ 
  align-items: stretch;              /* a rács nyújtsa az elemeket a sor magasságára */
}

#lovagoltas .cards > a.card-link{
  display: block;
  height: 100%;                      /* a kattintható wrapper töltse ki a sor magasságát */
}

#lovagoltas .cards > a.card-link > .card{
  height: 100%;                      /* maga a kártya is nyúljon fel a teljes magasságra */
  display: flex;                     /* opcionális: szebb belső elrendezés */
  flex-direction: column;
}

/* ALT szekciók – fehér–halvány zöld kockás háttér a meglévő színekből */
/*.section.alt{
  --chk-size: clamp(64px, 8vw, 160px);  kockaméret (reszponzív) 
  --chk-a: var(--card);                 fehér (már létező változó) 
  --chk-b: rgba(103,174,110,.08);         halvány brand-zöld (mint eddig) 

  background-color: var(--chk-a);
  background-image:
    linear-gradient(45deg, var(--chk-b) 25%, transparent 25%, transparent 75%, var(--chk-b) 75%),
    linear-gradient(45deg, var(--chk-b) 25%, transparent 25%, transparent 75%, var(--chk-b) 75%);
  background-size: var(--chk-size) var(--chk-size);
  background-position: 0 0, calc(var(--chk-size)/2) calc(var(--chk-size)/2);
}
*/

/* Táborozás – dátum buborékok + hívás blokk */
.camp-subtitle{
  margin: 0 0 12px;
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.4rem);
  line-height: 1.3;
}

.camp-dates{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 18px;
  padding: 0;
  list-style: none;
}

.date-chip{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 2px solid var(--brand);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  user-select: text; /* csak kijelölés, nem kattintós */
}
.date-chip:hover{
  transform: translateY(-1px);
  background: rgba(103,174,110,.06);
  border-color: color-mix(in oklab, var(--brand) 90%, white);
}

/* Egységes "highlight" méret Születésnap + Táborozás */
#szuletesnap .highlight,
#taborozas .highlight{
  font-size: clamp(1.08rem, 0.95rem + 0.9vw, 1.1rem);
  line-height: 1.65;
}

/* === Fel gomb – kisebb gomb, nagyobb nyíl === */
.to-top{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 40px; height: 40px;            /* ↓ kisebb mint korábban */
  border-radius: 999px;
  background: var(--brand);
  color: #FDFAF6;
  border: 2px solid var(--brand);
  box-shadow: var(--shadow);
  display: inline-flex; align-items:center; justify-content:center;

  opacity: 0; transform: translateY(12px) scale(.96);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  z-index: 55;
}
.to-top .ico{
  width: 24px; height: 24px;            /* ↑ nagyobb nyíl */
  fill: currentColor;
}

.to-top:hover{
  background: transparent;
  color: var(--brand);
}

.to-top:focus-visible{
  outline: 3px solid #1e7d27;
  outline-offset: 3px;
}

.to-top.show{
  opacity: 1; transform: none;
  pointer-events: auto;
}

/* Desktopon picit nagyobb, de továbbra is kompakt */
@media (min-width: 900px){
  .to-top{
    width: 48px; height: 48px;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .to-top .ico{ width: 28px; height: 28px; }  /* ↑ még látványosabb nyíl */
}

/* NAV: középre igazított logó akkor is, ha csak a hamburger van baloldalt */
.site-header:not(.simple) .nav-bar{
  position: relative;                 /* kell az abszolút pozícionált logóhoz */
  display: flex;
  align-items: center;
  min-height: 64px;
}

.site-header:not(.simple) .brand{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);        /* tényleg középre kerül */
}

.site-header:not(.simple) .hamburger{
  position: relative;
  z-index: 2;                          /* a logó ne takarja ki a kattintást */
}

/* Alap: minden section fehér */
.section{
  background: var(--bg) none;
}

/* Csak az ALT szekció: mozaikos háttér */
.section.alt{
  background-color: var(--bg);
  background-image: url('../img/hatter.jpg');
  background-repeat: repeat;
  background-position: top left;
  background-size: 200px; /* kicsi minta */
}

/* Biztos ami biztos: a hero marad fehér */
#hero{
  background: #fff;
}

/* Címek, bekezdések, kiemelések: buborék */
.section.alt:not(#arak) :where(h2,h3,h4,h5,h6,p,.highlight){
  background: var(--bubble-bg);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 14px;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;        /* több soron is “körbeöleli” a szöveget */
}

/* Linkek a buborékokban maradjanak olvashatók */
.section.alt:not(#arak) :where(h2,h3,p,.highlight) a:not(.icon-btn){
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Listák: minden li külön kis buborék */
.section.alt:not(#arak) :where(ul,ol){
  padding-left: 0;
  margin: 0 0 12px;
  list-style: none;                   /* letisztult pontok helyett chip-szerű elemek */
}
.section.alt:not(#arak) li{
  background: var(--bubble-bg);
  color: var(--ink);
  display: inline-block;
  padding: 8px 12px;
  margin: 6px 8px 0 0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* Opcionális: ha valahol kézzel akarsz buborékot, add a .bubbleize osztályt */
.bubbleize{
  background: var(--bubble-bg);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 14px;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.section.alt:not(#arak) > .container{
  background: var(--bubble-bg);
  border-radius: 16px;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(2px); /* finom tejüveg hatás, ha támogatott */
}

/* Ha korábban volt elemenkénti buborék, nullázd felül: */
.section.alt:not(#arak) :where(h2,h3,h4,h5,h6,p,.highlight,ul,ol,li){
  background: transparent !important;
  box-shadow: none !important;
  padding: initial !important;
  border-radius: 0 !important;
}
.section.alt:not(#arak) :where(ul,ol){ list-style: revert; padding-left: 1.2em !important; }

/* Rólunk buborék: logó a szöveg alatt, középre */
#rolunk .about-logo{
  display: block;
  width: clamp(220px, 34vw, 520px);
  height: auto;
  margin: auto;     
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.12));
}

/* HERO – középre igazítás mobilon + álló táblagépen */
@media (max-width: 900px),
       (orientation: portrait) and (min-width: 901px) and (max-width: 1200px){
  .hero .container.grid2{
    grid-template-columns: 1fr;   /* egy oszlop */
    justify-items: center;        /* rácson belül középre */
    row-gap: 18px;
  }
  .hero .hero-copy{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero .cta-row{
    justify-content: center;
  }
  .hero .hero-media{
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .hero .hero-img{
    margin: 6px auto 0;
    max-width: min(680px, 100%);
  }
}

/* Alap (marad nagy) + Garamond */
.site-header .brand .brand-name{
  font-family: Garamond, "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1.05;
  white-space: nowrap;
  padding: 4px 10px;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* Desktopon még nagyobb */
@media (min-width: 900px){
  .site-header .brand .brand-name{ font-size: 2.4rem; }
  .site-header .nav-bar{ min-height: 76px; }
}

/* Telefonon (bármilyen tájolás) legyen 1rem */
@media (max-width: 768px){
  .site-header .brand .brand-name{ font-size: 1.3rem; }
  .site-header .nav-bar{ min-height: 64px; } /* visszavesszük a magasságot */
}

/* Táblagép ÁLLÓ nézetben (portrait) szintén 1rem */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  .site-header .brand .brand-name{ font-size: 1.4rem; }
  .site-header .nav-bar{ min-height: 64px; }
}

/* 
BÉRTARTÁS – SZÖVEG BALRA, KÉP JOBBRA, felső élek egyvonalban 
#bertartas .features{
  align-items: start;
  grid-template-columns: minmax(18rem, 30rem) minmax(26rem, 44rem);
  grid-template-areas: "text media";
}

#bertartas .features > p{
  grid-area: text;
  margin: 0;
}

#bertartas .feature-media{
  grid-area: media;
  margin: 0;
  justify-self: start;
}

Mobilon: először a szöveg, utána a kép (egyoszlopos) 
@media (max-width: 900px){
  #bertartas .features{
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "media";
  }
}
 */

 /* === LIGHTBOX (galéria képnagyító) === */
.lightbox[hidden]{ display:none !important; }
.lightbox{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.9);
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr auto;
  align-items: center; justify-items: center;
  padding: clamp(8px, 2vw, 20px);
}

.lb-stage{
  grid-column: 1 / -1; grid-row: 2;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  outline: none;
}

.gallery-page #lightbox img,
#lightbox .lb-img{
  width: auto !important;
  height: auto !important;
  max-width: 95vw;     /* ha nagyobb lenne, ekkor zsugorítjuk */
  max-height: 85vh;    /* de sosem nagyobb a viewportnál */
  object-fit: contain !important;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}

/* Gombok */
.lb-btn{
  appearance: none;
  border: 0; background: rgba(255,255,255,.12);
  color: #fff; border-radius: 999px;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
  backdrop-filter: blur(2px);
}
.lb-btn .ico{ width: 26px; height: 26px; fill: currentColor; }
.lb-btn:hover{ background: rgba(255,255,255,.18); transform: translateY(-1px); }
.lb-btn:active{ transform: translateY(0); }

.lb-close{
  position: absolute; top: clamp(8px, 2vw, 16px); right: clamp(8px, 2vw, 16px);
  z-index: 2;
}

.lb-prev{
  grid-column: 1; grid-row: 2;
  margin-left: clamp(4px, 1vw, 12px);
}
.lb-next{
  grid-column: 3; grid-row: 2;
  margin-right: clamp(4px, 1vw, 12px);
}

/* Mobilbarát – nagyobb érintési felület */
@media (max-width: 900px){
  .lb-btn{ width: 54px; height: 54px; }
  .lb-btn .ico{ width: 28px; height: 28px; }
}

/* Ha nagyon kicsi a magasság (pl. landscape mobil), engedjünk több szélességet */
@media (max-height: 500px){
  .lb-img{ max-height: 78vh; max-width: 98vw; }
}

/* Kapcsolat – felső leíró szöveg fehér dobozban */
#kapcsolat .contact-intro{
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

/* Globális bekezdésméret: +3px a default 16-hoz képest */
p{
  font-size: 19px;
}

/* Galéria lapozó – link ne legyen aláhúzva */
.gallery-pager .pager-link,
.gallery-pager .pager-link:hover,
.gallery-pager .pager-link:focus,
.gallery-pager .pager-link:active{
  text-decoration: none !important;
  color: var(--ink);
}

/* Galéria lapozó */
.gallery-pager{
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.pager-link{
  min-width: 36px;
  height: 36px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid var(--brand);
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}

.pager-link:hover{
  transform: translateY(-1px);
  background: rgba(103,174,110,.06);
}

.pager-link--active{
  background: var(--brand);
  color: #FDFAF6;
  border-color: var(--brand);
  cursor: default;
}
.pager-link--active:hover{
  transform: none;
  background: var(--brand);
}
/* === LOVAS KARIKATÚRÁK – 9 KÉP, RESZPONZÍV HÉZAGOK === */

.cartoon-strip{
  margin: 0;
  padding: 8px 0;
  background: var(--card);
  border-bottom: 0;
}

/* Alap: nagyobb hézag desktopon */
.cartoon-track{
  width: min(1400px, 100vw);      /* desktopon nagy, mobilon 100% */
  margin-inline: auto;

  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)); /* 9 fix oszlop */
  gap: 10px;                                       /* DESKTOP hézag */
}

.cartoon-item{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}

.cartoon-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Tablet / kisebb laptop: kicsit szűkebb hézag --- */
@media (max-width: 900px){
  .cartoon-track{
    gap: 6px;
  }
}

/* --- Mobil: szinte összeérő képek, minimális hézag + “laposabb” dizájn --- */
@media (max-width: 600px){
  .cartoon-track{
    gap: 2px;             /* itt “összecsúsznak”, nem a kép zsugorodik tovább */
  }
  .cartoon-item{
    border-radius: 8px;   /* kisebb lekerekítés, hogy ne veszíts sokat a hasznos felületből */
    box-shadow: none;     /* árnyék se egyen el px-eket kicsiben */
  }
}