/* ============================================================================
   AuPortal SK
   Prefix au-, nikdy cudzí prefix (cp-, tr-, md-, ir-).

   SMER: architektonický monochróm, tmavý, vedený fotografiou.

   Prečo tmavý, meraný dôvod, nie dojem:
   značková bronzová z loga je #b08965. Na bielej má kontrast 2,88:1
   a na kostenej 2,88:1, čiže na svetlom podklade sa nesmie použiť na text
   a musela by sa stmaviť na #8e6845, teda prestala by to byť značková farba.
   Na podklade #14161a má 5,70:1 a prejde AA nezmenená. Značka teda funguje
   naplno iba na tmavom. Zároveň tmavý podklad znesie nerovnorodý obrazový
   materiál (dronové fotky, 3D vizualizácie, situácie zón) oveľa lepšie
   než biely, kde by vizualizácie pôsobili ako lacnejší sused fotografií.

   Kontrast overený 9. 9. 2026, všetkých 17 dvojíc textu a pozadia, ktoré sa
   na webe reálne vyskytujú, prešlo WCAG AA. Svetlosti hľadané v OKLCH,
   odtieň a sýtosť nemenené. Pred zmenou ktorejkoľvek farby premerať znovu.
   Projektové pravidlo 10.

   Tvarový zámok. Prvá verzia znela "predmet, na ktorý sa klikne, má mäkkú
   hranu", ale to neobstálo hneď pri prvej plnej plôške, ktorá interaktívna
   nie je. Deliaca čiara je teda o kus vyššie a je to PREDMET verzus ŠTRUKTÚRA:

     SAMOSTATNÝ PREDMET S VLASTNOU VÝPLŇOU MÁ MÄKKÚ HRANU.
     NOSNÁ PLOCHA, NA KTOREJ OBSAH LEŽÍ, JE OSTRÁ.

   Mäkké (squircle): sklenená tabuľa v hero, tlačidlá, políčka formulára,
   prepínač jazyka, hamburger, plné štítky (bronzová plôška menovky,
   štítok stavu projektu). Všetko sú to ohraničené predmety s vlastnou
   výplňou, ktoré ležia NA niečom.
   Ostré (polomer 0): karty, riadky indexu, bunky čísel, popisky obrázkov,
   bloky oddelené vlasovou linkou. To je nosná štruktúra stránky.

   Veľkosť rohu rastie s veľkosťou predmetu: tabuľa 34, tlačidlá a políčka 17,
   prepínač a hamburger 10, štítky 8. Rovnaký roh na malom aj veľkom prvku
   vyzerá zle.

   Všade je `border-radius` ako záloha a `corner-shape: squircle` iba
   v `@supports`. Safari a Firefox zatiaľ corner-shape nepoznajú.
   Farebný zámok: jediný akcent je bronzová. Nikde iná akcentová farba.
   ========================================================================= */

/* Archivo, premenný font s osou šírky (62 az 125). Šírka robí architektonický
   výraz displeja, preto sa neťahá druhá rodina. latin aj latin-ext sú povinné,
   slovenská diakritika je rozdelená medzi obe podmnožiny (á é í ó ú ý v latin,
   č ď ľ ĺ ň ŕ š ť ž v latin-ext). Overené v fontTools. */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('/fonts/archivo-var-latin-ext.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: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('/fonts/archivo-var-latin.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 {
    /* Podklady, od najhlbšieho po najsvetlejší */
    --au-void: #0e1013;
    --au-ink: #14161a;
    --au-surface: #1c1f24;
    --au-surface-2: #262a30;

    /* Linky a text */
    --au-line: #2f343b;
    --au-line-soft: #21252a;
    --au-bone: #edede9;
    --au-slate: #9ba1a9;
    --au-bone-dim: #d6d9d8;   /* text na skle, kde bronzová ani slate neprejdú */

    /* Jediný akcent, priamo z loga, nezmenený */
    --au-bronze: #b08965;
    --au-bronze-pale: #f9e4d0;   /* bronzova zosvetlena v OKLCH na L 0,93, prepinac jazyka */
    --au-bronze-dim: rgba(176, 137, 101, .28);

    --au-menu-gap: clamp(1rem, 2.4vw, 2.1rem);  /* JEDNA medzera pre celé menu vrátane telefónu */
    --au-hlavicka: 77px;                       /* odmeraná výška sticky hlavičky */
    --au-shell: 1240px;
    --au-gutter: clamp(20px, 5vw, 56px);
    --au-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Jedna krivka pre celý web, aby pohyb pôsobil ako jeden systém */
    --au-ease: cubic-bezier(.16, 1, .3, 1);

    color-scheme: dark;
}

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

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

body.au-body {
    margin: 0;
    background: var(--au-ink);
    color: var(--au-bone);
    font-family: var(--au-font);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.62;
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--au-bronze); text-underline-offset: .22em; transition: color .25s var(--au-ease); }
/* Odkazy v obsahu nemali ŽIADNY hover, čiže sa nedalo poznať, že sú živé.
   Zámerne to NIE JE globálne a:hover: tlačidlá sú tiež <a> a pravidlo
   a:hover (0,1,1) by prebilo .au-btn (0,1,0), takže by tlačidlám menilo
   farbu textu a podčiarkovalo ich. */
.au-prose a:hover, .au-aside a:hover, .au-legal a:hover,
.au-detail__head a:hover, .au-body-grid a:not(.au-btn):hover {
    color: #c9a179;
    text-decoration: underline;
}

::selection { background: var(--au-bronze); color: var(--au-void); }

:focus-visible {
    outline: 2px solid var(--au-bronze);
    outline-offset: 3px;
}
/* V hlavicke NIE bronzova. Odkedy hero siaha pod menu, hlavicka lezi nad
   fotografiou uz pri scrollTop 0 a nad svetlym zaberom (hero Letorostov je
   takmer biely vykres) ma bronzova okolo 1,8:1, teda prstenec zmizne.
   Kostena ma nad tym istym kompozitom 4,97:1, co je odmerane uz pri texte
   menu. WCAG 2.4.11 chce, aby bol fokus vidiet, nie aby bol znackovy. */
.au-header :focus-visible { outline-color: var(--au-bone); }

/* --- Typografická škála ------------------------------------------------- */
/* Displej je široký (stretch 112 az 118) a tesný (letter-spacing záporný).
   Telo textu je v normálnej šírke. Kontrast medzi nimi robí os šírky,
   nie druhá rodina. */

h1, h2, h3, .au-figure {
    font-weight: 500;
    color: var(--au-bone);
    margin: 0;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.4rem, 6.4vw, 5rem);
    font-stretch: 118%;
    letter-spacing: -.035em;
    line-height: .98;
}

h2 {
    /* Menšie než hero h1 pri KAŽDEJ šírke. Predtým malo h2 pri 1280 px
       46,08 px proti h1 38,4 px, čiže nadpis stránky bol menší než podnadpis
       sekcie. Meria sa, neodhaduje. */
    font-size: clamp(1.55rem, 2.5vw, 2.35rem);
    font-stretch: 114%;
    letter-spacing: -.028em;
    line-height: 1.05;
}

h3 {
    font-size: 1.18rem;
    font-stretch: 106%;
    letter-spacing: -.015em;
    line-height: 1.2;
    font-weight: 600;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.au-lead {
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    line-height: 1.55;
    color: var(--au-slate);
    max-width: 54ch;
}

.au-muted { color: var(--au-slate); }

/* Menovka sekcie. Rozpočet sú tri na celý web, viac z toho robí šablónu. */
.au-eyebrow {
    font-size: .72rem;
    font-weight: 600;
    font-stretch: 94%;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--au-bronze);
    margin: 0 0 1.1rem;
}

.au-shell {
    width: 100%;
    max-width: var(--au-shell);
    margin-inline: auto;
    padding-inline: var(--au-gutter);
}

.au-skip { position: absolute; left: -9999px; }
.au-skip:focus {
    left: 20px; top: 12px; z-index: 90;
    background: var(--au-bronze); color: var(--au-void);
    padding: .6rem 1rem; font-weight: 600;
}

/* --- Hlavička ------------------------------------------------------------ */

.au-header {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Hlavička je NAOZAJ priehľadná: vlastnú vrstvu má iba okolo 0,15,
       teda pätinu toho, čo mala predtým. Tmavosť nerobí vrstva, ale
       `brightness` v backdrop-filter, ktorý stmaví to, čo cez hlavičku
       presvitá. Rozdiel je podstatný: obraz cez ňu stále vidno aj s tvarmi
       a farbami, len je tlmený, takže to pôsobí ako sklo a nie ako pás.

       Prečo to bolo treba. Kostený text nad svetlou fotkou nemá kontrast,
       takže s obyčajnou vrstvou sa pod 0,66 ísť nedalo. A najsvetlejšie
       miesto pod menu naprieč VŠETKÝMI hero snímkami je čistá biela: hero
       Letorostov je biely projektový výkres. Nie je to teoretická hranica,
       je to skutočná stránka.

       Odmerané pri jase 0,45 a vrstve 0,15: kostená má nad bielou 4,97:1,
       čiže prejde AA. Prechod je 0,22 hore a 0,08 dole, v strede, kde sedí
       text, teda 0,15. */
    background: linear-gradient(rgba(20, 22, 26, .22), rgba(20, 22, 26, .08));
    backdrop-filter: blur(20px) saturate(130%) brightness(.45);
    -webkit-backdrop-filter: blur(20px) saturate(130%) brightness(.45);
    border-bottom: 1px solid rgba(237, 237, 233, .07);
}

.au-header__inner {
    display: flex;
    align-items: center;
    /* Celé menu vrátane telefónu a prepínača jazyka má JEDNU rovnakú medzeru.
       Preto tú istú premennú používa aj .au-nav aj .au-header__side.
       Predtým bol rytmus 34, 34, 34, 16, 18, čiže telefón vyzeral ako
       natlačená piata položka. Skúsil som to najprv opačne, väčšou medzerou
       medzi skupinami, ale Adam to chce ako jeden rovnomerný rad. */
    gap: var(--au-menu-gap);
    min-height: 76px;
    padding-block: .7rem;
}

.au-logo { display: inline-flex; align-items: center; flex: none; }
/* Znak je po oreze priehľadného okraja na celej ploche, takže 46 px slotu
   je 46 px značky. Pred orezom zaberal znak 84 % boxu, čiže zo 40 px slotu
   bolo reálne 33,6 px, a preto pôsobil malý. */
.au-logo img { height: 46px; width: auto; }

.au-nav {
    display: flex;
    gap: var(--au-menu-gap);
    margin-inline-start: auto;
}

.au-nav a {
    display: inline-grid;
    color: var(--au-bone);
    text-decoration: none;
    font-size: .92rem;
    padding-block: .3rem;
}

/* Aktuálnu položku NEOZNAČUJE žiadna pridaná čiara, bodka ani podčiarknutie.
   Označuje ju SAMO PÍSMO: Archivo je premenný font, takže slovo plynulo
   zosilnie a mierne sa stiahne. Statické rezy medzi hrúbkami skáču, premenná
   os prechádza spojito, a práve tá plynulosť je to, čo sa nedá odkukať.
   Je to zároveň jediný prvok webu, ktorý používa os hrúbky ako signál,
   takže si to nekonkuruje s ničím iným.

   Šírku drží neviditeľná kópia toho istého slova v najhrubšom reze. Bez nej
   by menu pri zosilnení menilo šírku a susedné položky by poskakovali. */
.au-nav a > span {
    grid-area: 1 / 1;
    font-variation-settings: "wght" 460, "wdth" 100;
    transition: font-variation-settings .42s cubic-bezier(.22, .61, .36, 1),
                color .28s var(--au-ease),
                text-decoration-color .28s var(--au-ease);
}
.au-nav a::after {
    content: attr(data-nazov);
    grid-area: 1 / 1;
    font-variation-settings: "wght" 700, "wdth" 96;
    visibility: hidden;
    pointer-events: none;
}
.au-nav a:hover > span,
.au-nav a:focus-visible > span { font-variation-settings: "wght" 700, "wdth" 96; }
/* Bronzová ako farba TEXTU v navigácii nemôže byť. Hlavička je poloprieshľadná
   a nad svetlou oblohou má bronzová na jej kompozite 3,3:1 pri pôvodnom tóne
   a 2,4:1 po zosvetlení, teda neprejde ani v jednom prípade.
   Aktuálnu stránku preto nesie IBA hrúbka písma, ktorá je aj tak výraznejší
   a nezameniteľnejší signál než odtieň. Bronzová je v hlavičke iba ako linka
   pri hoveri (pravidlo pod telefónom) a na značke, ktorá je z požiadavky na
   kontrast vyňatá ako logotyp. */
.au-nav a[aria-current="page"] > span {
    font-variation-settings: "wght" 700, "wdth" 96;
    color: var(--au-bone);
}

@media (prefers-reduced-motion: reduce) {
    .au-nav a > span { transition: color .28s var(--au-ease), text-decoration-color .28s var(--au-ease); }
}

.au-header__side { display: flex; gap: var(--au-menu-gap); align-items: center; flex: none; }

/* Prepinac jazyka je polozka menu, nie odznak. Mal vlastnu tmavu vypln
   a bronzovy okraj a na priehladnej hlavicke posobil ako cudzi nepriehladny
   stvorcek (Adam 14. 9. 2026). Pismo a reakcia su ako pri telefone a menu.
   Farba je o odtien teplejsia (Adam 15. 9. 2026, "slightly different color"):
   --au-bronze-pale je znackova bronzova v rovnakom odtieni, zosvetlena.
   Nad fotkou pod hlavickou ma 4,73:1, nad tmavou hlavickou 14,7:1,
   kostena menu ma 4,97:1. Tmavsie odtiene uz AA nad fotkou neprejdu. */
.au-lang {
    font-size: .92rem;
    letter-spacing: .06em;
    color: var(--au-bronze-pale);
    padding-block: .35rem;
    transition: text-decoration-color .25s var(--au-ease);
}

.au-tel { display: none; font-size: .92rem; color: var(--au-bone); transition: text-decoration-color .25s var(--au-ease); }

/* Hover v hlavicke je bronzova linka pod textom, text ostava kosteny.
   Biela nad kostenou sa takmer nedala rozoznat (Adam 14. 9. 2026) a bronzova
   ako farba TEXTU ma nad fotkou pod hlavickou okolo 1,9:1, AA neprejde.
   Linka nesie iba signal, citatelnost drzi kosteny text so 4,97:1.
   Hover iba pre zariadenia s mysou, na dotyku by linka po tuknuti ostala
   visiet. Klavesnica ju dostane cez focus-visible vsade.
   V zakladnom stave je linka priehladna, pri hoveri sa iba zafarbi,
   takze sa nic neposunie. */
.au-nav a > span, .au-tel, .au-lang {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: transparent;
    text-underline-offset: .55em;
}
@media (hover: hover) {
    .au-nav a:hover > span, .au-tel:hover, .au-lang:hover { text-decoration-color: var(--au-bronze); }
}
.au-nav a:focus-visible > span, .au-tel:focus-visible, .au-lang:focus-visible { text-decoration-color: var(--au-bronze); }

@media (min-width: 1080px) { .au-tel { display: inline; } }

/* Hamburger. Pod 760 px sa hlavička drží na JEDNOM riadku a menu sa skryje
   pod tlačidlo. Predtým sa lámala na dva riadky, čo je provizórium, nie riešenie.

   Skrýva sa iba vtedy, keď JavaScript naozaj zapojil ovládanie a pridal na
   <html> triedu js-nav. Keby sa skript nenačítal, menu zostane viditeľné ako
   druhý riadok, teda nedostupné menu nemôže vzniknúť. */
.au-burger {
    display: none;
    position: relative;
    width: 44px; height: 44px;      /* dotyková plocha, nie len ikona */
    padding: 0;
    background: transparent;
    border: 1px solid var(--au-line);
    border-radius: 8px;
    cursor: pointer;
}
/* Bez vlastnej vyplne a okraja, rovnako ako prepinac jazyka vedla. Tmava
   vypln s bronzovym okrajom posobila na priehladnej hlavicke ako cudzi
   stvorcek a okraj --au-line nad tmavou fotkou zanikal. Pruhy su kostene
   a hlavicka podklad pod sebou stmavuje (brightness .45), takze ich vidno
   nad kazdou fotkou. Zaoblenie ostava pre tvar fokusoveho prstenca. */
.au-burger { border-color: transparent; }
@supports (corner-shape: squircle) { .au-burger { border-radius: 10px; corner-shape: squircle; } }

/* Prúžky sú kreslené CSS, nie ručne písaným SVG. */
.au-burger__bar, .au-burger__bar::before, .au-burger__bar::after {
    position: absolute;
    left: 50%;
    width: 20px; height: 1.5px;
    margin-left: -10px;
    background: var(--au-bone);
    transition: transform .28s var(--au-ease), opacity .18s var(--au-ease);
}
.au-burger__bar { top: 50%; margin-top: -.75px; }
.au-burger__bar::before, .au-burger__bar::after { content: ""; left: 0; margin-left: 0; }
.au-burger__bar::before { top: -6px; }
.au-burger__bar::after { top: 6px; }

.au-burger[aria-expanded="true"] .au-burger__bar { background: transparent; }
.au-burger[aria-expanded="true"] .au-burger__bar::before { transform: translateY(6px) rotate(45deg); }
.au-burger[aria-expanded="true"] .au-burger__bar::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 759px) {
    .au-header__inner { flex-wrap: nowrap; }
    .au-logo img { height: 38px; }
    /* Dotykova plocha 44 px, obrazok logotypu zostava 38 px. */
    .au-logo { min-width: 44px; min-height: 44px; }
    .au-header__side { margin-inline-start: auto; gap: .7rem; }
    .au-burger { display: inline-flex; }
    /* Dotykova plocha 44 px ako hamburger vedla, pismo zostava rovnake. */
    .au-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-block: 0; }

    .js-nav .au-nav {
        position: absolute;
        left: 0; right: 0; top: 100%;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: .4rem var(--au-gutter) 1.1rem;
        background: var(--au-void);
        border-bottom: 1px solid var(--au-line);
        box-shadow: 0 24px 50px rgba(0, 0, 0, .5);
    }
    .js-nav .au-nav[hidden] { display: none; }
    .js-nav .au-nav a {
        font-size: 1.05rem;
        padding-block: .85rem;
        border-bottom: 1px solid var(--au-line-soft);
        border-top: 0;
    }
    .js-nav .au-nav a:last-child { border-bottom: 0; }
    /* V rozbalenom mobilnom menu nie je čo dorovnávať: položky sú pod sebou,
       takže zosilnenie písma nemá ako posunúť susedov. Neviditeľná kópia
       by tam iba pridala prázdne miesto, preto sa vypína. */
    .js-nav .au-nav a { display: block; }
    .js-nav .au-nav a::after { display: none; }

    /* Bez JS zostane menu ako druhý riadok, teda vždy dostupné. */
    html:not(.js-nav) .au-header__inner { flex-wrap: wrap; row-gap: .5rem; }
    html:not(.js-nav) .au-nav { order: 3; width: 100%; margin-inline-start: 0; gap: 1.15rem; padding-top: .5rem; border-top: 1px solid var(--au-line-soft); }
    html:not(.js-nav) .au-nav a { font-size: .85rem; }

    /* Ked menu vypadne do druheho riadku, hlavicka NEMA 77 px, ale 110 px.
       Odmerane. Hero sa pritom vytahuje hore o pevnych 77 px z tokenu, takze
       by nad fotkou zostal 33 px pas pozadia stranky. Nie je to teoreticky
       stav: auportal.js je `defer`, takze KAZDE mobilne nacitanie zacina bez
       triedy js-nav a az potom ju skript prida. Bez skriptu to plati natrvalo.
       V tomto stave sa preto hero pod hlavicku vobec netiahne a vsetko vyzera
       ako pred 10. 9. 2026.
       `:not(.au-hero--plain)` musi byt aj tu, inak by `html:not(.js-nav) ...
       .au-hero__panel` so specifickostou (0,3,1) prebilo `.au-hero--plain
       .au-hero__panel` (0,2,0) a rozhodilo odsadenie na pravnej stranke. */
    html:not(.js-nav) .au-hero:not(.au-hero--plain) { margin-top: 0; padding-top: 0; }
    html:not(.js-nav) .au-hero:not(.au-hero--plain) .au-caption { top: 0; }
    html:not(.js-nav) .au-burger { display: none; }
}

/* --- Hero: celoplošná fotografia a sklenená tabuľa --------------------- */
/*
   Vývoj tohto hero stojí za zápis, lebo každá verzia padla z iného dôvodu.

   1. Text na fotke pod gradientom. Aby prešiel na AA, potreboval pod sebou
      clonu okolo 0,86 az 0,91, čo z fotografie spraví sivý závoj.
   2. Delená kompozícia, text na plnej ploche vedľa fotky. Kontrast dokonalý,
      ale fotka dostala len polovicu plochy a Adam chcel vidieť celú.
   3. Toto: fotografia je celoplošná a nedotknutá, text stojí na sklenenej
      tabuli, ktorá je od okrajov odsadená, takže okolo nej vidno ostrý obraz.
      Práve ten rozdiel medzi ostrým okolím a rozmazaným vnútrom robí sklo.

   POZOR na jednu vec, ktorá sa dá ľahko prehliadnuť: rozostrenie tu kontrastu
   takmer nepomáha. Modeloval som backdrop-filter gaussom na skutočnej fotke
   a najsvetlejšie miesto pod tabuľou kleslo z rgb(237,241,240) pri blur(18px)
   len na rgb(225,227,225) pri blur(40px). Rozostrenie priemeruje, a keď je
   pod tabuľou súvislá svetlá plocha (biele domy a obloha), priemer zostane
   svetlý. Tón skla preto musí robiť prácu sám.

   Z toho plynie farebné rozhodnutie: bronzová má na skle kontrast 2,4:1
   a na text sa NESMIE použiť. V hero preto nesie bronzovú len tlačidlo
   a značka. Texty sú v kosti a v tlmenej kosti.

   Toto je webová aproximácia matného skla cez backdrop-filter, nie Apple
   Liquid Glass. Ten je API platformy Apple a pre web neexistuje.
*/

.au-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 78svh;
    background: var(--au-void);
    overflow: hidden;
}

/* Hero siaha AZ POD HLAVICKU, teda zacina na samom vrchu stranky a hlavicka
   nad nim plava. Presne na to je hlavicka od 10. 9. 2026 priehladna.

   Hlavicka je STICKY, takze stale zabera svojich 77 px v toku. Hero sa preto
   o tu istu hodnotu vytiahne zapornym hornym okrajom. Celkova vyska stranky
   sa tym nemeni: hero narastie o 77 px (min-height nizsie) a o 77 px sa
   posunie hore.

   Preco nie `position: fixed` na hlavicke: fixed by ju vybral z toku na
   VSETKYCH strankach vratane /kontakt, kde hero vobec nie je, a obsah by jej
   vliezol pod. Zaporny okraj sa tyka iba stranok, ktore hero maju.

   Preco `:not(.au-hero--plain)`: tmave hero bez fotky (privacy stranka) ma
   obsah pri hornej hrane, `padding-block` zacina na 3,5 rem, teda 56 px, co
   je MENEJ nez hlavicka. Pri nizkom okne by menovka skoncila pod nou. Je to
   presne ta pasca, ktora uz raz zhodila kontrast na /projekty na 1,06:1:
   pravidlo platilo na viac prvkov, nez malo. `:not()` ma navyse vyssiu
   specifickost nez `.au-hero--plain`, takze rozhoduje bez ohladu na to, kde
   v subore stoji. */
.au-hero:not(.au-hero--plain) {
    margin-top: calc(-1 * var(--au-hlavicka));
    /* Zaporny okraj sam nestaci. Hero je `align-items: flex-end`, takze ked je
       obsah vyssi nez hero, tabula pretecie HORE, teda pod hlavicku. Odmerane
       pri 1000x320: tabula skoncila na 46 px, hlavicka konci na 77 px, cize
       text lezal pod menu. Vnutorny okraj hore posunie obsahovu cast hero pod
       hlavicku, takze sa tam obsah nedostane nikdy. `box-sizing: border-box`
       plati globalne, takze `min-height: 100svh` uz tento okraj obsahuje
       a tabula na beznych vyskach nezmeni polohu ani o pixel. */
    padding-top: var(--au-hlavicka);
}
/* Fotky sa vnutorny okraj NETYKA a netreba ju nicim posuvat. Obalovy blok
   absolutne umiestneneho prvku je PADDING BOX, ktory oblast vnutorneho okraja
   uz obsahuje, takze `.au-hero__media { inset: 0 }` kryje cely border box aj
   s pasom pod hlavickou. Skusil som to najprv posunut o -77 px a fotka zacala
   77 px NAD hornou hranou okna. Odmerane, nie vydedukovane. */
/* Bez backdrop-filter nemá čo stmaviť podklad, takže by nad svetlou fotkou
   zostala vrstva 0,15 a text by zmizol. Tam preto nastupuje plná vrstva. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .au-header { background: rgba(20, 22, 26, .92); }
}
/* Kto si vypyta menej priehladnosti, ten ju nema dostat ani v hlavicke.
   Doteraz sa to tolko netykalo, lebo hlavicka stala nad fotkou az po
   odrolovani. Odkedy hero siaha pod nu, je sklom hned od nacitania, takze
   vetva musi existovat rovnako ako pri sklenenej tabuli. Rovnaka hodnota
   ako v zalohe pre chybajuci backdrop-filter vyssie. */
@media (prefers-reduced-transparency: reduce) {
    .au-header {
        background: rgba(20, 22, 26, .92);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (min-width: 900px) {
    /* Presne jedna obrazovka. Hlavicka uz hero nekrati, lebo hero je pod nou
       (zaporny okraj vyssie), takze tu patri cistych 100 svh. Dovtedy tu
       bolo `calc(100svh - var(--au-hlavicka))` a hero zacinalo az tam, kde
       konci menu. Adam, 10. 9. 2026: "au-hero is not the full 100 vh, it
       starts when the menu ends".
       svh, nie vh: vh na mobile pocita s vysunutym panelom prehliadaca
       a hero potom pri rolovani poskakuje. */
    .au-hero { min-height: 100svh; }
    /* Tabuľa NIE JE na stred. V strede zakrývala práve tú časť fotografie,
       kde býva stavba a obloha, teda to, kvôli čomu tam fotka je. */
    .au-hero { align-items: flex-end; }
}

/* Fotografia. Celoplošná, bez jedinej vrstvy navrchu. */
/* z-index 0 tu NIE JE zbytocny: zaklada vlastny stohovaci kontext, v ktorom
   sa vybavi poradie jednotlivych fotiek pri prechode. Bez neho by z-index
   fotiek superil priamo so sklenenou tabulou (.au-hero__panel ma z-index 1)
   a prekryl by ju, takze by z hero zmizol nadpis aj obe tlacidla. Stalo sa. */
.au-hero__media { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.au-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Striedanie fotiek prelínaním. Prelína sa iba opacity, teda nič sa
   neprepočítava a layout sa nepohne. Bez JS ostane viditeľná prvá fotka,
   pretože triedu is-shown má už zo šablóny. */
.au-slides .au-slide { opacity: 0; transition: opacity 1.5s var(--au-ease); }
.au-slides .au-slide.is-shown { opacity: 1; }
.au-hero__media > img:only-of-type { opacity: 1; }
.au-caption { transition: opacity .5s var(--au-ease); }
.au-caption.je-prazdna { opacity: 0; }

.au-hero__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-inline: max(var(--au-gutter), calc((100vw - var(--au-shell)) / 2 + var(--au-gutter)));
    padding-block: clamp(2rem, 5vh, 4rem);
}
/* MUSÍ stáť ZA základným pravidlom vyššie. Media query nepridáva
   špecifickosť, takže keď to isté nastavím v skoršom @media, základné
   pravidlo ho prebije a odsadenie sa vôbec neuplatní. Presne to sa tu už
   raz stalo a tabuľa zostala tam, kde bola.

   Hodnota nie je odhad. Tabuľa je vysoká 363 px v hero vysokom 792 px, teda
   46 % jeho výšky. Pri takom pomere sa jej TOP nedá položiť na dolnú tretinu,
   lebo by prečnievala. Na dolnú tretinu sa preto kladie jej STRED:
   0,66 x 792 = 523, čiže spodok tabule 705 a pod ním 87 px.
   Popiska fotky sedí na 758 px, takže medzi ne zostane 53 px. */
@media (min-width: 900px) {
    .au-hero__panel { padding-block-end: clamp(3.5rem, 9.7vh, 6.5rem); }
}

/* SVETLÁ tabuľa. Tón 0,60 je vypočítaný, nie zvolený.

   Rozhodujúce je NAJTMAVŠIE miesto fotky pod tabuľou, teda opak toho, čo
   platilo pri tmavej tabuli. Tu je to rgb(83,90,97) a pri tóne 0,60 z neho
   vyjde kompozit okolo rgb(175,178,178). Nadpis --au-ink na ňom má 8,4:1
   a lead #3f4348 má 4,7:1.

   Pôvodne tu bolo 0,80, čo dávalo leadu 5,3:1, ale tabuľa bola zbytočne
   nepriehľadná. Nižší tón sa dal kúpiť tým, že lead stmavol zo #4a4f55
   na #3f4348. Pod 0,52 už neprejde ani ten, takže 0,60 je blízko hranice
   a pri zmene fotky v hero treba premerať znovu.

   Bronzová na text nejde ani tu: má 1,98:1. Je to presne to isté obmedzenie
   ako na tmavom skle, len zrkadlovo, a rieši sa rovnako, teda plôškou
   s vlastnou výplňou. Tlačidlá dostali tmavší bronzový okraj #8e6845, ktorý
   má voči tabuli 3,1:1, aby mal prvok podľa WCAG 1.4.11 čitateľný obrys. */
.au-hero__inner {
    width: min(100%, 36rem);
    padding: clamp(1.9rem, 3.2vw, 2.9rem);
    background: rgba(237, 237, 233, .70);
    backdrop-filter: blur(30px) saturate(125%);
    -webkit-backdrop-filter: blur(30px) saturate(125%);
    /* Hrana musí fungovať nad SVETLOU aj nad tmavou fotkou. Biely okraj sám
       nad svetlou oblohou zmizne a panel začne pôsobiť, akoby sa rozpúšťal.
       Preto je vlastný okraj tmavý s nízkym krytím (drží tvar nad svetlým)
       a biela zostáva ako vnútorný odlesk na hornej hrane (drží dojem skla,
       ktoré zachytáva svetlo zhora). */
    border: 1px solid rgba(14, 16, 19, .10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .85),
        inset 0 -1px 0 rgba(14, 16, 19, .07),
        0 30px 80px rgba(0, 0, 0, .34);

    /* Squircle, nie bežný oblúk. border-radius kreslí kruhový oblúk, ktorý
       na hrane skokovo mení zakrivenie a pôsobí "nalepene". corner-shape
       kreslí superelipsu, kde zakrivenie prechádza plynulo. Rozdiel je malý
       a presne preto stojí za to.

       border-radius je zároveň záloha: Safari a Firefox corner-shape zatiaľ
       nepoznajú a dostanú normálny oblúk, čo je v poriadku. */
    /* ZÁLOHA, ktorá platí všade: bežný kruhový oblúk. Safari ani Firefox
       corner-shape zatiaľ nepoznajú a dostanú toto. Polomer 26 px je zvolený
       tak, aby optická váha rohu sedela s tým, čo vykreslí squircle pri 34,
       nie aby bolo číslo rovnaké. */
    border-radius: 26px;
}

/* Skutočný squircle tam, kde ho prehliadač vie. Squircle pri rovnakom polomere
   pôsobí tesnejšie než kruhový oblúk, preto sa polomer zdvihne. */
@supports (corner-shape: squircle) {
    .au-hero__inner {
        border-radius: 34px;
        corner-shape: squircle;
    }
}

/* Bez podpory rozostrenia pozadia by bola tabuľa priesvitná a text nečitateľný. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .au-hero__inner { background: rgba(237, 237, 233, .95); }
}
/* Kto si vypol priehľadnosť, dostane plnú plochu. */
@media (prefers-reduced-transparency: reduce) {
    .au-hero__inner {
        background: var(--au-bone);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.au-hero .au-eyebrow { color: var(--au-ink); }

/* Menovka ako plná bronzová plôška.
   Toto je jediný spôsob, ako dostať značkovú farbu na sklo. Ako TEXT tam má
   bronzová 2,4:1 a použiť sa nesmie, ale ako PLOCHA s tmavým textom prejde
   s rezervou: --au-void na --au-bronze je 6,00:1. Plôška je hranatá, takže
   tvarový zámok drží, rovnako ako štítok stavu na detaile projektu. */
/* Menovka NEMÁ plnú plochu. Bola to najsilnejšia vec v celom paneli, hoci
   je to najmenej dôležitý text: hierarchia bola obrátená. Plná bronzová
   plôška zároveň ťahá jediný akcent webu na štítok, ktorý nikto nečíta,
   namiesto na tlačidlo, ktoré má viesť k akcii.

   Pred menovkou nie je ŽIADNY znak. Vodorovná vlásočnica vyzerala ako dlhá
   pomlčka, zvislá ako kurzor alebo oddeľovač v tabuľke. Tretí tvar by bol
   len ďalší pokus o to isté. Menovka stojí sama, čo je aj tak najzdržanlivejšie
   riešenie: nadpis pod ňou nesie význam, menovka ho má len uviesť. */
.au-hero .au-eyebrow--chip {
    /* block, nie inline-block. Inline-block sedí na účiare riadkového boxu
       rodiča a ten má vlastné prestrkanie, takže nad menovkou vznikalo
       11 px, ktoré nie sú v žiadnom pravidle a nedali sa odladiť.
       Odmerané: pri inline-block bola menovka 10,99 px pod odsadením tabule,
       pri block sedí presne na ňom. */
    display: block;
    background: none;
    padding: 0;
    letter-spacing: .2em;
    margin-bottom: 1.15rem;
    /* line-height 1 zruší polovičné prestrkanie nad a pod riadkom. Bez neho
       je box menovky vyšší než samotné písmo a odsadenie zhora sa opticky
       nerovná odsadeniu zdola, hoci v číslach vyzerá symetricky. Je to
       jednoriadková menovka, takže preklad nemá čo riešiť. */
    line-height: 1;
}
@media (max-width: 899px) {
    .au-hero .au-eyebrow--chip { letter-spacing: .16em; }
}
.au-hero .au-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(14, 16, 19, .35); }
.au-hero .au-eyebrow a:hover { color: var(--au-void); border-bottom-color: currentColor; }
/* O stupeň menší než predtým. Nadpis sa škáluje podľa TABULE, nie podľa
   viewportu: pri 3vw mal na 1600 px 48 px v 576 px širokej tabuli a lámal sa
   do troch nerovnakých riadkov. */
/* Strop je 2,4 rem, teda 38,4 px, a NIE JE to odhad. Pri 2,6 rem (41,6 px)
   potreboval prvý riadok "Od pozemku po domov" 492 px, no rám tabule má 481 px.
   Chýbalo jedenásť pixelov a nadpis sa zlomil na tri riadky namiesto dvoch,
   ale az od zhruba 1900 px, takže pri bežnom testovaní to nebolo vidieť.
   Najväčšia veľkosť, ktorá sa ešte zmestí, je 40,5 px, 38,4 px má rezervu. */
/* Displejové ladenie: záporné prestrkanie a tesnejší preklad. Pri nadpise
   tejto veľkosti je normálne prestrkanie priveľké a text pôsobí ako bežná
   sadzba, nie ako titul. */
.au-hero h1 {
    /* Horny strop je 2,3 rem, nie 2,4. Pri 2,4 rem (38,4 px) ma tabula pre
       nadpis 481 px a anglicke "to a home ready to live in" potrebuje 484 px,
       takze od zhruba 1900 px sa slovo "in" zlomilo na treti riadok. Sú to
       tri pixle, a nedali sa vidiet, len odmerat. Pri 2,3 rem je rezerva
       17 px a slovencina ma este viac. Rozdiel vo velkosti je 4 %, teda
       neviditelny, a plati az nad 1443 px, kde je nadpis aj tak najvacsi. */
    font-size: clamp(1.8rem, 2.55vw, 2.3rem);
    max-width: none;
    line-height: 1.05;
    letter-spacing: -.028em;
}
/* max-width je 44ch, nie 36ch: lead má riadené zalomenie po slove "a" a pri
   36ch by sa prvý riadok zlomil skôr, než sa k tomu <br> dostane, takže by
   z dvoch riadkov vznikli tri. Meradlo tak drží zalomenie, nie naopak. */
.au-hero .au-lead { margin-top: 1.1rem; font-size: 1.02rem; line-height: 1.55; color: var(--au-bone-dim); max-width: 44ch; }

/* Na úzkej obrazovke sa vynútené zlomenie NEHODÍ: každá polovica sa zalomí
   ešte raz, takže z dvoch riadkov vzniknú štyri a spojky ostávajú samé.
   Pod 600 px sa preto <br> vypína a riadky vyvažuje prehliadač.
   text-wrap: balance vyrovná ich dĺžky, čo je presne to, čo by inak musel
   spraviť ďalší ručný zlom pre každú šírku zvlášť. */
@media (max-width: 599px) {
    .au-hero__inner h1 br,
    .au-hero__inner .au-lead br { display: none; }
    .au-hero__inner h1 { text-wrap: balance; }
    .au-hero__inner .au-lead { text-wrap: pretty; }
}
/* V sklenenej tabuli meradlo NEOBMEDZUJEM. Šírku drží samotná tabuľa
   (36 rem mínus odsadenie) a lead má riadené zalomenie: pri akomkoľvek
   znakovom meradle sa prvý riadok zlomil skôr, než sa k <br> dostal, takže
   z dvoch riadkov vznikli tri a spojka "a" zostala sama na riadku. */
.au-hero__inner .au-lead { max-width: none; }
.au-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

/* --- Prepisy pre SVETLÚ tabuľu ------------------------------------------- */
/* Musia stáť AZ TU, za všetkými pravidlami .au-hero, lebo majú rovnakú
   špecifickosť a rozhoduje poradie. Keď boli vyššie, .au-hero .au-lead ich
   prebilo a lead zostal svetlosivý na svetlom podklade, teda nečitateľný.
   Kontrasty voči najtmavšiemu miestu fotky pod tabuľou:
   nadpis 12,3:1, lead 5,3:1, plôška 6,00:1, kontaktné tlačidlo 15,4:1. */
/* POZOR NA ROZSAH. .au-hero__inner nesie aj TMAVÉ hero bez fotky
   (.au-hero--plain na /projekty, /o-nas a na detailoch bez obrázka).
   Bez :not() dostal nadpis na týchto stránkach farbu --au-ink na podklade
   --au-void, teda kontrast 1,06:1 a bol prakticky neviditeľný. Bolo to živé.
   Prepisy pre svetlú tabuľu preto NIKDY nesmú platiť pre --plain. */
.au-hero:not(.au-hero--plain) .au-hero__inner h1 { color: var(--au-ink); }
/* Lead prepočítaný pre NÁHODNÉ hero. Pri #3f4348 mal nad najtmavším miestom
   fotky 3,68:1, teda NEPRECHÁDZAL AA. Ladil som ho kedysi na jednu konkrétnu
   fotku a odkedy sa hero losuje, ten predpoklad neplatí. Teraz 4,95:1. */
.au-hero:not(.au-hero--plain) .au-hero__inner .au-lead { color: #3b3e43; }
/* Menovka na svetlej tabuli NIE JE čierna. Značková bronzová sa tam ale
   použiť nedá, na kompozite tabule má 1,49:1. Riešenie je najsvetlejší tón
   ZNAČKOVEJ farby, ktorý ešte prejde AA: odtieň aj sýtosť sú z #b08965
   nezmenené, hľadala sa iba svetlosť, rovnako ako pri celej palete.
   #543f2b má 4,63:1 na nameranom najtmavšom kompozite tabule rgb(175,178,178)
   a 7,15:1 na typickom. Čierny --au-ink mal 8,48:1, čiže bol zbytočne tvrdý. */
.au-hero:not(.au-hero--plain) .au-hero__inner .au-eyebrow { color: #4e3a28; }
.au-hero:not(.au-hero--plain) .au-hero__inner .au-eyebrow a { color: #4e3a28; border-bottom-color: rgba(84, 63, 43, .45); }
.au-hero:not(.au-hero--plain) .au-hero__inner .au-eyebrow a:hover { color: #38291c; border-bottom-color: currentColor; }

/* Kontaktné tlačidlo je vždy najsilnejšia plocha voči svojmu podkladu:
   na tmavom kosť, na svetlom atrament. :not() je tu nutné, inak by bronzový
   okraj pre plné tlačidlo obtiahol aj tmavé kontaktné a aj ghost. */
.au-hero:not(.au-hero--plain) .au-hero__inner .au-btn:not(.au-btn--light):not(.au-btn--ghost) { border-color: #8e6845; }
.au-hero:not(.au-hero--plain) .au-hero__inner .au-btn--light {
    background-color: var(--au-ink);
    color: var(--au-bone);
    border-color: var(--au-ink);
}
/* Tmavé tlačidlo na svetlej tabuli sa NESMIE riešiť cez brightness.
   Brightness je násobenie, a na #14161a (hodnoty 20 az 26) je násobok
   nepostrehnuteľný, takže tlačidlo vyzeralo ako bez reakcie. Bola to moja
   chyba v úvahe, nie vec vkusu.

   Tmavý predmet sa rozsvieti inak než svetlý: nezosvetlie sa celý, ale
   ZACHYTÍ SVETLO NA HORNEJ HRANE a jeho popis zbelie. Preto tri veci naraz,
   všetky s rovnakým nábehom ako ostatné tlačidlá:

     1. výplň sa zdvihne a OTEPLÍ, #14161a na #24211c, takže pôsobí ako
        tmavá plocha pod lampou, nie ako svetlejšia sivá,
     2. popis ide z kostenej na čistú bielu,
     3. na hornej hrane sa objaví 1 px svetlá linka a pod ňou slabý tieň,
        čo je presne to, čo robí osvetlená hrana.

   Kontrast biely popis na #24211c je 14,9:1, teda hlboko nad AA. */
.au-hero:not(.au-hero--plain) .au-hero__inner .au-btn--light {
    transition: background-color .55s cubic-bezier(.33, 1, .68, 1),
                color .55s cubic-bezier(.33, 1, .68, 1),
                box-shadow .55s cubic-bezier(.33, 1, .68, 1),
                border-color .55s var(--au-ease),
                transform .12s var(--au-ease);
}
.au-hero:not(.au-hero--plain) .au-hero__inner .au-btn--light:hover,
.au-hero:not(.au-hero--plain) .au-hero__inner .au-btn--light:focus-visible {
    filter: none;
    background-color: #24211c;
    border-color: #24211c;
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26),
                inset 0 -1px 0 rgba(0, 0, 0, .45);
    transition-duration: .26s, .26s, .26s, .26s, .12s;
    transition-timing-function: cubic-bezier(.34, 1.56, .64, 1),
                                cubic-bezier(.34, 1.56, .64, 1),
                                cubic-bezier(.34, 1.56, .64, 1),
                                var(--au-ease), var(--au-ease);
}
.au-hero:not(.au-hero--plain) .au-hero__inner .au-btn--ghost { background: transparent; color: var(--au-ink); border-color: rgba(14, 16, 19, .45); }
.au-hero:not(.au-hero--plain) .au-hero__inner .au-btn--ghost:hover { background: transparent; border-color: var(--au-ink); color: var(--au-ink); }

/* Popiska obrázka. Nie je to ozdoba: hero domovskej stránky je fotomontáž,
   teda skutočná fotografia lokality s vloženou vizualizáciou budovy, a bez
   označenia by developerský web ukazoval nepostavenú budovu ako hotovú. */
.au-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    margin: 0;
    /* Clona pod popiskou. Bola vysoká 2,5 rem a mala tri body, takže hore
       vznikla viditeľná vodorovná hrana cez fotku. Teraz je vysoká 8 rem
       a rampa ide podľa smoothstep (3t2-2t3): na oboch koncoch má NULOVÚ
       deriváciu, čiže prechod nezačína ani nekončí zlomom a oko nemá kde
       uvidieť okraj. Lineárna rampa s dvoma bodmi ho má vždy. */
    padding: 8rem var(--au-gutter) .85rem;
    font-size: .74rem;
    letter-spacing: .04em;
    color: var(--au-bone);
    background: linear-gradient(to top,
        rgba(14, 16, 19, 0.800) 0%,
        rgba(14, 16, 19, 0.778) 10%,
        rgba(14, 16, 19, 0.717) 20%,
        rgba(14, 16, 19, 0.627) 30%,
        rgba(14, 16, 19, 0.518) 40%,
        rgba(14, 16, 19, 0.400) 50%,
        rgba(14, 16, 19, 0.282) 60%,
        rgba(14, 16, 19, 0.173) 70%,
        rgba(14, 16, 19, 0.083) 80%,
        rgba(14, 16, 19, 0.022) 90%,
        rgba(14, 16, 19, 0.000) 100%);
    pointer-events: none;
}
.au-feature__media { position: relative; }

/* Na mobile sedí sklenená tabuľa pri dolnej hrane, takže popiska ide hore,
   aby sa neprekrývali. */
@media (max-width: 899px) {
    .au-hero .au-caption {
        /* Odsadenie o hlavicku patri sem, na `top`, NIE na `padding`.
           Popiska ma vlastnu clonu, ktorej stopy su v PERCENTACH jej vysky.
           Ked som odsadenie skusil cez padding, prvok narastol zo 60 na 137 px,
           text sa posunul z 18 % na 64 % vysky, teda z krytia 0,72 na 0,17,
           a nad zasnezenymi Tatrami zmizol. Takto sa cely prvok posunie
           o 77 px nizsie a voci fotke vyzera presne ako predtym.
           Pas obrazu za hlavickou stmavuje jej vlastny brightness(.45).
           Odmerane v prehliadaci, nie odhadnute.

           `padding` tu je aj tak MRTVY: o 168 riadkov nizsie stoji
           `.au-hero .au-caption { font-size: .66rem; padding: .7rem ... }`
           s rovnakou specifickostou, takze vyhrava ono. */
        top: var(--au-hlavicka); bottom: auto;
        padding: .8rem var(--au-gutter) 6rem;
        background: linear-gradient(to bottom,
        rgba(14, 16, 19, 0.780) 0%,
        rgba(14, 16, 19, 0.758) 10%,
        rgba(14, 16, 19, 0.699) 20%,
        rgba(14, 16, 19, 0.612) 30%,
        rgba(14, 16, 19, 0.505) 40%,
        rgba(14, 16, 19, 0.390) 50%,
        rgba(14, 16, 19, 0.275) 60%,
        rgba(14, 16, 19, 0.168) 70%,
        rgba(14, 16, 19, 0.081) 80%,
        rgba(14, 16, 19, 0.022) 90%,
        rgba(14, 16, 19, 0.000) 100%);
    }
}

/* Pomalý prísun do fotky. Jednorazový, nie slučka: dobehne a zostane stáť.
   Nekonečné pohupovanie pôsobí nervózne, jeden pomalý pohyb pôsobí draho.
   Hýbe sa iba transform, takže sa nič neprepočítava a layout sa nepohne. */
@media (prefers-reduced-motion: no-preference) {
    .au-zoom img {
        animation: au-prisun 26s cubic-bezier(.22, .61, .36, 1) forwards;
        transform-origin: 58% 62%;
        will-change: transform;
    }
    /* Pri striedaní beží pohyb na KAŽDEJ fotke zvlášť a trvá presne toľko,
       koľko je fotka na obrazovke. Inak by tretia fotka nastúpila s pohybom,
       ktorý už dávno dobehol na prvej. */
    .au-slides .au-slide { animation: none; }
    .au-slides .au-slide.is-shown { animation: au-prisun 11s cubic-bezier(.22, .61, .36, 1) forwards; }

    /* --- Podpis stránky ---------------------------------------------------
       Jeden a ten istý prísun s jedným a tým istým rozplynutím na všetkých
       stránkach je to, čo prezradí šablónu. Každý typ stránky má preto vlastný
       pohyb aj vlastný prechod. Nie sú to štyri ozdoby, každý niečo hovorí:

         prísun   domovská, príchod, kamera ide dnu
         pan      výpis, prehliadka, kamera prechádza krajinu
         odsun    o nás, odstup, z detailu na celok
         kľud     detail projektu, takmer nehybné, hviezdou je fotka projektu

       Rozsah je zámerne malý. Meria sa v percentách, nie v dojme: najväčší
       posun je 1,6 % šírky a najväčšia zmena mierky 9 %. Nad tým to prestáva
       byť pohyb a začína byť efekt. */
    .au-zoom--pan img   { animation-name: au-pan;   transform-origin: 50% 50%; }
    .au-zoom--odsun img { animation-name: au-odsun; transform-origin: 50% 38%; }
    .au-zoom--klud img  { animation-name: au-klud;  transform-origin: 50% 50%; animation-duration: 40s; }
    .au-slides.au-zoom--pan .au-slide.is-shown   { animation-name: au-pan; }
    .au-slides.au-zoom--odsun .au-slide.is-shown { animation-name: au-odsun; }
    .au-slides.au-zoom--klud .au-slide.is-shown  { animation-name: au-klud; animation-duration: 13s; }
}

/* Nábeh sklenenej tabule. Krátke oneskorenie je zámerné: fotka nastúpi
   prvá a tabuľa na ňu doľahne až potom, takže sa hero číta ako dva kroky,
   nie ako jedna vec, ktorá sa objaví.

   fill-mode je BACKWARDS, nie forwards. Backwards drží počiatočný stav iba
   počas oneskorenia a po dobehnutí nechá prvok v jeho PRIRODZENOM stave.
   Vďaka tomu nie je tabuľa nikde v CSS skrytá: keby sa animácia z akéhokoľvek
   dôvodu nespustila, panel je normálne viditeľný. Pri forwards a opacity 0
   v základnom stave by stačila jedna chyba a hero by zostalo prázdne. */
@media (prefers-reduced-motion: no-preference) {
    /* ZIADNE animation-delay a ZIADNY fill-mode. Oneskorenie je v samotnej
       krivke (prvých 24 % je prvok ešte neviditeľný), takže prirodzený stav
       prvku zostáva opacity 1.

       Prečo takto: pri `delay .28s backwards` drží backwards počiatočný stav
       počas oneskorenia, lenže keď sa animácia z akéhokoľvek dôvodu nespustí,
       drží ho NAVŽDY a tabuľa zostane neviditeľná. Presne to sa stalo hneď
       pri prvom nasadení: po dvoch sekundách hlásila opacity 0.

       V tejto podobe je najhorší možný výsledok ten, že sa nábeh neukáže.
       Panel bude vždy viditeľný. */
    .au-hero__inner {
        animation: au-tabula 1.15s cubic-bezier(.16, 1, .3, 1);
    }
}
@keyframes au-tabula {
    0%   { opacity: 0; transform: translateY(14px); }
    24%  { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: none; }
}

@keyframes au-prisun {
    from { transform: scale(1); }
    to   { transform: scale(1.075); }
}
@keyframes au-odsun {
    from { transform: scale(1.09); }
    to   { transform: scale(1); }
}
/* Mierka musí zostať nad 1 po celý čas, inak by pri posune do strany vykukol
   okraj fotky. Preto sa scale nemení a hýbe sa iba translateX. */
@keyframes au-pan {
    from { transform: scale(1.09) translateX(1.6%); }
    to   { transform: scale(1.09) translateX(-1.6%); }
}
@keyframes au-klud {
    from { transform: scale(1); }
    to   { transform: scale(1.03); }
}

/* --- Prechody medzi fotkami ---------------------------------------------- */
/* Poradie vykreslenia rieši z-index, nie poradie v DOM. Cyklus sa vracia od
   poslednej fotky k prvej, a tá je v DOM VYŠŠIE, teda by sa kreslila POD
   odchádzajúcou a zaclona ani zaostrenie by nebolo vidieť. Prichádzajúca
   fotka preto vždy vystúpi nad odchádzajúcu. */
.au-slides .au-slide { z-index: 1; }
.au-slides .au-slide.is-shown { z-index: 2; }

/* Zaclona. Fotka je stále nepriehľadná a odhaľuje sa zľava doprava. */
.au-slides--zaclona .au-slide {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.4s cubic-bezier(.76, 0, .24, 1);
}
.au-slides--zaclona .au-slide.is-shown { clip-path: inset(0 0 0 0); }

/* Zaostrenie. Fotka pripláva rozostrená a doostrí sa. */
.au-slides--zaostrenie .au-slide {
    filter: blur(10px);
    transition: opacity 1.6s var(--au-ease), filter 1.6s var(--au-ease);
}
.au-slides--zaostrenie .au-slide.is-shown { filter: blur(0); }
/* Na mobile rozostrenie celoplošnej fotky stojí zbytočne veľa výkonu,
   tam stačí rozplynutie. */
@media (max-width: 899px) {
    .au-slides--zaostrenie .au-slide { filter: none; transition: opacity 1.6s var(--au-ease); }
}

/* Pokojné rozplynutie pre detail projektu, dlhšie a mäkšie než na domovskej. */
.au-slides--tiche .au-slide { transition: opacity 2.2s var(--au-ease); }

@media (prefers-reduced-motion: reduce) {
    .au-slides--zaclona .au-slide { clip-path: none; opacity: 0; transition: none; }
    .au-slides--zaclona .au-slide.is-shown { opacity: 1; }
    .au-slides--zaostrenie .au-slide { filter: none; transition: none; }
}

@media (max-width: 899px) {
    /* Tabuľa klesne k dolnej hrane, aby nad ňou zostal čistý kus fotografie.
       Výšky sú stiahnuté zámerne: pri prvom pokuse mala tabuľa 471 px, celý
       hero 95 % obrazovky a druhé tlačidlo končilo na 825 px pri viewporte
       812, teda sa krájalo. Merané, nie odhadnuté. */
    .au-hero { min-height: 0; align-items: flex-end; }
    .au-hero__media { min-height: 0; }
    .au-hero__media img { object-position: 50% 34%; }
    /* Bez zmeny. Odsadenie o hlavicku uz nesie `padding-top` na .au-hero,
       takze tabula sedi presne tam, kde sedela, a nad nou len pribudlo
       77 px fotografie. Keby sa hlavicka pripocitala este aj tu, zratala by
       sa dvakrat a tabula by klesla o 77 px. */
    .au-hero__panel { padding-block: 30svh 1.2rem; }
    /* Na mobile je tabuľa na stred. Pri ľavom zarovnaní zostávalo vpravo
       nerovné prázdne miesto, lebo riadky nadpisu aj leadu majú rôznu dĺžku
       a v úzkej tabuli to vyzerá ako chyba, nie ako zámer. */
    .au-hero__inner { width: 100%; padding: 1.5rem 1.25rem 1.6rem; border-radius: 20px; text-align: center; }
    .au-hero__inner .au-lead { margin-inline: auto; }
    .au-hero__actions { justify-content: center; }
    @supports (corner-shape: squircle) { .au-hero__inner { border-radius: 26px; corner-shape: squircle; } }
    .au-hero .au-eyebrow { margin-bottom: .7rem; font-size: .68rem; }
    .au-hero h1 { font-size: 1.7rem; }
    .au-hero .au-lead { margin-top: .8rem; font-size: .92rem; }
    .au-hero__actions { margin-top: 1.25rem; gap: .55rem; }
    .au-hero__actions .au-btn { padding: .68rem 1rem; font-size: .87rem; }
    .au-hero .au-caption { font-size: .66rem; padding: .7rem var(--au-gutter) 2rem; }
}

/* Hero bez fotografie: žiadne sklo, plná plocha, bronzová menovka platí. */
.au-hero--plain { min-height: 0; overflow: visible; border-bottom: 1px solid var(--au-line); }
@media (min-width: 900px) { .au-hero--plain { min-height: 0; } }
.au-hero--plain .au-hero__panel { padding-block: clamp(3.5rem, 12vh, 7rem); }
.au-hero--plain .au-hero__inner {
    width: 100%; max-width: var(--au-shell); padding: 0;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; box-shadow: none;
    border-radius: 0;   /* nie je to predmet, je to plocha */
}
.au-hero--plain .au-eyebrow { color: var(--au-bronze); }
.au-hero--plain h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 20ch; }
.au-hero--plain .au-lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--au-slate); max-width: 54ch; }

/* --- Tlačidlá ------------------------------------------------------------ */

.au-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    white-space: nowrap;
    background: var(--au-bronze);
    color: var(--au-void);
    border: 1px solid var(--au-bronze);
    padding: .8rem 1.5rem;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;

    /* Prejdenie myšou: tlačidlo sa ROZSVIETI. Nie je to naliatie výplne zdola
       ani nič z toho, čo dnes robí kdekto (zväčšenie, žiara, tieň, letiaca
       šípka, prebehnutý lesk). Rozjasní sa celá plocha NARAZ aj s popisom,
       lebo presne to robí svetlo: nesvieti na časť predmetu.

       Robí to filter: brightness, takže výplň, okraj aj text stúpnu spolu
       a v jednom kroku, bez piatich zosúladených prechodov.

       Vlákno sa nikdy nerozsvieti skokom. Nábeh má preto krivku, ktorá
       PREKMITNE nad cieľovú hodnotu a usadí sa (cubic-bezier s y nad 1),
       čo je to krátke preblesknutie. Dohasínanie je pomalšie a bez prekmitu,
       550 ms proti 260 ms. Časovanie zhasínania drží základný stav,
       rozsvietenia stav :hover.

       Vnútorná svetlá linka na hornej hrane je plocha, ktorá zachytila
       svetlo, nie žiara okolo predmetu. Preto je INSET a má 1 px. */
    filter: brightness(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0);
    transition: filter .55s cubic-bezier(.33, 1, .68, 1),
                box-shadow .55s cubic-bezier(.33, 1, .68, 1),
                border-color .55s var(--au-ease),
                transform .12s var(--au-ease);
}
.au-btn:hover,
.au-btn:focus-visible {
    filter: brightness(1.13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    transition-duration: .26s, .26s, .26s, .12s;
    transition-timing-function: cubic-bezier(.34, 1.56, .64, 1),
                                cubic-bezier(.34, 1.56, .64, 1),
                                var(--au-ease), var(--au-ease);
}
.au-btn:active { transform: translateY(1px); filter: brightness(1.05); }

/* Pri vypnutom pohybe sa tlačidlo rozsvieti tiež, len bez nábehu a prekmitu. */
@media (prefers-reduced-motion: reduce) {
    .au-btn { transition: filter .01ms, box-shadow .01ms, border-color .01ms; }
}

/* Tlačidlo je predmet, na ktorý sa klikne, takže má mäkkú hranu.
   border-radius je záloha pre Safari a Firefox, squircle až v @supports. */
.au-btn { border-radius: 13px; }
@supports (corner-shape: squircle) {
    .au-btn { border-radius: 17px; corner-shape: squircle; }
}

/* Okraj ghost tlačidla je jediné, čo ho ohraničuje, takže podľa WCAG 1.4.11
   potrebuje voči podkladu 3:1. S pôvodným --au-line mal 1,44:1 na ploche
   a 1,48:1 na skle, teda bol prakticky neviditeľný a tlačidlo pôsobilo ako
   obyčajný text. Pri 0,55 má 5,4:1 na ploche a 3,4:1 na skle. */
.au-btn--ghost {
    background-color: transparent;
    color: var(--au-bone);
    border-color: rgba(237, 237, 233, .55);
    /* Ghost tlačidlo je priehľadné, takže samotné brightness by nemalo čo
       rozjasniť. Rozsvieti sa preto jeho vlastný podklad: z ničoho na sotva
       viditeľnú kostenú blanu. Bronzovú NEDOSTANE, tá je vyhradená značke,
       plnému tlačidlu a štítku stavu. Keby ju dostal aj obrys, prestala by
       čokoľvek znamenať. */
    background-color: transparent;
}
.au-btn--ghost:hover,
.au-btn--ghost:focus-visible {
    background-color: rgba(237, 237, 233, .09);
    border-color: rgba(237, 237, 233, .9);
    color: var(--au-bone);
}

/* Svetlé tlačidlo je vyhradené JEDINEJ akcii na celom webe: "Napíšte nám".
   Kontaktný formulár je podľa pravidla 4 hlavná funkcia webu, nie doplnok,
   a starý web nemal ani jeden. Preto je to jediná biela plocha v celom
   rozhraní a nič iné ju nesmie dostať, inak stratí význam.
   Kontrast textu: --au-void na --au-bone je 16,23:1. */
.au-btn--light {
    background-color: var(--au-bone);
    color: var(--au-void);
    border-color: var(--au-bone);
}
.au-btn--light:hover,
.au-btn--light:focus-visible { border-color: #ffffff; }

/* --- Vyhlásenie, veľká sadzba bez obrázka -------------------------------- */

.au-statement { padding-block: clamp(4rem, 11vh, 8rem); border-bottom: 1px solid var(--au-line-soft); }
.au-statement__text {
    font-size: clamp(1.35rem, 2.9vw, 2.25rem);
    font-stretch: 108%;
    font-weight: 400;
    line-height: 1.28;
    letter-spacing: -.02em;
    max-width: 22ch;
    margin: 0;
}
.au-statement__text b { font-weight: 600; color: var(--au-bronze); }

.au-statement__grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
    .au-statement__grid { grid-template-columns: 1.35fr 1fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
    .au-statement__text { max-width: none; }
}
.au-statement__aside { color: var(--au-slate); max-width: 46ch; padding-top: .5rem; }

/* --- Čísla, oddelené linkou, nie kartami --------------------------------- */

.au-figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--au-line);
    /* Odsadenie ZDOLA patrí komponentu, nie stránke. Bez neho nadväzoval
       obrazový pás priamo na popisky čísel a stránka sa v tom mieste zlepila.
       MUSÍ byť v tejto skratke, nie ako samostatné padding-bottom nad ňou:
       skratka padding-block prepíše obe strany, takže by ho vynulovala.
       Presne tak som si to raz už rozbil. */
    padding-block: clamp(2.5rem, 6vh, 4rem) clamp(2.5rem, 6vh, 4rem);
    column-gap: 1.5rem;
}
.au-figures > * { border-bottom: 1px solid var(--au-line-soft); padding-block: 1.5rem; }
@media (min-width: 760px) {
    /* Nerovnaké stĺpce zámerne. Štyri rovnaké štvrtiny pôsobia ako tabuľka. */
    .au-figures { grid-template-columns: 1.15fr 1.15fr .9fr 1.1fr; column-gap: 0; }
    .au-figures > * { border-bottom: none; border-left: 1px solid var(--au-line-soft); padding: .4rem 0 .4rem clamp(1rem, 2.4vw, 2.2rem); }
    .au-figures > *:first-child { border-left: none; padding-left: 0; }
}
@media (min-width: 760px) and (max-width: 1099px) {
    .au-figure__value { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
}
/* Detail projektu ma 0 az 3 cisla, nikdy presne 4 ako domov a O nas, kde
   je pevny pomer stlpcov zamer (vid komentar vyssie). Pevny 4-stlpcovy grid
   preto detailu nechaval prazdny koncovy stlpec, pri 2 polozkach polovicu
   riadku. Scopovane cez au-figures--projekt, aby sa domova ani O nas
   netklo. */
.au-figures.au-figures--projekt { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
@media (min-width: 760px) {
    .au-figures.au-figures--projekt { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

.au-figure__value {
    display: block;
    /* Číslo je dôraz, nie nadpis. Pri 6vw malo 70,4 px, teda bolo najväčším
       textom celej domovskej, väčším než h1. Teraz zostáva pod hero h1. */
    font-size: clamp(2rem, 2.8vw, 2.75rem);
    font-stretch: 118%;
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: .92;
    color: var(--au-bone);
}
.au-figure__label { display: block; margin-top: .7rem; font-size: .84rem; color: var(--au-slate); }

/* --- Index projektov ----------------------------------------------------- */
/* Zoznam očíslovaných riadkov. Fotka sa ukáže až pri prejdení myšou, takže
   projekt bez fotky nevyzerá ako diera v mriežke kariet. To je hlavný dôvod
   tohto vzoru: obrazový materiál je nerovnorodý a bude taký ešte dlho. */

.au-index { padding-block: clamp(3rem, 8vh, 6rem); }
/* Hlavička je sticky a má odmeraných 77 px. Odsadenie kotvy sa mu musí
   rovnať PRESNE. Pri 96 px zostal medzi hlavičkou a sekciou 19 px prúžok
   hero fotky zhora, čo vyzeralo ako nedotiahnutý skok. Menej než výška
   hlavičky by zas schovalo nadpis sekcie pod ňu.
   Vzdušnosť rieši vlastné odsadenie sekcie (72 px), nie táto hodnota. */
.au-index[id], .au-detail__head[id], .au-dopyt[id] { scroll-margin-top: var(--au-hlavicka); }

/* Stav nad názvom. Menšia medzera než mala pôvodná menovka, aby štítok
   patril k názvu a nevyzeral ako samostatný riadok nad ním. */
.au-hero__stav { margin: 0 0 .85rem; }
.au-index__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--au-line);
}
.au-index__more { font-size: .9rem; text-decoration: none; font-weight: 500; }
.au-index__more:hover { text-decoration: underline; }
@media (max-width: 759px) {
    /* Dotykova plocha pod 44 px (namerane 99x23). Padding plus rovnaka
       zaporna okraj: text sa vizualne neposunie, iba sa zvacsi plocha,
       na ktoru sa da tapnut. */
    .au-index__more { display: inline-block; padding-block: .85rem; margin-block: -.85rem; }
}

.au-rows { list-style: none; margin: 0; padding: 0; }

.au-row { position: relative; border-bottom: 1px solid var(--au-line-soft); }

.au-row__link {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    grid-template-areas: "nahlad title" "nahlad meta";
    gap: .35rem .95rem;
    align-items: center;
    padding-block: 1.1rem;
    text-decoration: none;
    color: inherit;
    transition: padding-inline-start .35s var(--au-ease);
}

/* Náhľad je VIDITEĽNÝ HNEĎ, nie odmena za prejdenie myšou. Predtým bol
   schovaný pod hover, takže na dotykovom zariadení sa nedal vyvolať vôbec
   a na desktope o ňom nikto nevedel, kým naň nenajazdil náhodou.
   Ostrá hrana podľa zámku tvaru: je to plocha, na ktorej obsah leží. */
.au-row__nahlad {
    grid-area: nahlad;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--au-surface);
    align-self: center;
    /* Náhľad v riadku je samostatný predmet, na ktorý sa klikne, nie nosná
       plocha. Podľa zámku tvaru má teda mäkkú hranu. border-radius je záloha
       pre Safari a Firefox, squircle až v @supports. Roh rastie s veľkosťou
       predmetu, preto je tu menší než pri galérii. */
    border-radius: 9px;
}
@supports (corner-shape: squircle) {
    .au-row__nahlad { border-radius: 13px; corner-shape: squircle; }
}
.au-row__nahlad img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s var(--au-ease);
}
/* Projektový výkres je biely papier a medzi fotkami na tmavom podklade
   svieti ako svetlo v tmavej miestnosti. Stlmenie ho zrovná s ostatnými,
   ale nechá ho čitateľný. Rozhoduje o tom stĺpec featured_image_kind,
   teda dáta, nie zoznam výnimiek v šablóne. */
.au-row__nahlad[data-druh="vykres"] img { filter: brightness(.82) contrast(.94) saturate(.75); }
.au-row:hover .au-row__nahlad[data-druh="vykres"] img { filter: brightness(.92) contrast(.96) saturate(.85); }

.au-row__title {
    grid-area: title;
    font-size: clamp(1.15rem, 3vw, 2.05rem);
    font-stretch: 112%;
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1.08;
    color: var(--au-bone);
    transition: color .3s var(--au-ease);
}

.au-row__meta {
    grid-area: meta;
    font-size: .84rem;
    color: var(--au-slate);
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
}
.au-row__state { color: var(--au-bronze); font-weight: 600; }
.au-row--done .au-row__state { color: var(--au-slate); }

.au-row:hover .au-row__title, .au-row__link:focus-visible .au-row__title { color: var(--au-bronze); }

@media (min-width: 900px) {
    .au-row__link {
        grid-template-columns: 9rem 1fr auto;
        grid-template-areas: "nahlad title meta";
        align-items: center;
        gap: 1.4rem;
        padding-block: 1.25rem;
    }
    /* Názov musí zostať na jednom riadku, inak sa z indexu stane zoznam odsekov. */
    .au-row__title { font-size: clamp(1.4rem, 1.9vw, 1.85rem); }
    .au-row__meta { justify-content: flex-end; text-align: right; }
}

@media (hover: hover) and (pointer: fine) {
    .au-row:hover .au-row__link { padding-inline-start: .9rem; }
    /* Fotka sa pri prejdení kúsok prisunie. Je to jediný pohyb v riadku,
       a je v obrázku, nie v texte, takže nič neposunie layout. */
    .au-row:hover .au-row__nahlad img { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .au-row__link, .au-row__nahlad img, .au-row__title { transition: none; }
    .au-row:hover .au-row__nahlad img { transform: none; }
}

/* --- Vybraný projekt, celoplošný split ----------------------------------- */

.au-feature { border-top: 1px solid var(--au-line-soft); }
.au-feature__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) {
    /* Fotka vyteká za mriežku doľava, text drží typografickú os. */
    .au-feature__grid { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
}
.au-feature__media { background: var(--au-surface); min-height: 46svh; overflow: hidden; }
.au-feature__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s var(--au-ease);
}
@media (hover: hover) and (pointer: fine) {
    .au-feature:hover .au-feature__media img { transform: scale(1.045); }
}
.au-feature__body {
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--au-gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--au-surface);
}
@media (min-width: 900px) {
    .au-feature__body { padding-inline: clamp(2.5rem, 5vw, 4.5rem); }
}
.au-feature__body .au-lead { margin-block: 1.1rem 1.8rem; }

/* --- Obrazové pásy MEDZI sekciami --------------------------------------- */
/*
   Nie sú to dekorácie na vyplnenie miesta. Robia dve veci naraz: rozbíjajú
   dlhý textový stred stránky, ktorá bola bez nich krátka a jednotvárna,
   a ukazujú ĎALŠIE projekty než ten v hero. Preto sa vybraný projekt
   v controlleri preskakuje.

   Dva pásy sú zámerne dva RÔZNE typy rozvrhnutia, jeden celoplošný a jeden
   dvojica vedľa seba. Dvakrát ten istý pás by bol len opakovanie.

   Popiska platí aj tu: pod fotkou vždy stojí, čo na nej naozaj je.
*/

.au-strip { position: relative; display: block; overflow: hidden; background: var(--au-surface); }
.au-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--au-ease); }
@media (hover: hover) and (pointer: fine) {
    .au-strip:hover img { transform: scale(1.035); }
}

/* Popiska a názov projektu. Odkaz vedie na detail, takže pás nie je slepý. */
.au-strip__info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 9rem var(--au-gutter) 1.1rem;
    background: linear-gradient(to top,
        rgba(14, 16, 19, 0.840) 0%,
        rgba(14, 16, 19, 0.816) 10%,
        rgba(14, 16, 19, 0.753) 20%,
        rgba(14, 16, 19, 0.659) 30%,
        rgba(14, 16, 19, 0.544) 40%,
        rgba(14, 16, 19, 0.420) 50%,
        rgba(14, 16, 19, 0.296) 60%,
        rgba(14, 16, 19, 0.181) 70%,
        rgba(14, 16, 19, 0.087) 80%,
        rgba(14, 16, 19, 0.024) 90%,
        rgba(14, 16, 19, 0.000) 100%);
    color: var(--au-bone);
    pointer-events: none;
}
.au-strip__nazov { font-family: var(--au-font); font-size: clamp(1.05rem, 1.9vw, 1.45rem); font-stretch: 110%; font-weight: 500; letter-spacing: -.015em; }
.au-strip__popis { font-size: .74rem; letter-spacing: .04em; color: var(--au-bone-dim); }

/* Jeden celoplošný pás. */
.au-strip--wide { height: clamp(230px, 38svh, 460px); text-decoration: none; }

/* Dvojica vedľa seba. Na mobile pod sebou a nižšia, aby dve fotky
   nezabrali celú obrazovku. */
.au-strips-pair { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .au-strips-pair { grid-template-columns: 1fr 1fr; } }
.au-strips-pair .au-strip { height: clamp(200px, 32svh, 380px); text-decoration: none; }

/* --- Zoznam schopností, linky namiesto kariet ---------------------------- */

.au-cap { padding-block: clamp(3rem, 8vh, 6rem); }
.au-cap__grid { display: grid; gap: 0; margin-top: 2rem; }
@media (min-width: 760px) { .au-cap__grid { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 6vw, 5rem); } }

.au-cap__item { padding-block: 1.4rem; border-top: 1px solid var(--au-line-soft); }
.au-cap__item p { margin: .45rem 0 0; color: var(--au-slate); font-size: .95rem; }

/* --- Pás s výzvou -------------------------------------------------------- */

.au-band { background: var(--au-void); border-block: 1px solid var(--au-line); padding-block: clamp(3.5rem, 10vh, 7rem); }
.au-band__grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .au-band__grid { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 4rem; } }
.au-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- Detail projektu ----------------------------------------------------- */

.au-detail__head { padding-block: clamp(2.5rem, 7vh, 4.5rem) 1.5rem; }
.au-detail__head h1 { max-width: 20ch; }
/* Názov projektu sa opakuje aj tu. Po skoku z tlačidla "Viac info" je hero
   mimo obrazovky, takže bez neho človek číta údaje a nevie, čie sú. */
.au-detail__nazov {
    font-size: clamp(1.5rem, 2.2vw, 2.05rem);
    font-stretch: 112%;
    font-weight: 500;
    letter-spacing: -.028em;
    line-height: 1.1;
    color: var(--au-bone);
    margin: 0 0 1rem;
}
.au-detail__head .au-lead { margin-top: 1.1rem; }

/* Stav je POZNÁMKA, nie odznak. Plná bronzová plôška ho robila najsilnejším
   prvkom stránky, hoci je to len údaj: hlavná je stavba a jej názov.
   Teraz je to iba text s bodkou, čiže sa dá prečítať a dá sa prehliadnuť.

   Bronzová sa na SVETLEJ tabuli ako text použiť NESMIE, má tam 1,4:1.
   Tam preto platí ten istý tmavší tón značky ako pri menovke, #4e3a28
   so 4,60:1. Na tmavom podklade má značková bronzová 5,70:1 a je v poriadku. */
.au-state {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    background: none;
    padding: 0;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--au-bronze);
}
.au-state::before {
    content: "";
    flex: none;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor;
}
/* Ukončený projekt je stíšený zámerne: bronzová patrí tomu, čo práve beží. */
.au-state--done { color: var(--au-slate); }
.au-hero__inner .au-state { color: #4e3a28; }
.au-hero__inner .au-state--done { color: #3b3e43; }
/* OBNOVENÉ. Pri prepise štítku stavu som toto pravidlo omylom vymazal
   spolu s blokom, ktorý som nahrádzal, takže údaje projektu sa zložili do
   jedného stĺpca a pravá polovica stránky zostala prázdna. */
.au-facts {
    display: grid;
    gap: 1.4rem 2rem;
    /* 3 az 4 polozky na vsetkych 15 projektoch, nikdy presne 4 na kazdom.
       auto-fit namiesto pevnych 2/4 stlpcov, aby nezostaval prazdny
       koncovy stlpec pri 3 polozkach. */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin: 2.4rem 0 0;
    padding-top: 1.8rem;
    border-top: 1px solid var(--au-line);
}
.au-facts dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--au-slate); }
.au-facts dd { margin: .45rem 0 0; font-weight: 600; font-size: 1.02rem; color: var(--au-bone); }

.au-body-grid { display: grid; gap: 2.5rem; padding-block: clamp(2rem, 5vh, 3.5rem) clamp(3rem, 8vh, 5rem); }
@media (min-width: 900px) { .au-body-grid { grid-template-columns: 1.6fr 1fr; gap: clamp(3rem, 6vw, 5.5rem); } }
/* Detail projektu, druha verzia (Adam, 15. 9. 2026, po spatnej vazbe k
   prvej verzii - jeden stlpec cely gap zavrel, ale text dostal az 142
   znakov na najdlhsi riadok namiesto 62-78 ako ma O nas, namerane binarnym
   hladanim zalomenia v realnom fonte, nie odhadom).

   CTA SAMOTNE (bez Prednosti) potrebuje v uzkom bocnom stlpci vzdy aspon
   300px vysky (namerane), teda viac nez cely popis. Ziadny pomer stlpcov
   preto nezavrie medzeru, kym CTA v tom stlpci je. Riesenie: CTA presunute
   v Twig MIMO .au-aside, vlastny plnosirkovy riadok, kde sirku nepotrebuje.

   Text a Prednosti zdielaju horny riadok v POVODNOM pomere 1.6fr/1fr
   (rovnaky ako O nas), nie skusanom uzsom 3fr/1fr: uzsi pomer dal textu
   100 znakov na riadok (stale nad pasmom) a Prednosti v 268px stlpci sa
   lamali na 3-4 riadky, medzera 119px. Pri 1.6/1 ma text 660px / max 80
   znakov (zhodne s O nas) a Prednosti v 400px uz nelamu tolko, namerane
   -63 az +37px na vsetkych testovanych projektoch (predtym 160-232px).
   align-items:start, aby ani tento riadok nestretchoval kratsi stlpec. */
@media (min-width: 900px) {
    .au-body-grid.au-body-grid--projekt {
        grid-template-columns: 1.6fr 1fr;
        grid-template-rows: auto auto;
        row-gap: 2.5rem;
        column-gap: clamp(2rem, 4vw, 3.5rem);
        align-items: start;
    }
    .au-body-grid--projekt .au-prose { grid-column: 1; grid-row: 1; }
    .au-body-grid--projekt .au-aside { grid-column: 2; grid-row: 1; }
    .au-body-grid--projekt .au-cta { grid-column: 1 / -1; grid-row: 2; }
    /* Pri presne 3 poliach vo faktoch (typ/lokalita/stav, bez terminu) je
       "Stav" presne na 2/3 sirky (namerane 66,9%). Pomer 2fr/1fr posunie
       Prednosti presne pod neho. Pri 4 poliach by rovnaky trik posunul
       "Stav" na 3/4 a textu by zostalo primalo miesta, preto sa netyka. */
    .au-body-grid.au-body-grid--zarovnat3 { grid-template-columns: 2fr 1fr; }
}

.au-prose p { color: var(--au-slate); }
.au-prose h2 { margin-bottom: 1rem; }
.au-prose strong, .au-prose b { color: var(--au-bone); font-weight: 600; }

/* --- Právne stránky ------------------------------------------------------ */
/* Suvisly dlhy text, jeden stlpec cez CELU sirku shellu. Ziadny strop sirky
   na odstavcoch, zoznamoch, nadpisoch ani tabulke udajov: Adam 14. 9. 2026,
   stranka so stropom 68ch bola na sirokouhlom monitore zbytocne uzka. */
.au-legal { padding-block: clamp(2.5rem, 6vh, 4rem) clamp(4rem, 10vh, 7rem); }
.au-legal .au-prose > * + * { margin-top: 1.05rem; }
.au-legal h2 {
    margin-top: clamp(2.6rem, 5vh, 3.6rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--au-line-soft);
}
.au-legal .au-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.au-legal ul { margin: 0; padding-left: 1.15rem; color: var(--au-slate); }
.au-legal li { padding: .3rem 0; }
.au-legal li::marker { color: var(--au-bronze); }
.au-legal a { color: var(--au-bone); }
.au-legal address { font-style: normal; color: var(--au-slate); }

/* Prehľad údajov je definičný zoznam, nie tabuľka. Tabuľka s tromi stĺpcami sa
   na 375 px nezmestí, musela by sa posúvať do strany a časť obsahu by sa dala
   prehliadnuť bez akéhokoľvek náznaku. Zoznam sa zlomí sám a nestratí nič. */
.au-udaje { margin: 1.6rem 0 0; }
.au-udaje > div {
    display: grid;
    gap: .25rem;
    padding: .95rem 0;
    border-top: 1px solid var(--au-line-soft);
}
.au-udaje > div:last-child { border-bottom: 1px solid var(--au-line-soft); }
.au-udaje dt { font-weight: 600; color: var(--au-bone); font-size: .95rem; }
.au-udaje dd { margin: 0; color: var(--au-slate); font-size: .95rem; }
@media (min-width: 620px) {
    .au-udaje > div { grid-template-columns: 14rem 1fr; gap: 0 1.6rem; align-items: baseline; }
}

.au-aside__title { font-size: 1rem; font-stretch: 100%; letter-spacing: .01em; margin: 0 0 .9rem; }
.au-ticks, .au-docs { list-style: none; padding: 0; margin: 0 0 2.4rem; }
.au-ticks li {
    padding: .6rem 0 .6rem 1.5rem;
    position: relative;
    border-bottom: 1px solid var(--au-line-soft);
    font-size: .95rem;
}
.au-ticks li::before {
    content: "";
    position: absolute;
    left: 0; top: 1.15rem;
    width: .5rem; height: 1px;
    background: var(--au-bronze);
}
.au-docs li { padding: .5rem 0; border-bottom: 1px solid var(--au-line-soft); }
.au-docs a { font-size: .95rem; }

/* --- Formulár: chybový stav a súhlas -------------------------------------- */
.au-suhlas {
    grid-column: 1 / -1;
    margin: .2rem 0 0;
    font-size: .8rem;
    color: var(--au-slate);
    max-width: 60ch;
}
.au-suhlas a { color: var(--au-bone-dim); text-decoration: underline; text-underline-offset: .2em; }
.au-suhlas a:hover { color: var(--au-bronze); }

/* --- Galéria projektu ---------------------------------------------------- */
/* Kontaktná strana, nie mriežka rovnakých dlaždíc. Snímky si držia vlastný
   pomer strán, takže sa strieda na šírku a na výšku a strana dostane rytmus.
   Riadky sú preto nerovnaké, čo je zámer: rovnaké okienka vyzerajú ako
   katalóg, nerovnaké ako redakčná dvojstrana.
   Ostrá hrana podľa zámku tvaru: fotka je plocha, na ktorej obsah leží. */
.au-galeria { padding-bottom: clamp(3rem, 8vh, 5rem); }
.au-galeria__grid {
    list-style: none;
    margin: 1.8rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: clamp(.7rem, 1.6vw, 1.4rem);
}
@media (min-width: 760px) { .au-galeria__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 759px) {
    /* Triedu au-obmedzena pridáva IBA JS (auportal.js). Bez JS sa teda
       nikdy neorežú fotky ani neukáže tlačidlo - to by bez JS bolo mŕtve
       a fotky by zostali skryté navždy. Rovnaký princíp ako js-nav pri
       menu: skrytie a jeho ovládanie musí prísť z toho istého miesta. */
    .au-galeria__grid.au-obmedzena .au-galeria__polozka:nth-child(n+7) { display: none; }
    .au-galeria__grid.au-obmedzena + .au-galeria__viac { display: block; }
}
.au-galeria__polozka {
    overflow: hidden;
    /* Väčší predmet znesie väčší roh. Rovnaký roh na 144 px náhľade
       a na 360 px snímke by na jednom z nich vyzeral zle. */
    border-radius: 13px;
}
@supports (corner-shape: squircle) {
    .au-galeria__polozka { border-radius: 19px; corner-shape: squircle; }
}
.au-galeria__polozka img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--au-surface);
    transition: transform 1.1s var(--au-ease);
}
@media (hover: hover) and (pointer: fine) {
    .au-galeria__polozka:hover img { transform: scale(1.03); }
}
.au-galeria__popis {
    display: block;
    margin-top: .55rem;
    font-size: .74rem;
    letter-spacing: .04em;
    color: var(--au-slate);
}

/* --- Lightbox ------------------------------------------------------------ */
/* Vrstva sa do DOM pridáva AZ pri prvom otvorení, nie pri načítaní stránky.
   Skrytý celoobrazovkový prvok v dokumente je presne ten tvar, ktorý Google
   pod pojmom cloaking uvádza ako problém. */
.au-lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(14, 16, 19, .93);
    backdrop-filter: blur(6px);
}
.au-lightbox.je-otvorena { display: grid; }
.au-lightbox__ramec {
    margin: 0;
    display: grid;
    justify-items: center;
    gap: .9rem;
    max-width: min(100%, 1400px);
}
.au-lightbox__ramec img {
    max-width: 100%;
    max-height: 78svh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
}
@supports (corner-shape: squircle) {
    .au-lightbox__ramec img { border-radius: 20px; corner-shape: squircle; }
}
.au-lightbox__popis {
    font-size: .8rem;
    letter-spacing: .04em;
    color: var(--au-bone-dim);
    text-align: center;
}
.au-lightbox__zavri, .au-lightbox__krok {
    position: absolute;
    background: rgba(28, 31, 36, .8);
    color: var(--au-bone);
    border: 1px solid rgba(237, 237, 233, .25);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: border-color .25s var(--au-ease), background-color .25s var(--au-ease);
}
.au-lightbox__zavri:hover, .au-lightbox__krok:hover {
    border-color: var(--au-bronze);
    background: rgba(28, 31, 36, .95);
}
.au-lightbox__zavri {
    top: clamp(.8rem, 2.5vw, 1.6rem);
    right: clamp(.8rem, 2.5vw, 1.6rem);
    width: 2.6rem; height: 2.6rem;
    font-size: 1.5rem;
    border-radius: 10px;
}
.au-lightbox__krok {
    top: 50%;
    transform: translateY(-50%);
    width: 2.8rem; height: 3.6rem;
    font-size: 1.8rem;
    border-radius: 10px;
}
.au-lightbox__krok--vlavo { left: clamp(.5rem, 2vw, 1.4rem); }
.au-lightbox__krok--vpravo { right: clamp(.5rem, 2vw, 1.4rem); }
@supports (corner-shape: squircle) {
    .au-lightbox__zavri, .au-lightbox__krok { border-radius: 14px; corner-shape: squircle; }
}
/* Pod otvorenou vrstvou sa stránka nesmie rolovať, inak sa pri zavretí
   vrátiš inam, než odkiaľ si otvoril. */
.au-bez-rolovania, .au-bez-rolovania body { overflow: hidden; }

.au-galeria__tlacidlo {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    font: inherit;
    color: inherit;
}
.au-galeria__tlacidlo:focus-visible { outline: 2px solid var(--au-bronze); outline-offset: 3px; }

/* Tlačidlo "Zobraziť všetky fotografie". Rovnaký jazyk ako políčka
   formulára: čo sa dá stlačiť, má mäkkú hranu. */
.au-galeria__viac {
    display: none;
    width: 100%;
    margin-top: 1.2rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(237, 237, 233, .50);
    border-radius: 13px;
    background: none;
    color: var(--au-bone);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
@supports (corner-shape: squircle) {
    .au-galeria__viac { border-radius: 17px; corner-shape: squircle; }
}
.au-galeria__viac:hover { border-color: var(--au-bronze); color: var(--au-bronze); }
.au-galeria__viac:focus-visible { outline: 2px solid var(--au-bronze); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .au-galeria__polozka img { transition: none; }
    .au-galeria__polozka:hover img { transform: none; }
}

.au-cta { border: 1px solid var(--au-line); border-top: 2px solid var(--au-bronze); padding: 1.7rem; background: var(--au-surface); }
.au-cta__title { font-size: 1.15rem; font-stretch: 108%; font-weight: 600; letter-spacing: -.015em; margin: 0 0 .5rem; }
/* Obe akcie v jednom riadku. Text tlacidla ma `white-space: nowrap`, takze
   sa nezmensi pod svoju sirku a jedine, co sa da stiahnut, je vodorovna
   vypln. Ked ani tak nevyjde, `flex-wrap` ich polozi pod seba, cize sa nic
   neoreze. Cislo drzi pohromade, lebo je to telefon. */
.au-cta__akcie { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.1rem; }
.au-cta__akcie .au-btn { margin-top: 0; padding-inline: 1rem; }
/* Na telefone je to o par pixlov. Pri 375 px ma obal 279 px a obe tlacidla
   pri vodorovnej vyplni 1 rem potrebuju 292,7 px, teda chybalo 14 px.
   Stiahnuta je aj vypln samotnej karty, lebo 1,7 rem je na uzkej obrazovke
   zbytocne stedra a uvolni viac miesta nez dalsie orezavanie tlacidiel.
   Odmerane, nie odhadnute. */
@media (max-width: 599px) {
    .au-cta { padding: 1.4rem; }
    .au-cta__akcie { gap: .45rem; }
    .au-cta__akcie .au-btn { padding-inline: .8rem; }
}

/* Detail projektu: Prednosti z vysokeho zoznamu na vodorovny pas kratkych
   znaciek, CTA z boxovanej karty v uzkom stlpci na plnosirkovy uzatvaraci
   pas s deliacou ciarou (rovnaky jazyk ako .au-figures). Namerane: bocny
   stlpec bol pri VSETKYCH 15 projektoch o 160 az 232px vyssi nez text
   popisu, lebo popis je vzdy kratky a Prednosti+CTA maju takmer pevnu
   vysku okolo 440px bez ohladu na obsah. O nas pouziva .au-ticks aj .au-cta
   inak (Prednosti su v .au-prose ako sublist, CTA ma iba jedno tlacidlo),
   preto je vsetko scopovane cez au-body-grid--projekt a O nas ostava
   nedotknute. */
/* Nadpis "Prednosti" mal 1rem, vedla "O projekte" (h2, 1.55 az 2.35rem)
   posobil ovela mensi. Scopovane, aby sa netklo "Fakturacne udaje" na
   O nas, ktore rovnaku triedu .au-aside__title pouziva tiez. */
.au-body-grid--projekt .au-aside__title {
    font-size: 1.4rem;
    font-stretch: 110%;
    letter-spacing: -.01em;
    margin-bottom: 1.1rem;
}
/* Jeden stlpec (Adam, 15. 9. 2026): 2 stlpce boli uzke natolko, ze dlhsie
   znacky ("Pri vodnej nádrži Kráľová") sa lamali na 2 riadky vo vlastnej
   bunke, co vyzeralo zle. V jednom stlpci ma kazda znacka celu sirku
   bocneho stlpca (~400px) a text sa uz nezalamuje. */
.au-body-grid--projekt .au-ticks {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem;
    margin: 0 0 clamp(1.8rem, 4vh, 2.6rem);
}
.au-body-grid--projekt .au-ticks li {
    border: 1px solid var(--au-line-soft);
    padding: .4rem 1.1rem .4rem 1.7rem;
}
.au-body-grid--projekt .au-ticks li::before {
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
}
.au-body-grid--projekt .au-cta {
    border: none;
    border-top: 2px solid var(--au-bronze);
    padding: clamp(1.8rem, 4vh, 2.6rem) 0 0;
    background: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
}
.au-body-grid--projekt .au-cta__text { flex: 1 1 auto; min-width: 0; }
.au-body-grid--projekt .au-cta__akcie { margin-top: 0; flex: 0 0 auto; }
@media (max-width: 599px) {
    .au-body-grid--projekt .au-cta { flex-direction: column; align-items: flex-start; }
}

/* --- Dopyt na detaile projektu (19. 9. 2026) ------------------------------
   Nahradil CTA pas s odkazom na /kontakt: formulár je hlavná funkcia webu,
   takže patrí priamo na detail. Rovnaká deliaca čiara ako mal CTA pas. Od
   900 px dva stĺpce (text a kontakt vľavo, polia vpravo), pod tým pod sebou.
   Polia dedia .au-form zo stránky Kontakt. */
.au-dopyt {
    border-top: 2px solid var(--au-bronze);
    padding-block: clamp(1.8rem, 4vh, 2.6rem) clamp(3rem, 8vh, 5rem);
}
.au-dopyt__grid { display: grid; gap: 2rem; }
@media (min-width: 900px) {
    .au-dopyt__grid { grid-template-columns: 1fr 1.5fr; gap: clamp(3rem, 6vw, 5.5rem); align-items: start; }
}
.au-dopyt__nadpis { font-size: 1.4rem; font-stretch: 110%; letter-spacing: -.01em; margin: 0 0 .7rem; }
.au-dopyt__text .au-cta__akcie { margin-block: 1.1rem .9rem; }
.au-dopyt .au-form { max-width: none; }
.au-dopyt .au-notice { margin-bottom: 1.4rem; }

/* Omrvinková navigácia na detaile. Odkazy majú výšku aspoň 24 px (WCAG 2.5.8),
   lebo sú samostatné položky zoznamu, nie odkazy vo vete. */
.au-crumbs { margin: 0 0 1.1rem; font-size: .84rem; letter-spacing: .03em; }
.au-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .55rem; margin: 0; padding: 0; list-style: none; color: var(--au-slate); }
.au-crumbs li + li::before { content: "/"; margin-right: .55rem; }
.au-crumbs a { display: inline-block; padding-block: .2rem; color: var(--au-bone-dim); text-decoration: none; }
@media (hover: hover) {
    .au-crumbs a:hover { text-decoration: underline; text-decoration-color: var(--au-bronze); text-underline-offset: .25em; }
}

/* Staré názvy tried, ktoré ešte používa kontakt.twig.
   Šablónu formulára ZÁMERNE nemením: akákoľvek úprava formulára, aj čisto
   triedy, vyžaduje podľa pravidla reálny odosielací test s vývojárskou
   strážou, a to je samostatná úloha. Alias v CSS je bezpečnejší než zásah
   do šablóny, ktorá zbiera dopyty. */
.au-page-head { padding-block: clamp(3.5rem, 12vh, 7rem) 1rem; }
/* Bez tejto vetvy h1 dedí 80 px zo základného pravidla (clamp az do 5rem),
   ostatné H1 na webe majú 36,7 px (viď .au-hero__panel h1). Stránky bez
   fotky (kontakt, do budúcna právna) tak dostávajú jednu spoločnú škálu. */
.au-page-head h1 { max-width: 20ch; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1.08; }
.au-page-head .au-lead { margin-top: 1.1rem; }
.au-detail__body { display: grid; gap: 2.5rem; padding-block: clamp(2rem, 5vh, 3.5rem) clamp(3rem, 8vh, 5rem); }
@media (min-width: 900px) { .au-detail__body { grid-template-columns: 1.6fr 1fr; gap: clamp(3rem, 6vw, 5.5rem); } }

/* --- Formulár ------------------------------------------------------------ */

/* Formulár bol zbytočne dlhý: štyri polia pod sebou cez celú šírku. E-mail
   a telefón sú krátke údaje a zmestia sa vedľa seba. Celé je to zásah IBA
   do CSS, šablóna sa podľa pravidla 12 nedotýka.

   Poradie polí v šablóne je 1 meno, 2 e-mail, 3 telefón, 4 správa, preto
   nth-of-type(2) a (3). KEĎ DO FORMULÁRA PRIBUDNE POLE, TOTO SA MUSÍ
   PREPOČÍTAŤ, inak sa vedľa seba ocitnú nesprávne dve polia. */
.au-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.1rem;
    max-width: 38rem;
}
.au-form > * { grid-column: 1 / -1; }
.au-form > label:nth-of-type(2),
.au-form > label:nth-of-type(3) { grid-column: auto; }

@media (max-width: 599px) {
    .au-form { grid-template-columns: 1fr; }
    .au-form > label:nth-of-type(2),
    .au-form > label:nth-of-type(3) { grid-column: 1 / -1; }
}

/* rows="5" dáva okolo 9 rem. Skracujem to cez CSS a nechávam možnosť
   roztiahnuť si to. */
.au-form textarea { height: 9.5rem; min-height: 6rem; resize: vertical; }
.au-form label { display: grid; gap: .45rem; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--au-slate); }
/* Políčko je tiež ovládací prvok, takže patrí k tlačidlám, nie ku kartám.
   Toto je zásah IBA do CSS. Šablóna kontaktného formulára sa podľa pravidla 12
   nedotýka, žiadne názvy polí, žiadny handler, žiadna routa. */
.au-form input, .au-form textarea {
    font: inherit;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--au-bone);
    background: var(--au-surface);
    /* Okraj je jediné, čo políčko ohraničuje, takže potrebuje 3:1 podľa
       WCAG 1.4.11. S --au-line mal 1,44:1 voči stránke a 1,32:1 voči vlastnej
       výplni, čiže prázdne políčko nemalo čím povedať, kde sa píše.
       Pri 0,50 má 4,96:1 a 4,52:1. */
    border: 1px solid rgba(237, 237, 233, .50);
    border-radius: 13px;
    padding: .8rem .9rem;
    width: 100%;
}
@supports (corner-shape: squircle) {
    .au-form input, .au-form textarea { border-radius: 17px; corner-shape: squircle; }
}
.au-form input::placeholder, .au-form textarea::placeholder { color: var(--au-slate); }
.au-form input:focus, .au-form textarea:focus {
    outline: 2px solid var(--au-bronze);
    outline-offset: 1px;
    border-color: var(--au-bronze);
}
.au-form button { justify-self: start; }

.au-notice {
    background: var(--au-surface);
    border-left: 2px solid var(--au-bronze);
    padding: 1rem 1.2rem;
    margin-bottom: 1.8rem;
}

/* Chybová hláška NESMIE byť len červený text: na tmavom podklade by červená
   musela byť veľmi svetlá, aby prešla AA, a tým by kričala viac než samotný
   formulár. Nesie ju preto plocha s vlastným okrajom a bronzová hrana vľavo,
   takže sa dá poznať aj bez farby. */
.au-notice--chyba {
    /* Úspech a chyba MUSIA vyzerať inak. Základná hláška má bronzový okraj,
       takže keby ho mala aj chybová, používateľ by ich nerozoznal.
       Chybové stavy sú jediná výnimka z pravidla o jedinom akcente: musia
       byť nezameniteľné, inak nefungujú. Odtieň je zámerne tlmený, aby
       nekričal viac než samotný formulár.
       Text #d26860 má na ploche formulára AA, okraj #bb3e35 prejde 1.4.11. */
    border-left-color: #bb3e35;
    color: #d26860;
}

/* --- Pätička ------------------------------------------------------------- */

/* --- Pätička -------------------------------------------------------------
   Značková bronzová sa tu konečne ukáže, ale NEZAPLAVÍ to. Bronzová je jediný
   akcent celého webu a keby ju dostalo všetko, prestane čokoľvek znamenať.
   Preto dostane presne tri veci:

     1. vlásočnicu na hornej hrane, ktorá pätičku oddelí od stránky,
     2. štítky sekcií, teda najmenší text, ktorý nikto nečíta ako obsah,
     3. teplý nádych v pozadí, taký slabý, že sa nedá pomenovať, iba cítiť.

   Kontrasty odmerané, nie odhadnuté:
     bronzová #b08965 na pozadí pätičky   6,00:1  (AA aj pre malý text)
     kosť na pozadí pätičky              16,23:1
   Bežný text ani odkazy bronzovú NEDOSTANÚ, tie zostávajú kostené. */
.au-footer {
    /* Nádych bronzu v podklade. Pod 3 % krytia, takže sa farba nedá
       pomenovať, ale pätička prestane byť tá istá čierna ako zvyšok. */
    background:
        linear-gradient(rgba(176, 137, 101, .05), rgba(176, 137, 101, .015) 45%, rgba(176, 137, 101, 0) 70%),
        var(--au-void);
    border-top: 1px solid rgba(176, 137, 101, .38);
    padding-block: clamp(3rem, 8vh, 5rem) 1.5rem;
}
.au-footer a { color: var(--au-bone); text-decoration: none; }
.au-footer a:hover { color: var(--au-bronze); }
@media (max-width: 759px) {
    /* Dotykove plochy v pätičke namerane 15-19 px (telefón, e-mail, Projekty,
       ochrana údajov, nastavenia súkromia). Rovnaký trik ako pri
       "Všetky projekty": padding plus rovnaká záporná okraj. */
    .au-footer a { display: inline-block; padding-block: .85rem; margin-block: -.85rem; }
}
.au-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .au-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } }
.au-footer__logo { height: 52px; width: auto; margin-bottom: 1.2rem; }
.au-footer__label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--au-bronze); margin: 0 0 .9rem; }
.au-footer__bottom {
    margin-top: 3rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--au-line-soft);
    font-size: .84rem;
    color: var(--au-slate);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --- Chybová stránka ----------------------------------------------------- */

.au-error { padding-block: clamp(4rem, 14vh, 8rem); }
.au-error h1 { max-width: 16ch; }

/* --- Vstup obsahu do záberu ---------------------------------------------- */
/* Pohyb je odôvodnený: vysvetľuje poradie čítania na dlhej stránke.
   Nikdy neposúva layout, hýbe sa len transform a opacity. */

/* Obsah sa skrýva IBA pod triedou au-anim, ktorú pridáva vnorený skript
   v hlavičke a ktorú ten istý skript po 2,5 s sám odstráni, ak sa odložený
   auportal.js medzitým neohlásil triedou au-anim-ready.

   Prečo to nestačilo predtým: triedu no-js odstraňoval vnorený skript hneď,
   ale odhaľovanie robil až odložený súbor. Keby sa nenačítal, 13 blokov
   domovskej zostane navždy na opacity 0. Odmerané: je v nich 71 % textu
   stránky, a na výpise projektov by zmizlo všetkých 15 projektov bez jedinej
   chybovej hlášky. Tú istú poistku som dal navigácii (js-nav) a na obsah som
   ju zabudol dať. */
.au-anim .au-in { opacity: 0; transform: translateY(18px); }
.au-anim .au-in.is-in { opacity: 1; transform: none; transition: opacity .7s var(--au-ease), transform .7s var(--au-ease); }

@media (prefers-reduced-motion: reduce) {
    .au-anim .au-in, .au-anim .au-in.is-in { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Bez triedy au-anim je .au-in obyčajný prvok bez akéhokoľvek skrývania,
   takže obsah sa bez JavaScriptu stratiť nemôže. */