/* ==========================================================================
   MONOKROM STUDIO — v4.1
   Brand-alapú stíluslap (Monokrom_Studio_Brandguide_20260102)
   Tipográfia : Cinzel (címek, csak Regular/Medium) + Lato (törzs)
   Paletta    : grafit #2A2623 · krém #F4F1EE · sötét #1C1A18
                púder rózsa #E2C1B9 · greige #D8CEC4 · mauve #C6B2B8
   Alapelv    : "A kevesebb mindig több." Mozgás = lassú, halk, sosem harsány.
   Felépítés  : lebegő pill-fejléc, kártyás kapcsolat-blokk, oszlopos lábléc.
                Világos alap dominál; a sötét csak horgony (hero + lábléc).
   ========================================================================== */

/* ---------- 1. Design tokenek ---------- */
:root {
  --ink:        #1C1A18;
  --ink-soft:   #241F1C;
  --graphite:   #2A2623;
  --cream:      #F4F1EE;
  --paper:      #FBFAF8;
  --white:      #FFFFFF;
  --rose:       #E2C1B9;
  --greige:     #D8CEC4;
  --mauve:      #C6B2B8;

  --muted:      rgba(42, 38, 35, .62);
  --muted-2:    rgba(42, 38, 35, .45);
  --muted-dark: rgba(244, 241, 238, .64);
  --line:       rgba(42, 38, 35, .12);
  --line-dark:  rgba(244, 241, 238, .15);

  /* Cinzel: a magyar Ő/Ű benne van, marad a brand szerint.
     Törzsbetű: a Google Fonts Lato-változatából HIÁNYZIK az ő és ű glyph
     (ó/ö/ü/ú megvan) — ezért esett vissza rendszerbetűre a magyar szövegben.
     Source Sans 3 = a Latóhoz legközelebbi humanista sans, teljes magyar készlettel. */
  --serif: "Cinzel", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  "Source Sans 3", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1280px;
  --sect: clamp(3.6rem, 8vh, 6.5rem);
  --r: 18px;              /* lekerekítés — a pill/kártya nyelv alapja */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow-sm: 0 2px 10px -4px rgba(42,38,35,.18);
  --shadow:    0 18px 44px -28px rgba(42,38,35,.34);
  --shadow-lg: 0 34px 80px -44px rgba(42,38,35,.42);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Köztes méretezés: a 16px-es alap helyett 93.75% (=15px), így minden rem-alapú
   méret arányosan csökken. Százalék, nem fix px — a felhasználó saját
   betűméret-beállítása továbbra is érvényesül. */
html { font-size: 93.75%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 7rem; }

body {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1.06rem, 1rem + .3vw, 1.19rem);
  line-height: 1.66; letter-spacing: .012em;
  color: var(--graphite); background: var(--cream);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--rose); color: var(--graphite); }
:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; }

/* ---------- 3. Tipográfia ---------- */
h1, h2, h3, .serif {
  font-family: var(--serif); font-weight: 400;
  line-height: 1.14; letter-spacing: .07em; text-transform: uppercase;
}
h1 { font-size: clamp(2rem, 1.05rem + 4.4vw, 4.7rem); letter-spacing: .085em; }
h2 { font-size: clamp(1.5rem, 1rem + 2.1vw, 2.7rem); }
h3 { font-size: clamp(1.1rem, 1rem + .55vw, 1.32rem); letter-spacing: .11em; }

.eyebrow {
  font-family: var(--sans); font-weight: 400; font-size: .84rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--muted-2);
}
.dark .eyebrow { color: var(--muted-dark); }

/* Hivatalos szlogen — Lato Light Italic, középre, tracking +50 */
.tagline {
  font-family: var(--sans); font-weight: 300; font-style: italic;
  letter-spacing: .5em; text-transform: none; text-align: center;
}

.lead { font-size: clamp(1.14rem, 1.05rem + .4vw, 1.34rem); font-weight: 300; }

/* ---------- 4. Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--sect); }
.dark { background: var(--ink); color: var(--cream); }
.soft { background: var(--paper); }
.center { text-align: center; }

.sHead { display: grid; gap: 1rem; justify-items: center; text-align: center; margin-bottom: clamp(1.9rem, 4.5vh, 3.2rem); }
.sHead p { max-width: 54ch; color: var(--muted); font-weight: 300; }
.dark .sHead p { color: var(--muted-dark); }

/* ---------- 5. Márkajel ---------- */
.circles { display: inline-flex; gap: .34em; align-items: center; }
.circles i { display: block; width: 1em; height: 1em; border-radius: 50%; border: 1.4px solid currentColor; font-size: inherit; }
.circles i:nth-child(1) { color: var(--rose); }
.circles i:nth-child(2) { color: var(--greige); }
.circles i:nth-child(3) { color: var(--mauve); }

.logo { display: inline-grid; justify-items: center; gap: .45em; line-height: 1; }
.logo .circles { font-size: .55rem; }
.logo b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; letter-spacing: .17em; text-transform: uppercase; }
.logo small {
  display: block; font-family: var(--sans); font-weight: 300;
  font-size: .62rem; letter-spacing: .42em; text-transform: uppercase;
  opacity: .8; text-indent: .42em;
}
.logo.lg .circles { font-size: .85rem; }
.logo.lg b { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.1rem); }
.logo.lg small { font-size: clamp(.55rem, .5rem + .18vw, .68rem); }

/* ---------- 6. Kapcsolati sáv (legfelül, mindig látszik) ---------- */
.rail {
  position: relative; z-index: 60; background: var(--ink); color: var(--cream);
  font-size: .84rem; letter-spacing: .15em; text-transform: uppercase;
}
.rail .wrap { display: flex; align-items: center; justify-content: center; gap: clamp(.9rem, 3vw, 2.4rem); min-height: 2.5rem; flex-wrap: wrap; }
.rail a { display: inline-flex; align-items: center; gap: .55em; opacity: .82; transition: opacity .4s var(--ease), color .4s var(--ease); }
.rail a:hover { opacity: 1; color: var(--rose); }
.rail svg { width: .82em; height: .82em; stroke: currentColor; fill: none; stroke-width: 1.6; }
.rail .sep { width: 1px; height: .85rem; background: var(--line-dark); }
.rail .quiet { opacity: .5; letter-spacing: .24em; }

/* ---------- 7. Lebegő pill-fejléc ---------- */
.hdr { position: sticky; top: 0; z-index: 50; padding-top: .85rem; padding-bottom: .1rem; }
.hdr .wrap { padding-inline: clamp(.75rem, 3vw, 1.5rem); }

.navPill {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: .55rem .6rem .55rem 1.35rem;
  border-radius: 999px;
  background: rgba(28, 26, 24, .5);
  border: 1px solid rgba(244, 241, 238, .14);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  color: var(--cream);
  transition: background .55s var(--ease), color .55s var(--ease),
              border-color .55s var(--ease), box-shadow .55s var(--ease);
}
/* Görgetés után világos üveg — a világos alaphoz igazodva */
.hdr.stuck .navPill {
  background: rgba(251, 250, 248, .88);
  border-color: var(--line);
  color: var(--graphite);
  box-shadow: var(--shadow);
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2.1vw, 1.9rem); }
.nav a {
  font-size: .87rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .84; position: relative; padding-block: .3rem;
  transition: opacity .4s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; opacity: .5;
  transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); }

.hdrRight { display: flex; align-items: center; gap: .5rem; }

/* Kör alakú ikongombok */
.iconBtn {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
  border-radius: 50%; border: 1px solid currentColor; opacity: .5;
  transition: opacity .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.iconBtn svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 1.6; }
.iconBtn:hover { opacity: 1; transform: translateY(-1px); }

/* Fő CTA a fejlécben */
.cta {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .78em 1.4em; border-radius: 999px;
  background: var(--cream); color: var(--graphite);
  font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent;
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); background: var(--rose); }
.hdr.stuck .cta { background: var(--graphite); color: var(--cream); }
.hdr.stuck .cta:hover { background: var(--ink); }

.lang { display: flex; gap: .5rem; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; opacity: .65; padding-inline: .3rem; }
.lang a[aria-current="true"] { opacity: 1; border-bottom: 1px solid var(--rose); }

/* Mobil menü gomb */
.burger { display: none; width: 2.3rem; height: 2.3rem; place-items: center; background: none; border: 0; cursor: pointer; color: inherit; }
.burger span { display: block; width: 1.1rem; height: 1px; background: currentColor; position: relative; transition: transform .5s var(--ease), opacity .3s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform .5s var(--ease); }
.burger span::before { top: -5px; } .burger span::after { top: 5px; }
.burger[aria-expanded="true"] span { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(-90deg); }
.burger[aria-expanded="true"] span::after { opacity: 0; }

.mobNav {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(28, 26, 24, .97); backdrop-filter: blur(20px);
  display: grid; place-content: center; gap: 1.5rem; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
}
.mobNav.open { opacity: 1; visibility: visible; }
.mobNav a { font-family: var(--serif); font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.mobNav .mobContact { font-family: var(--sans); font-size: .76rem; letter-spacing: .18em; color: var(--muted-dark); text-transform: none; }

/* ---------- 8. Gombok ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  padding: 1em 2em; border-radius: 999px;
  font-size: .85rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 400;
  border: 1px solid var(--graphite); background: var(--graphite); color: var(--cream);
  cursor: pointer;
  transition: background .5s var(--ease), color .5s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn.ghost { background: transparent; color: var(--graphite); border-color: var(--line); }
.btn.ghost:hover { background: var(--graphite); color: var(--cream); border-color: var(--graphite); }

.dark .btn { background: var(--cream); color: var(--graphite); border-color: var(--cream); }
.dark .btn:hover { background: var(--rose); border-color: var(--rose); }
.dark .btn.ghost { background: transparent; color: var(--cream); border-color: rgba(244,241,238,.4); }
.dark .btn.ghost:hover { background: var(--cream); color: var(--graphite); }

.linkArrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .84rem; letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: .3rem; border-bottom: 1px solid var(--line);
  transition: gap .45s var(--ease), border-color .45s var(--ease);
}
.linkArrow:hover { gap: 1.05em; border-color: var(--mauve); }
.dark .linkArrow { border-color: var(--line-dark); }

/* ---------- 9. Hero ---------- */
.hero {
  position: relative; min-height: clamp(36rem, 90svh, 54rem);
  display: grid; align-items: center;
  background: var(--ink); color: var(--cream);
  overflow: hidden; isolation: isolate;
  /* pontosan a mért fejlécmagasságot használjuk (JS állítja a --hdrH-t) */
  margin-top: calc(-1 * var(--hdrH, 5.3rem)); padding-top: var(--hdrH, 5.3rem);
}
.heroMedia { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.heroMedia picture { display: block; position: absolute; inset: 0; }
.heroMedia img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: kb 26s var(--ease) infinite alternate; }
@keyframes kb {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); }
}
.heroMedia::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(28,26,24,.80) 0%, rgba(28,26,24,.38) 30%, rgba(28,26,24,.46) 62%, rgba(28,26,24,.92) 100%),
    radial-gradient(115% 78% at 50% 48%, rgba(28,26,24,.14) 0%, rgba(28,26,24,.36) 60%, rgba(28,26,24,.60) 100%);
}

.heroInner {
  position: relative; display: grid; justify-items: center;
  gap: clamp(1.3rem, 3.2vh, 2.2rem); text-align: center;
  padding-block: clamp(3rem, 8vh, 5.5rem) clamp(5.5rem, 11vh, 7.5rem);
  text-shadow: 0 1px 3px rgba(28, 26, 24, .5), 0 2px 16px rgba(28, 26, 24, .35);
}
.hero h1 { max-width: 22ch; text-wrap: balance; }
.hero .tagline { font-size: clamp(.68rem, .62rem + .3vw, .86rem); color: rgba(244, 241, 238, .82); }
.hero .kicker { font-size: .86rem; letter-spacing: .24em; text-transform: uppercase; color: var(--rose); }
.heroCtas { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: .3rem; }

.heroContact {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem clamp(.9rem, 2.4vw, 1.7rem); margin-top: .5rem;
  font-size: .82rem; letter-spacing: .12em; color: rgba(244, 241, 238, .86);
}
.heroContact a { display: inline-flex; align-items: center; gap: .55em; transition: color .45s var(--ease); }
.heroContact a:hover { color: var(--rose); }
.heroContact svg { width: .9em; height: .9em; stroke: currentColor; fill: none; stroke-width: 1.6; }
.heroContact .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; }

.scrollCue {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .7rem;
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-dark);
  transition: color .4s var(--ease);
}
.scrollCue:hover { color: var(--cream); }
/* "Egér" jelző — ugyanaz a forma, mint az eredeti oldalon */
.scrollCue .mouse {
  position: relative; flex: none;
  width: 26px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(244, 241, 238, .55);
}
.scrollCue .mouse::after {
  content: ""; position: absolute; left: 50%; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rose);
  transform: translateX(-50%);
  animation: scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot {
  0%   { opacity: .25; transform: translate(-50%, 0); }
  40%  { opacity: 1;   transform: translate(-50%, 6px); }
  75%  { opacity: .2;  transform: translate(-50%, 15px); }
  100% { opacity: .25; transform: translate(-50%, 0); }
}

/* ---------- 10. Filmszalag ---------- */
.strip { background: var(--paper); padding-block: clamp(1.5rem, 4vh, 2.6rem); overflow: hidden; border-bottom: 1px solid var(--line); }
.stripTrack { display: flex; gap: .8rem; width: max-content; animation: drift 84s linear infinite; }
.strip:hover .stripTrack { animation-play-state: paused; }
.stripTrack figure { width: clamp(10rem, 19vw, 15rem); aspect-ratio: 4 / 5; overflow: hidden; flex: none; border-radius: 12px; background: var(--greige); }
.stripTrack img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.stripTrack figure:hover img { transform: scale(1.05); }
@keyframes drift { to { transform: translateX(-50%); } }

/* ---------- 11. Pillérek ---------- */
.pillars { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.pillar {
  display: grid; gap: .85rem; align-content: start;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pillar .n { font-family: var(--serif); font-size: .84rem; letter-spacing: .2em; color: var(--mauve); }
.pillar p { color: var(--muted); font-weight: 300; font-size: 1.04rem; }

/* ---------- 12. Szolgáltatások — carousel ---------- */
.svc {
  position: relative; display: grid; gap: .85rem; align-content: start;
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s var(--ease);
}
.svc:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(42,38,35,.18); }
.svc p { color: var(--muted); font-weight: 300; font-size: .94rem; }
.svc ul { list-style: none; display: grid; gap: .45rem; font-size: .88rem; color: var(--muted); font-weight: 300; }
.svc li { display: flex; gap: .7em; align-items: baseline; }
.svc li::before { content: ""; width: .3rem; height: .3rem; border-radius: 50%; background: var(--rose); flex: none; transform: translateY(-.15em); }

/* Fejsor: ár-kategória balra, jelvény jobbra — így semmi nem lóg a címbe */
.svcTop { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 1.5rem; }
.svc .price { font-family: var(--serif); font-size: .76rem; letter-spacing: .13em; color: var(--mauve); }
.svc .tag {
  flex: none; padding: .38em .85em; border-radius: 999px;
  background: var(--graphite); color: var(--cream);
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}

/* Carousel — az eredeti oldal középfókuszos modellje:
   a középső kártya éles és teljes méretű, a két szomszéd halvány, kicsit kisebb. */
.carousel { position: relative; user-select: none; }
.carStage {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 21rem; overflow: hidden; padding-block: 1.2rem;
}
.slide {
  position: absolute; width: 21.5rem; max-width: 86%;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.3rem, 2.4vw, 1.7rem);
  display: grid; gap: .8rem; align-content: start;
  box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events: none; transform: scale(.84);
  transition: transform .55s var(--ease), opacity .55s var(--ease),
              filter .55s var(--ease), box-shadow .55s var(--ease);
}
.slide.is-left,
.slide.is-right { opacity: .42; filter: blur(1.5px); z-index: 1; pointer-events: auto; cursor: pointer; }
.slide.is-left  { transform: translateX(-72%) scale(.88); }
.slide.is-right { transform: translateX(72%)  scale(.88); }
.slide.is-left:hover, .slide.is-right:hover { opacity: .6; }

.slide.is-active {
  opacity: 1; filter: none; pointer-events: auto; z-index: 10;
  transform: translateX(0) scale(1);
  box-shadow: var(--shadow-lg);
  border-color: rgba(42, 38, 35, .16);
}

.slide p { color: var(--muted); font-weight: 300; font-size: 1.02rem; }
.slide ul { list-style: none; display: grid; gap: .5rem; font-size: .96rem; color: var(--muted); font-weight: 300; }
.slide li { display: flex; gap: .7em; align-items: baseline; }
.slide li::before { content: ""; width: .3rem; height: .3rem; border-radius: 50%; background: var(--rose); flex: none; transform: translateY(-.15em); }

/* Fejsor: ár-kategória balra, jelvény jobbra — semmi nem lóg a címbe */
.svcTop { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 1.5rem; }
.slide .price { font-family: var(--serif); font-size: .84rem; letter-spacing: .13em; color: var(--mauve); }
.slide .tag {
  flex: none; display: inline-flex; align-items: center; gap: .45em;
  padding: .38em .85em; border-radius: 999px;
  background: var(--graphite); color: var(--cream);
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}

.carBtn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.9); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.carBtn svg { width: 1.1rem; height: 1.1rem; stroke: var(--graphite); fill: none; stroke-width: 1.6; }
.carBtn:hover { background: var(--white); box-shadow: var(--shadow); transform: translateY(-50%) scale(1.07); }
.carPrev { left: clamp(.25rem, 2vw, 1.25rem); }
.carNext { right: clamp(.25rem, 2vw, 1.25rem); }

.carDots { display: flex; gap: .6rem; justify-content: center; margin-top: 1.4rem; }
.carDots button {
  width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: rgba(42,38,35,.2);
  transition: width .45s cubic-bezier(.34,1.56,.64,1), background .45s var(--ease);
}
.carDots button[aria-current="true"] { width: 28px; background: var(--mauve); }

/* Kiegészítő megjegyzés-doboz a carousel alatt */
.noteBox {
  margin-top: 1.8rem; padding: 1.05rem 1.4rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  text-align: center; color: var(--muted); font-weight: 300; font-size: 1rem;
}
@media (max-width: 40rem) { .noteBox { border-radius: var(--r); } }

/* Kategória-választó a carousel FELETT */
.tabs { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-bottom: clamp(1.6rem, 3.5vh, 2.6rem); }
.tab {
  padding: .7em 1.5em; border-radius: 999px; border: 1px solid var(--line); background: var(--white);
  font-size: .84rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  color: var(--muted);
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.tab:hover { border-color: var(--mauve); color: var(--graphite); }
.tab[aria-selected="true"] { background: var(--graphite); color: var(--cream); border-color: var(--graphite); }
.tabPanel[hidden] { display: none; }

/* ---------- 13. Galéria — egyenletes rács ----------
   Minden cella 3:2, ahogy a képek túlnyomó része is → nincs vágás,
   nincs üres hely, és a rács alja mindig egyenesen zárul.
   (A PHP 12 vagy 16 fekvő képet ad → 3 vagy 4 teli sor.) */
.galGrid {
  display: grid; gap: clamp(.55rem, 1.1vw, .9rem);
  grid-template-columns: repeat(4, 1fr);
}
.galGrid figure {
  position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: 3 / 2; background: var(--greige); cursor: zoom-in;
}
.galGrid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.galGrid figure:hover img { transform: scale(1.05); }
.galGrid figure::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
  background: linear-gradient(0deg, rgba(28,26,24,.28), transparent 55%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.galGrid figure:hover::after { opacity: 1; }

/* ---------- 14. Előtte / Utána ---------- */
.baWrap { position: relative; max-width: 58rem; margin-inline: auto; aspect-ratio: 3 / 2; overflow: hidden; background: var(--greige); border-radius: var(--r); user-select: none; }
.baWrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.baWrap .after { clip-path: inset(0 0 0 var(--split, 50%)); }
.baHandle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 1px; background: var(--white); transform: translateX(-.5px); pointer-events: none; }
.baHandle::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--white); background: rgba(28,26,24,.35); backdrop-filter: blur(6px);
}
.baRange { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.baLabels { display: flex; justify-content: space-between; max-width: 58rem; margin: .9rem auto 0; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); }

/* ---------- 15. Rólunk ---------- */
.aboutGrid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 62rem) { .aboutGrid { grid-template-columns: .88fr 1.12fr; } }
.aboutText { display: grid; gap: 1.25rem; justify-items: start; align-content: center; }
.aboutText .lead { max-width: 40ch; }
.aboutText p:not(.lead) { max-width: 44ch; }
.aboutMedia { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); }
.aboutMedia img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 16. Kapcsolat — két kártya ---------- */
.contactGrid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 64rem) { .contactGrid { grid-template-columns: .82fr 1.18fr; } }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.5rem, 3.2vw, 2.4rem);
  box-shadow: var(--shadow-sm);
}

.cardHead { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.badge {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; flex: none;
  border-radius: 14px; background: var(--cream); border: 1px solid var(--line); color: var(--graphite);
}
.badge svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 1.5; }
.cardHead .t { display: grid; gap: .25rem; }
.cardHead .t strong { font-family: var(--serif); font-weight: 400; font-size: 1.14rem; letter-spacing: .08em; text-transform: uppercase; }

.cardNote { color: var(--muted); font-weight: 300; font-size: 1.03rem; }

/* Kapcsolat-sorok, jobbra nyíllal */
.cRows { display: grid; gap: .5rem; margin-top: 1.6rem; }
.cRow {
  display: flex; align-items: center; gap: .95rem;
  padding: .85rem .9rem; border-radius: 14px; border: 1px solid transparent;
  transition: background .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.cRow:hover { background: var(--cream); border-color: var(--line); transform: translateX(3px); }
.cRow .ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; border: 1px solid var(--line); color: var(--mauve); }
.cRow .ic svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 1.6; }
.cRow .tx { display: grid; gap: .1rem; min-width: 0; }
.cRow .lbl { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.cRow .val { font-size: 1.05rem; overflow-wrap: anywhere; }
.cRow .arw { margin-left: auto; opacity: 0; transform: translateX(-6px); transition: opacity .45s var(--ease), transform .45s var(--ease); color: var(--muted-2); }
.cRow:hover .arw { opacity: 1; transform: none; }

/* Űrlap — világos */
.formCard { position: relative; }
.form { display: grid; gap: 1rem; }
.row2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .row2 { grid-template-columns: 1fr 1fr; } }

.form label { display: grid; gap: .5rem; font-size: .84rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  width: 100%; padding: .88em 1em; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--graphite); font-size: 1.03rem; letter-spacing: .01em; font-weight: 400;
  transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
  appearance: none;
}
.form textarea { min-height: 7.5rem; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--muted-2); }
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--mauve); background: var(--white);
  box-shadow: 0 0 0 3px rgba(198,178,184,.18); outline: none;
}

.checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.check {
  position: relative; display: inline-flex; align-items: center;
  padding: .58em 1.15em; border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
  font-size: .9rem; letter-spacing: .03em; text-transform: none; color: var(--muted); cursor: pointer;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.check:hover { border-color: var(--mauve); color: var(--graphite); }
/* A négyzet eltűnik — a kijelölést a pill színe jelzi (mint az eredeti oldalon) */
.check input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.check.on,
.check:has(input:checked) { background: var(--graphite); border-color: var(--graphite); color: var(--cream); }
.check input:focus-visible + span,
.check:focus-within { outline: 2px solid var(--mauve); outline-offset: 2px; }

.consent { display: flex; gap: .7em; align-items: flex-start; font-size: .88rem; line-height: 1.6; letter-spacing: .01em; text-transform: none; color: var(--muted); }
.consent input { margin-top: .3rem; width: .95rem; height: .95rem; accent-color: var(--mauve); flex: none; }
.consent a { border-bottom: 1px solid var(--line); }

.note { font-size: .84rem; color: var(--muted-2); letter-spacing: .03em; }

.flash { padding: 1.05em 1.2em; border-radius: 12px; border: 1px solid; font-size: .97rem; letter-spacing: .02em; margin-bottom: 1.2rem; }
.flash.ok  { border-color: rgba(122,160,132,.4); background: rgba(122,160,132,.1); color: #4B6B54; }
.flash.err { border-color: rgba(190,120,110,.4); background: rgba(190,120,110,.09); color: #9C5B50; }

.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* Süti-kapu az űrlapon (reCAPTCHA sütit igényel) */
.gate {
  position: absolute; inset: 0; z-index: 5; border-radius: var(--r);
  display: grid; place-content: center; justify-items: center; gap: .7rem; text-align: center;
  padding: 2rem; background: rgba(251, 250, 248, .82);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  transition: opacity .55s var(--ease), visibility .55s;
}
.gate[hidden] { display: none; }
.gate .badge { width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--white); }
.gate strong { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; letter-spacing: .09em; text-transform: uppercase; }
.gate p { max-width: 36ch; font-size: .97rem; font-weight: 300; color: var(--muted); }
.gate .btn { margin-top: .3rem; }
.formCard.gated .form { filter: blur(1px); opacity: .5; pointer-events: none; user-select: none; }

/* ---------- 17. Lábléc ---------- */
.foot { background: var(--ink); color: var(--cream); padding-block: clamp(3.2rem, 7vh, 5rem) 1.6rem; }
.footGrid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .footGrid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footBrand { display: grid; gap: 1.1rem; justify-items: start; }
.footBrand .logo { justify-items: start; }
.footBrand .logo small { text-indent: 0; }
.footBrand p { color: var(--muted-dark); font-weight: 300; font-size: 1.02rem; }

.socials { display: flex; gap: .5rem; }
.socials a {
  display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%;
  border: 1px solid var(--line-dark); color: var(--cream); opacity: .62;
  transition: opacity .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.socials svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 1.6; }
.socials a:hover { opacity: 1; border-color: var(--rose); transform: translateY(-2px); }

.status { display: inline-flex; align-items: center; gap: .55em; font-size: .84rem; color: var(--muted-dark); }
.status i { width: .45rem; height: .45rem; border-radius: 50%; background: #7FB68C; box-shadow: 0 0 0 3px rgba(127,182,140,.18); animation: pulse 3s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

.footCol { display: grid; gap: .8rem; align-content: start; }
.footCol h4 { font-family: var(--sans); font-weight: 400; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-dark); }
.footCol a { font-size: 1.02rem; color: rgba(244,241,238,.82); transition: color .4s var(--ease), padding-left .4s var(--ease); }
.footCol a:hover { color: var(--rose); padding-left: .25rem; }

.footBase {
  margin-top: clamp(2.4rem, 5vh, 3.6rem); padding-top: 1.5rem; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between;
  font-size: .8rem; letter-spacing: .05em; color: rgba(244,241,238,.5);
}
.footBase .heart { color: var(--rose); }

/* ---------- 18. Lebegő „vissza a tetejére" ---------- */
.toTop {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 70;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .8em 1.3em; border-radius: 999px;
  background: rgba(28,26,24,.88); color: var(--cream);
  border: 1px solid var(--line-dark); backdrop-filter: blur(12px);
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s, background .4s var(--ease);
}
.toTop.show { opacity: 1; visibility: visible; transform: none; }
.toTop:hover { background: var(--graphite); }

/* ---------- 19. Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(28,26,24,.96); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
.lb.open { opacity: 1; visibility: visible; }
.lb img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 8px; }
.lbBtn { position: absolute; background: none; border: 0; color: var(--cream); cursor: pointer; opacity: .6; transition: opacity .4s; padding: 1rem; line-height: 1; }
.lbBtn:hover { opacity: 1; }
.lbClose { top: 1rem; right: 1.2rem; font-size: 1.6rem; }
.lbPrev { left: .6rem; top: 50%; transform: translateY(-50%); font-size: 2rem; }
.lbNext { right: .6rem; top: 50%; transform: translateY(-50%); font-size: 2rem; }
.lbCount { position: absolute; bottom: 1.3rem; left: 50%; transform: translateX(-50%); font-size: .82rem; letter-spacing: .24em; color: var(--muted-dark); }

/* ---------- 20. Cookie pill ---------- */
.cookie {
  position: fixed; left: 50%; bottom: clamp(1rem, 3vw, 1.8rem); z-index: 80;
  width: min(46rem, calc(100vw - 2rem)); transform: translate(-50%, 130%);
  background: rgba(251,250,248,.94); color: var(--graphite);
  border: 1px solid var(--line); border-radius: var(--r);
  backdrop-filter: blur(16px); box-shadow: var(--shadow-lg);
  transition: transform .75s var(--ease);
}
.cookie.show { transform: translate(-50%, 0); }
.cookie .in { display: flex; flex-wrap: wrap; gap: .9rem 1.3rem; align-items: center; padding: 1.05rem 1.3rem; }
.cookie .ck { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; background: var(--cream); border: 1px solid var(--line); }
.cookie .ck svg { width: 1.15rem; height: 1.15rem; stroke: var(--graphite); fill: none; stroke-width: 1.5; }
.cookie .tx { flex: 1 1 18rem; min-width: 0; }
.cookie .tx strong { display: block; font-size: .97rem; letter-spacing: .02em; margin-bottom: .15rem; }
.cookie p { font-size: .89rem; font-weight: 300; color: var(--muted); letter-spacing: .01em; }
.cookie a { border-bottom: 1px solid var(--line); }
.cookie .acts { display: flex; gap: .5rem; flex: none; }
.cookie .btn { padding: .8em 1.4em; font-size: .8rem; }

/* ---------- 21. Scroll-reveal ---------- */
/* A megjelenítő animáció CSAK akkor rejti el a tartalmat, ha fut a JavaScript
   (a <html> elem ekkor kap .js osztályt). Így ha a szkript bármiért nem fut le,
   az oldal nem marad üres — a tartalom egyszerűen animáció nélkül látszik. */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 1.05s var(--ease), transform 1.05s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s } .rv.d2 { transition-delay: .16s } .rv.d3 { transition-delay: .24s } .rv.d4 { transition-delay: .32s }

/* ---------- 22. Reszponzív ---------- */
/* Kisebb kijelzőn egyenletes rács — így ott sem keletkezhet üres cella. */
@media (max-width: 74rem) { .galGrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 60rem) {
  .nav, .hdrRight .lang { display: none; }
  .burger { display: grid; }
  .rail .quiet { display: none; }
  .galGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .hdrRight .cta { display: none; }
  .toTop { padding: .8em 1em; }
  .toTop span { display: none; }
}
@media (max-width: 34rem) {
  .rail .wrap { gap: .45rem 1rem; font-size: .62rem; letter-spacing: .12em; }
  .rail .sep { display: none; }
  .heroCtas { flex-direction: column; width: 100%; }
  .heroCtas .btn { width: 100%; }
  .cookie .acts { width: 100%; }
  .cookie .acts .btn { flex: 1; }
}

/* ---------- 23. Mozgáscsökkentés / nyomtatás ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
  .heroMedia img { animation: none; transform: scale(1.02); }
  .stripTrack { animation: none; }
}
@media print {
  .rail, .hdr, .cookie, .lb, .scrollCue, .strip, .toTop { display: none !important; }
  body { background: #fff; color: #000; }
  .dark, .hero { background: #fff !important; color: #000 !important; }
}


/* ==========================================================================
   24. ALOLDALAK (galéria, videók, jogi oldalak)
   Ugyanaz a nyelv, mint a főoldalon: pill-fejléc, sötét horgony, krém alap.
   ========================================================================== */

/* Rövid, sötét fejléc-sáv — a lebegő pill ráül, mint a főoldali heróra */
.subHero {
  position: relative; background: var(--ink); color: var(--cream);
  margin-top: calc(-1 * var(--hdrH, 5.3rem));
  padding-top: calc(var(--hdrH, 5.3rem) + clamp(2rem, 5vh, 3.4rem));
  padding-bottom: clamp(2rem, 5vh, 3.4rem);
  overflow: hidden;
}
.subHero .wrap { display: grid; justify-items: center; gap: .85rem; text-align: center; }
.subHero h1 { font-size: clamp(1.65rem, 1.15rem + 2.2vw, 3rem); }
.subHero p { max-width: 52ch; color: var(--muted-dark); font-weight: 300; }
.subHero .eyebrow { color: var(--muted-dark); }

/* Vissza-hivatkozás sor */
.backRow { padding-block: clamp(1.2rem, 3vh, 2rem) 0; }
.backRow .linkArrow { border-bottom-color: var(--line); }

/* Kategória-kártyák (galéria főoldal) */
.catGrid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.catCard {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r); aspect-ratio: 4 / 5; background: var(--greige);
  box-shadow: var(--shadow-sm);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.catCard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.catCard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.catCard:hover img { transform: scale(1.05); }
.catCard .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: linear-gradient(0deg, rgba(28,26,24,.88) 15%, rgba(28,26,24,.35) 65%, transparent);
  color: var(--cream); display: grid; gap: .3rem; text-align: left;
}
.catCard .cap h2, .catCard .cap h3 { color: var(--cream); font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); }
.catCard .cap span { font-size: .84rem; color: rgba(244,241,238,.72); font-weight: 300; }

/* Videó-kártyák */
.vidGrid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.vidCard {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  overflow: hidden; border-radius: var(--r); aspect-ratio: 16 / 9;
  background: var(--greige); cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.vidCard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.vidCard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.vidCard:hover img { transform: scale(1.04); }
.vidCard .play { position: absolute; inset: 0; display: grid; place-items: center; }
.vidCard .play i {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: rgba(244,241,238,.92); display: grid; place-items: center;
  box-shadow: 0 8px 26px -10px rgba(20,16,12,.5);
  transition: transform .5s var(--ease), background .4s var(--ease);
}
.vidCard .play i::after {
  content: ""; width: 0; height: 0; margin-left: .22rem;
  border-left: .78rem solid var(--graphite);
  border-top: .5rem solid transparent; border-bottom: .5rem solid transparent;
}
.vidCard:hover .play i { transform: scale(1.08); background: var(--rose); }
.vidCard .t {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.15rem;
  background: linear-gradient(0deg, rgba(28,26,24,.88), transparent);
  color: var(--cream); font-size: .95rem; text-align: left; font-weight: 300;
}

/* Videó a lightboxban */
.lb .lbVideo { width: min(92vw, 1180px); aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; }

/* Jogi / szöveges oldalak */
.prose { max-width: 70ch; margin-inline: auto; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem); margin-top: 2.4rem; margin-bottom: .2rem; }
.prose h3 { font-size: clamp(1rem, .92rem + .35vw, 1.15rem); margin-top: 1.7rem; margin-bottom: .2rem; }
.prose p, .prose li { color: var(--muted); font-weight: 300; }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: .45rem; }
.prose a { border-bottom: 1px solid var(--line); }
.prose a:hover { border-bottom-color: var(--mauve); }
.prose strong { font-weight: 700; color: var(--graphite); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 700; }

/* Aloldali galéria-rács: ugyanaz a nyelv, mint a főoldalon */
.subGrid { display: grid; gap: clamp(.55rem, 1.1vw, .9rem); grid-template-columns: repeat(4, 1fr); }
.subGrid figure { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 3 / 2; background: var(--greige); cursor: zoom-in; }
.subGrid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.subGrid figure:hover img { transform: scale(1.05); }
@media (max-width: 74rem) { .subGrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 60rem) { .subGrid { grid-template-columns: repeat(2, 1fr); } }

/* Betöltés gomb */
.moreRow { display: grid; justify-items: center; margin-top: clamp(1.8rem, 4vh, 2.6rem); }