/*
Theme Name: Dr. Beer
Theme URI: https://dr-beer.cz
Author: PSWebstyle
Author URI: https://pswebstyle.com
Description: Vlastní téma pro pivnici a restauraci Dr. Beer v litoměřické Katovně. Černá a zlatá, bez závislostí na cizích knihovnách.
Version: 1.0.10
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: drbeer
*/

/* ================================================================== *
 *  PROMĚNNÉ
 *  Zlatou máme ve dvou odstínech: tmavší na plochy a linky, světlejší
 *  na text. Na černém pozadí musí text projít WCAG AA, a #c9a227
 *  je na malý text na hraně – proto --zlata-sv.
 * ================================================================== */

:root {
    --cerna: #0a0a0b;
    --panel: #121214;
    --panel-2: #191a1d;
    --zlata: #c9a227;
    --zlata-sv: #e9c86d;
    --zlata-tmava: #8a6b13;
    --krem: #f4efe4;
    --text: #cfc8ba;
    --text-tlum: #a79f90;
    --linka: rgba(201, 162, 39, .22);
    --linka-sv: rgba(244, 239, 228, .10);

    --pismo-nadpis: 'Cinzel', 'Times New Roman', Georgia, serif;
    --pismo-akcent: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --pismo-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    --obsah: 1220px;
    --radius: 14px;
    --hero-tempo: 3.1s;
}

/* ================================================================== *
 *  ZÁKLAD
 * ================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    margin-top: 0 !important;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--cerna);
    color: var(--text);
    font-family: var(--pismo-text);
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a {
    color: var(--zlata-sv);
    text-decoration: none;
    transition: color .25s ease;
}

a:hover {
    color: var(--krem);
}

/* Odkazy uvnitř textu: ztučnit a obarvit, NEpodtrhávat. */
.text-blok a,
.perex a {
    font-weight: 600;
    color: var(--zlata-sv);
}

h1, h2, h3 {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    color: var(--krem);
    line-height: 1.18;
    letter-spacing: .01em;
    margin: 0 0 .6em;
}

h1 {
    font-size: clamp(2.2rem, 5.4vw, 3.9rem);
    letter-spacing: .04em;
}

h2 {
    font-size: clamp(1.65rem, 3.2vw, 2.5rem);
}

h3 {
    font-size: clamp(1.12rem, 1.7vw, 1.32rem);
    letter-spacing: .03em;
}

p {
    margin: 0 0 1.15em;
}

ul, ol {
    margin: 0 0 1.15em;
    padding-left: 1.15em;
}

:focus-visible {
    outline: 2px solid var(--zlata-sv);
    outline-offset: 3px;
}

.wrap {
    width: min(100% - 2.6rem, var(--obsah));
    margin-inline: auto;
}

.preskocit {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--zlata);
    color: var(--cerna);
    padding: 12px 22px;
    font-weight: 600;
}

.preskocit:focus {
    left: 12px;
    top: 12px;
}

/* ================================================================== *
 *  SPOLEČNÉ PRVKY
 * ================================================================== */

.nadtitulek {
    font-family: var(--pismo-text);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--zlata);
    margin: 0 0 1rem;
}

.perex {
    font-family: var(--pismo-akcent);
    font-style: italic;
    font-size: clamp(1.22rem, 2.2vw, 1.6rem);
    line-height: 1.6;
    color: var(--text);
    max-width: 52ch;
}

.section {
    padding: clamp(4.5rem, 9vw, 7.5rem) 0;
    position: relative;
}

.section--panel {
    background: var(--panel);
}

.section--kov {
    background:
        linear-gradient(180deg, rgba(201, 162, 39, .05), transparent 40%),
        var(--panel-2);
    border-top: 1px solid var(--linka);
    border-bottom: 1px solid var(--linka);
}

.section__hlava {
    max-width: 58ch;
    margin-bottom: clamp(2.4rem, 4vw, 3.4rem);
}

.section__hlava p:last-child {
    margin-bottom: 0;
}

.ornament {
    display: flex;
    justify-content: center;
    color: var(--zlata);
    margin: 0 0 1.6rem;
}

.ornament svg {
    max-width: 100%;
}

.tlacitka {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 2rem;
}

.btn {
    display: inline-block;
    font-family: var(--pismo-text);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 15px 32px;
    border-radius: 50px;
    border: 1px solid transparent;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
    cursor: pointer;
}

.btn--zlaty {
    background: var(--zlata);
    color: var(--cerna) !important;
}

.btn--zlaty:hover {
    background: var(--zlata-sv);
    color: var(--cerna) !important;
}

.btn--obrys {
    border-color: var(--linka);
    color: var(--krem) !important;
}

.btn--obrys:hover {
    border-color: var(--zlata);
    color: var(--zlata-sv) !important;
}

/* Nájezdové animace. Skrývat JEN pod html.js, jinak zůstane stránka
   prázdná tam, kde JavaScript neproběhne. */
.js .anim {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s ease, transform .8s ease;
    /* Pojistka: kdyby IntersectionObserver neběžel (odložený skript
       u cache pluginu), obsah se stejně objeví. */
    animation: anim-pojistka 0s linear 1.6s forwards;
}

.js .anim.je-videt {
    opacity: 1;
    transform: none;
    animation: none;
}

@keyframes anim-pojistka {
    to { opacity: 1; transform: none; }
}

/* ================================================================== *
 *  NAVIGACE
 * ================================================================== */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: rgba(10, 10, 11, .72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linka);
}

.nav__in {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    color: var(--krem) !important;
}

.logo img {
    height: 42px;
    width: auto;
}

.logo__text {
    font-family: var(--pismo-nadpis);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--krem);
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__menu a {
    position: relative;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text) !important;
    padding-bottom: 4px;
}

.nav__menu a:hover,
.nav__menu a.je-aktivni {
    color: var(--zlata-sv) !important;
}

.nav__menu a.je-aktivni::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--zlata);
}

.nav__cta {
    padding: 12px 26px;
    font-size: .74rem;
}

.hamburger {
    display: none;
    width: 44px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    position: relative;
    cursor: pointer;
}

.hamburger span {
    position: absolute;
    left: 8px;
    height: 2px;
    background: var(--zlata-sv);
    transition: transform .3s ease, opacity .25s ease, width .3s ease;
}

.hamburger span:nth-child(1) { top: 10px; width: 28px; }
.hamburger span:nth-child(2) { top: 18px; width: 20px; }   /* střední kratší */
.hamburger span:nth-child(3) { top: 26px; width: 28px; }

.hamburger.je-otevreny span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.je-otevreny span:nth-child(2) { opacity: 0; }
.hamburger.je-otevreny span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); width: 28px; }

/* Mobilní overlay – sourozenec .nav, ne potomek (backdrop-filter). */
.mobil-menu {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(10, 10, 11, .98);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.mobil-menu.je-otevrene {
    opacity: 1;
    visibility: visible;
}

.mobil-menu a {
    display: block;
    font-family: var(--pismo-akcent);
    font-size: clamp(1.6rem, 7vw, 2.3rem);
    font-weight: 300;
    letter-spacing: .04em;
    color: var(--krem) !important;
    background: transparent !important;
    padding: 10px 18px;
}

.mobil-menu a:hover {
    color: var(--zlata-sv) !important;
}

.mobil-menu__tel {
    margin-top: 1.4rem;
    font-family: var(--pismo-text) !important;
    font-size: 1rem !important;
    letter-spacing: .14em !important;
    color: var(--zlata-sv) !important;
}

nav a,
.mobil-menu a {
    background: transparent !important;
}

/* ================================================================== *
 *  HERO – nalévání piva
 *
 *  Metafora: tmavé hero se zdola plní pivem, hladina se zastaví pod
 *  textem a nadpis se za ní „naplní" zlatou. Celé jede v CSS keyframes,
 *  takže to funguje i tam, kde requestAnimationFrame neběží.
 *  JavaScript přidává jen bublinky za kurzorem – bez něj hero funguje.
 * ================================================================== */

.hero {
    /* Výška hladiny na jednom místě – pivo, pěna i bublinky se řídí podle ní. */
    --hladina: 22%;

    position: relative;
    min-height: min(94vh, 900px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(90% 70% at 20% 20%, rgba(201, 162, 39, .10), transparent 60%),
        linear-gradient(180deg, #0a0a0b 0%, #131316 55%, #0a0a0b 100%);
    padding: 140px 0 90px;
}

/* Safari na iPhonu počítá vh podle viewportu BEZ adresního řádku. Hero pak
   přeteče pod spodní lištu i s hladinou piva a na telefonu není vidět.
   svh je malý viewport, tedy ten, který je opravdu na displeji. */
@supports (height: 100svh) {
    .hero {
        min-height: min(94svh, 900px);
    }
}

/* Sklo: jemné svislé pruhy jako odlesk na sklenici. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg,
        rgba(244, 239, 228, .022) 0 2px,
        transparent 2px 140px);
    pointer-events: none;
}

.hero__pivo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hladina);
    background: linear-gradient(180deg,
        #e9ac2c 0%,
        #c8871d 28%,
        #8b5412 66%,
        #3d2408 100%);
    /* Výchozí posun počítá i s pěnou nad hranou, jinak by pěna při startu
       vykukovala nad spodním okrajem sekce. */
    transform: translateY(calc(100% + 50px));
    animation: naliti var(--hero-tempo) cubic-bezier(.52, .03, .30, 1) .35s forwards;
    will-change: transform;
}

/* Jemné ztmavení, aby zlatá neubíjela text nad hladinou. */
.hero__pivo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 11, .22), rgba(10, 10, 11, .72));
}

/* Pěna na hladině.
   Dvě vrstvy s různě velkou dlaždicí (prvočíselné šířky), aby se vzor
   opticky neopakoval jako korálky na šňůře. Spodní linear-gradient dělá
   tělo pěny, kruhy nahoře její nepravidelný okraj. */
.hero__pena {
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: 100%;
    margin-bottom: -8px;   /* pěna lehce zajíždí do hladiny */
    z-index: 2;
    height: 46px;
    background:
        radial-gradient(circle at 9px 30px, rgba(246, 241, 230, .98) 13px, transparent 14px),
        radial-gradient(circle at 24px 26px, rgba(246, 241, 230, .96) 11px, transparent 12px),
        radial-gradient(circle at 38px 31px, rgba(246, 241, 230, .98) 14px, transparent 15px),
        radial-gradient(circle at 53px 27px, rgba(246, 241, 230, .95) 12px, transparent 13px),
        linear-gradient(180deg, transparent 34%, rgba(246, 241, 230, .96) 52%, rgba(246, 241, 230, .96) 78%, rgba(233, 172, 44, .5) 100%);
    background-size: 67px 46px, 67px 46px, 67px 46px, 67px 46px, 100% 46px;
    background-repeat: repeat-x;
    filter: blur(1.4px);
    /* Žádné vlastní nalévání – pěnu veze s sebou .hero__pivo. */
    animation: vlneni 9s ease-in-out calc(var(--hero-tempo) + .35s) infinite;
    pointer-events: none;
}

/* Druhá vrstva pěny – jiná rozteč i směr vlnění, ať vzor nevypadá
   jako korálky navlečené na šňůře. */
.hero__pena::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 34px;
    background:
        radial-gradient(circle at 8px 22px, rgba(255, 253, 249, .9) 11px, transparent 12px),
        radial-gradient(circle at 21px 26px, rgba(255, 253, 249, .85) 9px, transparent 10px),
        radial-gradient(circle at 34px 21px, rgba(255, 253, 249, .9) 12px, transparent 13px);
    background-size: 47px 34px;
    background-repeat: repeat-x;
    animation: vlneni-zpet 13s ease-in-out infinite;
}

.hero__bublinky {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hladina);
    pointer-events: none;
    overflow: hidden;
}

.hero__bublinky i {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: rgba(252, 246, 232, .8);
    box-shadow: 0 0 8px rgba(252, 246, 232, .55);
    animation: stoupani linear infinite;
}

/* Bublinka, kterou vytvoří kurzor nad hero sekcí. */
.hero__bublinky i.od-mysi {
    animation: stoupani-mys 1.9s ease-out forwards;
}

/* Obsah drží nad hladinou – pivo zabírá spodních 32 % sekce. */
.hero__obsah {
    position: relative;
    z-index: 3;
    width: 100%;
    margin-bottom: 22vh;
}

/* Text hera je zarovnaný VLEVO, max-width patří až prvkům uvnitř –
   na .wrap by vycentroval celý blok doprostřed obrazovky. */
.hero__text {
    text-align: left;
}

.hero__nadpis {
    position: relative;
    display: inline-block;
    font-size: clamp(3rem, 10vw, 6.6rem);
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: .25em;
}

.hero__nadpis-zaklad {
    color: rgba(244, 239, 228, .30);
}

/* Zlatá kopie nadpisu se odkrývá zdola nahoru, jak stoupá hladina. */
.hero__nadpis-zlato {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--zlata-sv);
    white-space: nowrap;
    clip-path: inset(100% 0 0 0);
    animation: naplneni var(--hero-tempo) cubic-bezier(.52, .03, .30, 1) .35s forwards;
}

.hero__slogan {
    font-family: var(--pismo-akcent);
    font-style: italic;
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    color: var(--text);
    max-width: 26ch;
    margin-bottom: 1.2rem;
}

.hero__misto {
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--zlata);
    margin-bottom: 1.6rem;
}

.hero__stav {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .84rem;
    letter-spacing: .08em;
    color: var(--text-tlum);
    border: 1px solid var(--linka);
    border-radius: 50px;
    padding: 8px 18px;
    margin-bottom: 1.8rem;
}

.hero__tecka {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7d7565;
}

.hero__stav.je-otevreno .hero__tecka {
    background: #62b463;
    box-shadow: 0 0 0 4px rgba(98, 180, 99, .18);
}

.hero__tlacitka {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Scroll indikátor – VŽDY přesně na střed. Centrujeme přes
   left/right/margin-inline, aby transform zůstal volný pro animaci. */
.scroll-dolu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.8rem;
    margin-inline: auto;
    width: max-content;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.scroll-mys {
    width: 28px;
    height: 46px;
    border: 2px solid var(--zlata);
    border-radius: 16px;
    padding-top: 9px;
    display: flex;
    justify-content: center;
    transition: border-color .25s ease;
}

.scroll-kolecko {
    width: 4px;
    height: 9px;
    border-radius: 3px;
    background: var(--zlata);
    animation: scrollKolecko 1.8s ease-in-out infinite;
}

.scroll-text {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--text);
}

.scroll-dolu:hover .scroll-mys { border-color: var(--krem); }
.scroll-dolu:hover .scroll-text { color: var(--zlata-sv); }

.scroll-dolu.je-skryty {
    opacity: 0;
    pointer-events: none;
}

@keyframes naliti {
    from { transform: translateY(calc(100% + 50px)); }
    to   { transform: translateY(0); }
}

@keyframes naplneni {
    to { clip-path: inset(0 0 0 0); }
}

@keyframes vlneni {
    0%, 100% { background-position-x: 0; }
    50%      { background-position-x: 41px; }
}

@keyframes vlneni-zpet {
    0%, 100% { background-position-x: 0; }
    50%      { background-position-x: -30px; }
}

@keyframes stoupani {
    0%   { transform: translateY(0) scale(.7); opacity: 0; }
    12%  { opacity: .7; }
    100% { transform: translateY(-460px) scale(1.15); opacity: 0; }
}

@keyframes stoupani-mys {
    0%   { transform: translateY(0) scale(.5); opacity: .8; }
    100% { transform: translateY(-180px) scale(1.2); opacity: 0; }
}

@keyframes scrollKolecko {
    0%   { opacity: 0; transform: translateY(0); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(16px); }
}

/* ================================================================== *
 *  ZÁHLAVÍ PODSTRÁNEK
 * ================================================================== */

.zahlavi {
    position: relative;
    padding: clamp(150px, 20vw, 230px) 0 clamp(3rem, 6vw, 4.6rem);
    background:
        radial-gradient(70% 60% at 15% 0%, rgba(201, 162, 39, .12), transparent 62%),
        var(--panel);
    border-bottom: 1px solid var(--linka);
}

.zahlavi__text {
    text-align: left;
}

.zahlavi__text h1 {
    max-width: 18ch;
}

/* ================================================================== *
 *  KARTY A MŘÍŽKY
 * ================================================================== */

.mrizka {
    display: grid;
    gap: 26px;
}

.mrizka--3 { grid-template-columns: repeat(3, 1fr); }
.mrizka--2 { grid-template-columns: repeat(2, 1fr); }

.karta {
    background: var(--panel-2);
    border: 1px solid var(--linka-sv);
    border-radius: var(--radius);
    padding: 34px 30px;
    transition: border-color .3s ease, transform .3s ease;
}

.karta:hover {
    border-color: var(--linka);
    transform: translateY(-4px);
}

.karta h3 {
    color: var(--zlata-sv);
    margin-bottom: .5em;
}

.karta p:last-child {
    margin-bottom: 0;
}

.karta__cislo {
    display: block;
    font-family: var(--pismo-nadpis);
    font-size: 1.6rem;
    color: var(--zlata);
    margin-bottom: .6rem;
}

/* Dvousloupcový blok text + obrázek */
.duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.4rem, 5vw, 4.4rem);
    align-items: center;
}

.duo__text p:last-child { margin-bottom: 0; }

.duo__obraz {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--linka);
}

.duo__obraz img {
    width: 100%;
    height: 100%;
    /* Fotky od klienta jsou z telefonu na výšku. Bez stropu by jeden snímek
       byl vyšší než text vedle a blok by se rozjel. */
    max-height: 560px;
    object-fit: cover;
}

/* Fotka přes celou šířku obsahu – používá se u budovy, kde je důležitý
   celý dům, ne výřez vedle textu. */
.obraz-pas {
    margin: 0 0 clamp(2.4rem, 4vw, 3.4rem);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--linka);
}

.obraz-pas img {
    width: 100%;
    height: clamp(280px, 38vw, 520px);
    object-fit: cover;
    /* Dům je vysoký a stojí v úzké uličce – ořez od horní části zachová štít. */
    object-position: center 32%;
}

/* Místo pro fotografii, kterou zatím nemáme. */
.misto-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 340px;
    border: 1px dashed var(--linka);
    border-radius: var(--radius);
    background: var(--panel-2);
    color: var(--text-tlum);
    text-align: center;
    padding: 30px;
}

.misto-foto span {
    font-size: .76rem;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.misto-foto svg {
    color: var(--zlata);
    opacity: .55;
}

/* ================================================================== *
 *  LÍSTEK (jídelní i nápojový)
 * ================================================================== */

.listek-skupina + .listek-skupina {
    margin-top: clamp(3rem, 6vw, 4.6rem);
}

.listek-skupina__hlava {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 1.8rem;
}

.listek-skupina__hlava h2 {
    margin: 0;
    white-space: nowrap;
}

.listek-skupina__hlava::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--linka);
}

.polozka {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--linka-sv);
}

.polozka:last-child {
    border-bottom: 0;
}

.polozka__nazev {
    font-family: var(--pismo-nadpis);
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--krem);
    margin: 0;
}

.polozka__cena {
    font-family: var(--pismo-nadpis);
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--zlata-sv);
    white-space: nowrap;
}

.polozka__popis {
    grid-column: 1 / -1;
    font-size: .95rem;
    color: var(--text-tlum);
    margin: 0;
}

.polozka__stitek {
    display: inline-block;
    font-family: var(--pismo-text);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--zlata);
    border: 1px solid var(--linka);
    border-radius: 20px;
    padding: 2px 10px;
    margin-left: 10px;
    vertical-align: middle;
}

.poznamka {
    font-size: .9rem;
    color: var(--text-tlum);
    border-left: 2px solid var(--zlata);
    padding-left: 18px;
    margin-top: 2.6rem;
}

/* ================================================================== *
 *  OTEVÍRACÍ DOBA
 * ================================================================== */

.doba {
    width: 100%;
    border-collapse: collapse;
}

.doba th,
.doba td {
    padding: 10px 0;
    border-bottom: 1px solid var(--linka-sv);
    font-weight: 400;
    text-align: left;
}

.doba td {
    text-align: right;
    color: var(--text-tlum);
}

.doba tr.je-dnes th,
.doba tr.je-dnes td {
    color: var(--zlata-sv);
}

.doba__dnes {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cerna);
    background: var(--zlata);
    border-radius: 20px;
    padding: 2px 9px;
    margin-left: 8px;
    vertical-align: middle;
}

.doba .je-zavreno {
    color: #8b8375;
}

/* ================================================================== *
 *  GALERIE + LIGHTBOX
 * ================================================================== */

.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.galerie__polozka {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--linka-sv);
    background: var(--panel-2);
    aspect-ratio: 4 / 3;
    cursor: zoom-in;
}

.galerie__polozka img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.galerie__polozka:hover img {
    transform: scale(1.05);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 6, 7, .96);
    padding: 40px 20px;
}

.lightbox img {
    max-width: min(92vw, 1200px);
    max-height: 82vh;
    border-radius: 8px;
}

.lightbox__zavrit,
.lightbox__sipka {
    position: absolute;
    background: transparent;
    border: 1px solid var(--linka);
    color: var(--krem);
    border-radius: 50%;
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease;
}

.lightbox__zavrit:hover,
.lightbox__sipka:hover {
    border-color: var(--zlata);
    color: var(--zlata-sv);
}

.lightbox__zavrit { top: 24px; right: 24px; }
.lightbox__sipka--vlevo { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__sipka--vpravo { right: 24px; top: 50%; transform: translateY(-50%); }

.lightbox__pocitadlo {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .84rem;
    letter-spacing: .18em;
    color: var(--text-tlum);
}

/* ================================================================== *
 *  KONTAKT, FORMULÁŘ, MAPA
 * ================================================================== */

.kontakt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.4rem, 5vw, 4rem);
}

.kontakt-radek {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--linka-sv);
}

.kontakt-radek:last-child {
    border-bottom: 0;
}

.kontakt-radek__popis {
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--zlata);
    margin: 0 0 4px;
}

.kontakt-radek p {
    margin: 0;
}

.kontakt-radek a {
    font-weight: 600;
}

.formular {
    display: grid;
    gap: 18px;
}

.formular label {
    display: block;
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-tlum);
    margin-bottom: 8px;
}

.formular input,
.formular textarea,
.formular select {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--linka-sv);
    border-radius: 10px;
    color: var(--krem);
    font-family: var(--pismo-text);
    font-size: 1rem;
    padding: 14px 16px;
    transition: border-color .25s ease;
}

.formular input:focus,
.formular textarea:focus,
.formular select:focus {
    border-color: var(--zlata);
    outline: none;
}

.formular__dvojice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.formular__souhlas {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .88rem;
    color: var(--text-tlum);
}

.formular__souhlas input {
    width: auto;
    margin-top: 5px;
}

/* Mapa je VŽDY přes celou šířku okna. */
.mapa {
    width: 100%;
    line-height: 0;
    border-top: 1px solid var(--linka);
}

.mapa iframe {
    width: 100%;
    height: clamp(320px, 42vw, 480px);
    border: 0;
    filter: grayscale(1) contrast(1.05) brightness(.82);
}

/* ================================================================== *
 *  PATIČKA
 * ================================================================== */

.footer {
    background: var(--panel);
    border-top: 1px solid var(--linka);
    padding: clamp(3.4rem, 6vw, 5rem) 0 2rem;
    font-size: .95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: clamp(2rem, 4vw, 3.4rem);
}

.footer__znacka img {
    max-width: 190px;
    margin-bottom: 1.2rem;
}

.footer__slogan {
    font-family: var(--pismo-akcent);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--zlata-sv);
    margin-bottom: .6rem;
}

.footer__nadpis {
    font-family: var(--pismo-nadpis);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--krem);
    margin-bottom: 1.1rem;
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer li {
    margin-bottom: .6rem;
    color: var(--text-tlum);
}

.footer a {
    color: var(--text) !important;
}

.footer a:hover {
    color: var(--zlata-sv) !important;
}

.footer__spodek {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: clamp(2.4rem, 4vw, 3.4rem);
    padding-top: 1.6rem;
    border-top: 1px solid var(--linka-sv);
    color: var(--text-tlum);
    font-size: .86rem;
}

.footer__spodek p {
    margin: 0;
}

/* ================================================================== *
 *  RESPONZIVITA
 * ================================================================== */

@media (max-width: 1080px) {
    .mrizka--3 { grid-template-columns: repeat(2, 1fr); }
    .galerie { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .nav__menu,
    .nav__cta {
        display: none !important;
    }

    .hamburger {
        display: block;
    }

    .duo,
    .kontakt-grid {
        grid-template-columns: 1fr;
    }

    .scroll-dolu {
        display: none;   /* ikona myši nedává na dotykovém displeji smysl */
    }

    .hero {
        --hladina: 21%;
        padding: 120px 0 70px;
    }

    /* Patička na mobilu pod sebe – MUSÍ být uvnitř media query. */
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .mrizka--3,
    .mrizka--2,
    .galerie {
        grid-template-columns: 1fr;
    }

    .formular__dvojice {
        grid-template-columns: 1fr;
    }

    .listek-skupina__hlava {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .listek-skupina__hlava::after {
        display: none;
    }

    .lightbox__sipka--vlevo { left: 10px; }
    .lightbox__sipka--vpravo { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    /* Hero musí skončit ve své cílové podobě, ne zůstat prázdné. */
    .hero__pivo,
    .hero__pena {
        transform: translateY(0);
    }

    .hero__nadpis-zlato {
        clip-path: inset(0 0 0 0);
    }

    .js .anim {
        opacity: 1;
        transform: none;
    }
}

/* ================================================================== *
 *  OZNÁMENÍ O OTEVŘENÍ (6. 10. 2026) – zlatý pruh nad menu.
 *  Lišta s pruhem a navigací je jeden fixní blok (.horni-lista),
 *  mobilní overlay zůstává jeho sourozencem (kvůli backdrop-filter).
 * ================================================================== */

.horni-lista {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
}

.horni-lista .nav {
    position: relative;
}

.oznameni {
    margin: 0;
    height: 36px;
    padding: 0 16px;
    background: var(--zlata);
    color: #0a0a0b;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 36px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oznameni__kratky {
    display: none;
}

body.ma-oznameni main {
    margin-top: 36px;
}

body.admin-bar .horni-lista {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .horni-lista {
        top: 46px;
    }
}

@media (max-width: 640px) {
    .oznameni__dlouhy {
        display: none;
    }

    .oznameni__kratky {
        display: inline;
    }
}