/* ==========================================================================
   AHCZSK.eu — návrh homepage, v1.1 (po revizi 8. 9. 2026)
   Design systém převzat z Kokula.cz a MIstudio.cz (projekty/AIGenerated/).
   Barva: brand navy #030357 z původního webu, navy monochrom.
   Písmo: Fraunces (display) + Inter (UI).
   Mobile-first | WCAG AA | 8px spacing | container 1280
   Breakpointy POUZE 640 / 768 / 1024 / 1280 — žádné jiné.
   Tokeny níže jsou zdroj pravdy pro STYLEGUIDE.md a styleguide.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENY
   -------------------------------------------------------------------------- */
:root{
    /* Barvy — plochy (60 / 30) */
    --c-white:         #FFFFFF;
    --c-bg:            #FFFFFF;
    --c-surface:       #F5F5FC;   /* alternované sekce */
    --c-surface-2:     #E5E5F5;   /* rámy, ikony na alternované sekci */
    --c-dark:          #030357;   /* brand navy — tmavé sekce, patička, tlačítka */
    --c-dark-2:        #02023D;   /* hlubší navy pro patičku */

    /* Barvy — text */
    --c-text:          #14142B;   /* 18,03 : 1 na bílé */
    --c-text-muted:    #4A4A63;   /*  8,57 : 1 na bílé, 7,89 : 1 na surface */
    --c-text-on-dark:  #F0F0FA;   /* 16,07 : 1 na navy */
    --c-muted-on-dark: #B8B8E0;   /*  9,50 : 1 na navy */

    /* Akcent (10) — brand navy. Hover je světlejší, protože tmavší už není kam. */
    --c-accent:            #030357;  /* 18,19 : 1 na bílé */
    --c-accent-hover:      #1E1E8C;  /* 12,97 : 1 na bílé */
    --c-accent-on-dark:    #A5A5D5;  /*  7,75 : 1 na navy */
    --c-accent-on-dark-hover: #C9C9EA;

    /* Okraje — dvě síly: dekorativní linka a linka, která je součástí UI (3 : 1) */
    --c-border:         #DEDEF0;   /* oddělovače, rámy karet */
    --c-border-strong:  #8484A8;   /* ghost tlačítka, inputy — 3,59 : 1 na bílé */
    --c-border-on-dark: rgba(240,240,250,.18);

    /* Stavové */
    --c-error:   #B42318;
    --c-success: #067647;
    --c-warning: #B54708;
    --c-info:    #175CD3;

    /* Typografie — škála 12 / 14 / 16 / 18 / 20 / 24 / 32 / 40 / 56 */
    /* Nadpisy: Archivo 700 (rozhodnuto 8. 9. 2026). Odchylka od systému Kokula/MIstudio
       (Fraunces) — Alešovi serif na H1 nesedl. Grotesk s lehce užší kresbou, vzdálený
       příbuzný Oswaldu ze starého webu. Tělo zůstává Inter. */
    --ff-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ff-ui:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fw-display: 700;

    --fs-caption: 0.75rem;    /* 12 — eyebrow, popisky */
    --fs-small:   0.875rem;   /* 14 — meta, navigace, patička */
    --fs-body:    1rem;       /* 16 */
    --fs-lede:    1.125rem;   /* 18 — perex */
    --fs-h4:      1.25rem;    /* 20 */
    --fs-h3:      1.5rem;     /* 24 */
    --fs-h2:      2rem;       /* 32 → 36 → 40 */
    --fs-stat:    2.5rem;     /* 40 — čísla */
    --fs-h1:      clamp(2.25rem, 4.5vw + 1rem, 3.5rem);   /* 36 → 56, podstránky */
    --fs-hero:    clamp(2.25rem, 4.6vw + .75rem, 3.5rem); /* 36 → 56, homepage */

    /* Spacing — 8px rytmus */
    --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px; --s-5: 32px;
    --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;

    /* Layout */
    --container-max: 1280px;
    --container-wide: 1600px;   /* jen hero; 1920 vyzkoušeno a vráceno — „to je už moc" */
    --container-pad: 16px;
    --hero-fade: 120px;         /* délka přechodu panel → fotka; krátký, jinak je to gradient přes fotku */
    --header-h: 64px;
    --tap: 44px;               /* minimální klikací plocha */

    /* Tvary */
    --r-sm: 8px; --r-md: 16px; --r-card: 24px; --r-frame: 32px; --r-pill: 999px;

    /* Stíny — laděné k navy, ne černé */
    --shadow-sm: 0 1px 2px rgba(3, 3, 87, .06);
    --shadow-md: 0 8px 24px rgba(3, 3, 87, .08);
    --shadow-lg: 0 24px 64px rgba(3, 3, 87, .12);

    /* Pohyb */
    --t-fast: 120ms;
    --t-base: 200ms;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* Z-index */
    --z-header: 100; --z-dropdown: 200; --z-overlay: 300;
}
@media (min-width: 768px){
    :root{ --container-pad: 24px; --fs-h2: 2.25rem; }
}
@media (min-width: 1024px){
    :root{ --container-pad: 32px; --fs-h2: 2.5rem; }
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }

html{
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--s-3));
    -webkit-text-size-adjust: 100%;
}

body{
    font-family: var(--ff-ui);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video{ display: block; max-width: 100%; height: auto; }
img{ background: var(--c-surface-2); }

ul{ list-style: none; }

a{ color: var(--c-accent); text-decoration: none; transition: color var(--t-fast); }
a:hover{ color: var(--c-accent-hover); }

h1, h2, h3, h4{
    font-family: var(--ff-display);
    font-weight: var(--fw-display);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--c-dark);
    text-wrap: balance;
}
h1{ font-size: var(--fs-h1); letter-spacing: -.03em; }
h2{ font-size: var(--fs-h2); letter-spacing: -.025em; }
h3{ font-size: var(--fs-h3); }
h4{ font-size: var(--fs-h4); }

p{ max-width: 68ch; }
address{ font-style: normal; }

button{ font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* Focus: navy na světlé, světlá navy na tmavé. Každý tmavý kontejner musí být
   v seznamu níže, jinak je focus ring neviditelný. */
:focus-visible{
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}
.section--dark :focus-visible,
.address-card :focus-visible,
.site-footer :focus-visible{
    outline-color: var(--c-accent-on-dark);
}

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

.skip-link{
    position: absolute; top: -100px; left: 16px;
    background: var(--c-dark); color: var(--c-text-on-dark);
    padding: 12px 16px; border-radius: var(--r-sm);
    z-index: 1000; transition: top var(--t-fast);
}
.skip-link:focus{ top: 16px; color: var(--c-text-on-dark); }

.visually-hidden{
    position: absolute !important; width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. LAYOUT + UTILITY
   -------------------------------------------------------------------------- */
.container{
    width: 100%;
    max-width: var(--container-max);
    padding-inline: var(--container-pad);
    margin-inline: auto;
}

.section{ padding-block: var(--s-7); }
@media (min-width: 768px){  .section{ padding-block: var(--s-8); } }
@media (min-width: 1024px){ .section{ padding-block: var(--s-9); } }

.section--surface{ background: var(--c-surface); }
.section--dark{ background: var(--c-dark); color: var(--c-text-on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4{ color: var(--c-text-on-dark); }
.section--dark a{ color: var(--c-accent-on-dark); }
.section--dark a:hover{ color: var(--c-accent-on-dark-hover); }
.section--dark .muted{ color: var(--c-muted-on-dark); }

.muted{ color: var(--c-text-muted); }
.lede{ font-size: var(--fs-lede); line-height: 1.65; color: var(--c-text-muted); max-width: 52ch; }
.section--dark .lede{ color: var(--c-muted-on-dark); }

.mt-3{ margin-top: var(--s-3); }
.mt-4{ margin-top: var(--s-4); }
.mt-5{ margin-top: var(--s-5); }
.mt-6{ margin-top: var(--s-6); }
.w-full{ width: 100%; }

/* --------------------------------------------------------------------------
   4. SPOLEČNÉ — eyebrow, hlavičky sekcí
   -------------------------------------------------------------------------- */
.eyebrow{
    display: inline-block;
    font-family: var(--ff-ui);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--s-3);
}
.eyebrow--on-dark{ color: var(--c-accent-on-dark); }

.section-head{ margin-bottom: var(--s-6); }
.section-head__lede{ color: var(--c-text-muted); max-width: 56ch; margin-top: var(--s-3); }
.section--dark .section-head__lede{ color: var(--c-muted-on-dark); }

.section-head--row{ display: grid; gap: var(--s-4); }
.section-head--flush{ margin-bottom: 0; }
@media (min-width: 1024px){
    .section-head--row{
        grid-template-columns: minmax(0,5fr) minmax(0,6fr);
        gap: var(--s-6);
        /* Lícujeme vrchem, ne spodkem. Se spodkem (align-items:end) skákal nadpis
           nahoru a dolů podle toho, kolik textu je vedle — a v bloku s tlačítkem
           se propadl úplně. */
        align-items: start;
    }
    .section-head--row .section-head__lede{ margin-top: 0; }
    /* Pravý sloupec posunut o výšku eyebrow (řádek + jeho margin), aby první řádek
       textu začínal na stejné lince jako H2, ne jako eyebrow nad ním. */
    .section-head--row > :last-child{
        padding-top: calc(var(--fs-caption) * 1.6 + var(--s-3));
    }
}

/* --------------------------------------------------------------------------
   5. TLAČÍTKA A ODKAZY
   Všechno klikací má min. 44 px (--tap). Kde by 44 px rozbilo layout
   (textové odkazy v řádku), řeší se to paddingem se záporným marginem.
   -------------------------------------------------------------------------- */
.btn{
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--s-2);
    min-height: var(--tap);
    padding: 12px 24px;
    border-radius: var(--r-pill);
    font-family: var(--ff-ui);
    font-size: .9375rem;            /* 15 — stejně jako Kokula */
    font-weight: 600;
    line-height: 1;
    border: 2px solid transparent;
    white-space: nowrap;
    transition: background var(--t-base), color var(--t-base),
                border-color var(--t-base), transform var(--t-fast);
}
.btn:active{ transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"]{ opacity: .5; pointer-events: none; }
.btn--sm{ padding: 10px 18px; font-size: var(--fs-small); }  /* min-height zůstává 44 */

/* Varianty jsou psané i s .section--dark, protože .section--dark a má vyšší
   specificitu než .btn--* a přebilo by barvu textu. */
.btn--primary,
.section--dark .btn--primary{ background: var(--c-accent); color: var(--c-white); box-shadow: var(--shadow-sm); }
.btn--primary:hover,
.section--dark .btn--primary:hover{ background: var(--c-accent-hover); color: var(--c-white); }

.btn--ghost,
.section--dark .btn--ghost{ background: transparent; color: var(--c-text); border-color: var(--c-border-strong); }
.btn--ghost:hover{ background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-accent); }

.btn--on-dark,
.section--dark .btn--on-dark,
.address-card .btn--on-dark{ background: var(--c-text-on-dark); color: var(--c-dark); }
.btn--on-dark:hover,
.section--dark .btn--on-dark:hover,
.address-card .btn--on-dark:hover{ background: var(--c-white); color: var(--c-dark); }

.btn--ghost-on-dark,
.section--dark .btn--ghost-on-dark{
    background: transparent; color: var(--c-text-on-dark);
    border-color: rgba(240,240,250,.5);
}
.btn--ghost-on-dark:hover,
.section--dark .btn--ghost-on-dark:hover{
    background: rgba(240,240,250,.1); color: var(--c-text-on-dark);
    border-color: var(--c-text-on-dark);
}

.link-arrow{
    display: inline-flex; align-items: center; gap: 6px;
    padding-block: 12px; margin-block: -12px;      /* 44 px bez vlivu na layout */
    font-weight: 600; font-size: var(--fs-small);
    color: var(--c-accent);
}
.link-arrow svg{ width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover svg{ transform: translateX(3px); }
.link-arrow:active svg{ transform: translateX(1px); }

.link-inline{ text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   6. HLAVIČKA
   -------------------------------------------------------------------------- */
.site-header{
    position: sticky; top: 0; z-index: var(--z-header);
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--c-border);
}
.header-grid{
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
    min-height: var(--header-h);
}

/* Logo: dočasný textový logotyp, dokud nemáme vektor. Až přijde, tahle část se nahradí. */
.brand{ display: inline-flex; align-items: center; color: var(--c-dark); min-height: var(--tap); }
.brand:hover{ color: var(--c-accent-hover); }
.brand__name{
    font-family: var(--ff-display); font-weight: var(--fw-display); font-size: var(--fs-lede);
    letter-spacing: -.02em; line-height: 1.1;
}

/* Desktop navigace od 1024. Položka „Úvod" v ní není — je to logo. */
.nav{ display: none; }
@media (min-width: 1024px){
    .nav{ display: flex; }
    .nav ul{ display: flex; align-items: center; gap: var(--s-3); }
    .nav a{
        position: relative; display: inline-flex; align-items: center;
        min-height: var(--tap); padding: 0 var(--s-1);
        font-size: var(--fs-small); font-weight: 500; color: var(--c-text);
    }
    .nav a::after{
        content: ""; position: absolute; left: var(--s-1); right: var(--s-1); bottom: 8px;
        height: 2px; background: var(--c-accent);
        transform: scaleX(0); transform-origin: left;
        transition: transform var(--t-base) var(--ease);
    }
    .nav a:hover{ color: var(--c-accent); }
    .nav a:hover::after, .nav a[aria-current="page"]::after{ transform: scaleX(1); }
    .nav a[aria-current="page"]{ color: var(--c-accent); }
}
@media (min-width: 1280px){ .nav ul{ gap: var(--s-4); } }

.header-actions{ display: flex; align-items: center; gap: var(--s-2); }
@media (min-width: 1024px){ .header-actions{ gap: var(--s-3); } }

.lang{ display: flex; align-items: center; font-size: var(--fs-small); font-weight: 600; }
.lang a{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--tap); min-height: var(--tap);
    border-radius: var(--r-sm); color: var(--c-text-muted);
}
.lang a:hover{ color: var(--c-dark); background: var(--c-surface); }
.lang a[aria-current="true"]{ background: var(--c-surface-2); color: var(--c-dark); }

.btn--header{ display: none; }
@media (min-width: 1024px){ .btn--header{ display: inline-flex; } }

.nav-toggle{
    display: inline-flex; flex-direction: column; gap: var(--s-1);
    width: var(--tap); height: var(--tap); align-items: center; justify-content: center;
    border-radius: var(--r-pill); border: 1px solid var(--c-border-strong);
}
.nav-toggle:hover{ background: var(--c-surface); }
.nav-toggle span{ display: block; width: 18px; height: 2px; background: var(--c-dark); border-radius: 2px; }
@media (min-width: 1024px){ .nav-toggle{ display: none; } }

.mobile-menu{
    border-top: 1px solid var(--c-border);
    background: var(--c-bg);
    padding: var(--s-3) var(--container-pad) var(--s-5);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
}
.mobile-menu[hidden]{ display: none; }
.mobile-menu ul{ display: flex; flex-direction: column; margin-bottom: var(--s-4); }
.mobile-menu a:not(.btn){
    display: flex; align-items: center; min-height: var(--tap);
    padding: 0 var(--s-3); border-radius: var(--r-sm);
    color: var(--c-text); font-weight: 500;
}
.mobile-menu a:not(.btn):hover,
.mobile-menu a[aria-current="page"]{ background: var(--c-surface); color: var(--c-accent); }

/* --------------------------------------------------------------------------
   7. HERO — varianta K „panel v rámu" (vybráno 8. 9. 2026)
   Fotka v zaobleném rámu uvnitř kontejneru (stejné tvarosloví jako zbytek
   webu a jako Kokula / MIstudio). Navy panel zabírá levých 52 % rámu a krátkým
   přechodem (120 px) se rozpouští do fotky. Text leží vždy na plné barvě,
   nikdy na fotce. Čísla jsou uvnitř panelu.
   Přechod musí zůstat krátký — jinak by z toho byl gradient přes fotku,
   což je přesně to, co jsme zavrhli v prvním kole.
   Důsledek pro rytmus stránky: hero je tmavé, proto sekce Etický kodex
   NENÍ tmavý break (byly by tři navy bloky na jedné stránce).
   -------------------------------------------------------------------------- */
/* Hero má odsazení jen nahoře (od hlavičky). Dole nic — mezeru k další sekci dělá
   její vlastní horní padding, tedy stejná hodnota jako mezi všemi sekcemi. */
.hero{ padding-block: var(--s-5) 0; }
@media (min-width: 1024px){ .hero{ padding-block: var(--s-6) 0; } }

/* Hero si může dovolit širší kontejner než zbytek stránky */
.hero .container{ max-width: var(--container-wide); }

.hero__frame{
    position: relative;
    border-radius: var(--r-frame);
    overflow: hidden;
    background: var(--c-dark);
}
.hero__media{ background: var(--c-surface-2); }
.hero__media img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 1024px){
    .hero__frame{ height: 760px; }
    .hero__media{ position: absolute; inset: 0; }
    .hero__media img{ height: 100%; aspect-ratio: auto; object-position: 70% center; }
}
@media (min-width: 1280px){ .hero__frame{ height: 800px; } }

.hero__panel{
    background: var(--c-dark);
    color: var(--c-text-on-dark);
    padding: var(--s-6) var(--s-4);
}
@media (min-width: 1024px){
    /* Přechod do fotky je součástí pozadí panelu, ne samostatný prvek —
       jinak vzniká 1px švy na hraně (anti-aliasing + transform). */
    .hero__panel{
        position: absolute; left: 0; top: 0; bottom: 0;
        width: calc(50% + var(--hero-fade));
        padding: var(--s-7) calc(var(--s-7) + var(--hero-fade)) var(--s-7) var(--s-7);
        background: linear-gradient(90deg,
            var(--c-dark) 0,
            var(--c-dark) calc(100% - var(--hero-fade)),
            rgba(3, 3, 87, 0) 100%);
        display: flex; flex-direction: column; justify-content: center;
    }
    /* V panelu je na H1 méně místa než v celé šířce — strop 52 px, ne 56 */
    .hero__panel h1{ font-size: clamp(2.25rem, 3.6vw, 3.25rem); }
    .hero__panel .hero-kpi{ margin-top: var(--s-5); }
}
.hero__panel :focus-visible{ outline-color: var(--c-accent-on-dark); }
.hero__panel h1{
    color: var(--c-white);
    font-size: var(--fs-hero);
    line-height: 1.08;              /* o chlup víc vzduchu mezi řádky než u serifu */
    letter-spacing: -.03em;
    max-width: none;                /* zlomy řídí <br> v HTML, ne šířka */
    text-wrap: initial;
    margin-bottom: var(--s-5);
}
.hero__panel .lede{ color: var(--c-muted-on-dark); margin-bottom: var(--s-6); }
.hero-actions{ display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Ruční zlomy v H1 platí až od 1024 — pod tím by čtyři pevné řádky přetekly z panelu */
.br-lg{ display: none; }
@media (min-width: 1024px){ .br-lg{ display: inline; } }

.hero-kpi{
    display: grid; gap: var(--s-4);
    margin-top: var(--s-6); padding-top: var(--s-5);
    border-top: 1px solid var(--c-border-on-dark);
}
/* Tři sloupce až tam, kde se popisky vejdou na dva řádky. Pod 560 px pod sebe. */
@media (min-width: 560px){ .hero-kpi{ grid-template-columns: repeat(3, 1fr); } }
.hero-kpi b{
    display: block; font-family: var(--ff-display); font-weight: var(--fw-display);
    font-size: var(--fs-stat); line-height: 1; color: var(--c-white); letter-spacing: -.03em;
}
.hero-kpi span{ display: block; font-size: var(--fs-small); color: var(--c-muted-on-dark); margin-top: var(--s-2); }

/* Proužek s čísly — na HP už není (čísla jsou v hero), zůstává pro podstránky a styleguide */
.stats{
    margin-top: var(--s-7);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}
@media (min-width: 768px){ .stats{ margin-top: var(--s-8); } }
.stats__grid{ display: grid; gap: var(--s-5); padding-block: var(--s-5); }
@media (min-width: 768px){
    .stats__grid{ grid-template-columns: repeat(3, 1fr); gap: 0; padding-block: var(--s-6); }
    .stat{ padding-inline: var(--s-6); }
    .stat:first-child{ padding-inline-start: 0; }
    .stat + .stat{ border-inline-start: 1px solid var(--c-border); }
}
.stat__n{
    font-family: var(--ff-display); font-weight: var(--fw-display);
    font-size: var(--fs-stat); line-height: 1;
    color: var(--c-dark); letter-spacing: -.03em;
}
.stat__l{ font-size: var(--fs-small); color: var(--c-text-muted); margin-top: var(--s-2); }

/* --------------------------------------------------------------------------
   8. KARTY
   -------------------------------------------------------------------------- */
.cards{ display: grid; gap: var(--s-4); }
@media (min-width: 768px){ .cards--3{ grid-template-columns: repeat(3, 1fr); } }

.card{
    display: flex; flex-direction: column;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: var(--s-5);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t-base), transform var(--t-base) var(--ease),
                border-color var(--t-base);
}
.card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--c-accent); }
.card__icon{
    width: var(--s-6); height: var(--s-6); border-radius: var(--r-pill);
    background: var(--c-surface-2); color: var(--c-accent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--s-4);
}
.card__icon svg{ width: 24px; height: 24px; }
.card h3{ font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.card p{ color: var(--c-text-muted); font-size: var(--fs-small); margin-bottom: var(--s-4); }
.card .link-arrow{ margin-top: auto; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. DVOUSLOUPEC — text + doplněk
   -------------------------------------------------------------------------- */
.split{ display: grid; gap: var(--s-6); }
@media (min-width: 1024px){
    .split{ grid-template-columns: minmax(0,6fr) minmax(0,5fr); gap: var(--s-8); align-items: start; }
    .split--reverse > :first-child{ order: 2; }
}
.split__media img{ border-radius: var(--r-card); width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.prose{ margin-top: var(--s-4); }
.prose p{ color: var(--c-text-muted); }
.prose p + p{ margin-top: var(--s-4); }
.prose p:first-child{ color: var(--c-text); font-size: var(--fs-lede); }

/* Odkazy na dokumenty */
.docs{ display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.doc{
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: var(--tap); padding: 0 var(--s-3);
    border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
    font-size: var(--fs-small); font-weight: 500; color: var(--c-text);
    background: var(--c-bg);
    transition: border-color var(--t-base), background var(--t-base);
}
.doc:hover{ border-color: var(--c-accent); background: var(--c-surface); color: var(--c-accent); }
.doc svg{ width: 16px; height: 16px; flex: 0 0 16px; color: var(--c-accent); }
.doc__meta{ color: var(--c-text-muted); font-size: var(--fs-caption); }

/* --------------------------------------------------------------------------
   10. ČÍSLOVANÝ VÝČET (role asociace)
   -------------------------------------------------------------------------- */
.roles{ display: grid; gap: var(--s-5); counter-reset: role; }
@media (min-width: 768px){ .roles{ grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.role{ counter-increment: role; padding-top: var(--s-4); border-top: 2px solid var(--c-dark); }
.role::before{
    content: "0" counter(role);
    display: block;
    font-family: var(--ff-display); font-weight: var(--fw-display); font-size: var(--fs-small);
    color: var(--c-accent); margin-bottom: var(--s-2);
}
.role h3{ font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.role p{ color: var(--c-text-muted); font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   11. ČLENOVÉ — logo grid
   -------------------------------------------------------------------------- */
.logos{ display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px){ .logos{ grid-template-columns: repeat(4, 1fr); } }
.logo-tile{
    display: flex; align-items: center; justify-content: center;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-4);
    min-height: 104px;
}
.logo-tile img{ max-height: 48px; width: auto; object-fit: contain; background: transparent; }

/* --------------------------------------------------------------------------
   12. VÝČET oblastí — na světlém pozadí (výchozí), tmavá varianta modifikátorem
   -------------------------------------------------------------------------- */
.areas{ display: grid; }
.area{
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-lede);
}
.area:first-child{ border-top: 1px solid var(--c-border); }
.area__n{
    font-family: var(--ff-display); font-weight: var(--fw-display); font-size: var(--fs-small);
    color: var(--c-accent); flex: 0 0 2.5rem; padding-top: 4px;
}
.section--dark .area{ border-color: var(--c-border-on-dark); }
.section--dark .area__n{ color: var(--c-accent-on-dark); }

/* --------------------------------------------------------------------------
   13. UKOTVENÍ — odkazové dlaždice
   -------------------------------------------------------------------------- */
.orgs{ display: grid; gap: var(--s-3); }
@media (min-width: 640px){ .orgs{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .orgs{ grid-template-columns: repeat(4, 1fr); } }
.org{
    display: block;
    padding: var(--s-4);
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    background: var(--c-bg);
    transition: border-color var(--t-base), box-shadow var(--t-base);
}
.org:hover{ border-color: var(--c-accent); box-shadow: var(--shadow-sm); }
.org:active{ box-shadow: none; }
.org__name{ font-family: var(--ff-display); font-weight: var(--fw-display); color: var(--c-dark); display: block; }
.org__desc{ font-size: var(--fs-small); color: var(--c-text-muted); margin-top: 2px; display: block; }

/* --------------------------------------------------------------------------
   14. KONTAKT — person karty + adresní karta
   -------------------------------------------------------------------------- */
.people{ display: grid; gap: var(--s-4); }
@media (min-width: 768px){ .people{ grid-template-columns: repeat(3, 1fr); } }
.person{
    background: var(--c-bg); border: 1px solid var(--c-border);
    border-radius: var(--r-card); padding: var(--s-5);
}
.person__role{
    font-size: var(--fs-caption); font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--c-accent); display: block;
    margin-bottom: var(--s-2);
}
.person__name{ font-family: var(--ff-display); font-weight: var(--fw-display); font-size: var(--fs-h4); color: var(--c-dark); line-height: 1.2; }
.person__contact{ margin-top: var(--s-3); display: grid; font-size: var(--fs-small); }
.person__contact a{
    display: inline-flex; align-items: center; min-height: var(--tap);
    color: var(--c-text);
}
.person__contact a:hover{ color: var(--c-accent); }

.address-card{
    margin-top: var(--s-4);
    background: var(--c-dark); color: var(--c-text-on-dark);
    border-radius: var(--r-card); padding: var(--s-5);
    display: grid; gap: var(--s-4);
}
@media (min-width: 1024px){
    .address-card{ grid-template-columns: 1fr auto; align-items: center; padding: var(--s-6); }
}
.address-card h3{ color: var(--c-text-on-dark); font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.address-card .muted{ color: var(--c-muted-on-dark); font-size: var(--fs-small); }
.address-card__mail{
    display: inline-flex; align-items: center; min-height: var(--tap);
    color: var(--c-text-on-dark); font-weight: 600;
    text-decoration: underline; text-underline-offset: 4px;
}
.address-card__mail:hover{ color: var(--c-accent-on-dark); }

/* --------------------------------------------------------------------------
   15. PATIČKA
   -------------------------------------------------------------------------- */
.site-footer{ background: var(--c-dark-2); color: var(--c-muted-on-dark); padding-block: var(--s-7) var(--s-5); }
.footer-grid{ display: grid; gap: var(--s-6); }
@media (min-width: 768px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px){ .footer-grid{ grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.site-footer h4{
    color: var(--c-text-on-dark); font-family: var(--ff-ui);
    font-size: var(--fs-caption); font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; margin-bottom: var(--s-2);
}
.site-footer ul{ display: grid; font-size: var(--fs-small); }
.site-footer li{ min-height: var(--s-5); display: flex; align-items: center; }
.site-footer a{ color: var(--c-muted-on-dark); display: inline-flex; align-items: center; min-height: var(--s-5); }
.site-footer a:hover{ color: var(--c-text-on-dark); }
.footer-brand p{ font-size: var(--fs-small); max-width: 34ch; margin-top: var(--s-2); }
.footer-bottom{
    margin-top: var(--s-7); padding-top: var(--s-4);
    border-top: 1px solid var(--c-border-on-dark);
    display: grid; gap: var(--s-2);
    font-size: var(--fs-caption);
}
.footer-bottom p{ max-width: none; }
.footer-bottom a{ min-height: 0; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 1024px){
    .footer-bottom{ grid-template-columns: 1fr auto; align-items: center; }
}