/* Filmpro — mozielőcsarnok nappal */

:root {
  --vaszon: #fbf6ee;
  --kukorica: #f4e8d4;
  --karton: #eadbc3;
  --tinta: #2b1e1b;
  --barna: #6e5a52;
  --barsony: #a61f2b;
  --barsony-mely: #7c1620;
  --mustar: #e3a52b;
  --mustar-halvany: #fbedc9;
  --vonal: #e2d1b8;
  --betu-cim: "Zilla Slab", "Rockwell", Georgia, serif;
  --betu-szoveg: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --lekerekites: 14px;
}

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

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

body {
  margin: 0;
  background: var(--vaszon);
  color: var(--tinta);
  font-family: var(--betu-szoveg);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

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

a { color: var(--barsony); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--barsony-mely); text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--mustar); outline-offset: 3px; border-radius: 4px; }

.ugras {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  z-index: 10;
  background: var(--tinta);
  color: var(--vaszon);
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
}
.ugras:focus { left: 0.5rem; }

/* ── a terem: műsorfal balra, vászon jobbra ─────────────────────────── */

.mozi {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 100vh;
}

.musorfal {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--kukorica);
  border-right: 1px solid var(--vonal);
  padding: 1.5rem 1.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

/* fényreklám-tábla izzókkal */
.cimer {
  position: relative;
  display: block;
  padding: 1.15rem 1.2rem 1.05rem;
  background: var(--barsony);
  color: #fff8ec;
  text-decoration: none;
  border-radius: var(--lekerekites);
  box-shadow: 0 6px 0 var(--barsony-mely);
}
.cimer::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  background:
    radial-gradient(circle, var(--mustar) 0 2.2px, transparent 2.6px) 0 0 / 14px 14px repeat-x,
    radial-gradient(circle, var(--mustar) 0 2.2px, transparent 2.6px) 0 100% / 14px 14px repeat-x;
  opacity: 0.95;
  pointer-events: none;
}
.cimer:hover { color: #fff; }
.cimer-nev {
  display: block;
  font-family: var(--betu-cim);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: -0.01em;
  padding-top: 0.35rem;
}
.cimer-alcim {
  display: block;
  margin-top: 0.3rem;
  padding-bottom: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mustar-halvany);
}

.fomenu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.fomenu a {
  display: block;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}
.fomenu a:hover { background: var(--karton); color: var(--tinta); }
.fomenu a[aria-current="page"] { background: var(--tinta); color: var(--vaszon); }

.musorrend-fej {
  margin: 0 0 0.55rem;
  font-family: var(--betu-cim);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--barsony);
}
.musorrend ol { list-style: none; margin: 0; padding: 0; }
.musorrend li + li { margin-top: 0.15rem; }
.musorrend a {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.22rem 0;
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.95rem;
}
.mr-nev { flex: 0 1 auto; }
.mr-pont {
  flex: 1 1 auto;
  min-width: 1rem;
  border-bottom: 2px dotted #c9b393;
  transform: translateY(-0.25em);
}
.mr-tekercs {
  flex: 0 0 auto;
  font-family: var(--betu-cim);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--barna);
}
.musorrend a:hover .mr-nev,
.musorrend a[aria-current="page"] .mr-nev { color: var(--barsony); text-decoration: underline; text-underline-offset: 0.2em; }

.jegycsonk {
  margin: auto 0 0;
  padding: 0.7rem 0.9rem;
  border: 2px dashed #cdb48f;
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--barna);
  line-height: 1.4;
}
.jegycsonk span {
  display: block;
  font-family: var(--betu-cim);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--barsony);
}

.vaszon { min-width: 0; display: flex; flex-direction: column; }
.vetitoter {
  flex: 1 0 auto;
  width: 100%;
  max-width: 980px;
  padding: 2.4rem clamp(1rem, 4vw, 3.5rem) 3rem;
}

/* ── csendes nyitás ─────────────────────────────────────────────────── */

.elozetes { max-width: 46rem; margin-bottom: 2.2rem; }
.elozetes-felirat,
.lapfej-felirat {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--barna);
}
.lapfej-felirat a { color: inherit; text-decoration: none; }
.lapfej-felirat a:hover { color: var(--barsony); }
.elozetes-cim {
  margin: 0;
  font-family: var(--betu-cim);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  line-height: 1.15;
  color: var(--tinta);
}
.perforacio {
  height: 14px;
  margin: 1.1rem 0 1.2rem;
  border: 0;
  background: radial-gradient(circle, var(--vonal) 0 3.5px, transparent 4px) 0 50% / 16px 14px repeat-x;
}
.elozetes-szoveg p:first-child { margin-top: 0; font-size: 1.15rem; color: #3d2c28; }

.blokkcim {
  margin: 0 0 1rem;
  font-family: var(--betu-cim);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--tinta);
}

/* ── jegysor: a cikkek listája ──────────────────────────────────────── */

.jegysor {
  margin: 0 0 2.75rem;
  border: 2px solid var(--tinta);
  border-radius: var(--lekerekites);
  background: #fffdf8;
  overflow: hidden;
}
.jegy {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  min-height: 9.5rem;
}
.jegy + .jegy { border-top: 2px dashed #cdb48f; }
.jegy:hover { background: var(--mustar-halvany); }
.jegy dt {
  margin: 0;
  padding: 1.1rem 1.25rem;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 1.15rem;
  align-items: start;
}
.jegy-link { display: contents; color: var(--tinta); text-decoration: none; }
.jegy-link .film-list-photo { grid-row: 1 / span 2; margin: 0; }
.jegy-link .film-list-photo img { border-radius: 8px; }
.jegy-cim {
  grid-column: 2;
  font-family: var(--betu-cim);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.2;
}
.jegy-link:hover .jegy-cim { color: var(--barsony); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.jegy-datum {
  grid-column: 2;
  align-self: end;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--barna);
}
.jegy-leiras {
  margin: 0;
  padding: 1.1rem 1.25rem;
  border-left: 2px dashed #cdb48f;
  font-size: 0.93rem;
  line-height: 1.55;
  color: #4a3833;
  display: flex;
  align-items: center;
}
.jegy-leiras::before,
.jegy-leiras::after {
  content: "";
  position: absolute;
  left: calc(63.6% - 9px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--vaszon);
  border: 2px solid var(--tinta);
}
.jegy-leiras::before { top: -11px; }
.jegy-leiras::after { bottom: -11px; }
.jegy:first-child .jegy-leiras::before,
.jegy:last-child .jegy-leiras::after { display: none; }

/* ── nagyvászon: a két hosszabb olvasmány ───────────────────────────── */

.nagyvaszon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 0 0 3rem;
}
.nagyvaszon-tabla {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.5rem 1.5rem 1.6rem;
  border-radius: var(--lekerekites);
  background: var(--tinta);
  color: #f7ecdc;
  text-decoration: none;
}
.nagyvaszon-arany { background: var(--barsony); }
.nagyvaszon-tabla:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 0 var(--mustar); }
.nagyvaszon-felirat {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mustar);
}
.nagyvaszon-cim { font-family: var(--betu-cim); font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
.nagyvaszon-leiras { font-size: 0.94rem; line-height: 1.55; opacity: 0.92; }

.utoszo { max-width: 46rem; padding-top: 1.5rem; border-top: 1px solid var(--vonal); }

/* ── lapfej, cikk ───────────────────────────────────────────────────── */

.lapfej { max-width: 46rem; margin-bottom: 1.6rem; }
.lapfej-cim {
  margin: 0;
  font-family: var(--betu-cim);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
}
.lapfej-leiras { margin: 0.8rem 0 0; font-size: 1.12rem; color: #4a3833; }
.lapfej-adat {
  margin: 0.9rem 0 0;
  display: inline-block;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: var(--mustar-halvany);
  font-size: 0.86rem;
  font-weight: 600;
  color: #5a4337;
}

.tekercs-test { max-width: 46rem; }
.tekercs .film-borito { border-radius: var(--lekerekites); }

.tartalom {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem 0.6rem;
  border: 2px dashed #cdb48f;
  border-radius: var(--lekerekites);
  background: #fffdf8;
}
.tartalom-fej {
  margin: 0 0 0.3rem;
  font-family: var(--betu-cim);
  font-weight: 700;
  color: var(--barsony);
}
.tartalom ul { margin: 0; padding-left: 1.15rem; columns: 2 14rem; column-gap: 2rem; }
.tartalom li { margin: 0 0 0.4rem; break-inside: avoid; }
.tartalom ul ul { display: none; }
.tartalom a { color: var(--tinta); text-decoration: none; }
.tartalom a:hover { color: var(--barsony); text-decoration: underline; }

/* ── próza: cikktörzs ÉS a főoldali bevezető ────────────────────────── */

.prozas { font-size: 1.075rem; line-height: 1.72; }
.prozas > :first-child { margin-top: 0; }
.prozas p { margin: 0 0 1.1em; }
.prozas h2 {
  margin: 2.1em 0 0.6em;
  font-family: var(--betu-cim);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--tinta);
  scroll-margin-top: 1rem;
}
.prozas h2::before {
  content: "";
  display: block;
  width: 46px;
  height: 6px;
  margin-bottom: 0.55rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--barsony) 0 60%, var(--mustar) 60%);
}
.prozas h3 {
  margin: 1.7em 0 0.45em;
  font-family: var(--betu-cim);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--barsony-mely);
}
.prozas ul,
.prozas ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.prozas li { margin: 0 0 0.45em; padding-left: 0.2em; }
.prozas ul li::marker { color: var(--barsony); }
.prozas ol li::marker { color: var(--barsony); font-family: var(--betu-cim); font-weight: 700; }
.prozas em { font-style: italic; }
.prozas strong { font-weight: 600; }
.prozas blockquote {
  margin: 1.5em 0;
  padding: 0.9rem 1.2rem;
  border-left: 5px solid var(--mustar);
  background: var(--mustar-halvany);
  border-radius: 0 10px 10px 0;
}
.prozas blockquote p:last-child { margin-bottom: 0; }
.prozas hr { border: 0; height: 14px; margin: 2rem 0; background: radial-gradient(circle, var(--vonal) 0 3.5px, transparent 4px) 0 50% / 16px 14px repeat-x; }
.prozas table { width: 100%; margin: 0 0 1.4em; border-collapse: collapse; font-size: 0.95rem; display: block; overflow-x: auto; }
.prozas th,
.prozas td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--vonal); text-align: left; vertical-align: top; }
.prozas th { font-family: var(--betu-cim); font-weight: 700; border-bottom: 2px solid var(--tinta); }
.prozas pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; background: var(--kukorica); padding: 0.8rem 1rem; border-radius: 8px; }
.prozas code { font-size: 0.92em; }

/* ── következik ─────────────────────────────────────────────────────── */

.kovetkezo { max-width: 46rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 2px dashed #cdb48f; }
.kovetkezo-sor { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem; }
.kovetkezo-sor a {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
  background: #fffdf8;
}
.kovetkezo-sor a:hover { background: var(--tinta); color: var(--vaszon); }

/* ── stáblista ──────────────────────────────────────────────────────── */

.stablista {
  margin-top: 2rem;
  padding: 2.5rem clamp(1rem, 4vw, 3.5rem) 2rem;
  background: var(--tinta);
  color: #e9dccb;
  text-align: center;
}
.stablista-nev { margin: 0 0 1.2rem; font-family: var(--betu-cim); font-weight: 700; font-size: 1.6rem; color: #fff8ec; }
.stablista-sorok { max-width: 34rem; margin: 0 auto; }
.stablista-sorok div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  padding: 0.18rem 0;
}
.stablista-sorok dt { margin: 0; text-align: right; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: #b9a58f; }
.stablista-sorok dd { margin: 0; text-align: left; }
.stablista-sorok a { color: #fff8ec; text-decoration: none; font-weight: 600; }
.stablista-sorok a:hover { color: var(--mustar); text-decoration: underline; }
.stablista-zaro { margin: 1.6rem 0 0; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #9c8774; }

/* ── keskeny képernyő ───────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .jegy { grid-template-columns: minmax(0, 1fr); }
  .jegy-leiras { border-left: 0; padding-top: 0; }
  .jegy-leiras::before,
  .jegy-leiras::after { display: none; }
  .jegy dt { padding-bottom: 0.7rem; }
}

@media (max-width: 860px) {
  .mozi { grid-template-columns: minmax(0, 1fr); }
  .musorfal {
    position: static;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--vonal);
    padding: 1rem 1rem 0.9rem;
    gap: 0.85rem;
  }
  .cimer { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.85rem 1rem 0.8rem; }
  .cimer-nev { font-size: 1.75rem; padding-top: 0.2rem; }
  .cimer-alcim { margin: 0; padding: 0; }
  .fomenu ul { display: flex; flex-wrap: wrap; gap: 0.3rem; }
  .fomenu a { padding: 0.32rem 0.75rem; background: #fffdf8; border: 1px solid var(--vonal); font-size: 0.93rem; }
  .musorrend-fej { display: none; }
  .musorrend ol { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
  .musorrend li + li { margin-top: 0; }
  .musorrend a { font-size: 0.88rem; padding: 0.1rem 0; }
  .mr-pont,
  .mr-tekercs { display: none; }
  .jegycsonk { display: none; }
  .vetitoter { padding-top: 1.6rem; }
  .nagyvaszon { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .jegy dt { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .jegy-link .film-list-photo { grid-row: auto; max-width: none; margin-bottom: 0.75rem; }
  .jegy-cim,
  .jegy-datum { grid-column: 1; }
  .jegy-leiras { padding: 0 1rem 1rem; }
  .jegy { min-height: 0; }
  .prozas { font-size: 1.02rem; }
  .prozas h2 { font-size: 1.4rem; }
  .stablista-sorok div { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0.35rem 0; }
  .stablista-sorok dt,
  .stablista-sorok dd { text-align: center; }
}

/* featured images: generated by deploy/featured_images.py — keep last */

.film-borito {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  margin: 1.75rem 0 2.25rem;
  border-radius: 2px;
}

.film-list-photo {
  display: block;
  max-width: 300px;
  margin: 0 0 1rem;
}

.film-list-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 2px;
  aspect-ratio: 2/1;
}