/* ══════════════════════════════════════════════════════════════════════════
   Zahradnictví Domažlice
   Nasazení: kopie patří do www/data/zahradnik/css/zahradnik.css (viz README).

   Web má působit jako poctivá práce, ne jako reklama. Proto:
   – papírový podklad místo bílé, ať stránka nesvítí,
   – barvy z přírody: zeleň, hlína, kámen,
   – fotky jsou hlavní obsah, zbytek jim jen dělá místo,
   – žádné přechody, stíny „na efekt“ ani animace bez důvodu.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Podklad a text */
    --paper: #fdfbf7;
    --paper-raised: #ffffff;
    --paper-sunken: #f5f1e8;
    --ink: #1c1917;
    --ink-soft: #44403c;
    --muted: #78716c;
    --line: #e7e2d6;
    --line-strong: #d6cfbd;

    /* Zeleň – hlavní barva značky */
    --green: #166534;
    --green-dark: #14532d;
    --green-soft: #e8f0e6;
    --green-line: #bdd3c0;

    /* Teplý akcent na odznaky a drobnosti */
    --clay: #9a5b33;
    --clay-soft: #f7ede4;

    /* Stavy */
    --warn: #b45309;
    --warn-soft: #fef6e7;
    --danger: #b91c1c;
    --danger-soft: #fdf0f0;

    --radius: 6px;
    --radius-lg: 12px;

    --shell: 1140px;
    --measure: 62ch;

    --font: 'Rubik', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
}

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

body.zahradnik {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.01em;
}

a { color: var(--green); }
a:hover { color: var(--green-dark); }

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

.shell {
    width: min(100% - 2.5rem, var(--shell));
    margin-inline: auto;
}

.section { padding: 4.5rem 0; }
.section--tight { padding: 3rem 0; }
.section--sunken { background: var(--paper-sunken); }

.section-head { max-width: var(--measure); margin-bottom: 2.5rem; }
.section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: .75rem; }
.section-head p { color: var(--ink-soft); margin: 0; font-size: 1.05rem; }

.eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--clay);
    margin-bottom: .6rem;
}

/* ── tlačítka ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .75rem 1.4rem;
    border: 1px solid var(--green);
    border-radius: var(--radius);
    background: transparent;
    color: var(--green);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.btn:hover { background: var(--green); color: #fff; }

.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

.btn--ghost { border-color: var(--line-strong); color: var(--ink-soft); }
.btn--ghost:hover { background: var(--paper-sunken); color: var(--ink); border-color: var(--line-strong); }

.btn--danger { border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger); color: #fff; }

/* Telefon je na tomhle webu nejdůležitější tlačítko – proto je největší. */
.btn--lg { padding: .95rem 1.75rem; font-size: 1.05rem; }
.btn--sm { padding: .4rem .8rem; font-size: .88rem; }
.btn--block { width: 100%; }

/* Odkaz na kotvu (#poptavka) by jinak nadpis odscroloval pod lepivou
   hlavičku – tohle mu nad ním nechá místo. */
[id] { scroll-margin-top: 5.5rem; }

/* ── dvousloupcové rozvržení ────────────────────────────────────────────── */
/* Pevná šířka postranního sloupce se musí na úzkém displeji zrušit, jinak
   druhý sloupec přeteče přes první. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    align-items: start;
}

.split--aside-left { grid-template-columns: 320px minmax(0, 1fr); gap: 1.25rem; }

@media (max-width: 860px) {
    .split,
    .split--aside-left { grid-template-columns: 1fr; gap: 1.5rem; }

    /* Kontakt patří nad formulář – kdo chce volat, nemá projíždět osm polí. */
    .split > .contact-card { order: -1; }
}

/* ── hlavička ───────────────────────────────────────────────────────────── */
.topbar {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
}

.topbar__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .9rem 0;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ink);
    text-decoration: none;
}

.brand svg { width: 26px; height: 26px; color: var(--green); flex: none; }

.topbar nav { display: flex; gap: 1.25rem; margin-left: auto; align-items: center; flex-wrap: wrap; }

.topbar nav a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .96rem;
}

.topbar nav a:hover { color: var(--green); }

/* Telefon v hlavičce, ať ho nikdo nemusí hledat. */
.topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    color: var(--green) !important;
    white-space: nowrap;
}

@media (max-width: 860px) {
    /* Tři řádky hlavičky zabíraly skoro půl displeje. Nahoře držet nemusí –
       telefon je pořád po ruce v liště dole. */
    .topbar { position: static; }
    .topbar__inner { padding: .7rem 0; gap: .5rem 1rem; }
    .brand { font-size: 1rem; }
    .topbar nav { margin-left: 0; width: 100%; gap: 1rem; }
    .topbar nav a { font-size: .95rem; }
    .topbar__phone { width: 100%; }

    [id] { scroll-margin-top: 1rem; }
}

/* ── lišta s telefonem (jen mobil) ──────────────────────────────────────── */
/* U řemeslníka je telefon to hlavní, co má web zprostředkovat. Na mobilu
   proto zůstává na dosah, ať je návštěvník kdekoli na stránce. */
.call-bar { display: none; }

@media (max-width: 860px) {
    .call-bar {
        display: block;
        position: fixed;
        inset: auto 0 0 0;
        padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
        background: rgba(253, 251, 247, .97);
        border-top: 1px solid var(--line-strong);
        z-index: 40;
    }

    /* Aby lišta nepřekryla patičku ani poslední pole formuláře. */
    body.zahradnik { padding-bottom: 5rem; }
}

/* Ve správě webu lišta nemá co dělat. */
body.zahradnik-admin .call-bar { display: none; }

@media print {
    .call-bar { display: none; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    background: var(--green-dark);
    color: #fff;
    overflow: hidden;
}

.hero__photo {
    position: absolute;
    inset: 0;
}

.hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tmavý závoj kvůli čitelnosti textu. Plná barva s průhledností, ne
   přechod – přechody přes fotku vypadají jako z šablony. */
.hero__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 83, 45, .72);
}

.hero__inner {
    position: relative;
    padding: 5.5rem 0 5rem;
    max-width: 44rem;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.1rem);
    margin-bottom: 1.1rem;
}

.hero__subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 2rem;
    max-width: 38rem;
}

.hero__actions { display: flex; gap: .85rem; flex-wrap: wrap; align-items: center; }

.hero .btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--green-dark);
}

.hero .btn--primary:hover { background: var(--paper-sunken); border-color: var(--paper-sunken); }

.hero .btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.hero__note {
    margin-top: 1.75rem;
    font-size: .95rem;
    color: rgba(255, 255, 255, .8);
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── pás s výhodami ─────────────────────────────────────────────────────── */
.strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--line);
    border-bottom: 1px solid var(--line);
}

.strip__item {
    background: var(--paper);
    padding: 1.4rem 1.5rem;
    display: flex;
    gap: .85rem;
    align-items: flex-start;
}

.strip__item svg { width: 22px; height: 22px; color: var(--green); flex: none; margin-top: .2rem; }
.strip__item strong { display: block; font-size: .98rem; }
.strip__item span { color: var(--muted); font-size: .9rem; }

/* ── karty prací ────────────────────────────────────────────────────────── */
.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.5rem;
}

.service {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.service__photo {
    aspect-ratio: 4 / 3;
    background: var(--paper-sunken);
    overflow: hidden;
}

.service__photo img { width: 100%; height: 100%; object-fit: cover; }

.service__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }

.service__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--green-soft);
    color: var(--green);
    display: grid;
    place-items: center;
    margin-bottom: .25rem;
}

.service__icon svg { width: 22px; height: 22px; }

.service h3 { font-size: 1.2rem; }
.service p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

.service__foot {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.service__price { font-weight: 600; color: var(--green); }

/* ── galerie ────────────────────────────────────────────────────────────── */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }

.filter {
    padding: .45rem .95rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper-raised);
    color: var(--ink-soft);
    font-size: .92rem;
    text-decoration: none;
    cursor: pointer;
}

.filter:hover { border-color: var(--green); color: var(--green); }
.filter.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.filter__count { opacity: .65; font-size: .85em; margin-left: .2rem; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.photo {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper-sunken);
    border: 1px solid var(--line);
    cursor: zoom-in;
}

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

.photo:hover img { transform: scale(1.03); }

/* Popisek se ukáže až na najetí – fotka má být vidět celá. */
.photo__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.5rem .8rem .7rem;
    background: linear-gradient(to top, rgba(28, 25, 23, .78), transparent);
    color: #fff;
    font-size: .88rem;
    opacity: 0;
    transition: opacity .2s ease;
}

.photo:hover .photo__caption,
.photo:focus-visible .photo__caption { opacity: 1; }

@media (hover: none) {
    /* Na dotykovém displeji není najetí – popisek prostě svítí. */
    .photo__caption { opacity: 1; }
}

/* ── lightbox ───────────────────────────────────────────────────────────── */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, .94);
    display: grid;
    place-items: center;
    z-index: 100;
    padding: 1.5rem;
}

.lightbox[hidden] { display: none; }

.lightbox img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: var(--radius);
}

.lightbox__caption {
    color: #fff;
    text-align: center;
    margin-top: 1rem;
    font-size: .95rem;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    border: 0;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav--prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .25); }

/* ── o mně ──────────────────────────────────────────────────────────────── */
.about { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; }
.about__text { max-width: var(--measure); white-space: pre-line; color: var(--ink-soft); }
.about__photo { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }

@media (max-width: 820px) {
    .about { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── působnost ──────────────────────────────────────────────────────────── */
.area { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.area__list { color: var(--ink-soft); }

.area__map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    min-height: 280px;
    background: var(--paper-sunken);
}

.area__map iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; }

.area__placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 280px;
    color: var(--muted);
    text-align: center;
    padding: 2rem;
}

@media (max-width: 820px) {
    .area { grid-template-columns: 1fr; }
}

/* ── formulář ───────────────────────────────────────────────────────────── */
.form-grid { display: grid; gap: 1.1rem; max-width: 620px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

@media (max-width: 620px) {
    .form-row { grid-template-columns: 1fr; }
}

.form-field { display: grid; gap: .35rem; }
.form-field > label { font-size: .93rem; font-weight: 500; color: var(--ink-soft); }

.field {
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper-raised);
    color: var(--ink);
    font: inherit;
    /* 16px a víc – menší písmo na iPhonu způsobí přiblížení stránky. */
    font-size: 1rem;
    /* Pevná výška řádku: bez ní si <select> vezme vlastní z prohlížeče
       a vedle <input> ve dvousloupcovém řádku pak nesedí. */
    line-height: 1.45;
}

/* Nativní <select> vypadá v každém systému jinak a je vyšší než input.
   Vlastní šipka srovná výšku i vzhled. */
select.field {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: 15px;
}

/* Pole vedle sebe začínají na stejné lince, i když má jedno pod sebou
   nápovědu a druhé ne. */
.form-row > .form-field { align-content: start; }

.field:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-soft);
}

textarea.field { resize: vertical; min-height: 7rem; }

.form-hint { font-size: .87rem; color: var(--muted); }
.form-error { font-size: .9rem; color: var(--danger); }

/* Honeypot – pro člověka neviditelné, pro robota lákavé. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.checkbox label, label.checkbox {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .95rem;
    cursor: pointer;
}

.checkbox input[type="checkbox"] { accent-color: var(--green); margin: 0; }

.contact-card {
    background: var(--green-soft);
    border: 1px solid var(--green-line);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
}

.contact-card dl { margin: 0; display: grid; gap: .9rem; }
.contact-card dt { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.contact-card dd { margin: 0; font-weight: 500; }
.contact-card a { text-decoration: none; }

/* Formuláře bývají mřížka o dvou sloupcích. Hláška o chybě patří přes
   celou šířku, jinak by zabrala první buňku a rozhodila zbytek. */
.form-grid > .alert,
.admin-form > .alert,
.split > .alert { grid-column: 1 / -1; }

.alert {
    padding: .95rem 1.15rem;
    border: 1px solid var(--line-strong);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--paper-raised);
    margin-bottom: 1.25rem;
}

.alert--success { border-left-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.alert--warning { border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.alert--danger { border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.alert--info { border-left-color: var(--line-strong); }

.empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}

/* ── právní stránky ─────────────────────────────────────────────────────── */
/* Delší souvislý text: užší sloupec a větší rozestupy, ať se dá číst. */
.legal { max-width: var(--measure); }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 1.25rem; }
.legal h2 { font-size: 1.25rem; margin: 2.5rem 0 .75rem; }
.legal h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; color: var(--ink-soft); }
.legal p { margin: 0 0 1rem; color: var(--ink-soft); }
.legal ul { margin: 0 0 1.25rem; padding-left: 1.3rem; color: var(--ink-soft); }
.legal li { margin-bottom: .5rem; }
.legal strong { color: var(--ink); }

.legal__lead {
    font-size: 1.1rem;
    color: var(--ink) !important;
    padding: 1.15rem 1.3rem;
    background: var(--green-soft);
    border-left: 3px solid var(--green);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.legal__table { overflow-x: auto; margin-bottom: 1.25rem; }
.legal__table .table { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.legal__table code { background: var(--paper-sunken); padding: .1rem .35rem; border-radius: 3px; font-size: .9em; }

.legal__updated {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: .9rem;
    color: var(--muted) !important;
}

/* ── patička ────────────────────────────────────────────────────────────── */
.footer {
    background: var(--green-dark);
    color: rgba(255, 255, 255, .85);
    padding: 3rem 0 2rem;
    margin-top: 4rem;
}

.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.footer strong { color: #fff; display: block; margin-bottom: .5rem; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__bottom {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: .88rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   Správa webu
   Stejná paleta, jen hustší. Zahradník v ní nebude trávit hodiny, takže
   je psaná tak, aby se v ní nedalo ztratit: velká tlačítka, jasné popisky.
   ══════════════════════════════════════════════════════════════════════════ */

body.zahradnik-admin { background: var(--paper-sunken); }

.admin-top {
    background: var(--green-dark);
    color: #fff;
    padding: .85rem 0;
    position: sticky;
    top: 0;
    z-index: 30;
}

.admin-top__inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.admin-top__brand { color: #fff; text-decoration: none; font-weight: 600; }

/* Bez tohohle si odkaz při najetí vezme globální a:hover, což je
   --green-dark – přesně barva pozadí lišty, takže nápis zmizí. */
.admin-top__brand:hover,
.admin-top__brand:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.admin-top nav { display: flex; gap: .4rem; margin-left: auto; flex-wrap: wrap; align-items: center; }

.admin-top nav a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    padding: .4rem .8rem;
    border-radius: var(--radius);
    font-size: .95rem;
}

.admin-top nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.admin-top nav a.is-active { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 500; }

.admin-top .count {
    display: inline-block;
    min-width: 20px;
    padding: 0 .35rem;
    margin-left: .35rem;
    background: #fff;
    color: var(--green-dark);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    text-align: center;
}

.admin-main { padding: 2rem 0 4rem; }

.admin-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.admin-head h1 { font-size: 1.55rem; }
.admin-head__actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.panel {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.panel + .panel { margin-top: 1.25rem; }

.panel__head {
    padding: 1rem 1.3rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.panel__head h2 { font-size: 1.05rem; }
.panel__head .btn { margin-left: auto; }
.panel__hint { color: var(--muted); font-size: .9rem; width: 100%; margin: 0; }
.panel__body { padding: 1.3rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }

.stat {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
}

.stat__value { font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.stat__label { color: var(--muted); font-size: .9rem; }
.stat--highlight { background: var(--green-soft); border-color: var(--green-line); }
.stat--highlight .stat__value { color: var(--green-dark); }

.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th {
    text-align: left;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--line);
    font-size: .82rem;
    color: var(--muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.table td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
/* Flex patří na vnitřní <div>, nikdy na <td>. Buňka s display: flex
   vypadne z rozvržení tabulky – dostane výšku podle svého obsahu,
   takže její spodní čára nesedí s čarou zbytku řádku, a nepodílí se
   ani na výpočtu šířky sloupců. */
.table__actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 500;
    border: 1px solid var(--line-strong);
    background: var(--paper-raised);
    color: var(--ink-soft);
    text-decoration: none;
}

.badge--new { background: var(--green-soft); border-color: var(--green-line); color: var(--green-dark); }
.badge--read { background: var(--clay-soft); border-color: #e6d3c2; color: var(--clay); }
.badge--done { background: var(--paper-sunken); color: var(--muted); }
.badge.is-active { background: var(--green); border-color: var(--green); color: #fff; }

/* Úprava obsahu: jedna sekce = jeden panel ve stejném pořadí jako na webu. */
.section-editor + .section-editor { margin-top: 1.25rem; }

.section-editor__label { font-weight: 600; font-size: 1.05rem; }
.section-editor__hint { color: var(--muted); font-size: .9rem; margin: .2rem 0 0; }

/* Výběr fotek: zaškrtávátko schované pod náhledem, klikací je celá fotka. */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; }

.picker label {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--line);
    cursor: pointer;
}

.picker img { width: 100%; height: 100%; object-fit: cover; }
.picker input { position: absolute; opacity: 0; pointer-events: none; }

.picker input:checked + img,
.picker label:has(input:checked) { border-color: var(--green); }

/* Zaškrtnutá fotka dostane zelený rámeček a fajfku – bez toho by nebylo
   poznat, co je vybrané. */
.picker label:has(input:checked)::after {
    content: '✓';
    position: absolute;
    top: .4rem;
    right: .4rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .95rem;
}

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }

.media-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper-raised);
}

.media-item.is-edited { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-soft); }
.media-item__photo { aspect-ratio: 1; background: var(--paper-sunken); display: block; }
.media-item__photo img { width: 100%; height: 100%; object-fit: cover; }
.media-item__body { padding: .5rem .6rem; font-size: .82rem; }
.media-item__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-item__meta { color: var(--muted); font-size: .78rem; display: flex; gap: .4rem; align-items: center; }
.media-item__actions { display: flex; gap: .4rem; padding: 0 .6rem .6rem; }

.admin-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }

@media (max-width: 900px) {
    .admin-form { grid-template-columns: 1fr; }
}

/* Fotky: vlevo nahrávání, vpravo mřížka. Na mobilu pod sebou. */
.admin-split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.25rem; align-items: start; }

@media (max-width: 900px) {
    .admin-split { grid-template-columns: 1fr; }
}

@media print {
    .topbar, .footer, .admin-top, .btn { display: none; }
}