/* Divadlo Na Rampě — demo webpj.cz (fiktivní činoherní scéna) */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --papir:#f7f2e9;--papir2:#efe7d8;
  --vino:#7a1f2b;--vino2:#933140;
  --ink:#23201c;--seda:#6e675c;
  --linka:#ddd2bd;
}
html{scroll-behavior:smooth}
body{font-family:"Source Serif 4",Georgia,serif;background:var(--papir);color:var(--ink);line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--vino)}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:700;line-height:1.12;color:var(--ink)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:.5em}
.wrap{max-width:960px;margin:0 auto;padding:0 22px}
.kapitalky{font-family:"Inter",Arial,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--vino)}

/* ---------- ribbon webpj ---------- */
.demo{
  background:var(--vino);color:#f7f2e9;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;
  padding:8px 14px;font-size:14px;line-height:1.35;text-align:center;max-height:60px;overflow:hidden;
  font-family:"Inter",Arial,sans-serif;
}
.demo a{
  background:#f7f2e9;color:var(--vino);font-weight:700;text-decoration:none;
  padding:4px 14px;border-radius:999px;font-size:13.5px;white-space:nowrap;
}
.demo a:hover{background:#fff}

/* ---------- hlavička editoriál ---------- */
.hlava{border-top:3px double var(--ink);border-bottom:1px solid var(--linka);margin-top:6px}
.hlava-in{max-width:960px;margin:0 auto;padding:18px 22px;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.wordmark{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:700;font-size:1.5rem;color:var(--ink);text-decoration:none}
.hlava nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.hlava nav a{font-family:"Inter",Arial,sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.hlava nav a:hover,.hlava nav a.akt{color:var(--vino);border-bottom-color:var(--vino)}

/* ---------- textový hero ---------- */
.hero-text{padding:84px 0 64px;border-bottom:1px solid var(--linka)}
.hero-text h1{font-size:clamp(2.6rem,7vw,4.8rem);font-weight:800;max-width:820px}
.hero-text .citat{margin-top:34px;max-width:560px;font-style:italic;font-size:1.2rem;color:var(--seda)}
.hero-text .citat span{display:block;font-style:normal;font-family:"Inter",Arial,sans-serif;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;margin-top:10px;color:var(--ink)}

.btn{display:inline-block;font-family:"Inter",Arial,sans-serif;background:var(--vino);color:#f7f2e9;font-weight:700;text-decoration:none;padding:13px 28px;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;border:0;cursor:pointer}
.btn:hover{background:var(--vino2)}
.btn-linka{display:inline-block;font-family:"Inter",Arial,sans-serif;color:var(--vino);font-weight:700;text-decoration:none;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--vino);padding-bottom:3px}
.btn-linka:hover{color:var(--vino2)}

.sekce{padding:70px 0}
.sekce.oddelena{border-top:1px solid var(--linka)}

/* obrazová vložka */
.obraz{margin:0;border:1px solid var(--linka);background:var(--papir2)}
.obraz .pomer{aspect-ratio:3/2;overflow:hidden;background:linear-gradient(150deg,#e7dcc4,#d9cbae)}
.obraz img{width:100%;height:100%;object-fit:cover}
.obraz figcaption{font-family:"Inter",Arial,sans-serif;font-size:.78rem;color:var(--seda);padding:10px 14px;border-top:1px solid var(--linka)}

/* ---------- repertoár — textový seznam ---------- */
.hra{padding:44px 0;border-bottom:1px solid var(--linka)}
.hra:last-child{border-bottom:0}
.hra .autor{font-family:"Inter",Arial,sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--seda);margin-bottom:8px;display:block}
.hra h3{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:12px}
.hra h3 a{color:var(--ink);text-decoration:none}
.hra h3 a:hover{color:var(--vino)}
.hra .anotace{max-width:640px;color:#3f3a32}
.hra .recenzni{margin-top:16px;padding-left:20px;border-left:3px solid var(--vino);font-style:italic;color:var(--seda);max-width:560px}
.hra .recenzni span{display:block;font-style:normal;font-family:"Inter",Arial,sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-top:6px}
.hra .terminy-mini{margin-top:18px;font-family:"Inter",Arial,sans-serif;font-size:.85rem;color:var(--seda)}
.hra .terminy-mini a{margin-right:6px}

/* ---------- program — tabulka ---------- */
.tab-obal{overflow-x:auto;border:1px solid var(--linka);background:#fbf8f1}
table.program{width:100%;border-collapse:collapse;min-width:560px;font-family:"Inter",Arial,sans-serif;font-size:.9rem}
table.program caption{text-align:left;font-family:"Playfair Display",Georgia,serif;font-size:1.35rem;font-weight:700;padding:16px 18px 10px}
table.program th{text-align:left;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--seda);padding:10px 18px;border-bottom:2px solid var(--ink)}
table.program td{padding:13px 18px;border-bottom:1px solid var(--linka);vertical-align:middle}
table.program td .nazev{font-family:"Source Serif 4",Georgia,serif;font-size:1.05rem;font-weight:600}
table.program td a.nazev-odkaz{color:var(--ink);text-decoration:none}
table.program td a.nazev-odkaz:hover{color:var(--vino)}
.tab-stav{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tab-stav.vyprodano{color:#9a8f7d}
.tab-stav.posledni{color:#b25e08}

/* ---------- soubor ---------- */
.soubor-grid{columns:3;column-gap:40px;margin-top:24px;font-size:1.05rem}
.soubor-grid p{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--linka)}
.soubor-grid p small{display:block;font-family:"Inter",Arial,sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--seda)}
.foto-ctverec{max-width:340px;aspect-ratio:1/1;border:1px solid var(--linka);background:linear-gradient(150deg,#e7dcc4,#d9cbae);overflow:hidden}
.foto-ctverec img{width:100%;height:100%;object-fit:cover}

/* ---------- detail hry ---------- */
.detail-fakta{list-style:none;margin:22px 0;border-top:2px solid var(--ink);max-width:520px;font-family:"Inter",Arial,sans-serif;font-size:.9rem}
.detail-fakta li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--linka)}
.detail-fakta li b{color:var(--seda);font-weight:500}

/* ---------- plánek sedadel ---------- */
.vstup-grid{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;margin-top:28px}
.plan-obal{overflow-x:auto;background:#fbf8f1;border:1px solid var(--linka);padding:26px 14px}
.jeviste{margin:0 auto 24px;max-width:400px;text-align:center;font-family:"Inter",Arial,sans-serif;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--seda);border-bottom:3px double var(--ink);padding-bottom:8px}
.sekce-nazev{text-align:center;font-family:"Inter",Arial,sans-serif;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--vino);margin:20px 0 12px}
.rada{display:flex;gap:4px;justify-content:center;align-items:center;margin-bottom:5px;width:max-content;margin-left:auto;margin-right:auto}
.rada-cislo{width:26px;flex:0 0 26px;text-align:center;font-family:"Inter",Arial,sans-serif;font-size:.68rem;color:var(--seda)}
.sedadlo{width:22px;height:20px;flex:0 0 22px;border-radius:3px 3px 1px 1px;border:1.5px solid;background:transparent;cursor:pointer;padding:0}
.sedadlo.obsazene{background:#d8cfbc;border-color:#d8cfbc;cursor:default}
.sedadlo.vybrane{box-shadow:0 0 0 2px var(--ink)}
.legenda{display:flex;flex-wrap:wrap;gap:10px 20px;margin:18px 0 4px;font-family:"Inter",Arial,sans-serif;font-size:.82rem;color:var(--seda)}
.legenda i{display:inline-block;width:14px;height:13px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.souhrn{background:#fbf8f1;border:1px solid var(--linka);padding:24px;position:sticky;top:16px}
.souhrn h3{font-size:1.3rem;margin-bottom:12px}
.souhrn ul{list-style:none;margin-bottom:12px;font-family:"Inter",Arial,sans-serif}
.souhrn li{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;padding:8px 0;border-bottom:1px solid var(--linka)}
.souhrn .celkem{display:flex;justify-content:space-between;font-family:"Inter",Arial,sans-serif;font-weight:700;font-size:1.05rem;margin:14px 0 16px}
.souhrn .btn{width:100%;text-align:center}
.souhrn .btn[disabled]{opacity:.4;cursor:not-allowed}
.pozn{font-family:"Inter",Arial,sans-serif;font-size:.78rem;color:var(--seda);margin-top:12px}

/* ---------- modal ---------- */
.modal-pozadi{position:fixed;inset:0;background:rgba(35,32,28,.7);display:none;align-items:center;justify-content:center;z-index:9000;padding:20px}
.modal-pozadi.otevreny{display:flex}
.modal-okno{background:var(--papir);border:2px solid var(--ink);max-width:480px;padding:38px 34px;text-align:center}
.modal-okno h3{font-size:1.5rem;margin-bottom:12px}
.modal-okno p{color:var(--seda);margin-bottom:24px}

/* ---------- čtečka ---------- */
.ctecka-telo{background:#1c1a17;min-height:78vh;display:flex;align-items:flex-start;justify-content:center;padding:44px 16px}
.ctecka{width:100%;max-width:420px;background:#2a2723;border-radius:14px;padding:28px 24px;color:#f1ece1;font-family:"Inter",Arial,sans-serif}
.ctecka h1{font-family:"Inter",Arial,sans-serif;font-size:1.4rem;font-weight:700;color:#fff}
.ctecka .off{font-size:.8rem;color:#a89f8f;margin:10px 0 22px;line-height:1.5;border-left:3px solid var(--vino2);padding-left:12px}
.ctecka label{font-size:.8rem;color:#a89f8f;display:block;margin-bottom:6px}
.ctecka input{width:100%;background:#1c1a17;border:1px solid #4a453d;color:#fff;font-size:1.25rem;letter-spacing:.12em;padding:14px;border-radius:8px;text-transform:uppercase;font-family:"Inter",monospace}
.ctecka input:focus{outline:none;border-color:var(--vino2)}
.ctecka .btn{width:100%;margin-top:12px;text-align:center;border-radius:8px}
.ukazkove{margin-top:20px}
.ukazkove p{font-size:.78rem;color:#a89f8f;margin-bottom:8px}
.ukazkove button{display:block;width:100%;background:#37332d;border:1px solid #4a453d;color:#f1ece1;padding:10px;margin-bottom:7px;border-radius:8px;cursor:pointer;font-size:.9rem;letter-spacing:.08em}
.ukazkove button:hover{border-color:var(--vino2)}
.vysledek{margin-top:20px;border-radius:10px;padding:22px;display:none}
.vysledek.ok{display:block;background:#122b18;border:1px solid #2e9e54}
.vysledek.chyba{display:block;background:#331318;border:1px solid #c0405a}
.vysledek .velky{font-size:1.3rem;font-weight:800;margin-bottom:10px}
.vysledek.ok .velky{color:#5fe08e}
.vysledek.chyba .velky{color:#ff8ba0}
.vysledek dl{font-size:.9rem}
.vysledek dt{color:#a0a894;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;margin-top:9px}
.vysledek dd{color:#fff;margin:0}

/* ---------- kontakt ---------- */
.kontakt-sloupce{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;margin-top:20px}
.kontakt-sloupce h3{font-size:1.3rem;margin:26px 0 8px}
.kontakt-sloupce p{color:#3f3a32}
.mapa{margin-top:44px;border:1px solid var(--linka)}
.mapa iframe{width:100%;height:380px;border:0;display:block;filter:sepia(.25)}

/* ---------- patička ---------- */
.pata{border-top:3px double var(--ink);margin-top:30px;padding:44px 22px 90px;text-align:center}
.pata .wordmark{font-size:1.3rem}
.pata p{font-family:"Inter",Arial,sans-serif;font-size:.85rem;color:var(--seda);margin-top:10px}
.pata-menu{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:18px 0 0}
.pata-menu a{font-family:"Inter",Arial,sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.pata-menu a:hover{color:var(--vino)}
.pata-male{font-size:.75rem !important;color:#a89f8f !important;margin-top:18px !important}

/* ---------- responzivita ---------- */
@media(max-width:900px){
  .vstup-grid{grid-template-columns:1fr}
  .souhrn{position:static}
  .soubor-grid{columns:2}
  .kontakt-sloupce{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero-text{padding:56px 0 44px}
  .soubor-grid{columns:1}
  .hlava nav{gap:14px}
}