/* ==========================================================================
   Igaz Majom – stíluslap
   Elrendezés: múzeumi fehér fal, magazincímlap-szerű logó; a logó J betűjének
   „farka” belelóg a borítóképbe. Tartalom balra zárva, aszimmetrikus 12 hasábos rács.

   A SZÍNEKET NEM ITT, hanem a szerkesztőfelületen érdemes állítani
   (Beállítások → Színek). Az alábbi értékek csak tartalékok.
   ========================================================================== */

/* ---------- Betűtípusok (saját tárhelyről, magyar ékezetekkel) ---------- */
@font-face {
  font-family: "Noto Serif Display";
  src: url("../fonts/noto-serif-display-latin.woff2") format("woff2");
  font-weight: 300 500;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("../fonts/noto-serif-display-latin-ext.woff2") format("woff2");
  font-weight: 300 500;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0150-0151, U+0170-0171;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("../fonts/noto-serif-display-latin-italic.woff2") format("woff2");
  font-weight: 300 500;
  font-stretch: 62.5% 100%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
}
@font-face {
  font-family: "Noto Serif Display";
  src: url("../fonts/noto-serif-display-latin-ext-italic.woff2") format("woff2");
  font-weight: 300 500;
  font-stretch: 62.5% 100%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0150-0151, U+0170-0171;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0150-0151, U+0170-0171;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+20AC, U+2122;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-ext-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0150-0151, U+0170-0171;
}

/* ---------- Tokenek ---------- */
:root {
  /* Színek (tartalék; a valódi értékeket a szerkesztő adja) */
  --szin-hatter: #FFFFFF;   /* galériafehér fal */
  --szin-szoveg: #16192B;   /* írótinta */
  --szin-halvany: #5E6276;  /* képaláírás, apró betű */
  --szin-vonal: #E1E2E8;    /* hajszálvonal */
  --szin-logo: #7B3A1A;     /* címlapszín: a borítóképhez igazítva, ahogy a magazinoknál */
  --szin-sotet: #16192B;    /* lábléc és hírsáv */

  /* Betűk */
  --betu-cim: "Noto Serif Display", "Didot", "Bodoni 72", "Bodoni MT", "Times New Roman", serif;
  --betu-szoveg: "Newsreader", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;

  /* Típusskála */
  --meret-kicsi: 0.9375rem;                                   /* 15px – címke, apró betű */
  --meret-alap: 1.1875rem;                                    /* 19px – folyószöveg */
  --meret-bevezeto: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  --meret-h3: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);
  --meret-h2: clamp(2.25rem, 1.55rem + 2.6vw, 3.75rem);
  --meret-kiemeles: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem);
  --meret-lapcim: clamp(4.25rem, 1.5rem + 12vw, 12rem);

  /* Tér */
  --szel: clamp(16px, 4vw, 56px);                 /* oldalmargó */
  --max: 1440px;                                  /* legnagyobb tartalomszélesség */
  --koz: clamp(1rem, 0.6rem + 1.6vw, 2.25rem);     /* rácshézag */
  --szakasz: clamp(5rem, 3rem + 7vw, 10rem);       /* szakaszok közti tér */
}

/* ---------- Alapok ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--szin-hatter);
  color: var(--szin-szoveg);
  font-family: var(--betu-szoveg);
  font-size: var(--meret-alap);
  line-height: 1.6;
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A telefon felső sávja alatt is a lap színe látszik */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: var(--szin-hatter);
}

.lap { overflow-x: clip; }

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--betu-cim);
  font-weight: 400;
  line-height: 1.06;
  text-wrap: balance;
}
p { margin: 0; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
}
a:hover { color: var(--szin-logo); }

:focus-visible {
  outline: 2px solid var(--szin-logo);
  outline-offset: 3px;
}
main:focus { outline: none; }

::selection {
  background: var(--szin-logo);
  color: var(--szin-hatter);
}

.keret {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-left: max(var(--szel), env(safe-area-inset-left, 0px));
  padding-right: max(var(--szel), env(safe-area-inset-right, 0px));
}

.ugro {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--szin-szoveg);
  color: var(--szin-hatter);
}
.ugro:focus { top: calc(env(safe-area-inset-top, 0px) + 1rem); }

/* ---------- Rács ---------- */
.racs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--koz);
}
@media (min-width: 900px) {
  .racs { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ---------- Hírsáv ---------- */
.hirsav {
  background: var(--szin-sotet);
  color: var(--szin-hatter);
  font-size: var(--meret-kicsi);
  line-height: 1.4;
}
.hirsav__szoveg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  padding-block: 0.65rem;
  text-align: center;
}
.hirsav a { color: inherit; }
.hirsav a:hover { color: inherit; text-decoration-thickness: 2px; }

/* ---------- Fejléc ---------- */
.fejlec {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--szin-hatter);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.fejlec--gorgetve { border-bottom-color: var(--szin-vonal); }

.fejlec__belso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 0.9rem;
}

.fejlec__logo {
  font-family: var(--betu-cim);
  font-weight: 400;
  font-stretch: 62.5%;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--szin-logo);
}
.fejlec__logo:hover { color: var(--szin-logo); }

.fejlec--fooldal .fejlec__logo {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.fejlec--fooldal.fejlec--logo .fejlec__logo {
  opacity: 1;
  visibility: visible;
}

.fejlec__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem clamp(1.1rem, 2.4vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fejlec__nav a {
  font-size: 1.0625rem;
  text-decoration-color: transparent;
}
.fejlec__nav a:hover { text-decoration-color: currentColor; }
.fejlec__nav a[aria-current="page"] { text-decoration-color: currentColor; }

@media (max-width: 640px) {
  .fejlec__belso { padding-block: 0.75rem; }
  .fejlec--fooldal .fejlec__logo { display: none; }
  .fejlec__nav ul { gap: 0.25rem 1.05rem; }
  .fejlec__nav a { font-size: 1rem; }
}

/* ---------- Borító: címlap-logó + kép ---------- */
.borito__keret {
  container-type: inline-size;
  padding-top: clamp(1rem, 3vw, 2.5rem);
}

.borito__alcim {
  font-style: italic;
  font-size: var(--meret-bevezeto);
  line-height: 1.3;
  margin-bottom: clamp(0.25rem, 1vw, 0.75rem);
}

.borito__cim {
  position: relative;
  z-index: 2;
  /* A logó kitölti a teljes szélességet; a JavaScript pontosítja a méretet */
  font-size: calc(100cqi / 4.86);
  font-weight: 300;
  font-stretch: 62.5%;
  line-height: 0.8;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--szin-logo);
  pointer-events: none;
}
.borito__cim-belso {
  display: inline-block;
  pointer-events: auto;
}
.borito__cim .sor { display: inline-block; }

/* A J farka: betöltéskor egyszer meglendül, mint egy faágon lógó farok */
.borito__cim .farok {
  display: inline-block;
  transform-origin: 62% 6%;
  animation: farok 2.6s cubic-bezier(0.3, 0.55, 0.25, 1) 0.5s 1 both;
}
@keyframes farok {
  0%   { transform: rotate(0deg); }
  16%  { transform: rotate(8deg); }
  36%  { transform: rotate(-5deg); }
  56%  { transform: rotate(2.5deg); }
  76%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

.borito__kep {
  position: relative;
  z-index: 1;
  /* a kép teteje a betűk alapvonalához ér, így csak a J farka lóg bele */
  margin-top: calc(100cqi / 4.86 * 0.035);
}
/* A borítókép kerete. A töréspontok egyeznek a build.py BORITO_KERETEK beállításával:
   keskeny és közepes képernyőn külön kivágás készül, amelynek közepén a majom feje áll. */
.borito__kep .kepkeret__kep { aspect-ratio: 16 / 9; }
@media (max-width: 1000px) {
  .borito__kep .kepkeret__kep { aspect-ratio: 1 / 1; }
}
@media (max-width: 640px) {
  .borito__kep .kepkeret__kep { aspect-ratio: 4 / 5; }
}

@container (max-width: 640px) {
  .borito__cim {
    font-size: calc(100cqi / 2.86);
    white-space: normal;
    line-height: 0.82;
  }
  .borito__cim .sor { display: block; width: max-content; }
  .borito__cim .sorkoz { display: none; }
  .borito__kep { margin-top: calc(100cqi / 2.86 * 0.035); }
}

/* ---------- Kép + múzeumi címke ---------- */
.kepkeret { margin: 0; }
.kepkeret__kep {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  max-width: 100%;
  background: var(--szin-vonal);
}
.kepkeret__kep picture,
.kepkeret__kep img {
  width: 100%;
  height: 100%;
}
.kepkeret__kep img { object-fit: cover; }

.cimke {
  display: grid;
  margin-top: 0.85rem;
  font-size: var(--meret-kicsi);
  line-height: 1.45;
  color: var(--szin-halvany);
}
.cimke span:first-child {
  font-style: italic;
  color: var(--szin-szoveg);
}

/* ---------- Szakaszok, szöveg ---------- */
.szakasz { padding-top: var(--szakasz); }
.szakasz--kozel { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

.szakasz__cim {
  font-size: var(--meret-h2);
  letter-spacing: -0.005em;
}

.bevezeto {
  font-size: var(--meret-bevezeto);
  line-height: 1.38;
  max-width: 30em;
}

.folyoszoveg { max-width: 34em; }
.folyoszoveg > * + * { margin-top: 1em; }
.folyoszoveg p { hanging-punctuation: first; }
.folyoszoveg em { font-style: italic; }
.folyoszoveg strong { font-weight: 600; }

.kiemeles {
  font-family: var(--betu-cim);
  font-style: italic;
  font-weight: 300;
  font-size: var(--meret-kiemeles);
  line-height: 1.12;
  max-width: 17em;
  text-wrap: balance;
}

.szoveglink {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: var(--meret-alap);
  text-decoration-thickness: 1px;
}
.szoveglink:hover { text-decoration-thickness: 2px; }

/* ---------- A projektről ---------- */
.projekt__szoveg > * + * { margin-top: 1.5rem; }
.projekt__kiemeles { margin-top: clamp(1.5rem, 1rem + 3vw, 4rem); }

.projekt--vezetovel .projekt__szoveg { margin-top: clamp(0.5rem, 0.25rem + 1.5vw, 2rem); }

@media (min-width: 900px) {
  .projekt__cim { grid-column: 1 / span 4; }
  .projekt__szoveg { grid-column: 5 / span 7; }
  .projekt__kiemeles { grid-column: 5 / -1; }
  .projekt__vezeto { grid-column: 1 / span 9; }
}

/* ---------- Bemutatkozás (a majom saját szavaival), alatta a rajz ---------- */
.tortenet__szoveg > * + * { margin-top: 1.5rem; }
.tortenet__monolog {
  font-size: var(--meret-bevezeto);
  line-height: 1.45;
  max-width: 31em;
}
.tortenet__monolog > * + * { margin-top: 1em; }
.tortenet__monolog p { hanging-punctuation: first; }

/* A rajz a saját arányában, vágás nélkül */
.tortenet__kep { margin-top: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
.tortenet__kep .kepkeret__kep { aspect-ratio: auto; }
.tortenet__kep .kepkeret__kep img { height: auto; }

@media (min-width: 900px) {
  .tortenet__szoveg { grid-column: 1 / span 9; }
  .tortenet__kep { grid-column: 1 / span 5; }
}

/* ---------- Videók (főoldal) ---------- */
.videoblokk__bevezeto { margin-top: 1.5rem; max-width: 30em; }
.videoblokk__linkek { margin-top: 0.5rem; }
.videoblokk__linkek .szoveglink { margin-top: 1rem; }

@media (min-width: 900px) {
  .videoblokk__szoveg { grid-column: 1 / span 6; }
  .videoblokk__linkek { grid-column: 8 / -1; align-self: start; margin-top: 0; }
}

/* ---------- Videósáv: vízszintesen lapozható kártyák, a középső kiemelve ---------- */
.videosav {
  --kartya: clamp(13.5rem, 21.5vw, 18.5rem);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.videosav__sav {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 0.4rem + 2vw, 2.25rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* az első és az utolsó kártya is középre görgethető */
  padding-inline: calc(50% - var(--kartya) / 2);
  padding-block: 0.25rem 0.5rem;
  scrollbar-width: none;
}
.videosav__sav::-webkit-scrollbar { display: none; }
.videosav__sav:focus-visible { outline-offset: -2px; }

.videosav__lap {
  flex: 0 0 var(--kartya);
  min-width: 0;
  scroll-snap-align: center;
  transform: scale(0.87);
  transform-origin: 50% 45%;
  opacity: 0.45;
  transition: transform 0.45s cubic-bezier(0.3, 0.6, 0.2, 1), opacity 0.45s ease;
}
.videosav__lap .cimke {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.videosav__lap--aktiv {
  transform: none;
  opacity: 1;
}
.videosav__lap--aktiv .cimke { opacity: 1; }
.videosav__lap:not(.videosav__lap--aktiv) .video__lejatszo { cursor: pointer; }
.videosav__lap:not(.videosav__lap--aktiv):hover { opacity: 0.6; }

.videosav__pottyok {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
}
.videosav__potty {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--szin-vonal);
  cursor: pointer;
  transition: width 0.35s ease, background-color 0.35s ease;
}
.videosav__potty:hover { background: var(--szin-halvany); }
.videosav__potty--aktiv,
.videosav__potty--aktiv:hover {
  width: 2.25rem;
  background: var(--szin-szoveg);
}

/* ---------- Videókártya ---------- */
.videolista {
  display: grid;
  gap: var(--koz);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.videolista--1 { grid-template-columns: minmax(0, 20rem); }
.videolista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.videolista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.videolista--racs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.valogatas__cim { margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }

@media (max-width: 560px) {
  .videolista--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videolista--1 { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
}

.video { margin: 0; min-width: 0; }

.video__lejatszo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--szin-sotet);
  color: var(--szin-hatter);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.video__lejatszo:hover { color: var(--szin-hatter); }
.video__lejatszo img,
.video__lejatszo picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.video__lejatszo img { object-fit: cover; }
.video__lejatszo iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__plakat {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  font-family: var(--betu-cim);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.08;
  text-wrap: balance;
}

.video__ikon {
  position: absolute;
  top: clamp(0.75rem, 1.5vw, 1.1rem);
  left: clamp(0.75rem, 1.5vw, 1.1rem);
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, var(--szin-sotet) 35%, transparent);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.video__ikon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.85rem;
  border-color: transparent transparent transparent currentColor;
}
.video__lejatszo:hover .video__ikon,
.video__lejatszo:focus-visible .video__ikon {
  background: var(--szin-hatter);
  color: var(--szin-sotet);
}
.video__lejatszo--fut .video__ikon { display: none; }

.video .cimke { margin-top: 0.75rem; }
.video__leiras { color: var(--szin-szoveg); }

/* ---------- Nagy linksorok (közösségi oldalak) ---------- */
.index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--szin-szoveg);
}
.index li { border-bottom: 1px solid var(--szin-vonal); }
.index__sor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: clamp(0.9rem, 0.6rem + 1.2vw, 1.6rem);
  text-decoration: none;
}
.index__nev {
  font-family: var(--betu-cim);
  font-weight: 300;
  font-size: clamp(2.25rem, 1.2rem + 4.2vw, 5.25rem);
  line-height: 1;
}
.index__adat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-size: var(--meret-alap);
  color: var(--szin-halvany);
}
/* A profilnév aláhúzva, mellette nyíl: látszik, hogy élő link, új lapon nyílik */
.index__felhasznalo {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.index__nyil {
  width: 0.9em;
  height: 0.9em;
  flex: none;
  align-self: center;
  transition: transform 0.25s ease;
}
.index__sor:hover .index__adat,
.index__sor:focus-visible .index__adat { color: var(--szin-logo); }
.index__sor:hover .index__felhasznalo { text-decoration-color: currentColor; }
.index__sor:hover .index__nyil { transform: translate(2px, -2px); }

.index--kicsi .index__nev { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 400; }
.index--kicsi .index__adat { font-size: var(--meret-kicsi); }
.index--kicsi .index__sor { padding-block: 0.8rem; }

/* ---------- A városban ---------- */
.varos__fej .bevezeto { align-self: end; }
@media (min-width: 900px) {
  .varos__fej .szakasz__cim { grid-column: 1 / span 4; }
  .varos__bevezeto { grid-column: 5 / span 7; }
}

.installacio { margin-top: clamp(2.5rem, 1.5rem + 3.5vw, 5rem); }

.installacio__kepek {
  display: grid;
  gap: var(--koz);
  grid-template-columns: minmax(0, 1fr);
}
.installacio__kepek--1 .kepkeret__kep { aspect-ratio: 16 / 9; }
/* Két kép esetén mindkettő a saját arányában látszik (álló fotó, A4-es plakát) */
.installacio__kepek--2 .kepkeret__kep { aspect-ratio: auto; }
.installacio__kepek--2 .kepkeret__kep img { height: auto; }
@media (min-width: 700px) {
  .installacio__kepek--2 {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
  }
  .installacio__kepek--sok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.installacio__adatok { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.installacio__cim { font-size: var(--meret-h3); line-height: 1.1; }

.adatlap { margin: 0; }
.adatlap > div {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.6rem;
  border-top: 1px solid var(--szin-vonal);
}
.adatlap > div:last-child { border-bottom: 1px solid var(--szin-vonal); }
.adatlap dt { color: var(--szin-halvany); font-size: var(--meret-kicsi); padding-top: 0.2em; }
.adatlap dd { margin: 0; line-height: 1.45; }

@media (min-width: 900px) {
  .installacio__cim { grid-column: 1 / span 4; }
  .adatlap { grid-column: 5 / span 4; }
  .installacio__leiras { grid-column: 9 / -1; }
}

/* ---------- Sajtó ---------- */
.sajtoblokk__fej .szoveglink { margin-top: 1rem; }
@media (min-width: 900px) {
  .sajtoblokk__fej { grid-column: 1 / span 4; }
  .sajtoblokk__cikk { grid-column: 5 / -1; }
}

.cikk__forras { font-size: var(--meret-kicsi); color: var(--szin-halvany); }
.cikk__lap { font-style: italic; color: var(--szin-szoveg); }
.cikk__cim {
  margin-top: 0.6rem;
  font-size: var(--meret-h3);
  line-height: 1.14;
}
.cikk__cim a { text-decoration: none; }
.cikk__cim a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.cikk__szerzo { margin-top: 0.75rem; font-size: var(--meret-kicsi); color: var(--szin-halvany); }
.cikk__osszefoglalo { margin-top: 1rem; max-width: 34em; }
.cikk .szoveglink { margin-top: 1.25rem; }

.cikk--kiemelt {
  display: grid;
  gap: var(--koz);
  grid-template-columns: minmax(0, 1fr);
}
.cikk--kiemelt .kepkeret__kep { aspect-ratio: 4 / 3; }
@media (min-width: 700px) {
  .cikk--kiemelt {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }
}

/* További médiamegjelenések: a kiemelt cikk szövegoszlopa alatt */
.mediak { margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.cikklista > .mediak { margin-top: 0; }
@media (min-width: 700px) {
  .cikk--kiemelt + .mediak { margin-left: calc((100% - var(--koz)) * 5 / 11 + var(--koz)); }
}
.mediak__fej {
  margin-bottom: 0.9rem;
  font-family: var(--betu-szoveg);
  font-size: var(--meret-kicsi);
  font-weight: 400;
  line-height: 1.45;
  color: var(--szin-halvany);
}
.mediak__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--szin-szoveg);
}
.mediak__lista li { border-bottom: 1px solid var(--szin-vonal); }
.mediak__sor {
  display: grid;
  gap: 0.3rem;
  padding-block: 0.95rem;
  text-decoration: none;
}
.mediak__forras { font-size: var(--meret-kicsi); color: var(--szin-halvany); }
.mediak__lap { font-style: italic; color: var(--szin-szoveg); }
.mediak__cim {
  font-family: var(--betu-cim);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  line-height: 1.2;
  text-wrap: balance;
}
.mediak__cim .index__nyil {
  display: inline-block;
  margin-left: 0.35em;
  width: 0.7em;
  height: 0.7em;
  vertical-align: 0.05em;
  color: var(--szin-halvany);
}
.mediak__sor:hover .mediak__cim { color: var(--szin-logo); }
.mediak__sor:hover .index__nyil { color: var(--szin-logo); transform: translate(2px, -2px); }

.cikklista { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); }
.cikklista .cikk + .cikk {
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--szin-vonal);
}

.idezet { margin: 0; }
.idezet blockquote {
  margin: 0;
  font-family: var(--betu-cim);
  font-style: italic;
  font-weight: 300;
  font-size: var(--meret-kiemeles);
  line-height: 1.12;
  max-width: 17em;
  text-wrap: balance;
}
.idezet blockquote p { text-indent: -0.42em; }
.idezet figcaption {
  margin-top: 1.25rem;
  font-size: var(--meret-kicsi);
  color: var(--szin-halvany);
}
@media (min-width: 900px) {
  .idezet { grid-column: 3 / -1; }
}

/* Két hasábos szakasz: cím balra, tartalom jobbra */
.ketoszlop > :nth-child(2) > * + * { margin-top: 1rem; }
.ketoszlop > .szakasz__cim { hyphens: auto; overflow-wrap: break-word; }
@media (min-width: 900px) {
  .ketoszlop > :first-child { grid-column: 1 / span 4; }
  .ketoszlop > :nth-child(2) { grid-column: 5 / span 8; }
}

/* ---------- E-mail ---------- */
.email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.email__cim {
  font-family: var(--betu-cim);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  line-height: 1.1;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.email__cim:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.email__masol {
  font: inherit;
  font-size: var(--meret-kicsi);
  line-height: 1;
  padding: 0.55rem 1rem;
  border: 1px solid var(--szin-szoveg);
  border-radius: 999px;
  background: transparent;
  color: var(--szin-szoveg);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.email__masol:hover {
  background: var(--szin-szoveg);
  color: var(--szin-hatter);
}

.ures {
  max-width: 34em;
  padding-block: 1rem;
  color: var(--szin-halvany);
  font-style: italic;
}

/* ---------- Aloldalak fejléce ---------- */
.lapfej { padding-top: clamp(2.5rem, 1rem + 6vw, 6rem); }
.lapfej__cim {
  font-weight: 300;
  font-stretch: 62.5%;
  font-size: var(--meret-lapcim);
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--szin-logo);
  overflow-wrap: anywhere;
}
.lapfej__bevezeto { margin-top: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.lapfej .szoveglink { margin-top: 2rem; }

/* ---------- Lábléc ---------- */
.lablec {
  margin-top: var(--szakasz);
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-bottom: calc(clamp(1.5rem, 1rem + 2vw, 2.5rem) + env(safe-area-inset-bottom, 0px));
  background: var(--szin-sotet);
  color: var(--szin-hatter);
}
.lablec a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.lablec a:hover { color: inherit; text-decoration-color: currentColor; }

.lablec__logo {
  font-family: var(--betu-cim);
  font-weight: 300;
  font-stretch: 62.5%;
  font-size: min(calc((100vw - 2 * var(--szel)) / 4.95), 18rem);
  line-height: 0.8;
  text-transform: uppercase;
  white-space: nowrap;
}
.lablec__logo .sor,
.lablec__logo .kitolt-belso { display: inline-block; }

.lablec__motto {
  margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  font-style: italic;
  font-size: var(--meret-bevezeto);
}

.lablec__oszlopok {
  display: grid;
  gap: 2rem var(--koz);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--szin-hatter) 22%, transparent);
}
.lablec__cim {
  margin-bottom: 0.75rem;
  font-family: var(--betu-szoveg);
  font-size: var(--meret-kicsi);
  font-weight: 400;
  color: color-mix(in srgb, var(--szin-hatter) 62%, transparent);
}
.lablec ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lablec__also {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  font-size: var(--meret-kicsi);
  color: color-mix(in srgb, var(--szin-hatter) 62%, transparent);
}

/* ---------- Kevesebb mozgás kérésére ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}