/* ==========================================================================
   base.css
   Písma, reset, typografie, kontejner a drobné pomocné třídy.
   Žádné konkrétní hodnoty, vše přes var() z tokens.css.
   ========================================================================== */

/* ------------------------------------------------------------------ písmo */
/* Archivo je proměnné písmo. Jeden soubor pokrývá všechny tloušťky i šířky,
   takže se stahuje jen dvakrát (latinka a latinka s diakritikou). */

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-var-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F,
                   U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                   U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ reset */

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

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--size-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    min-height: 100vh;
}

body.is-locked {
    overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

/* Skupiny polí kvůli přístupnosti, bez výchozího rámečku prohlížeče. */
fieldset {
    border: 0;
    min-width: 0;
}

legend {
    padding: 0;
    display: block;
    width: 100%;
}

ul,
ol {
    list-style: none;
}

/* Atribut hidden musí vyhrát nad jakýmkoli display v našich třídách.
   Bez tohoto pravidla by třeba .btn { display: inline-flex } přebil
   skrytí odesílacího tlačítka mezi kroky formuláře. */
[hidden] {
    display: none !important;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* -------------------------------------------------------------- typografie */
/* Velikosti a prostrkání zrcadlí referenční web: nadpisy jsou střídmé,
   pevně stažené (-.05em) a NIKDY se uměle nezužují, aby se nelámaly
   slovo po slovu. Šířku textu určuje mřížka sloupců, ne nadpis sám. */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-stretch: calc(var(--width-heading) * 1%);
    line-height: 1;
    letter-spacing: var(--tracking-heading);
    margin-bottom: var(--space-6);
}

h1 { font-size: var(--size-hero); font-weight: var(--weight-medium); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); letter-spacing: var(--tracking-sub); }
h4 { font-size: var(--size-h4); letter-spacing: var(--tracking-sub); }
h5 { font-size: var(--size-h5); letter-spacing: var(--tracking-sub); }

p {
    margin-bottom: var(--space-4);
}

strong,
b {
    font-weight: var(--weight-semibold);
}

/* Velký displejový nadpis (služby, sekce Ostatní). Lehký řez, střídmá
   velikost, žádné vynucené lámání. Vyvážené řádky (od 14. 10. 2026), ať
   na posledním řádku nezůstane osamělé slovo (Aplikace, automatizace a AI). */
.display {
    font-size: var(--size-display);
    font-weight: var(--weight-medium);
    line-height: 1;
    letter-spacing: var(--tracking-heading);
    margin-bottom: 0;
    text-wrap: balance;
}

/* Zvýrazněná slova v nadpisu: animovaný barevný přechod v textu.
   Přesně převzato z reference (45deg, 4 zastávky, 15s smyčka). */
.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradient-shift 15s infinite;
}

.gradient-text::selection {
    -webkit-text-fill-color: initial;
    color: var(--text-on-dark);
}

@keyframes gradient-shift {
    0%   { background-position: 0 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .gradient-text { animation: none; }
}

/* Popisek sekce: malý, s malým počátečním písmenem a červenou tečkou.
   Hodnoty z reference: 16px, poloviční černá, stažené prostrkání. */
.label {
    display: inline-flex;
    align-items: center;
    font-size: var(--size-label);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-heading);
    line-height: 1.1;
    color: var(--muted);
    margin-bottom: var(--space-4);
}

.label::before {
    content: '';
    width: 1em;
    height: 1em;
    margin-right: 1em;
    border-radius: 50%;
    background-color: var(--red);
    flex: none;
}

/* Kontext tmavého panelu: text zbělá, tlumené barvy se přepnou. */
.inverted {
    color: var(--text-on-dark);
}

.inverted .label {
    color: var(--muted-on-dark);
}

.inverted .text-muted {
    color: var(--muted-2-on-dark);
}

/* Delší text z datových souborů (pole *_html). */
.prose {
    max-width: var(--measure);
}

.prose p {
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

.prose h2,
.prose h3 {
    line-height: 1.3;
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}

/* Mezinadpis uvnitř textu. Bez tohohle by měl stejnou velikost jako nadpis
   sekce nad ním a čtenář by ztratil úroveň zanoření. */
.prose h3 {
    font-size: var(--size-subhead);
    margin-top: var(--space-7);
    margin-bottom: var(--space-3);
}

.prose a {
    color: var(--pink-ink);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.prose a:hover {
    color: var(--red);
}

.prose ul,
.prose ol {
    padding-left: var(--space-5);
    margin-bottom: var(--space-4);
}

.prose ul li {
    list-style: disc;
}

.prose ol li {
    list-style: decimal;
}

.prose li {
    line-height: 1.4;
}

.prose li + li {
    margin-top: .6em;
}

.prose th,
.prose td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
}

.prose th {
    font-weight: var(--weight-medium);
}

/* ------------------------------------------------------------- kontejner */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container--narrow {
    max-width: 1100px;
}

/* Formulář snese víc šířky než čtený text. V užším kontejneru se zbytečně
   mačká do středu stránky, i když vedle něj zůstává prázdno. */
.container--form {
    max-width: var(--measure-form);
}

/* Široký kontejner hlavičky, jen okraje. */
.container-wide {
    width: calc(100% - 3rem);
    margin-inline: auto;
}

@media (min-width: 62rem) {
    .container-wide { width: calc(100% - 4.5rem); }
}

@media (min-width: 75rem) {
    .container-wide { width: calc(100% - 6rem); }
}

/* --------------------------------------------------------------- fokus */

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-cursor);
    padding: var(--space-3) var(--space-4);
    background-color: var(--ink);
    color: var(--text-on-dark);
    border-radius: var(--radius-btn);
    font-weight: var(--weight-medium);
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ------------------------------------------------------ pomocné třídy */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-muted { color: var(--muted-2); }
.text-accent { color: var(--pink-ink); }
.measure { max-width: var(--measure); }

.stack > * + * { margin-top: var(--space-5); }

/* ---------------------------------------------------- odsazovací třídy
   Existují proto, aby v šablonách nemusely být styly zapsané přímo
   v atributu style. Bez nich by bezpečnostní politika webu musela
   povolovat vložené styly (unsafe-inline), což nechceme.
   Čísla odpovídají krokům mezer v tokens.css. */

.mt-0  { margin-top: 0; }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-7  { margin-top: var(--space-7); }
.mt-8  { margin-top: var(--space-8); }
.mt-9  { margin-top: var(--space-9); }
.mt-10 { margin-top: var(--space-10); }
.mt-11 { margin-top: var(--space-11); }

.mb-0  { margin-bottom: 0; }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-7  { margin-bottom: var(--space-7); }
.mb-11 { margin-bottom: var(--space-11); }

.m-0 { margin: 0; }

/* Drobné pomocné třídy používané v šablonách. */
.flex-end {
    display: flex;
    justify-content: flex-end;
}

.gap-4 { gap: var(--space-4); }

/* Zvedne prvek nad podkladovou vrstvu (třeba nad odkaz přes celý řádek). */
.above {
    position: relative;
    z-index: 2;
}

/* Větší úvodní odstavec uvnitř textu stránky. */
.lead {
    font-size: var(--size-h3);
    line-height: 1.3;
    letter-spacing: var(--tracking-sub);
}

.text-h4 { font-size: var(--size-h4); }

/* Text vysazený velkým písmem v úzkém sloupci (manifest na stránce O nás). */
.statement {
    font-size: var(--size-h3);
    line-height: 1.3;
    letter-spacing: var(--tracking-sub);
    color: var(--ink);
    max-width: 30ch;
}

/* Manifest přes celý pravý sloupec (O nás od 14. 10. 2026): větší písmo,
   odstavce těsně pod sebou, poslední věta (pointa) polotučně. */
.statement--wide {
    max-width: none;
    font-size: var(--size-text-35);
    line-height: 1.25;
}

.statement--wide p {
    margin: 0;
}

.statement--wide p + p {
    margin-top: .7em;
}

.statement--wide p:last-child {
    font-weight: var(--weight-semibold);
}

/* Obrázek nebo video přes celou šířku bloku. */
.media-full {
    width: 100%;
    border-radius: var(--radius-panel);
}

/* Červená tečka ve slovní značce. Pravidlo míří na původní <symbol>,
   klony vytvořené přes <use> hodnotu zdědí. */
.logo-dot { fill: var(--red); }

/* Skrytý blok s ikonami na začátku stránky. */
.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}