/* Gaál Sándor versei — stíluslap
   Papír: hűvös mészkő. Tinta: kékesfekete. Kiemelés: sötét óvérvörös.
   Egyetlen betűcsalád: Garamond, a nyomtatott kötet folytatásaként.
   A kis feliratokat is ez viszi, ritkított nagybetűvel. */

:root {
  --asztal:  #d7d4ca;            /* a lap alatti felület, ezen áll a papír */
  --papir:   #e8e7e1;
  --papir-2: #dedcd4;
  --tinta:   #1d2126;
  --halk:    #5a5e62;
  --vonal:   #c6c4b9;
  --kiemel:  #7a2e2e;

  --vers-piros: #c0272d;         /* a trikolór két színe a Lobogjatok! szedésében */
  --vers-zold:  #1a6f36;

  --mertek: 31rem;
  --racs: 66rem;                 /* a szedéstükör szélessége */
  --lap:  80rem;                 /* a lap teljes szélessége, a képsávokkal együtt */
  --keret: max(1.5rem, calc((100% - var(--racs)) / 2));  /* oldalsó margó a szedéstükörhöz */
  --fatyol: 233, 232, 226;       /* a papírszín RGB-ben, a képek fölé */
  --halo:   246, 245, 241;       /* lágy, élek nélküli világos folt a szöveg mögé */

}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--asztal);
  color: var(--tinta);
  font-family: "EB Garamond", Garamond, "Adobe Garamond Pro", Sabon,
               "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
               Georgia, serif;
  font-size: 20px;
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

a { color: inherit; text-decoration-color: var(--vonal); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--kiemel); }
a:focus-visible { outline: 2px solid var(--kiemel); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--papir); padding: .6rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

.halk { color: var(--halk); }

/* ---------- fejléc ---------- */

.fejlec {
  border-bottom: 1px solid var(--vonal);
  /* A vonal a lap széléig fut, a tartalom viszont a szedéstükörhöz igazodik. */
  padding: 1.6rem var(--keret) 1.1rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
}

.nev {
  text-decoration: none;
  font-size: 1.15rem;
  letter-spacing: .1em;
}
.nev span { color: var(--halk); letter-spacing: .04em; margin-left: .5em; font-size: .86em; }

.ciklusok ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.15rem;
  font-size: 1rem; color: var(--halk);
}
.ciklusok a { text-decoration: none; }
.ciklusok a:hover { color: var(--tinta); }
.ciklusok a[aria-current="page"] { color: var(--tinta); border-bottom: 1px solid var(--kiemel); }

/* Második sor a fejlécben: a szerzőről / szerkesztői jegyzet oldalak. */
.oldal-menu { flex-basis: 100%; text-align: right; font-size: 1rem; color: var(--halk); }
.oldal-menu a { text-decoration: none; }
.oldal-menu a:hover { color: var(--tinta); }
.oldal-menu a[aria-current="page"] { color: var(--tinta); border-bottom: 1px solid var(--kiemel); }

/* Mobil ciklus-kapcsoló: asztali nézetben rejtett, a ciklusok mindig látszanak. */
.menu-kapcsolo { position: absolute; width: 1px; height: 1px; opacity: 0; }
.menu-cimke { display: none; }

/* A honlap egyetlen papírlap a sötétebb alapon; a képsávok a lap széléig futnak. */
.papirlap { max-width: var(--lap); margin: 0 auto; background: var(--papir); }

main { margin: 0 auto; }
.oldaltorzs { max-width: var(--racs); margin: 0 auto; padding: 0 1.5rem; }

/* ---------- nyitólap: képsávok ---------- */

.sav { position: relative; border-bottom: 1px solid var(--vonal); }

/* Két szomszédos sáv mögött egyetlen, meg nem szakadó kép; a fátyol sávonként külön. */
.sav-csoport { position: relative; }
.sav-csoport > .sav:first-of-type { border-bottom: none; }
/* A fátyol a csoportra kerül, nem sávonként: két külön átmenet más magasságon
   más szöget és más sűrűséget adna, és a kép középen kettéhasadna. */
.sav-csoport > .sav-fatyol { z-index: 0; }
.sav-csoport > .sav { z-index: 1; }
.sav-belso { position: relative; max-width: var(--racs); margin: 0 auto; padding: 0 1.5rem; }

.sav-kep {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.sav-fatyol { position: absolute; inset: 0; pointer-events: none; }

/* A fátyol iránya sávonként más: a nyitóban oldalra, a tájnál felfelé nyílik. */
.fatyol-oldal { background: linear-gradient(100deg,
  rgba(var(--fatyol), .88) 0%, rgba(var(--fatyol), .78) 52%, rgba(var(--fatyol), .42) 100%); }
.fatyol-enyhe { background: rgba(var(--fatyol), .42); }

.cimke {
  margin: 0 0 .8rem;
  font-size: .82rem; letter-spacing: .2em;
  color: var(--halk);
}
.cimke-nagy {
  margin: 0 0 .8rem;
  font-size: 1.12rem; letter-spacing: .1em;
}

/* ---------- nyitósáv ---------- */

.sav-motto { min-height: 46rem; }  /* magasabb hero, hogy a nyitókép alja is látszódjon */
.sav-motto .sav-kep { object-position: center bottom; }  /* a part vonala a sáv aljára */
.sav-csoport > .sav-kep { object-position: 72% center; }  /* a zászló jobbra, a kép bal oldala kék ég */

.sav-motto .sav-belso { padding-top: 5.2rem; padding-bottom: 4.4rem; }

.herovers { margin: 0; max-width: 34rem; }
.herovers p {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.05rem);
  line-height: 1.44;
  text-wrap: pretty;
}
.herovers cite {
  display: block; margin-top: 1.4rem;
  font-style: normal; font-size: 1.05rem; color: var(--halk);
  letter-spacing: .06em;
}

.belepes { margin: 2.6rem 0 0; }
.gomb {
  display: inline-block; padding: .65rem 1.4rem;
  border: 1px solid var(--kiemel); color: var(--kiemel);
  text-decoration: none; font-size: 1.05rem;
}
.gomb:hover { background: var(--kiemel); color: var(--papir); }

.eredet {
  padding-left: 1.6rem;
  font-size: 1.05rem; line-height: 1.6; color: #4a4e52;
}
.eredet p { margin: 0 0 .9rem; }
.eredet .kiemeles { margin: 0; color: var(--halk); font-style: italic; }

/* ---------- tartalom ---------- */

.sav-tartalom .sav-belso { padding-top: 3.6rem; padding-bottom: 4.4rem; }

.tartalom-fej {
  display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: 3.4rem;
  align-items: start; margin-bottom: 2.8rem;
}
.sav-tartalom h2 {
  margin: 0; font-weight: 500; font-size: 1.15rem; letter-spacing: .1em;
}
.bevezeto { margin: .6rem 0 0; font-size: 1.05rem; max-width: 46ch; }

/* A tartalomsáv teljes szélességű bevezetője. */
.tartalom-bemutato { margin: 0 0 3rem; font-size: 1.12rem; line-height: 1.7; color: #3f4347; }

.tocracs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 2.6rem 2.2rem;
}
.tocblokk h3 {
  margin: 0 0 .7rem; font-weight: 500; font-size: 1.12rem;
  letter-spacing: .08em;
  padding-bottom: .45rem; border-bottom: 1px solid var(--vonal);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.tocblokk:first-child h3 { border-bottom-color: var(--kiemel); }
.tocblokk h3 a { text-decoration: none; }
.tocblokk h3 a:hover { color: var(--kiemel); }
.darab {
  font-size: .88rem; letter-spacing: .08em;
  color: var(--halk); font-weight: 400; white-space: nowrap;
}

.toclista { list-style: none; margin: 0; padding: 0; font-size: 1.15rem; }
.toclista li { margin: 0 0 .18rem; }
.toclista a { text-decoration: none; color: var(--halk); }
.toclista a:hover { color: var(--tinta); text-decoration: underline; }
.cimtelen a { font-style: italic; }  /* cím nélküli vers: a kezdősora áll a cím helyén */

/* A verslista kinyitható vezérlője. Asztali nézetben rejtve, a lista mindig
   látszik; kis képernyőn (lásd lentebb) veszi át a szerepet. Csak CSS, nincs JS. */
.toc-kapcsolo, .toc-cimke { display: none; }

/* ---------- 1956 ---------- */

.sav-1956 .sav-belso { padding-top: 2rem; padding-bottom: 2rem; }
.ev-szoveg { max-width: 46ch; }
.ev-szoveg p { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.65; }

.trikolor-vonal { display: flex; height: 3px; width: 11rem; margin: 0 0 1.4rem; }
.trikolor-vonal span { flex: 1; }
.trikolor-vonal .piros { background: #8a2f33; }
.trikolor-vonal .feher { background: #f4f3ee; box-shadow: inset 0 0 0 1px var(--vonal); }
.trikolor-vonal .zold  { background: #3f6b4a; }

/* ---------- tájsáv ---------- */

.sav-taj { min-height: 19rem; display: flex; align-items: flex-end; }
.sav-taj .sav-belso { width: 100%; padding-top: 6rem; padding-bottom: 2.2rem; }
.tajvers {
  margin: 0; max-width: 26ch;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.45;
}
.tajforras { margin: .7rem 0 0; font-size: 1.05rem; letter-spacing: .06em; }
.tajforras a { text-decoration: none; }
.tajforras a:hover { color: var(--kiemel); }

/* ---------- vendégvers ----------
   Nem a kötet része: külön jelölve, két hasábban, a versszakok nem törnek meg. */

.sav-vendeg .sav-belso { padding-top: 3.6rem; padding-bottom: 4rem; }

.vendeg-fej { margin-bottom: 2.2rem; }
.vendeg-fej h2 {
  margin: 0; font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.8rem); letter-spacing: .01em;
}
.vendeg-szerzo { margin: .4rem 0 0; font-size: 1rem; color: var(--halk); letter-spacing: .04em; }

.vendeg-torzs { column-count: 3; column-gap: 2.6rem; }
.vendeg-torzs .vsz {
  margin: 0 0 1.3rem; padding-left: 0; text-indent: 0;
  white-space: pre-wrap;          /* a sorok behúzása a forrásból jön */
  break-inside: avoid;
  font-size: 1.15rem; line-height: 1.55;
}
.sav-vendeg .jegyzet { margin-top: 2.2rem; max-width: 52ch; }

/* ---------- záró sáv ---------- */

.sav-zaro { border-bottom: none; }

/* A záró sáv háttere két felvétel: kívülről és belülről ugyanaz a barakk. */
.zaro-hatter {
  position: absolute; inset: 0; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%;
}
.zaro-hatter img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.sav-zaro .sav-belso {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.6rem;
  align-items: start;  /* a szövegdobozok a saját tartalmukhoz igazodnak, nem nyúlnak egyforma magasra */
  padding-top: 3rem; padding-bottom: 3.4rem;
}

/* A záró sáv két szövege mögött lágy, kifutó élű világos folt — nem doboz:
   az elmosott téglalap minden irányban él nélkül fut ki a fénykép fölött. */
.zaro-szoveg { position: relative; padding: 2.6rem 2.4rem; }
.zaro-szoveg::before {
  content: ""; position: absolute; inset: .9rem;
  background: rgba(var(--halo), .97);
  filter: blur(30px);
}
.zaro-szoveg > * { position: relative; }
.sav-zaro p { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.65; color: #3f4347; }
.sav-zaro .tovabb { font-size: 1.05rem; }

.tovabb { color: var(--kiemel); text-decoration-color: var(--kiemel); }

/* ---------- ciklusoldal ---------- */

.ciklusfej {
  padding: 5rem 0 3.2rem;
  border-bottom: 1px solid var(--vonal);
}
.sorszam { margin: 0 0 1.2rem; font-size: .82rem; color: var(--halk); letter-spacing: .14em; }
.ciklusfej h1 {
  margin: 0; font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 3.1rem); line-height: 1.1;
  letter-spacing: .01em;
}
.ciklusfej .halk { margin: .9rem 0 0; font-size: 1rem; }

.versek { padding: 1rem 0 2rem; }

.vers {
  max-width: var(--mertek);
  padding: 3.4rem 0;
  border-bottom: 1px solid var(--papir-2);
}
.vers:last-child { border-bottom: none; }

.vers h2 {
  margin: 0 0 1.5rem;
  font-weight: 500; font-size: 1.18rem; letter-spacing: .03em;
}

/* Cím nélküli vers: a kezdősora áll a cím helyén, szögletes zárójelben. */
.kezdosor-cim { font-style: italic; font-weight: 400; color: #4a4e52; }

.vsz {
  margin: 0 0 1.5rem;
  padding-left: 1.35rem;
  text-indent: -1.35rem;   /* áthajló sor behúzása, hogy ne tűnjön új verssornak */
}
.vsz:last-of-type { margin-bottom: 0; }

.hallgatas { height: 5.5rem; }

.jegyzet {
  margin-top: 2rem; padding-left: 1.1rem;
  border-left: 1px solid var(--vonal);
  font-size: .95rem; line-height: 1.6; color: var(--halk);
}
.jegyzet span { color: var(--kiemel); }

/* ---------- Lobogjatok! — a nemzeti trikolór ----------
   A vers három szakasza a lobogó három sávját viseli: az első két versszak
   vörössel, a középső három a szedés alapszínével — ez a fehér sáv —, a záró
   három zölddel. */

.trikolor-piros { color: var(--vers-piros); }
.trikolor-zold  { color: var(--vers-zold); }
.trikolor-piros h2 { color: var(--vers-piros); }
.trikolor-papir + .trikolor-zold,
.trikolor-piros + .trikolor-papir { margin-top: 2.2rem; }

/* ---------- lapozó ---------- */

.lapozo {
  display: flex; justify-content: space-between; gap: 2rem;
  padding: 3rem 0 5rem; border-top: 1px solid var(--vonal);
  font-size: 1.05rem;
}
.lapozo a { text-decoration: none; max-width: 14rem; }
.lapozo a:hover { color: var(--kiemel); }
.lapozo span {
  display: block; font-size: .85rem; color: var(--halk);
  letter-spacing: .1em; margin-bottom: .3rem;
}
.kovetkezo { text-align: right; margin-left: auto; }

/* ---------- prózaoldalak ---------- */

.szoveg { max-width: 34rem; padding: 5rem 0 5rem; }
.szoveg h1 {
  margin: 0 0 2.4rem; font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 2.7rem); line-height: 1.15;
}
.szoveg h2.masodik {
  margin: 3.6rem 0 1.6rem; font-weight: 500; font-size: 1.3rem;
  padding-top: 2.4rem; border-top: 1px solid var(--vonal);
}
.szoveg p { margin: 0 0 1.25rem; }
.alairas {
  margin-top: 2.4rem; text-align: right !important;
  font-size: 1.05rem;
}
.alairas span { display: block; color: var(--halk); font-style: italic; font-size: .9em; }

/* ---------- lábléc ---------- */

.labjegyzet {
  border-top: 1px solid var(--vonal);
  padding: 2.2rem var(--keret) 3.5rem;
  font-size: 1rem;
}
.labjegyzet p { margin: 0 0 .4rem; }
.kulso { margin-bottom: .8rem; }
.labjegyzet a { text-decoration-color: var(--vonal); }
.labjegyzet a:hover { color: var(--kiemel); }
.kepkredit { font-size: .92rem; }

/* ---------- kisebb képernyők ---------- */

@media (max-width: 52rem) {
  .tartalom-fej { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 0; }
  .eredet { padding: 1.4rem 0 0; }
  .vendeg-torzs { column-count: 2; column-gap: 2.4rem; }
  .zaro-hatter { grid-template-columns: 1fr; }
  .zaro-hatter img:last-child { display: none; }

  /* Kis képernyőn a verslista becsukva indul, a címkére kattintva nyílik ki. */
  .toc-kapcsolo {
    display: block;
    position: absolute; width: 1px; height: 1px;   /* láthatatlan, de fókuszálható */
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .toc-cimke {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: 2.2rem; padding: .95rem 0; cursor: pointer;
    border-top: 1px solid var(--vonal); border-bottom: 1px solid var(--vonal);
    font-size: 1.08rem; letter-spacing: .06em; color: var(--tinta);
    -webkit-tap-highlight-color: transparent;
  }
  .toc-cimke:hover { color: var(--kiemel); }
  .toc-kapcsolo:focus-visible ~ .toc-cimke { outline: 2px solid var(--kiemel); outline-offset: 4px; }
  .toc-jel {
    flex: none; width: .58rem; height: .58rem; margin-bottom: .18rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .2s ease;   /* lefelé = csukva */
  }
  .toc-zar { display: none; }

  .tocracs { display: none; margin-top: 2.4rem; }
  .toc-kapcsolo:checked ~ .tocracs { display: grid; }
  .toc-kapcsolo:checked ~ .toc-cimke .toc-jel { transform: rotate(-135deg); }  /* felfelé = nyitva */
  .toc-kapcsolo:checked ~ .toc-cimke .toc-nyit { display: none; }
  .toc-kapcsolo:checked ~ .toc-cimke .toc-zar { display: inline; }
}

@media (max-width: 34rem) {
  body { font-size: 19px; }

  /* Fejléc mobilon: a ciklusok "Ciklusok" kapcsolóval nyithatók, egymás alatt. */
  .menu-cimke {
    display: inline-flex; align-items: center; gap: .45rem;
    cursor: pointer; color: var(--halk); font-size: 1rem;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-cimke::after {
    content: ""; width: .5rem; height: .5rem; margin-bottom: .18rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .2s ease;   /* lefelé = csukva */
  }
  .menu-kapcsolo:checked ~ .menu-cimke { color: var(--tinta); }
  .menu-kapcsolo:checked ~ .menu-cimke::after { transform: rotate(-135deg); }  /* felfelé = nyitva */
  .ciklusok { display: none; flex-basis: 100%; }
  .menu-kapcsolo:checked ~ .ciklusok { display: block; }
  .ciklusok ul { flex-direction: column; align-items: flex-end; gap: .2rem; }
  .sav-motto { min-height: auto; }  /* mobilon a tartalom szabja meg a magasságot */
  .sav-motto .sav-belso { padding-top: 3.4rem; padding-bottom: 3rem; }
  .vendeg-torzs { column-count: 1; }
  .sav-zaro .sav-belso { gap: 2.2rem; }
  .zaro-szoveg { padding: 2rem 1.6rem; }
  .ciklusfej { padding: 3.2rem 0 2.4rem; }
  .vers { padding: 2.6rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- nyomtatás ---------- */

@media print {
  body, .papirlap { background: #fff; font-size: 11pt; }
  .fejlec, .lapozo, .labjegyzet, .skip { display: none; }
  .sav-kep, .sav-fatyol { display: none; }
  .vers { break-inside: avoid; border: none; }
  .trikolor-piros { color: #c0272d; }
  .trikolor-zold { color: #1a6f36; }
}