/*
Theme Name: Dobary
Author: Zdeněk Petr
Author URI: https://zdpetr.cz
Description: Šablona na míru pro DOBARY s.r.o. — sezónní prodej vánočních kaprů a nábor brigádníků. Jednostránková prezentace, prodejní místa jako vlastní typ obsahu, mapa Moravy generovaná ze souřadnic, sezónní a mimosezónní režim.
Version: 2.19.1
Requires at least: 6.0
Requires PHP: 7.4
Tags: one-column, custom-logo, custom-menu, translation-ready
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dobary
*/
/* ---------- fonty (self-hosted, bez připojení ke Google) ---------- */
@font-face{font-family:Bitter;font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/bitter-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Bitter;font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/bitter-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Bitter;font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/bitter-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Bitter;font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/bitter-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Bitter;font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/bitter-latin-ext-500-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Bitter;font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/bitter-latin-500-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
--navy-deep:#0A2E52; --navy:#103A63; --navy-mid:#2B5E8C; --navy-pale:#8FB2CE;
--ice:#DCE7EF; --paper:#F4EFE2; --kraft:#E8DFC9; --kraft-line:#CFC2A2; --cta-base:#E0CFB2;
/* Zlatá ve třech rolích. Jedna barva nemůže projít kontrastní normou
na krémovém papíru i pod bílým textem naráz, takže jsou rozdělené:
--gold jen dekorace: linky, pruhy, pečeť. Netýká se textu.
--gold-btn pozadí tlačítek, na kterém stojí bílý text (4,92:1).
--gold-text zlatý text na papíru a bílé (4,70:1).
--gold-ink zlatý text na kraftovém podkladu (5,38:1).
--brown je ztlumený text na krémových plochách (4,63:1 na nejtmavší). */
--gold:#B8842F; --gold-btn:#926925; --gold-btn-hover:#7A571F;
--gold-text:#8A6323; --gold-ink:#72521D; --brown:#5F5844;
--ink:#22303C; --ink-soft:#5B6B78;
--err:#9E2F24; --err-bg:#FBEDEB;
/* Míra textu — šířka odstavce. 680 px je při 17px Interu asi 80 znaků na
řádek, tedy horní hranice pohodlného čtení. Celá šířka obsahu (1344 px)
by dala 159 znaků, což se nedá číst. Vizuální bloky se přes tuhle míru
roztahují na plnou šířku, viz .entry níže. */
/* Mezera mezi sloupci. Jedna hodnota na celý web, ať se rozestupy neliší
od sekce k sekci. Menší mezery se od ní odvozují. */
--mezera:64px;
/* Mezera mezi podbarvenými sekcemi a okolním obsahem. */
--mezera-sekci:72px;
/* Odsazení obsahu stránky odspodu. Z téhle hodnoty se počítá i mezera pod
pečetí na úvodní straně, aby byly obě stejné. */
--mezera-obsah:80px;
/* O kolik pečeť přesahuje pod hlavičku. Používá se na dvou místech naráz:
u samotné pečeti a při výpočtu odsazení obsahu pod ní. */
--pecet-presah:46px;
--mira:680px;
--display:Bitter,Georgia,serif;
--body:Inter,-apple-system,'Segoe UI',sans-serif;
--wrap:1440px;
}
*{box-sizing:border-box}
/* Tmavá barva na html řeší plochu, která se ukáže při přetažení stránky za
okraj — nahoře u navigace i dole u patičky, obě jsou tmavé. Krémová zůstává
na body, takže samotný obsah se nemění. */
html{scroll-behavior:smooth;background:var(--navy-deep)}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.7;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 48px}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,4.2vw,4.5rem)}
h2{font-size:clamp(1.8rem,2.8vw,2.9rem)}
h3{font-size:1.05rem;letter-spacing:0}
p{margin:0 0 1.1em}
a{color:inherit;text-decoration:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:static!important;width:auto;height:auto;clip:auto;display:inline-block;margin:8px;padding:10px 16px;background:#fff;color:var(--navy-deep);z-index:100}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase}
.accent-line{font-family:var(--display);font-style:italic;font-weight:500;color:var(--gold)}
.rule{width:52px;height:2px;background:var(--gold);margin:0 0 26px}
/* Rozměry drží stejné jako .dobary-submit ve formuláři přihlášky. */
.btn{display:inline-flex;align-items:center;gap:.55em;font-size:.95rem;font-weight:600;padding:.9em 2em;border-radius:2px;border:1.5px solid transparent;transition:background .18s,color .18s,border-color .18s;cursor:pointer}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.btn-gold{background:var(--gold-btn);color:#fff}
.btn-gold:hover{background:var(--gold-btn-hover)}
.btn-ghost-light{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* ---------- horní pásy a navigace ---------- */
.notice-bar{background:var(--kraft);color:var(--brown);font-size:.72rem;letter-spacing:.04em;text-align:center;padding:.55em 1em;border-bottom:1px solid var(--kraft-line)}
.strip{background:var(--navy-deep);color:var(--navy-pale);font-size:.76rem;letter-spacing:.06em;text-align:center;padding:.6em 1em;border-bottom:1px solid rgba(255,255,255,.08)}
.strip b{color:#fff;font-weight:600}
.nav{background:var(--navy-deep);position:sticky;top:0;z-index:40}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 48px;max-width:var(--wrap);margin:0 auto}
.logo{display:block;color:#fff;flex:none}
/* Logo je od doplnění „s.r.o.“ vyšší (viewBox 1982×555). Šířka zůstává,
takže samotné DOBARY má stejnou velikost a s.r.o. přiroste pod vlnku. */
.logo svg,.logo img{width:205px;height:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:.88rem;font-weight:500;color:#CBDCEA;transition:color .16s}
.nav-links a:hover,
.nav-links .current-menu-item>a,
.nav-links a.current-menu-item{color:#fff}
.nav-links ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:28px}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;padding:4px 8px}
/* ---------- hero ---------- */
.hero{background:var(--navy);position:relative;isolation:isolate}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center;z-index:0;pointer-events:none}
/* Na širokých obrazovkách fotka nikde nepřekrývá text, takže ji nekalíme
žádným ztmavením. Čitelnost drží jen jemný stín pod písmem — ten na tmavé
fotce není vidět a na světlé zachrání text. Svislé ztmavení je jen na
úzkých obrazovkách, kde text leží přes fotku (viz breakpoint 900 px). */
.hero-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:104px 48px 156px;min-height:min(86vh,880px);display:flex;align-items:center}
.hero-copy{max-width:min(54%,640px)}
.hero-copy .eyebrow,.hero-copy h1,.hero-copy .hero-lead,.hero-copy .hero-note{
text-shadow:0 1px 2px rgba(3,17,33,.45), 0 2px 22px rgba(3,17,33,.5);
}
.hero .eyebrow{color:var(--navy-pale);display:block;margin-bottom:22px}
.hero h1{color:#fff}
.hero h1 .accent-line{display:block;font-size:.6em;margin-top:.28em}
.hero-lead{color:#C6D8E6;font-size:1.1rem;max-width:36ch;margin:28px 0 36px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin:28px 0 0;font-size:.82rem;color:#9FBDD6;letter-spacing:.02em}
.torn{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:58px;display:block;z-index:2}
.seal-rail{position:absolute;left:0;right:0;bottom:calc(var(--pecet-presah) * -1);z-index:6;pointer-events:none}
.seal{width:132px;height:132px;transform:rotate(-7deg)}
.seal svg{width:100%;height:100%;display:block}
/* ---------- obecné sekce ---------- */
.section{padding:112px 0}
.section-head{max-width:620px;margin-bottom:44px}
.section-head .eyebrow{color:var(--gold-text);display:block;margin-bottom:16px}
.section-head p{color:var(--ink-soft);font-size:1.02rem;margin:18px 0 0}
/* ---------- prodejní místa + mapa ---------- */
.places{padding-top:100px}
.places-meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-bottom:34px;font-size:.86rem;color:var(--ink-soft)}
.places-meta span{display:flex;align-items:center;gap:8px}
.places-meta svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:1.7;flex:none}
/* Seznam a mapa půl na půl. Při obsahu 1344 px má každý 648 px, takže se
do seznamu vejdou tři sloupce měst a mapa je čitelně velká. Pod 1180 px
spadne seznam na dva sloupce sám, protože buňka má minimum 185 px. */
.places-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mezera);align-items:start}
.places-list{min-width:0}
/* Buňka musí pojmout nejdelší název — „Veselí nad Moravou“ potřebuje při
15,98px Interu 150 px na text, s odsazením 178 px. Při 150px minimu se
lámal na dva řádky a rozhazoval mřížku. */
.cities{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:2px;
background:var(--kraft-line);border:1px solid var(--kraft-line);
}
.city{
background:#FBF9F3;padding:11px 14px;font-size:.94rem;color:var(--navy-deep);
transition:background .16s,color .16s;cursor:default;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.city.on{background:var(--gold-btn);color:#fff}
.cities-note{margin:18px 0 0;font-size:.84rem;color:var(--ink-soft)}
.table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.table caption{text-align:left;font-size:.78rem;color:var(--ink-soft);padding-bottom:12px}
.table th{text-align:left;font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);padding:0 16px 12px 0;border-bottom:1.5px solid var(--kraft-line)}
.table td{padding:19px 16px 19px 0;border-bottom:1px solid rgba(207,194,162,.6);font-size:.95rem;vertical-align:top}
.table tbody tr{transition:background .16s}
.table tbody tr:hover,.table tbody tr.on{background:rgba(232,223,201,.7)}
.place-name{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--navy-deep);white-space:nowrap}
.place-addr{color:var(--ink-soft)}
.place-date{font-weight:600;color:var(--navy);white-space:nowrap}
.place-hours{color:var(--ink-soft);white-space:nowrap}
.places-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.places-hint{font-size:.84rem;color:var(--ink-soft)}
.places-hint a{color:var(--gold-text);font-weight:600}
.places-empty{background:var(--kraft);border:1px solid var(--kraft-line);padding:26px 28px;font-size:.95rem;color:#5E5540}
.map{margin:0}
.map-svg{width:100%;height:auto;display:block}
.map .reg{fill:#E8DFC9;stroke:#C2B392;stroke-width:1.1}
.pin{cursor:pointer}
.pin-halo{fill:var(--gold);opacity:0;transition:opacity .18s}
.pin-dot{fill:var(--navy);stroke:#F4EFE2;stroke-width:2;transition:fill .18s}
.pin-dot{transition:fill .18s,r .18s}
.pin.on .pin-halo,.pin:hover .pin-halo,.pin:focus-visible .pin-halo{opacity:.3}
/* Zvýrazněný špendlík se zvětší a zezlátne, takže je vidět i pod sousedy —
u Starého Města, Uherského Hradiště a Kunovic se piny nutně překrývají. */
.pin.on .pin-dot,.pin:hover .pin-dot,.pin:focus-visible .pin-dot{fill:var(--gold);r:8}
/* ---------- jak to probíhá ---------- */
.prodej{background:var(--navy);color:#fff;padding:104px 0}
.prodej-head{max-width:640px;margin-bottom:52px}
.prodej-head .eyebrow{color:var(--navy-pale);display:block;margin-bottom:16px}
.prodej-head h2{color:#fff}
.prodej-head p{color:#B5CBDC;margin:18px 0 0}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:rgba(255,255,255,.14)}
.flow li{background:var(--navy);padding:26px 26px 30px}
.flow-n{font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.1em;color:var(--gold);display:block;margin-bottom:14px}
.flow h3{color:#fff;font-size:1rem;margin-bottom:7px}
.flow p{font-size:.86rem;line-height:1.6;color:#A9C3D6;margin:0}
.prodej-note{margin:34px 0 0;font-size:.84rem;color:#8FB2CE}
.prodej-note a{color:#DCC79A;border-bottom:1px solid rgba(220,199,154,.45);padding-bottom:1px}
/* ---------- o nás ---------- */
.about{background:var(--ice)}
.about-grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:var(--mezera);align-items:center}
.about .eyebrow{color:var(--navy-mid);display:block;margin-bottom:16px}
.about h2{color:var(--navy-deep)}
.about-text p{color:#3E5464}
.about-photo{position:relative}
.about-photo img{border-radius:3px}
.about-photo::after{content:'';position:absolute;inset:0;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(10,46,82,.16);pointer-events:none}
.marks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 40px;margin-top:64px;padding-top:38px;border-top:1px solid rgba(43,94,140,.24)}
.mark-ico{display:block;color:var(--navy);margin-bottom:16px}
.mark-ico svg{width:46px;height:46px;display:block}
.mark h3{color:var(--navy-deep);margin-bottom:5px}
.mark p{font-size:.86rem;line-height:1.6;color:#4C6273;margin:0}
/* ---------- aktuality ---------- */
.novinky{padding-top:104px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.card{background:#FBF9F3;border:1px solid var(--kraft-line);padding:26px 26px 28px}
.card time{display:block;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin-bottom:12px}
.card h3{color:var(--navy-deep);font-size:1.05rem;line-height:1.25;margin-bottom:9px}
.card h3 a:hover{color:var(--gold-text)}
.card p{font-size:.88rem;line-height:1.6;color:var(--ink-soft);margin:0}
/* ---------- brigáda ---------- */
.brigada{background-color:var(--cta-base);background-image:url(assets/img/papir-cta.webp);background-size:cover;background-position:center;background-repeat:no-repeat;border-top:1px solid var(--kraft-line);border-bottom:1px solid var(--kraft-line);padding:clamp(84px,7vw,124px) 0;position:relative}
.brigada .wrap{position:relative;z-index:1}
.brigada-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:var(--mezera);align-items:center}
.brigada .eyebrow{color:var(--brown);display:block;margin-bottom:16px}
.brigada h2{color:var(--navy-deep)}
.brigada h2 .accent-line{display:block;font-size:.68em;margin-top:.2em;color:var(--gold-ink)}
.brigada p{color:#4E5A52;margin-top:20px;max-width:46ch}
.facts{display:grid;gap:1px;background:var(--kraft-line);border:1px solid var(--kraft-line);margin:0}
.fact{background:#FBF9F3;padding:19px 22px;display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.fact dt{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.fact dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--navy-deep);text-align:right}
.brigada-claim{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.15rem;color:var(--gold-ink);margin-top:14px}
.brigada-cta{margin-top:26px}
.brigada-fine{margin:22px 0 0;font-size:.8rem;line-height:1.65;color:var(--brown);max-width:46ch}
.link-quiet{display:inline-block;margin-top:8px;color:var(--navy);border-bottom:1px solid rgba(16,58,99,.35);padding-bottom:1px}
.link-quiet:hover{border-bottom-color:var(--navy)}
/* ---------- kontakt a patička ---------- */
.contact{background:var(--navy);color:#fff;padding:clamp(56px,7vw,88px) 0}
/* Čtyři sloupce: emblém, nadpis a každá osoba zvlášť. Osoby mají automatickou
šířku, takže se jméno s telefonem nelámou. */
.contact-grid{
display:grid;
grid-template-columns:220px minmax(0,1fr) auto auto;
gap:var(--mezera);align-items:center;
}
.contact-logo{color:#fff}
.contact-logo svg{width:100%;max-width:186px;height:auto;display:block}
.contact-dotaz{min-width:0}
.contact h2{color:#fff}
.contact h2 .accent-line{display:block;font-size:.6em;margin-top:.15em;color:var(--navy-pale)}
.contact-osoba{margin:0}
.contact-osoba dt{display:flex;align-items:center;gap:13px;font-family:var(--display);font-weight:700;font-size:1.08rem;color:#fff;white-space:nowrap}
.contact-osoba dt svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.6;flex:none}
.contact-osoba dd{margin:8px 0 0 31px}
.contact-osoba dd a{font-size:1.12rem;color:#DCE7EF;letter-spacing:.01em;white-space:nowrap}
.contact-osoba dd a:hover{color:#fff}
.foot{background:var(--navy-deep);color:#7C9CB8;font-size:.82rem;padding:34px 0}
.foot-in{display:flex;flex-wrap:wrap;gap:20px 32px;justify-content:space-between;align-items:center;max-width:var(--wrap);margin:0 auto;padding:0 48px}
.foot-left{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;min-width:0}
.foot-legal{white-space:normal}
.foot-links{display:flex;flex-wrap:wrap;gap:24px}
.foot-links a:hover{color:#fff}
.foot-links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:24px}
.foot-sign{display:inline-flex;align-items:center;gap:14px;color:#7C9CB8;transition:color .2s;flex:none}
.foot-sign:hover,.foot-sign:focus-visible{color:#C3D6E6}
.foot-sign-label{font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.foot-sign svg{width:auto;height:32px;display:block}
/* ---------- vnitřní stránky ---------- */
.head{background:var(--navy);padding:78px 0 106px;position:relative;overflow:hidden}
.head .wrap{position:relative;z-index:1}
.head h1{color:#fff;font-size:clamp(2rem,3.3vw,3.4rem)}
.head h1 .accent-line{display:block;font-size:.55em;margin-top:.2em}
.head .eyebrow{color:var(--navy-pale);display:block;margin-bottom:18px}
.head p{color:#C6D8E6;font-size:1.02rem;max-width:52ch;margin:22px 0 0}
.head-water{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;opacity:.6;z-index:0;pointer-events:none;
-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.9) 84%,rgba(0,0,0,1) 100%);
mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.9) 84%,rgba(0,0,0,1) 100%)}
.head-torn{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:54px;display:block;z-index:2}
.page-main{padding:56px 0 var(--mezera-obsah)}
/* Na úvodní straně visí pečeť 46 px pod hero sekci, takže by odsazení 56 px
nechalo pod ní jen 10 px. Přidáváme ten přesah zpátky a k tomu ještě
pohodlnou mezeru. Hodnota níže tedy není mezera, ale přesah + mezera. */
/* Mezera pod pečetí je stejná jako odsazení obsahu odspodu. Přesah pečeti se
přičítá, protože visí do obsahu — jinak by mezera byla o něj menší. */
.page-main--front{padding-top:calc(var(--mezera-obsah) + var(--pecet-presah))}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--mezera);align-items:start}
.contentcol{grid-column:1;grid-row:1;max-width:760px;min-width:0}
/* Na stránce s přihláškou je obsah už v levém sloupci layoutu, takže se
mřížka .entry vypíná — jinak by se text zúžil dvakrát. Míru textu ale
držíme dál, jen ji řešíme šířkou jednotlivých prvků. */
.contentcol .entry{display:block}
.contentcol .entry > *{grid-column:auto;max-width:var(--mira)}
.contentcol .entry > .dobary-form,
.contentcol .entry > .dobary-modal,
.contentcol .entry > .places-grid,
.contentcol .entry > .kontakty,
.contentcol .entry > .na-siroko{max-width:none}
.side{grid-column:2;grid-row:1;position:sticky;top:28px}
.side-card{background:var(--kraft);border:1px solid var(--kraft-line);padding:24px 26px}
.side-title{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--navy-deep);margin:0 0 16px}
.steps{list-style:none;margin:0;padding:0}
.steps li{padding:15px 0;border-top:1px solid var(--kraft-line)}
.steps li:first-child{border-top:0;padding-top:0}
.steps li:last-child{padding-bottom:0}
.step-n{font-family:var(--display);font-weight:700;font-size:.76rem;color:var(--gold-ink);display:block;margin-bottom:4px;letter-spacing:.09em}
.steps h3{color:var(--navy-deep);font-size:.9rem;margin-bottom:3px}
.steps p{font-size:.82rem;line-height:1.55;color:var(--brown);margin:0}
.side-help{margin-top:20px;padding:22px 26px;background:var(--ice);border:1px solid rgba(43,94,140,.22)}
.side-help p{font-size:.85rem;line-height:1.6;color:#3E5464;margin:0}
.side-help a{color:var(--navy);font-weight:500}
/* Obsah z editoru: mřížka o třech sloupcích. Text sedí v prostředním o šířce
--mira a je zarovnaný k levému okraji stejně jako nadpis stránky nad ním.
Bloky s vizuálním obsahem přeskočí do celé šířky. */
.entry{
display:grid;
grid-template-columns:minmax(0,var(--mira)) minmax(0,1fr);
column-gap:var(--mezera);
}
.entry > *{grid-column:1;min-width:0}
/* ---------- podbarvená sekce přes celou šířku okna ----------
Vylomí se z obsahového sloupce negativním okrajem a stejně velkým odsazením
vrátí obsah zpět na mřížku. Procenta u okraje i odsazení se počítají ze šířky
obsahujícího bloku, ne z prvku samotného — na tom celý trik stojí.
Kde je svislý posuvník, přeteče sekce o jeho šířku (asi 15 px). Proto je
na stránce, která takovou sekci obsahuje, přebytek odstřižený. Používáme
overflow-x: clip, ne hidden — clip nevytváří posuvnou oblast, takže
nerozbije přilepený sloupec na stránce s přihláškou. */
.page-main:has(.sekce){overflow-x:clip}
.entry > .sekce{
grid-column:1 / -1;
margin-inline:calc(50% - 50vw);
padding-inline:calc(50vw - 50%);
padding-block:clamp(56px,5vw,88px);
margin-block:var(--mezera-sekci);
}
.sekce--ice{background:var(--ice)}
.sekce--kraft{background:var(--kraft)}
/* WordPress u klasických šablon obaluje obsah bloku skupiny do
.wp-block-group__inner-container. Mřížku proto musíme mít na obou úrovních —
podle verze WordPressu obal být může, ale nemusí. */
.sekce,
.sekce > .wp-block-group__inner-container{
display:grid;
grid-template-columns:minmax(0,var(--mira)) minmax(0,1fr);
column-gap:var(--mezera);
}
.sekce > *,
.sekce > .wp-block-group__inner-container > *{grid-column:1;min-width:0}
.sekce > .wp-block-group__inner-container{grid-column:1 / -1}
.sekce > .prednosti,
.sekce > .places-grid,
.sekce > .loga--siroko,
.sekce > .wp-block-columns,
.sekce > .na-siroko,
.sekce > .wp-block-group__inner-container > .prednosti,
.sekce > .wp-block-group__inner-container > .places-grid,
.sekce > .wp-block-group__inner-container > .loga--siroko,
.sekce > .wp-block-group__inner-container > .wp-block-columns,
.sekce > .wp-block-group__inner-container > .na-siroko{grid-column:1 / -1}
.sekce > *:first-child,
.sekce > .wp-block-group__inner-container > *:first-child{margin-top:0}
.sekce > *:last-child,
.sekce > .wp-block-group__inner-container > *:last-child{margin-bottom:0}
/* Fotka v podbarvené sekci vyplní výšku textu. Při svislém zarovnání na střed
byla fotka o desítky pixelů vyšší než text, a centrování proto vytlačilo
nadpis dolů — nad ním zbylo prázdno. Takhle jsou oba sloupce stejně vysoké
a mezera nad nadpisem je jen odsazení sekce. */
.sekce .wp-block-columns{align-items:stretch}
.sekce .wp-block-column{display:flex;flex-direction:column;justify-content:center}
.sekce .wp-block-column .foto{height:100%;min-height:300px}
.sekce .wp-block-column .foto img{height:100%;object-fit:cover;object-position:center 40%}
/* Na modrém podkladu je krémová karta příliš blízko pozadí. */
.sekce--ice .dodavatele li{background:#F3F7FA;border-color:rgba(43,94,140,.22)}
/* Když podbarvená sekce začíná hned pod hlavičkou, nesmí mezi nimi zůstat
pruh papírové barvy — a roztržená hrana se musí přebarvit na barvu sekce. */
body:has(.entry > .sekce--ice:first-child) .page-main{padding-top:0}
body:has(.entry > .sekce--ice:first-child) .head-torn path{fill:var(--ice)}
body:has(.entry > .sekce--kraft:first-child) .page-main{padding-top:0}
body:has(.entry > .sekce--kraft:first-child) .head-torn path{fill:var(--kraft)}
.entry > .sekce:first-child{margin-top:0}
/* V mřížce se svislé okraje sousedních prvků neslučují, ale sčítají. Nadpis
za sekcí by tak ke spodnímu okraji sekce přidal svých 2,2 em a mezera by
byla dvojnásobná. Mezeru proto určuje jen okraj sekce. */
.entry > .sekce + *{margin-top:0}
.entry > * + .sekce{margin-top:var(--mezera-sekci)}
@media (max-width:900px){
.sekce,
.sekce > .wp-block-group__inner-container{display:block}
/* Na úzké obrazovce jsou sloupce pod sebou, takže fotka nemá co dorovnávat
a nemá smysl ji krájet. */
.sekce .wp-block-column .foto{height:auto;min-height:0}
.sekce .wp-block-column .foto img{height:auto;object-fit:fill}
.entry > .sekce{padding-block:clamp(44px,7vw,64px)}
}
/* ---------- dlouhý text bez obrázků ----------
Stránka jako Ochrana osobních údajů nemá co dát do pravého sloupce, takže
textový sloupec vlevo působí nevyváženě. Dvě možnosti, obě se nastavují
třídou na obalujícím bloku skupiny:
na-siroko text přes celou šířku obsahu (1344 px = asi 165 znaků
na řádek, což se čte špatně)
text-na-stred text si drží čitelnou míru, ale je na střed stránky
Doporučené je druhé — délka řádku zůstane pod hranicí a stránka nevypadá
jako by v ní chyběl pravý sloupec. */
.entry > .text-na-stred{grid-column:1 / -1}
.entry > .text-na-stred > .wp-block-group__inner-container,
.entry > .text-na-stred.wp-block-group:not(:has(> .wp-block-group__inner-container)){
max-width:var(--mira);margin-inline:auto;
}
/* Bloky s vizuálním obsahem přeskočí z textového sloupce do celé šířky. */
.entry > .places-grid,
.entry > .kontakty,
.entry > .prednosti,
.entry > .loga--siroko,
.entry > .wp-block-columns,
.entry > .wp-block-image,
.entry > .na-siroko,
.entry > .dobary-form,
.entry > .dobary-modal{grid-column:1 / -1}
/* Nativní blok sloupců z editoru. Mezeru řídíme sami, výchozí od WordPressu
je proti zbytku webu úzká. Svislé zarovnání na střed se nastavuje v editoru. */
.entry .wp-block-columns{gap:var(--mezera);margin:2.6em 0}
.entry .wp-block-column > *:first-child{margin-top:0}
.entry .wp-block-column > *:last-child{margin-bottom:0}
.entry .wp-block-column figure{margin:0}
.entry .wp-block-column img{width:100%;height:auto;display:block;border-radius:3px}
.entry > *:first-child{margin-top:0}
.entry h2{margin:2.2em 0 .7em;color:var(--navy-deep);font-size:clamp(1.5rem,2.2vw,2.1rem)}
.entry h2:first-child{margin-top:0}
.entry h2::after{content:'';display:block;width:44px;height:2px;background:var(--gold);margin-top:16px}
/* Nadpisy na úvodní straně jsou o stupeň větší než na podstránkách. */
.entry--front h2{font-size:clamp(1.8rem,2.8vw,2.6rem)}
.entry h3{margin:1.8em 0 .5em;color:var(--navy-deep)}
.entry ul,.entry ol{padding-left:1.3em}
.entry li{margin-bottom:.4em}
.entry .claim{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.25rem;color:var(--gold-text);margin:1.4em 0}
.entry .pozor{background:var(--kraft);border-left:2px solid var(--gold);padding:16px 20px;font-size:.94rem;margin:1.6em 0}
.entry .cta-radek{margin:2.2em 0 0}
/* Tlačítko v obsahu je odkaz, takže by po něm zdědilo zlatou barvu textu
a podtržení z pravidla .entry a. Musíme to přebít. */
.entry a.btn{border-bottom:0;text-decoration:none}
.entry a.btn-gold{color:#fff}
.entry a.btn-gold:hover{color:#fff}
.entry a.btn-navy{color:#fff}
.entry a.btn-navy:hover{color:#fff}
.entry a.btn-ghost-light{color:#fff}
.entry .why{background:var(--ice);border-left:2px solid var(--navy-mid);padding:20px 24px;margin:2em 0}
.entry .why h3{margin:0 0 6px;color:var(--navy-deep)}
.entry .why p{font-size:.9rem;line-height:1.65;color:#3E5464;margin:0}
.entry .pouceni-odkaz{margin:1.6em 0}
/* ---------- řada log ----------
Loga mají různý poměr stran, takže je nelze srovnat na stejnou výšku —
čtvercové logo by vypadalo čtyřikrát menší než široké. Výšky jsou proto
odvozené z optické plochy: h = odmocnina(plocha / poměr stran).
Konkrétní hodnota se nastavuje třídou podle tvaru loga. */
.loga{
list-style:none;margin:0;padding:0;
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:40px 48px;
}
.loga li{margin:0;display:flex;align-items:center;justify-content:center}
.loga img{width:auto;max-width:100%;height:auto;display:block;object-fit:contain}
.loga .logo-ctverec img{max-height:80px} /* poměr okolo 1:1, např. Kaufland */
.loga .logo-siroke img{max-height:52px} /* poměr okolo 2,5:1, např. Albert */
.loga .logo-velmi-siroke img{max-height:40px} /* poměr okolo 4:1, např. Uni Hobby */
.entry > .loga--vpravo{grid-column:2;grid-row:span 4;align-self:center}
.entry > .loga--siroko{grid-column:1 / -1;margin:2.4em 0}
@media (max-width:900px){
.entry > .loga--vpravo{grid-column:auto;grid-row:auto;margin:2.4em 0;justify-content:flex-start}
.loga{gap:32px 40px}
}
/* Fotka v pravém sloupci obsahové mřížky. Vyplní prostor, který by jinak
zůstal prázdný vedle textu. Řádek si drží sama, takže text pod ní
pokračuje normálně v levém sloupci. */
.foto{margin:0}
.foto img{border-radius:3px;width:100%;height:auto;display:block}
.entry > .foto--vpravo{grid-column:2;grid-row:span 6;align-self:start;margin-top:.6em}
.entry > .foto--siroko{grid-column:1 / -1;margin:2em 0}
@media (max-width:900px){
.entry > .foto--vpravo{grid-column:auto;grid-row:auto;margin:2em 0;max-width:520px}
}
/* Karty dodavatelů — blok na celou šířku. Stejná konstrukce jako aktuality. */
.dodavatele{list-style:none;margin:2.4em 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
.dodavatele li{background:#FBF9F3;border:1px solid var(--kraft-line);padding:22px 24px;margin:0}
.dodavatele strong{display:block;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--navy-deep)}
.dodavatele span{display:block;margin-top:5px;font-size:.86rem;color:var(--ink-soft)}
/* ---------- body s ikonami psané rovnou v HTML editoru ----------
Nezávisí na nastavení šablony, klient si je celé upravuje v obsahu stránky.
Ikony se vkládají jako ze složky assets/img/icons/img/, kde mají
barvu zapečenou — currentColor by v spadl na černou. */
.prednosti{
list-style:none;margin:3em 0;padding:0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px var(--mezera);
}
.prednosti--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.prednosti--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.prednosti li{margin:0}
.prednosti img{width:62px;height:62px;display:block;margin-bottom:20px}
.prednosti h3{margin:0 0 9px;color:var(--navy-deep);font-size:1.22rem;line-height:1.2}
.prednosti p{margin:0;font-size:.95rem;line-height:1.65;color:var(--ink-soft)}
@media (max-width:900px){
.prednosti,.prednosti--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 36px}
}
@media (max-width:560px){
.prednosti,.prednosti--2,.prednosti--4{grid-template-columns:1fr;gap:28px}
}
.dodavatele a{color:inherit;border-bottom:1px solid rgba(138,99,35,.4);transition:color .16s,border-color .16s}
.dodavatele a:hover{color:var(--gold-text);border-bottom-color:var(--gold-text)}
.dodavatele li:hover{border-color:#B5A886}
.entry .pouceni-odkaz a{font-weight:600}
.entry .ucinnost{margin-top:2.4em;padding-top:1.4em;border-top:1px solid var(--kraft-line);font-size:.88rem;color:var(--ink-soft)}
/* bloky ze shortcodů dostanou celou šířku i v úzkém textovém sloupci */
.entry .places-grid,.entry .kontakty{max-width:none}
.places-grid--bez-mapy{grid-template-columns:1fr}
/* Kontakty: vlevo osoby a e-mail, vpravo emblém s fakturačními údaji. */
.kontakty{margin:2em 0}
.kontakty--s-logem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--mezera);align-items:start}
.kontakty-osoby{margin:0;display:grid;gap:20px}
.kontakt-osoba dt{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--navy-deep)}
.kontakt-osoba dd{margin:3px 0 0}
.kontakt-osoba dd a{font-size:1.05rem;color:var(--gold-text);font-weight:600}
.kontakty-email{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--kraft-line)}
.kontakty-email a{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--gold-text);border-bottom:0}
.kontakty-pozn{margin:10px 0 0;font-size:.9rem;color:var(--ink-soft)}
.kontakty-pozn a{color:var(--gold-text);font-weight:600}
.kontakty-znacka{text-align:center}
.kontakty-logo{display:block;width:132px;color:var(--navy);margin:0 auto}
.kontakty-logo svg{width:100%;height:auto;display:block}
.kontakty-fakturace{
margin:18px 0 0;font-style:normal;font-size:.86rem;line-height:1.6;color:var(--ink-soft);
display:grid;gap:1px;
}
.kontakty-fakturace strong{color:var(--navy-deep);font-weight:600}
@media (max-width:700px){
.kontakty--s-logem{grid-template-columns:1fr;gap:32px}
.kontakty-znacka{text-align:left}
.kontakty-logo{margin:0}
.kontakty-fakturace{justify-items:start}
}
.entry a{color:var(--gold-text);border-bottom:1px solid rgba(138,99,35,.45)}
.entry img{margin:2em 0;border-radius:3px}
.why{background:var(--ice);border-left:2px solid var(--navy-mid);padding:20px 24px;margin-bottom:44px}
.why h3{color:var(--navy-deep);margin:0 0 6px}
.why p{font-size:.9rem;line-height:1.65;color:#3E5464;margin:0}
/* ---------- formulář přihlášky (plugin dobary-brigada) ---------- */
/* Selektory odpovídají tomu, co plugin skutečně generuje: .dobary-group,
.dobary-field, .dobary-radios, .dobary-err. Rozvržení do dvou sloupců řídí
filtr dobary_fields ve functions.php, který polím přidává příznak 'wide'. */
.dobary-form{max-width:none;font-size:17px;line-height:1.7}
.dobary-form .dobary-group{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;
border:0;padding:0;margin:0 0 44px;background:none;
}
.dobary-form .dobary-group > legend{
grid-column:1 / -1;padding:0;margin:0 0 4px;border:0;float:none;width:auto;
font-family:var(--display);font-weight:700;font-size:1.32rem;color:var(--navy-deep);
}
.dobary-form .dobary-group > legend::after{content:'';display:block;width:44px;height:2px;background:var(--gold);margin-top:14px}
/* Skrytá legenda — v HTML zůstává pro odečítače obrazovky. */
.dobary-form .dobary-legend-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dobary-form .dobary-legend-hidden::after{display:none}
.dobary-form .dobary-field{margin:0;min-width:0}
.dobary-form .dobary-group-desc{grid-column:1 / -1;margin:0 0 4px;font-size:.86rem;color:var(--ink-soft)}
.dobary-form .dobary-subheading{grid-column:1 / -1;margin:14px 0 -4px;font-size:.86rem;font-weight:600;color:var(--navy-deep)}
.dobary-form .dobary-field--wide,.dobary-form .dobary-checkbox{grid-column:1 / -1}
.dobary-form label{display:block;font-size:.82rem;font-weight:600;color:var(--navy-deep);margin-bottom:6px}
.dobary-form .dobary-req{color:var(--gold-text)}
.dobary-form input[type=text],.dobary-form input[type=tel],.dobary-form input[type=email],
.dobary-form input[type=date],.dobary-form select,.dobary-form textarea{
width:100%;font-family:var(--body);font-size:.95rem;color:var(--ink);
background:#FBF9F3;border:1px solid var(--kraft-line);border-radius:2px;
padding:.68em .8em;transition:border-color .15s,box-shadow .15s;
}
.dobary-form select{
appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right .7em center;background-size:16px;padding-right:2.4em;
}
.dobary-form input:hover,.dobary-form select:hover,.dobary-form textarea:hover{border-color:#B5A886}
.dobary-form input:focus,.dobary-form select:focus,.dobary-form textarea:focus{outline:0;border-color:var(--navy-mid);box-shadow:0 0 0 3px rgba(43,94,140,.16)}
.dobary-form .dobary-help{display:block;font-size:.75rem;font-weight:400;color:var(--ink-soft);margin-top:5px;line-height:1.5}
.dobary-form .dobary-err{display:block;font-size:.78rem;color:var(--err);margin-top:5px;font-weight:500}
.dobary-form .dobary-field--error input,.dobary-form .dobary-field--error select,
.dobary-form .dobary-field--error textarea{border-color:var(--err);background:var(--err-bg)}
/* přepínače ANO/NE — plugin vkládá input do labelu, proto :has() */
.dobary-form .dobary-radios{display:flex;border:1px solid var(--kraft-line);border-radius:2px;overflow:hidden;width:max-content;max-width:100%}
.dobary-form .dobary-radio{
display:flex;align-items:center;margin:0;font-size:.85rem;font-weight:500;
padding:.6em 1.6em;background:#FBF9F3;color:var(--ink-soft);cursor:pointer;
transition:background .15s,color .15s;
}
.dobary-form .dobary-radio + .dobary-radio{border-left:1px solid var(--kraft-line)}
.dobary-form .dobary-radio input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dobary-form .dobary-radio:has(input:checked){background:var(--navy);color:#fff}
.dobary-form .dobary-radio:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:-2px}
/* Bez podpory :has() necháme nativní přepínače, ať jde vždy poznat, co je zvolené. */
@supports not selector(:has(*)){
.dobary-form .dobary-radios{border:0;width:auto;gap:20px}
.dobary-form .dobary-radio{background:none;padding:0;color:var(--ink)}
.dobary-form .dobary-radio + .dobary-radio{border-left:0}
.dobary-form .dobary-radio input{position:static;width:auto;height:auto;opacity:1;margin-right:.45em}
}
.dobary-form .dobary-consents{border-top:1px solid rgba(207,194,162,.7);padding-top:26px}
.dobary-form .dobary-checkbox label{
display:flex;gap:12px;align-items:flex-start;margin:0;
font-size:.88rem;font-weight:400;line-height:1.6;color:var(--ink);
}
.dobary-form .dobary-checkbox input[type=checkbox]{margin:.28em 0 0;width:18px;height:18px;flex:none;accent-color:var(--navy)}
/* Label je flex, takže každý potomek je samostatný prvek. Text s hvězdičkou
proto musí být v jednom obalu, jinak se hvězdička odtrhne na vlastní blok. */
.dobary-form .dobary-checkbox label > span{min-width:0}
.dobary-form .dobary-checkbox .dobary-req{white-space:nowrap}
/* Odkaz pod souhlasem. Odsazení 30 px = zaškrtávátko 18 px + mezera 12 px,
takže začíná přesně pod textem popisku. */
/* Odkaz má stejnou velikost jako text zaškrtávátka. Odsazení 30 px odpovídá
šířce zaškrtávátka (18 px) a mezeře (12 px), takže začíná pod textem. */
.dobary-form .dobary-consent-odkaz{margin:6px 0 0 30px;font-size:.88rem}
.dobary-form .dobary-consent-odkaz a{color:var(--gold-text);font-weight:600}
/* Potvrzení správnosti je poslední položka formuláře a nejdůležitější. */
.dobary-form .dobary-checkbox--duraz{margin-top:6px;padding-top:16px;border-top:1px solid rgba(207,194,162,.7)}
.dobary-form .dobary-checkbox--duraz label{font-size:.94rem}
.dobary-form .dobary-note{font-size:.8rem;line-height:1.6;color:var(--ink-soft);max-width:44ch;margin:0 0 22px}
.dobary-form .dobary-submit{
font-family:var(--body);font-size:.95rem;font-weight:600;color:#fff;background:var(--gold-btn);
border:0;border-radius:2px;padding:.9em 2em;cursor:pointer;transition:background .18s;
}
.dobary-form .dobary-submit:hover{background:var(--gold-btn-hover)}
.dobary-form .dobary-submit[disabled]{opacity:.7;cursor:default}
.dobary-form .dobary-formerr{background:var(--err-bg);border-left:2px solid var(--err);padding:14px 18px;margin-bottom:28px;font-size:.87rem;color:var(--err);font-weight:500}
/* POZOR: past na roboty. Bez tohoto pravidla se políčko zobrazí, člověk ho
vyplní a přihláška se tiše zahodí. Nikdy neodstraňovat. */
.dobary-form .dobary-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}
/* ---------- potvrzení po odeslání přihlášky ---------- */
/* Okno je vidět samo, bez JavaScriptu. Skript jen přidá zavírání a zamkne
rolování stránky pod ním. */
.dobary-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.dobary-modal-kryt{position:absolute;inset:0;background:rgba(6,24,42,.72);backdrop-filter:blur(2px)}
.dobary-modal-okno{
position:relative;z-index:1;background:var(--paper);
border-top:3px solid var(--gold-btn);
max-width:520px;width:100%;padding:40px 40px 34px;text-align:center;
box-shadow:0 30px 70px rgba(3,17,33,.45);
animation:dobary-modal-in .28s ease-out both;
}
.dobary-modal-okno:focus{outline:0}
@keyframes dobary-modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dobary-modal-znak{display:block;width:52px;height:52px;margin:0 auto 20px;color:var(--gold-btn)}
.dobary-modal-znak svg{width:100%;height:100%;display:block}
.dobary-modal-okno h3{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--navy-deep);margin:0 0 14px}
.dobary-modal-okno p{font-size:.98rem;line-height:1.65;color:var(--ink);margin:0 0 .8em}
.dobary-modal-pozn{font-size:.86rem!important;color:var(--ink-soft)!important;margin:18px 0 0!important;padding-top:16px;border-top:1px solid var(--kraft-line)}
/* Dvě třídy v selektoru schválně: pravidlo .entry a má vyšší specificitu než
jedna třída a obarvilo by tlačítko na zlatý text s podtržením. */
.dobary-modal .dobary-modal-ok{
display:inline-block;margin-top:26px;background:var(--gold-btn);color:#fff;
font-size:.95rem;font-weight:600;padding:.9em 2.4em;border-radius:2px;
border-bottom:0;text-decoration:none;transition:background .18s;
}
.dobary-modal .dobary-modal-ok:hover,
.dobary-modal .dobary-modal-ok:focus-visible{background:var(--gold-btn-hover);color:#fff}
.dobary-modal-otevreno,.dobary-modal-otevreno body{overflow:hidden}
/* Bez JavaScriptu okno zůstane, ale stránka pod ním se rolovat může —
proto musí být okno samo prohledatelné, když se do něj text nevejde. */
@media (max-height:620px){
.dobary-modal{align-items:flex-start;overflow:auto}
.dobary-modal-okno{margin:24px 0;padding:30px 28px 26px}
.dobary-modal-znak{width:42px;height:42px;margin-bottom:14px}
}
@media (max-width:520px){
.dobary-modal{padding:16px}
.dobary-modal-okno{padding:30px 24px 26px}
.dobary-modal-okno h3{font-size:1.35rem}
.dobary-modal-ok{width:100%;text-align:center}
}
/* ---------- animace odhalení ---------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rise.in{opacity:1;transform:none}
@media (max-width:1280px){
.wrap,.nav-in,.foot-in{padding-left:32px;padding-right:32px}
.hero-in{padding-left:32px;padding-right:32px}
.places-grid{gap:36px}
.layout{gap:44px;grid-template-columns:minmax(0,1fr) 320px}
}
@media (max-width:1120px){
/* Čtyři sloupce se nevejdou: emblém s nadpisem zůstanou vedle sebe,
osoby se přesunou pod ně. */
.contact-grid{grid-template-columns:180px minmax(0,1fr);gap:36px 48px;align-items:start}
.contact-osoba{grid-column:span 1}
.contact-dotaz{grid-column:2}
}
@media (max-width:1080px){
.layout{grid-template-columns:1fr;gap:36px}
.side{grid-column:1;grid-row:1;position:static}
.contentcol{grid-column:1;grid-row:2;max-width:none}
}
@media (max-width:980px){
.marks{grid-template-columns:1fr 1fr;gap:30px 26px}
.places-grid{grid-template-columns:1fr;gap:40px}
.map{position:static;max-width:520px}
.flow{grid-template-columns:1fr 1fr}
.cards{grid-template-columns:1fr}
}
@media (max-width:900px){
/* Pod 900 px se do dvou sloupců nic nevejde, takže mřížka jde pryč —
jinak by druhý sloupec držel prázdnou mezeru 48 px. */
.entry{display:block}
.entry > *,.contentcol .entry > *{max-width:none}
.nav{position:relative}
.nav-links{display:none}
.nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--navy-deep);flex-direction:column;align-items:flex-start;gap:0;padding:8px 32px 24px;border-top:1px solid rgba(255,255,255,.1);z-index:50}
.nav-links.open ul{flex-direction:column;align-items:flex-start;gap:0;width:100%}
.nav-links.open a{padding:12px 0;width:100%;display:block}
.nav-toggle{display:block}
.hero-in{padding:60px 32px 124px;min-height:min(72vh,620px)}
.hero-copy{max-width:none}
.hero-lead{max-width:none}
/* Na úzké obrazovce leží text přes celou šířku, takže ztmavení je nutné. */
.hero-photo{object-position:64% center}
.hero::before{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(to bottom,
rgba(10,46,82,.93) 0%,
rgba(10,46,82,.86) 42%,
rgba(10,46,82,.6) 68%,
rgba(10,46,82,.25) 100%);
}
.about-grid,.brigada-grid{grid-template-columns:1fr;gap:40px}
.section{padding:80px 0}
.marks{margin-top:44px}
}
@media (max-width:820px){
/* Dva kontakty vedle sebe se sem už nevejdou. */
.contact-grid{grid-template-columns:1fr;gap:32px;align-items:start}
.contact-dotaz{grid-column:auto}
.contact-osoba dt,
.contact-osoba dd a{white-space:normal}
}
@media (max-width:760px){
.head{padding:52px 0 84px}
.head-water{opacity:.44;
-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.55) 64%,rgba(0,0,0,1) 100%);
mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,.55) 64%,rgba(0,0,0,1) 100%)}
.dobary-form .dobary-group{grid-template-columns:1fr}
.dobary-form .dobary-radios{width:100%}
.dobary-form .dobary-radio{flex:1;justify-content:center;padding:.6em 1em}
}
@media (max-width:620px){
.wrap,.nav-in,.foot-in{padding-left:22px;padding-right:22px}
.nav-in{padding-top:20px;padding-bottom:20px}
.contact-grid{grid-template-columns:1fr;gap:30px}
.contact-logo svg{max-width:132px}
/* Na úzké obrazovce se jméno i telefon musí smět zalomit, jinak přetečou. */
.contact-osoba dt,
.contact-osoba dd a{white-space:normal}
.contact-osoba dt{font-size:1.02rem}
.foot-in{flex-direction:column;align-items:flex-start;gap:22px}
.foot-sign svg{height:28px}
.hero-in{padding:48px 22px 112px}
.logo svg,.logo img{width:150px}
.marks,.flow{grid-template-columns:1fr}
.prodej{padding:72px 0}
.table thead{display:none}
.table tbody tr{display:block;padding:18px 0;border-bottom:1px solid rgba(207,194,162,.6)}
.table td{display:block;border:0;padding:2px 0}
.table td.place-name{font-size:1.1rem;white-space:normal;margin-bottom:4px}
/* Menší pečeť přesahuje méně; odsazení pod ní se přepočítá samo. */
:root{--pecet-presah:36px}
.seal{width:104px;height:104px}
/* Menší pečeť visí o 36 px, mezeru držíme kolem 56 px. */
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.rise{opacity:1;transform:none;transition:none}
}