/* Retro Club Pecs - single page, no framework, no build.
   Palette and type follow the club's own poster style (pink/purple/orange). */

@font-face {
  font-family: Anton;
  src: url("fonts/Anton-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: Righteous;
  src: url("fonts/Righteous-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ejszaka: #0b0624;
  --ejszaka-2: #160c33;
  --lila: #3a0d5e;
  --lila-vilagos: #7a1da6;
  --pink: #ff3fcf;
  --pink-halvany: #ffd0f2;
  --narancs: #ff9a3c;
  --cian: #7ff6ff;
  --sarga: #ffe45c;
  --feher: #fdfbf6;
  --szoveg-halk: #c9bcdf;
  --keret: rgba(255, 63, 207, .28);
  --sugar: 14px;

  /* Type scale: bigger jumps between levels, so the eye can rank them.
     Before, h2 / h3 / body sat at 28-46 / 24-26 / 17-18 px, three neighbouring
     sizes rather than a hierarchy. */
  --cim-1: clamp(36px, 9vw, 76px);
  --cim-2: clamp(30px, 5.5vw, 52px);
  --cim-3: clamp(19px, 2.4vw, 22px);
  --szoveg: 17px;
  --apro-meret: 14px;

  /* Spacing: three values instead of the ad hoc 22 / 24 / 26 / 28 px mix. */
  --koz-s: 14px;
  --koz-m: 28px;
  --koz-l: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ejszaka);
  color: var(--feher);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

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

a { color: var(--pink-halvany); }

h1, h2, h3 { font-family: Anton, Impact, system-ui, sans-serif; font-weight: 400; letter-spacing: .5px; line-height: 1.05; }

/* ---------- draft banner (remove before publishing) ---------- */
.vazlat {
  background: repeating-linear-gradient(45deg, #ffe45c, #ffe45c 14px, #f5c400 14px, #f5c400 28px);
  color: #201400;
  font-size: 14px;
  padding: 8px 16px;
  text-align: center;
}

/* ---------- header ---------- */
.fejlec {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(11, 6, 36, .86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--keret);
}
.logo img { width: 190px; height: auto; }
.fejlec nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fejlec nav a {
  font-family: Righteous, system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: .6px;
  color: var(--feher);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.fejlec nav a:hover, .fejlec nav a:focus-visible { border-bottom-color: var(--pink); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; }
.hero img { width: 100%; height: 64vh; min-height: 380px; max-height: 620px; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 6, 36, .35) 0%, rgba(11, 6, 36, .75) 55%, var(--ejszaka) 100%);
  z-index: 1;
}
.hero-szoveg {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 0 16px 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.kis-cim {
  font-family: Righteous, system-ui, sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--cian);
  margin: 0 0 6px;
}
.hero h1 { font-size: var(--cim-1); margin: 0 0 10px; text-shadow: 0 3px 18px rgba(0, 0, 0, .6); }
.kiemelt {
  background: linear-gradient(180deg, var(--cian) 0%, #fff 38%, var(--pink) 60%, var(--narancs) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.alcim { margin: 0 0 18px; max-width: 46ch; color: #efe6ff; }
.gombok { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.jelveny {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  font-family: Anton, sans-serif;
  font-size: 20px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  box-shadow: 0 4px 18px rgba(255, 63, 207, .5);
}

/* ---------- buttons ---------- */
.gomb {
  display: inline-block;
  font-family: Righteous, system-ui, sans-serif;
  font-size: 16px;
  letter-spacing: .5px;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 999px;
  transition: transform .12s ease;
}
.gomb:hover { transform: translateY(-2px); }
.elsodleges {
  background: linear-gradient(90deg, var(--pink) 0%, var(--narancs) 100%);
  color: #22062c;
  box-shadow: 0 6px 22px rgba(255, 63, 207, .38);
}
.masodlagos { background: transparent; color: var(--feher); border: 1.5px solid var(--pink); }
/* Third level is a link that keeps the button's hit area but drops the chrome,
   so a page full of pills does not read as a page full of equal choices. */
.harmadlagos {
  background: none;
  color: var(--pink-halvany);
  border: 0;
  padding: 13px 6px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.harmadlagos:hover { transform: none; color: #fff; }

/* ---------- sections ---------- */
.szakasz { max-width: 1100px; margin: 0 auto; padding: var(--koz-l) 16px; }
.szakasz h2 { font-size: var(--cim-2); margin: 0 0 var(--koz-s); }
.szakasz h2::after {
  content: "";
  display: block;
  width: 84px;
  height: 5px;
  margin-top: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pink), var(--narancs));
}
.bevezeto { max-width: 62ch; color: var(--szoveg-halk); font-size: 18px; }

.berbeadas { background: linear-gradient(180deg, var(--ejszaka) 0%, var(--ejszaka-2) 100%); max-width: none; }
.berbeadas > * { max-width: 1100px; margin-left: auto; margin-right: auto; }

.kartyak { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 28px auto; }
.kartya {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--keret);
  border-radius: var(--sugar);
  padding: 20px;
}
.kartya h3 { font-size: 24px; margin: 0 0 8px; color: var(--sarga); }
.kartya p { margin: 0; color: var(--szoveg-halk); }

.berbeadas-also { display: grid; gap: var(--koz-m); grid-template-columns: 1fr; align-items: start; }
.berbeadas-also img { border-radius: var(--sugar); width: 100%; }
.berbeadas-also h3 { font-size: 26px; margin: 0 0 12px; }

.pipas { list-style: none; padding: 0; margin: 0 0 28px; }
.pipas li { padding-left: 30px; position: relative; margin-bottom: 10px; }
.pipas li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
}

.ajanlat {
  background: rgba(122, 29, 166, .28);
  border: 1px solid var(--keret);
  border-radius: var(--sugar);
  padding: 22px;
}
.ajanlat p { color: var(--szoveg-halk); }
.elerhetoseg { display: flex; flex-wrap: wrap; gap: 12px; }
.apro { font-size: 13px; color: #9f92b8; margin-bottom: 0; }

/* ---------- saturday ---------- */
.datum {
  font-family: Anton, sans-serif;
  font-size: clamp(22px, 5vw, 32px);
  color: var(--sarga);
  margin: 18px 0 24px;
}
.tenyek { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tenyek li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  padding: 14px 16px;
  border: 1px solid var(--keret);
  border-radius: var(--sugar);
  background: rgba(255, 255, 255, .04);
}
.tenyek strong {
  font-family: Righteous, system-ui, sans-serif;
  color: var(--cian);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  align-self: center;
}
.tenyek span { color: var(--szoveg-halk); }
.kozossegi { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; }

/* ---------- location ---------- */
.hol { background: linear-gradient(180deg, var(--ejszaka-2) 0%, var(--ejszaka) 100%); max-width: none; }
.hol > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.hol-racs { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: center; }
.cim { font-size: 20px; line-height: 1.5; }
.cim strong { font-family: Anton, sans-serif; font-size: 30px; color: var(--pink-halvany); }
.figyelmeztetes {
  border-left: 4px solid var(--sarga);
  padding: 10px 14px;
  background: rgba(255, 228, 92, .1);
  border-radius: 0 var(--sugar) var(--sugar) 0;
  color: #f4ead3;
  font-size: 15px;
}
.terkep {
  position: relative;
  display: block;
  width: 100%;
  min-height: 240px;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: var(--sugar);
  border: 1px solid var(--keret);
  text-decoration: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 44px),
    linear-gradient(135deg, var(--lila) 0%, var(--ejszaka) 100%);
}
.terkep-tu {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--pink);
  box-shadow: 0 0 0 8px rgba(255, 63, 207, .22), 0 6px 18px rgba(0, 0, 0, .5);
}
.terkep-felirat {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  text-align: center;
  font-family: Righteous, system-ui, sans-serif;
  color: var(--feher);
}
.terkep-apro {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--pink-halvany);
}
.terkep iframe { display: block; width: 100%; height: 320px; border: 0; border-radius: var(--sugar); }

/* ---------- gallery ---------- */
.galeria-racs { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 24px; }
/* A kepek pontosan ilyen aranyban keszulnek (eszkozok/kepek.sh, 2160x1000), ezert a
   bongeszo NEM vag bele ujra: amit ott arc nelkulinek merten kivagtunk, az megy ki. */
.galeria-racs img { border-radius: 10px; width: 100%; aspect-ratio: 2.16; object-fit: cover; }

/* ---------- footer ---------- */
.lablec {
  border-top: 1px solid var(--keret);
  padding: 30px 16px 40px;
  text-align: center;
  color: var(--szoveg-halk);
}
.lablec .kozossegi { justify-content: center; }

/* ---------- wider screens ---------- */
@media (min-width: 720px) {
  .kartyak { grid-template-columns: repeat(3, 1fr); }
  .tenyek { grid-template-columns: repeat(2, 1fr); }
  /* 4 kep, ket oszlop: egyenletes racs, extra szabaly nelkul */
  .galeria-racs { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .hero-szoveg { padding-bottom: 54px; }
  .berbeadas-also { grid-template-columns: minmax(280px, 0.8fr) 1.2fr; gap: 34px; }
  .hol-racs { grid-template-columns: 1fr 1fr; }
  .logo img { width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gomb:hover { transform: none; }
}

/* ---------- resident DJ page ---------- */
/* Empty photo slot: the picture only arrives if the research finds one the DJ
   published himself. A placeholder box keeps the layout honest in the meantime,
   and it is aria-hidden so a screen reader is not told about a missing image. */
.dj-kep {
  display: grid;
  place-items: center;
  /* Capped: an empty slot must not become the biggest thing on the page. */
  max-width: 320px;
  aspect-ratio: 4 / 5;
  border-radius: var(--sugar);
  border: 1px dashed var(--keret);
  background: linear-gradient(135deg, var(--lila) 0%, var(--ejszaka) 100%);
  color: var(--szoveg-halk);
  font-family: Righteous, system-ui, sans-serif;
  font-size: 15px;
}

/* Booking line under the Saturday facts: a table and the small room are booked
   on the same numbers as everything else, so the contacts are repeated here
   rather than making the visitor scroll back up to the rental block. */
.foglalas { margin-top: 18px; color: var(--szoveg-halk); }
.foglalas a { white-space: nowrap; }

/* ---------- TikTok block in the Saturday section ---------- */
.tiktok-cim { font-size: clamp(22px, 4vw, 30px); margin: 40px 0 8px; }
.tiktok-racs { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 22px 0 10px; }
.tiktok-kartya {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 9 / 16;
  max-height: 440px;
  border-radius: var(--sugar);
  border: 1px solid var(--keret);
  text-decoration: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 63, 207, .35) 0%, transparent 60%),
    linear-gradient(160deg, var(--lila) 0%, var(--ejszaka) 100%);
}
/* The play mark is drawn, not an image: one less request, and it scales. */
.tiktok-jel {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 6px 24px rgba(255, 63, 207, .5);
  position: relative;
}
.tiktok-jel::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 19px;
  border-style: solid;
  border-width: 13px 0 13px 20px;
  border-color: transparent transparent transparent #fff;
}
.tiktok-felirat {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: center;
  font-family: Righteous, system-ui, sans-serif;
  font-size: 15px;
  color: var(--feher);
}
/* Once the embed replaces the card, TikTok brings its own chrome. */
.tiktok-racs blockquote { margin: 0; }
.tiktok-gomb { margin-top: 6px; }

@media (min-width: 720px) {
  /* Two videos, two columns. With the three column rule a pair sat left and
     left a card sized hole beside them. */
  .tiktok-racs { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
}

/* ---------- rental: brand panel instead of a weak photo ---------- */
.marka-panel {
  position: relative;
  border-radius: var(--sugar);
  border: 1px solid var(--keret);
  padding: 34px 26px 26px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 63, 207, .28) 0%, transparent 62%),
    linear-gradient(160deg, var(--lila) 0%, var(--ejszaka) 100%);
}
.marka-szam {
  font-family: Anton, sans-serif;
  font-size: clamp(72px, 16vw, 128px);
  line-height: .9;
  margin: 0;
  background: linear-gradient(180deg, var(--cian) 0%, #fff 40%, var(--pink) 62%, var(--narancs) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marka-nap {
  font-family: Anton, sans-serif;
  font-size: clamp(34px, 7vw, 54px);
  letter-spacing: 4px;
  margin: 0;
  color: var(--sarga);
}
.marka-alatt {
  margin: 8px 0 0;
  font-family: Righteous, system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: .5px;
  color: var(--szoveg-halk);
}
.marka-panel hr {
  border: 0;
  height: 1px;
  margin: 26px auto;
  width: 70%;
  background: linear-gradient(90deg, transparent, var(--keret), transparent);
}
/* The script wordmark signs the panel, the same way it signs the header. */
.marka-alairas {
  margin: 26px 0 0;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 208, 242, .55);
}

/* ---------- rental: three boxes that do NOT look alike ---------- */
.berles-dobozok { display: grid; gap: var(--koz-s); }
.doboz {
  border-radius: var(--sugar);
  padding: 20px 22px;
  border: 1px solid var(--keret);
  background: rgba(255, 255, 255, .04);
}
.doboz h3 { font-size: var(--cim-3); margin: 0 0 12px; }
.doboz ul { margin-bottom: 0; }
/* What is included: the loudest of the three, because it answers the first
   question a renter has. */
.doboz-fo {
  border-color: rgba(255, 63, 207, .55);
  background: linear-gradient(150deg, rgba(255, 63, 207, .14) 0%, rgba(255, 255, 255, .04) 70%);
}
.doboz-fo h3 { color: var(--pink-halvany); }
.doboz-opcio h3 { color: var(--sarga); }
.doboz-opcio .pipas li::before { background: var(--sarga); box-shadow: 0 0 10px var(--sarga); }
.doboz-sajat h3 { color: var(--cian); }
.doboz-sajat .pipas li::before { background: var(--cian); box-shadow: 0 0 10px var(--cian); }

/* The fourth list was demoted to one quiet strip: it is a caveat, not an offer. */
.megjegyzes-sav {
  grid-column: 1 / -1;
  margin: var(--koz-s) 0 0;
  padding: 14px 18px;
  border-left: 4px solid var(--narancs);
  border-radius: 0 var(--sugar) var(--sugar) 0;
  background: rgba(255, 154, 60, .1);
  color: #f6e7d6;
  font-size: 15px;
}

.kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }

/* ---------- section rhythm ---------- */
/* Every section used to start and end the same way on the same near-identical
   background, so the page read as one long ribbon. A thin rule above each title
   and an alternating tint give it joints. */
.szakasz h2 { position: relative; padding-top: 22px; }
.szakasz h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--keret), transparent 65%);
}
.szombat { background: rgba(255, 255, 255, .02); max-width: none; }
.szombat > * { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* ---------- sticky call bar, phones only ---------- */
/* The numbers sit mid page and in the footer; someone convinced at the hero had
   to scroll to act. This keeps one action reachable the whole way down. */
.hivo-sav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 6, 36, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--keret);
}
.hivo-sav .gomb { flex: 1; text-align: center; padding: 14px 10px; }
@media (max-width: 719px) {
  .hivo-sav { display: flex; }
  /* Room for the bar, so it never covers the last line of the footer. */
  body { padding-bottom: 76px; }
}

/* ---------- footer ---------- */
.lablec {
  border-top: 1px solid var(--keret);
  padding: 44px 16px 40px;
  color: var(--szoveg-halk);
  text-align: left;
}
.lablec-racs {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: var(--koz-m);
  grid-template-columns: 1fr;
}
.lablec h3 {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cian);
  font-family: Righteous, system-ui, sans-serif;
  margin: 0 0 10px;
}
.lablec-cim {
  font-family: Anton, sans-serif;
  font-size: 26px;
  line-height: 1.25;
  color: var(--feher);
  margin: 0;
}
.lablec ul { list-style: none; padding: 0; margin: 0; }
.lablec li { margin-bottom: 8px; }
.lablec .apro { margin-top: var(--koz-m); text-align: center; }
@media (min-width: 720px) {
  .lablec-racs { grid-template-columns: 1.2fr 1fr 1fr; }
}

/* ---------- price list ---------- */
.arlap { background: rgba(255, 255, 255, .02); max-width: none; }
.arlap > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
/* Newspaper flow rather than a grid: the categories have wildly different
   lengths (21 spirits against 2 coffees), and a row grid left a hole the size of
   a card in the bottom corner. Columns pack them. */
.arlap-racs { columns: 1; column-gap: var(--koz-s); margin: var(--koz-m) auto; }
.arlap-kartya {
  border: 1px solid var(--keret);
  border-radius: var(--sugar);
  padding: 20px 22px;
  margin: 0 0 var(--koz-s);
  background: rgba(255, 255, 255, .04);
  break-inside: avoid;
}
.arlap-kartya h3 {
  font-size: 15px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--sarga);
  font-family: Righteous, system-ui, sans-serif;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--keret);
}
.arlap-lista { list-style: none; padding: 0; margin: 0; }
/* Name left, price right, on one baseline: the price is what the guest scans
   for, so it gets its own column rather than trailing the name. */
.arlap-lista li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .07);
}
.arlap-lista li:last-child { border-bottom: 0; }
.arlap-nev { color: var(--feher); }
.arlap-meret { color: var(--szoveg-halk); font-size: 13px; }
.arlap-ar {
  font-family: Righteous, system-ui, sans-serif;
  color: var(--pink-halvany);
  white-space: nowrap;
}
.arlap-leiras {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--szoveg-halk);
}
@media (min-width: 720px) { .arlap-racs { columns: 2; } }
@media (min-width: 1000px) { .arlap-racs { columns: 3; } }

/* ---------- imprint and legal line ---------- */
.impresszum {
  max-width: 1100px;
  margin: var(--koz-m) auto 0;
  padding-top: var(--koz-m);
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: var(--apro-meret);
}
.impresszum h3 { margin-bottom: 12px; }
.impresszum ul { display: grid; gap: 6px; }
.impresszum strong { color: var(--feher); font-weight: 600; }
.jogi {
  max-width: 1100px;
  margin: var(--koz-s) auto 0;
  text-align: center;
  font-size: 13px;
  color: #8f83a8;
}
@media (min-width: 720px) {
  .impresszum ul { grid-template-columns: repeat(2, 1fr); gap: 8px 40px; }
}

/* ---------- house rules ---------- */
.hazirend { background: rgba(255, 255, 255, .02); max-width: none; }
.hazirend > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.hazirend-lista {
  list-style: none;
  counter-reset: hr;
  padding: 0;
  margin: var(--koz-m) auto 0;
  display: grid;
  gap: var(--koz-s);
}
.hazirend-lista > li {
  counter-increment: hr;
  position: relative;
  padding: 22px 24px 22px 70px;
  border: 1px solid var(--keret);
  border-radius: var(--sugar);
  background: rgba(255, 255, 255, .04);
}
/* The number is the anchor of each rule, so it is set in the display face and
   given room, rather than being a small marker the eye slides past. */
.hazirend-lista > li::before {
  content: counter(hr);
  position: absolute;
  left: 22px;
  top: 20px;
  font-family: Anton, sans-serif;
  font-size: 30px;
  line-height: 1;
  color: var(--pink);
}
.hazirend-lista h3 { margin: 0 0 10px; font-size: var(--cim-3); color: var(--feher); }
.hazirend-lista p { margin: 0; color: var(--szoveg-halk); }
.tilto { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.tilto li {
  position: relative;
  padding-left: 30px;
  color: var(--szoveg-halk);
}
/* A crossed circle, drawn: a prohibition list must not look like the bullet list
   of things you get. */
.tilto li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--narancs);
}
.tilto li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 13px;
  height: 2px;
  background: var(--narancs);
  transform: rotate(-45deg);
}
@media (min-width: 900px) {
  .hazirend-lista { grid-template-columns: repeat(2, 1fr); align-items: start; }
}

/* ---------- statute references under each house rule ---------- */
/* Small print, as the owner asked: present for whoever wants to check, quiet
   enough that it does not compete with the rule itself. */
.paragrafus {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, .1);
  font-size: 12px;
  line-height: 1.5;
  color: #9186aa;
}
.jogi-megjegyzes {
  max-width: 1100px;
  margin: var(--koz-m) auto 0;
  font-size: 12px;
  color: #9186aa;
}

/* Told before the click, not after: the embeds load third party content only on
   a deliberate action, and the visitor gets to know that first (Eht. 155. § (4)). */
.suti-megjegyzes { font-size: 13px; color: #9186aa; margin: 6px 0 0; }