/* ============================================================
   medihelix.cz — systemove stranky kostry jhds.WEB

   ⚠ OŘEZANO při překlopení do designové šablony (2026-08-04).
   Původní style.css nesl kompletní vzhled kostry — reset, typografii,
   .container, .site-header, .site-footer, .card, .button, .hero.
   Všechno to koliduje s Cardií a Bootstrapem: `.site-header` dávalo
   hlavičce bílé pozadi + 32px padding (místo průhledného, aby prosvítal
   modrý body) a `.container` přepísalo Bootstrap grid.

   Zbylo jen to, co šablona NEMÁ a co potřebují stránky kostry:
   aktuality, 404/403/500, kontaktní formulář a a11y.
   Vzhled webu řídí assets/css/main.css.
   ============================================================ */

/* ----------------------------------------
   0. Tokens (design tokens — jediné místo pro brand/theming)
   Konvence jmen zrcadlí admin.css (--c-*). Per-projekt rebrand
   = přepiš tenhle blok, zbytek souboru na barvy nesahá.
   ---------------------------------------- */
:root {
    /* ⚠ REBRAND (2026-08-08). Do teď to byla výchozí ZELENÁ paleta kostry —
       nikdy nepřebarvená, takže /aktuality, /404, /gdpr a /kontakt měly zelený
       fokusový prstenec a zelené hovery uvnitř modrého webu. Hodnoty jsou
       navázané na tokeny z main.css, ať existuje jeden zdroj pravdy. */
    --font: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --c-bg: #f0f9ff;
    --c-surface: #fff;
    --c-primary: #0a6ea9;
    --c-primary-dark: #075889;
    --c-on-primary: #fff;
    --c-ink: #082f49;
    --c-text: #555;
    --c-text-soft: #666;
    --c-muted: #64748b;
    --c-border: #d5e3f5;
    --c-border-soft: #e6f1fb;
    --c-input-border: #cbd5e1;
    --c-inverse-bg: #082f49;
    --c-inverse-text: #dbeafe;

    --c-error: #b23b3b;
    --c-error-bg: #fbeaea;
    --c-error-text: #8a2b2b;
    --c-error-border: #e3b6b6;
    --c-success-bg: #e8f1ea;
    --c-success-text: #235636;
    --c-success-border: #b8d6c2;

    --radius: 6px;
    --radius-sm: 4px;

    /* Spacing scale (mirror admin.css --space-*). Pro nový kód — existující
       deklarace se migrují postupně, ať se nezmění vizuální baseline naráz. */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Minimální tap target. 44px = Apple HIG / Material 48dp a MUST položka (i)
       02-AUDIT. (WCAG 2.2 AA 2.5.8 žádá jen 24×24 — tohle je přísnější záměrně.)
       Nesnižovat při rebrandu; inline odkazy uvnitř věty jsou z pravidla mimo. */
    --tap-min: 44px;
}


.articles {
    padding: 1.5rem 0 2.5rem;
}
.articles__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
/* Samostatný odkaz (ne uvnitř věty) → plnohodnotný tap target. */
.articles__more {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    font-size: .95rem;
}
.articles__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.article-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.article-card__media {
    background: var(--c-border-soft);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.article-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-card__body {
    padding: 1rem 1.1rem 1.2rem;
}
.article-card__date {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: var(--c-text-soft);
    /* Zamerne skoro nula — datum a nadpis patri k sobe jako jeden blok. */
    margin-bottom: .1rem;
}
/* Nadpis v Nunito jako zbytek webu (style.css je oreznuta a font by jinak
   spadl na Mulish z body) a v --theme-text, ne --theme: pri 1.1rem potrebuje
   text 4,5:1, coz svetla --theme (3,28:1) nesplnuje. Vizualne skoro totez. */
/* Dve tridy zamerne: `.page h2` (0,1,1) nastavuje nadpisum margin-top 40px
   a prebilo by jednu tridu bez ohledu na poradi v souboru. Datum by tak
   zustalo od nadpisu odtrzene o 40 px. */
.article-card .article-card__title {
    font-family: var(--header-font);
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 .4rem;
}
.article-card__title a {
    color: var(--theme-text);
    text-decoration: none;
}
.article-card__title a:hover { color: var(--c-primary); text-decoration: underline; }

.article-card__more {
    margin-top: .9rem;
}
.article-card__media a { display: block; height: 100%; }
.article-card__excerpt {
    color: var(--c-text-soft);
    font-size: .95rem;
}
.article-card__excerpt p:last-child { margin-bottom: 0; }

.articles__empty {
    color: var(--c-muted);
    font-style: italic;
    padding: 1rem 0;
}

/* Rytmus 40 px jako u ostatních sekcí webu — stránky kostry leží pod modrým
   hero z partialu, takže odsazení musí sedět se zbytkem. */
.page {
    padding-block: 40px;
}
.page > h1 { margin-bottom: 1rem; }

/* Detail aktuality (_pages/aktuality/detail.php) */
.article-detail__meta { margin-top: -.5rem; }
.article-detail__media {
    margin: 1.5rem 0;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;   /* rezervuje výšku → žádný CLS (pipeline dává 1920×1080) */
}
.article-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-detail__body { max-width: 70ch; }
.article-detail__back { margin-top: 2rem; }

/* Preview banner (tokenový náhled z adminu — detail.php) */
.preview-banner {
    padding: .6rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-sm);
    background: var(--c-error-bg);
    color: var(--c-error-text);
    border: 1px solid var(--c-error-border);
    font-weight: 600;
}

/* Stránkování archivu (_pages/aktuality.php) */
.pager {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.pager__info { color: var(--c-muted); font-size: .95rem; }

.breadcrumb {
    font-size: .9rem;
    color: var(--c-muted);
    margin-bottom: 1rem;
}
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-ink); }
.breadcrumb [aria-current="page"] { color: var(--c-ink); }


/* ----------------------------------------
   7a. Error stránka (404 — _pages/404.php)
   ---------------------------------------- */
.error-page {
    padding-block: 6rem;
    text-align: center;
}
.error-page__code {
    margin: 0 0 .5rem;
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
    color: var(--c-muted);   /* ne --c-border (token pro rámečky, 1,24:1 na text) */
}

/* ----------------------------------------
   7b. Kontaktní formulář (opt-in modul)
   ---------------------------------------- */
.contact-form {
    max-width: 36rem;
    margin-top: 1.5rem;
}
.form-row {
    margin: 0 0 1rem;
}
.form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
}
.form-row input,
.form-row textarea {
    width: 100%;
    min-height: var(--tap-min);
    padding: .6rem .7rem;
    font: inherit;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid var(--c-input-border);
    border-radius: var(--radius-sm);
}
.form-row textarea { resize: vertical; }
.form-row input:focus,
.form-row textarea:focus {
    outline: 2px solid var(--c-primary);
    outline-offset: 1px;
    border-color: var(--c-primary);
}
.form-row.has-error input,
.form-row.has-error textarea {
    border-color: var(--c-error);
}
.form-row__error {
    display: block;
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--c-error);
}
.form-error,
.form-success {
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    margin: 1rem 0;
}
.form-error {
    background: var(--c-error-bg);
    color: var(--c-error-text);
    border: 1px solid var(--c-error-border);
}
.form-success {
    background: var(--c-success-bg);
    color: var(--c-success-text);
    border: 1px solid var(--c-success-border);
}
.form-note {
    font-size: .85rem;
    color: var(--c-muted);
    margin: 1rem 0 0;
}
.form-actions { margin-top: 1.2rem; }

/* Honeypot (form.php::contact_honeypot_field) — vizuálně mimo obraz.
   Náhrada za inline style= (CSP style-src 'self' bez 'unsafe-inline'). */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ----------------------------------------
   9. A11y (skip-link, focus, sr-only)
   ---------------------------------------- */
/* Screen-reader-only utilita (vizuálně skryté, čtečka čte). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-link — mimo obraz, objeví se při fokusu (Tab z topu). Cíl <main id="main">. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--c-inverse-bg);
    color: var(--c-on-primary);
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* Viditelný klávesnicový focus — NEZRUŠIT bez náhrady (a11y). */
:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}
/* Patička má tmavé pozadí (--c-inverse-bg): --c-primary outline na něm dává jen
   2,0:1 (pod WCAG 1.4.11 hranicí 3:1). Světlý inverse-text = 10,3:1. */
.ta-footer :focus-visible {
    outline-color: var(--c-inverse-text);
}

/* ============================================================
   Doplnky z frontend review (2026-08-08)
   ============================================================ */

/* .button / .button--ghost pouzival markup na 6 mistech (strankovani archivu,
   „Zpet na uvod" na 404, odeslani na /kontakt), ale definice se pri orezani
   souboru ztratila — tlacitka se vykreslovala jako holy systemovy prvek nebo
   jako podtrzeny text s tap targetem ~26 px. */
.button,
.button--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--tap-min);
    padding: .6rem 1.2rem;
    border: 1px solid var(--c-primary);
    border-radius: var(--radius);
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}

.button:hover,
.button:focus-visible {
    background: var(--c-primary-dark);
    border-color: var(--c-primary-dark);
    color: var(--c-on-primary);
}

.button--ghost {
    background: transparent;
    color: var(--c-primary);
}

.button--ghost:hover,
.button--ghost:focus-visible {
    background: var(--c-primary);
    color: var(--c-on-primary);
}

/* Archiv aktualit jel natrvalo v jednom sloupci — style.css nemela jedinou
   @media, takze na sirokem kontejneru vysla karta ~1600 px a s pomerem 16:9
   z ni byl blok 1600x900 na jeden clanek. */
@media (min-width: 600px) {
    .articles__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .articles__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Globalni reset v main.css srazi marginy u p a h1–h6 na nulu. Detail clanku
   ma vlastni vyjimku, /gdpr a /404 ne — vykreslovaly se jako slepenec bez
   jedine mezery, coz je u pravne povinne stranky vic nez kosmetika. */
.page p,
.page ul,
.page ol {
    margin-bottom: 20px;
}

.page h2,
.page h3 {
    margin-top: 40px;
    margin-bottom: 12px;
}

.page ul,
.page ol {
    padding-left: 22px;
    list-style: revert;
}

.page address {
    font-style: normal;
}

.error-page h1 {
    margin-bottom: .5rem;
}

.error-page p {
    margin-bottom: 1rem;
}

/* Skupina zaškrtávátek v poptávkovém formuláři (type=checkboxes).
   Fieldset má vlastní UA rámeček a odsazení — resetuje se, vzhled řídí
   .form-row jako u ostatních polí. */
.form-check-group {
    border: 0;
    padding: 0;
    margin: 0 0 1.2rem;
}

.form-check-group legend {
    padding: 0;
    margin-bottom: .6rem;
    font-weight: 600;
    color: var(--c-ink);
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    /* Celý řádek je klikatelný cíl — label je svázaný přes for, takže
       tap target není jen 16px čtvereček. */
    min-height: var(--tap-min);
    padding: .35rem 0;
}

.form-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: .15rem;
    accent-color: var(--c-primary);
}

.form-check label {
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

@media (min-width: 700px) {
    /* Osm voleb pod sebou je zbytečně dlouhý sloupec. */
    .form-check-group .form-check {
        display: inline-flex;
        width: calc(50% - .5rem);
        vertical-align: top;
    }
}

/* Formulářová stránka: obsah vycentrovaný na čitelnou šířku. Bez toho pole
   visela u levého kraje a napravo zůstal metr prázdna.
   U TEXTOVÝCH stránek se šířka záměrně neomezuje — u článků to klient
   výslovně nechtěl; tohle platí jen pro .page--form. */
.page--form > * {
    max-width: 760px;
    margin-inline: auto;
}

/* Odkaz stylovaný jako tlačítko (např. „Nezávazná poptávka" na /kontakt)
   nesmí zdědit podtržení z globálního `a`. */
a.button {
    text-decoration: none;
}