/* ============================================================
   base.css — reset, typografie, layout proměnné
   Barevné proměnné (--bg-body, --text-dark, --text-light, --accent,
   --separator, --header-footer, --gradient-light, --gradient-dark)
   se vkládají inline ze třídy Area přes Palette::cssVars().
   ============================================================ */

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

:root {
    /* Globální max šířka layoutu — sjednocuje sekce, nav, footer, portal grid. */
    --site-max-width: 1700px;
    /* Užší varianta pro text-heavy sekce (kontakt, reference). */
    --site-max-width-narrow: 760px;
    /* Maximální šířka pozadí sekcí. Default `none` = plná šíře viewportu;
       lze nastavit globálně (např. 2400px) pro limit na opravdu širokých monitorech. */
    --site-bg-max-width: none;
    /* Stabilní výška viewportu pro dimenzování sekcí. `lvh` (velký viewport bez
       mobilních lišt) se na rozdíl od `vh` v žádném korektním prohlížeči nemění
       při schovávání/zobrazování lišt během scrollu — layout stránky tak „nedýchá".
       V prohlížečích, kde se mění i lvh (Opera iOS, in-app WebView — resizuje se
       celý WebView), přepíše main.js tuto proměnnou pevnou px hodnotou. */
    --vh-page: 100vh;
    --portal-bg: #2B2B2B;
}
@supports (height: 100lvh) {
    :root { --vh-page: 100lvh; }
}

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

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

body {
    margin: 0;
    font-family: "neue-haas-grotesk-display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: var(--text-dark);
    background: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
    font-family: "ivypresto-display", Georgia, "Times New Roman", serif;
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

p { margin: 0 0 1em; }

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}
a:hover { opacity: .75; }

/* Layout primitives ---------------------------------------- */
.section {
    padding: clamp(4rem, 10vh, 8rem) 1.25rem;
    padding: clamp(4rem, calc(var(--vh-page) * 0.10), 8rem) 1.25rem;
    --section-text-align: center;
    /* Vždy flex column — kontext pro vertikální zarovnání section__inner. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* `section__inner` = layout container (max šíře jako nav).
   `section__content` = obsahový blok uvnitř; default vyplní inner, --narrow ho zúží.
   Default margin auto centruje obsah, pokud má nastavený `max-width` (inline z adminu);
   bez max-width margin auto nic nemění (block-level prvek vyplní 100 %). */
.section__inner   { width: 100%; max-width: var(--site-max-width); margin: 0 auto; }
.section__content { margin-left: auto; margin-right: auto; }
.section__content--narrow { max-width: var(--site-max-width-narrow); }

/* Volitelné zarovnání obsahu uvnitř section__inner (BasicSection).
   Posouvá content blok na kraj rámu i zarovnává text uvnitř.
   Hodnoty jsou per zařízení (desktop/tablet/mobil) — třídy *-d-*, *-t-*, *-m-*
   se aktivují přes media queries shodné s breakpointy v components.css. */
.section--basic,
.section--basic .section__header { text-align: var(--section-text-align); }

@media (min-width: 1025px) {
    .section--align-d-left   { --section-text-align: left; }
    .section--align-d-center { --section-text-align: center; }
    .section--align-d-right  { --section-text-align: right; }
    .section--align-d-left   .section__content { margin-left: 0;    margin-right: auto; }
    .section--align-d-right  .section__content { margin-left: auto; margin-right: 0; }
    .section--valign-d-top    { justify-content: flex-start; }
    .section--valign-d-middle { justify-content: center; }
    .section--valign-d-bottom { justify-content: flex-end; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .section--align-t-left   { --section-text-align: left; }
    .section--align-t-center { --section-text-align: center; }
    .section--align-t-right  { --section-text-align: right; }
    .section--align-t-left   .section__content { margin-left: 0;    margin-right: auto; }
    .section--align-t-right  .section__content { margin-left: auto; margin-right: 0; }
    .section--valign-t-top    { justify-content: flex-start; }
    .section--valign-t-middle { justify-content: center; }
    .section--valign-t-bottom { justify-content: flex-end; }
}
@media (max-width: 768px) {
    .section--align-m-left   { --section-text-align: left; }
    .section--align-m-center { --section-text-align: center; }
    .section--align-m-right  { --section-text-align: right; }
    .section--align-m-left   .section__content { margin-left: 0;    margin-right: auto; }
    .section--align-m-right  .section__content { margin-left: auto; margin-right: 0; }
    .section--valign-m-top    { justify-content: flex-start; }
    .section--valign-m-middle { justify-content: center; }
    .section--valign-m-bottom { justify-content: flex-end; }
}

.section__header { margin-bottom: 3rem; text-align: center; }
.section__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.8rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.section__title { margin: 0; }
.section__lead { font-size: 1.15rem; opacity: 0.85; text-align: center; }
.section__note { text-align: center; opacity: 0.6; font-size: 0.9rem; margin-top: 2rem; }

/* Reveal animace pro long-scroll ---------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
    opacity: 1;
    /* `none`, ne `translateY(0)`: ne-`none` transform by ze sekce dělal containing
       block pro `position: fixed` potomky (rozbíjel pseudo-fullscreen galerie). */
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}