/* ==========================================================
   Sdílená základna pro SVĚTLÉ směry (B, C)
   Šablony jsou psané pro tmavý web; tady se překlopí povrchy,
   které by na světlém podkladu zůstaly černé.
   Barvy samotné nastavuje theme.css konkrétního směru.
   ========================================================== */

/* Tmavé plochy → světlé povrchy */
.bg-ink,
.bg-ink\/90 { background-color: rgb(var(--c-surface)); }

/* Navigace: světlá lišta s jemnou linkou */
#navbar {
    background-color: rgb(var(--c-base) / 0.92);
    border-bottom-color: rgb(var(--c-line));
}
#mobile-menu { background-color: rgb(var(--c-surface)); }

/* Logo je bílé (brightness-0 invert) — na světlém musí být tmavé */
img.invert { filter: brightness(0) !important; }

/* Lightboxy a fotogalerie zůstávají tmavé (fotka potřebuje tmavé pozadí) */
#image-modal,
#technical-modal { background-color: rgb(15 13 10 / 0.94) !important; }
#technical-modal [class*="col-span-7"] { background-color: #14120F !important; }
#image-modal #modal-content { background-color: #14120F !important; }
#image-modal #modal-content > div:last-child { background-color: #14120F !important; }
#image-modal #modal-title { color: #F5F0E8 !important; }
#technical-modal #modal-project-location,
#technical-modal #modal-project-number { color: #C9C2B4 !important; }

/* Cookie lišta a modal na světlém */
#cookie-consent-banner { background-color: rgb(var(--c-surface)); }
#cookie-settings-modal .cookie-modal-content { background-color: rgb(var(--c-base)); }
.cookie-toggle .toggle-slider { background: rgb(var(--c-line)); border-color: rgb(var(--c-line)); }

/* Karusel realizací: tmavý pás jako „výstavní síň" i ve světlém webu */
.projector-slide { background: #14120F; }

/* Vrstvy podloží — světlé směry je používají jen jako jemné odstíny */
.strata-surface { background: rgb(var(--c-base)); }
.strata-ornice  { background: rgb(var(--c-surface)); }
.strata-jil     { background: rgb(var(--c-base)); }
.strata-sterk   { background: rgb(var(--c-surface)); }
.strata-skala   { background: rgb(var(--c-base)); }
.strata-bedrock { background: rgb(var(--c-surface)); }
.strata::before { display: none; }

/* Mřížka na světlém musí být tmavá, ne světlá */
.bg-grid {
    background-image:
        linear-gradient(to right, rgb(var(--c-cream) / 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--c-cream) / 0.06) 1px, transparent 1px);
}

/* Tvrdé stíny jsou na světlém příliš agresivní — jemnější linka */
.hard-shadow { box-shadow: 3px 3px 0 0 rgb(var(--c-line)); }
.hard-shadow-lg { box-shadow: 6px 6px 0 0 rgb(var(--c-line)); }
.hard-shadow-hover:hover { box-shadow: 4px 4px 0 0 rgb(var(--c-accent-soft)); transform: translate(-2px, -2px); }

/* Hloubková lišta se ve světlých směrech nepoužívá */
.depth-rail, .depth-rail-mini { display: none !important; }

/* ----------------------------------------------------------
   Kontrast na světlém podkladu (WCAG AA)
   ---------------------------------------------------------- */

/* Tmavý text na sytém akcentu neprojde — tlačítka a štítky dostanou bílou */
[class*="bg-copper"].text-ink,
[class*="bg-copper"] .text-ink,
.filter-btn.active,
button[class*="bg-copper"],
a[class*="bg-copper"] { color: #FFFFFF !important; }

/* Světlý odstín akcentu je na papíře nečitelný — použijeme tmavý */
.text-copper-light { color: rgb(var(--c-copper-dark)); }
.border-copper-light { border-color: rgb(var(--c-copper-dark)); }

/* ==========================================================
   Směr D — Tichý kámen
   Kostěná bílá, jediný břidlicový akcent, vlasové linky.
   Vše ostatní dělá prázdné místo.

   Kontrast (WCAG AA, poměr proti podkladu #FAF8F4):
     cream   #141414 → 17,4:1   (hlavní text)
     sand-100 #2B2E31 → 13,0:1
     sand-200 #4A4F55 →  7,7:1
     sand-300 #5F656C →  5,6:1  (drobné popisky)
     copper  #5A6169 →  5,9:1   (akcent, odkazy)
     bílá na akcentu #5A6169 → 6,3:1 (plné CTA)
     sand-500 #8A9099 →  3,0:1  — jen dekorace a ikony, nikdy běžný text
   ========================================================== */

:root {
    /* Podklad a text */
    --c-base: 250 248 244;      /* #FAF8F4 kostěná bílá */
    --c-cream: 20 20 20;        /* #141414 hlavní barva textu */
    --c-ink: 13 13 13;          /* #0D0D0D nejtmavší tón */

    /* Jediný akcent — břidlicová šeď (světlejší varianta je záměrně tmavší = hover ztmavne) */
    --c-copper: 90 97 105;      /* #5A6169 */
    --c-copper-light: 69 75 82; /* #454B52 */
    --c-copper-dark: 58 64 70;  /* #3A4046 */

    /* Povrchy a linky */
    --c-surface: 244 241 235;   /* #F4F1EB o tón teplejší plocha */
    --c-line: 230 226 217;      /* #E6E2D9 vlasová linka */
    --c-accent-soft: 216 211 200;

    /* Tlumené texty (na světlém podkladu = tmavé odstíny) */
    --c-sand-100: 43 46 49;
    --c-sand-200: 74 79 85;
    --c-sand-300: 95 101 108;
    --c-sand-500: 138 144 153;
    /* Plochy a okraje */
    --c-sand-700: 230 226 217;
    --c-sand-800: 239 236 228;
    --c-sand-900: 244 241 235;

    /* Vrstvy podloží — ve světlém směru jen odstíny kosti */
    --c-strata-ornice: 244 241 235;
    --c-strata-jil: 250 248 244;
    --c-strata-sterk: 244 241 235;
    --c-strata-skala: 239 236 228;

    --font-display: 'Cormorant Garamond';
    --font-body: 'Libre Franklin';
    --font-tech: 'Libre Franklin';
}

/* ----------------------------------------------------------
   Typografie — menší stupně, velká výška řádku, žádné verzálky
   ---------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--font-display), Georgia, 'Times New Roman', serif;
    font-weight: 400 !important;    /* sdílené stránky mají font-black — tady ticho */
    text-transform: none !important;
    letter-spacing: 0.004em;
    line-height: 1.14;
}

h1 { line-height: 1.06; }

/* Odstavce dýchají (brief: 1,7+) */
p { line-height: 1.8; }

/* Tučné řezy tlumíme — grotesk 900 by v tomto směru křičel */
.font-black { font-weight: 600; }
.font-extrabold { font-weight: 600; }

/* Technické popisky zůstávají v grotesku, jen prostrkané */
.font-mono { font-family: var(--font-body), system-ui, sans-serif; letter-spacing: 0.16em; }

/* ----------------------------------------------------------
   Tichý kámen ruší industriální motivy sdílených šablon
   ---------------------------------------------------------- */

/* Žádné stíny */
.hard-shadow,
.hard-shadow-lg,
.hard-shadow-hover,
#navbar.hard-shadow { box-shadow: none !important; }
.hard-shadow-hover:hover { box-shadow: none !important; transform: none !important; }

/* Žádná mřížka na pozadí */
.bg-grid { background-image: none !important; }

/* Měděné měřítko → vlasová linka */
.bg-hazard {
    background-image: none;
    background-color: rgb(var(--c-line));
    height: 1px !important;
    opacity: 1;
}

/* Silné rámy → vlasové linky */
.border-2, .border-4 { border-width: 1px; }
.border-t-2, .border-t-4 { border-top-width: 1px; }
.border-b-2, .border-b-4 { border-bottom-width: 1px; }
.border-l-2, .border-l-4 { border-left-width: 1px; }

/* Barevné okraje sdílených šablon ztichnou do linky */
.border-copper, .border-copper-dark, .border-copper-light { border-color: rgb(var(--c-line)); }

/* Vrstvy podloží = jednotný klid; jen patička se posune o tón */
.strata-surface, .strata-ornice, .strata-jil, .strata-sterk, .strata-skala { background: rgb(var(--c-base)); }
.strata-bedrock { background: rgb(var(--c-surface)); }

/* Plovoucí CTA v patičce dokumentu — bez rámu */
a[title="Rychlý kontakt"] { border: 0 !important; }

/* Pohyb je jen naznačený */
.reveal, .reveal-left, .reveal-right { transition-duration: 0.9s; }
.reveal { transform: translateY(18px); }
.reveal-left { transform: translateX(-18px); }
.reveal-right { transform: translateX(18px); }

/* ----------------------------------------------------------
   Navigace — tenká, splývá se stránkou
   ---------------------------------------------------------- */

#navbar { border-bottom: 1px solid transparent; }
#navbar.hard-shadow { border-bottom-color: rgb(var(--c-line)); }
#mobile-menu { background-color: rgb(var(--c-base)); border-bottom: 1px solid rgb(var(--c-line)); }

.q-nav-link {
    position: relative;
    padding-bottom: 0.35rem;
}
.q-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgb(var(--c-copper));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.q-nav-link:hover::after,
.q-nav-link.is-active::after { transform: scaleX(1); }

/* Ikona mobilního menu — dvě vlasové linky */
.q-menu-icon { display: block; width: 26px; height: 10px; position: relative; }
.q-menu-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgb(var(--c-cream));
}
.q-menu-icon span:first-child { top: 0; }
.q-menu-icon span:last-child { bottom: 0; }

/* ----------------------------------------------------------
   Komponenty směru
   ---------------------------------------------------------- */

/* Zvýraznění v nadpisech — kurzivní serif v akcentu */
.q-accent { color: rgb(var(--c-copper)); font-style: italic; }

/* Odkaz s vlasovým podtržením */
.q-link {
    display: inline-block;
    color: rgb(var(--c-cream));
    border-bottom: 1px solid rgb(var(--c-copper));
    padding-bottom: 0.3rem;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.q-link:hover { color: rgb(var(--c-copper)); border-bottom-color: rgb(var(--c-cream)); }

/* Jediné plné tlačítko na stránce — tlumené, bez poloměru */
.q-btn {
    display: inline-block;
    background: rgb(var(--c-copper));
    color: #FFFFFF;
    padding: 1rem 2.25rem;
    letter-spacing: 0.03em;
    border: 0;
    transition: background-color 0.3s ease;
}
.q-btn:hover { background: rgb(var(--c-copper-light)); }

/* Fotky — tiché, mírně odsycené, s prostorem kolem */
.q-figure { display: block; overflow: hidden; }
.q-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.82) contrast(1.02);
    transition: filter 1s ease, transform 1.2s ease;
}
.q-figure:hover img { filter: saturate(1) contrast(1.02); }

/* Řádky výpisů — oddělené jen linkou */
.q-list { border-bottom: 1px solid rgb(var(--c-line)); }
.q-row { border-top: 1px solid rgb(var(--c-line)); }

/* Formulář — podtržená pole, žádné boxy */
.q-field {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgb(var(--c-line));
    border-radius: 0;
    padding: 0.7rem 0;
    color: rgb(var(--c-cream));
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}
.q-field:focus { outline: none; border-bottom-color: rgb(var(--c-copper)); }
textarea.q-field { resize: vertical; }

/* Mapa — odbarvená, aby nekřičela */
.q-map iframe { filter: grayscale(1) contrast(0.92); opacity: 0.92; }

/* Táhlo před/po — vlasová linka místo tlustého úchytu */
.q-handle-grip {
    width: 2.75rem;
    height: 2.75rem;
    background: rgb(var(--c-base));
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .q-figure img,
    .q-nav-link::after,
    .q-link,
    .q-btn { transition: none !important; }
    .q-figure:hover img { transform: none; }
}

/* ==========================================================
   TVAROSLOVÍ — OBLOUK
   Fotky mají klenutý horní okraj jako architektonická nika.
   Jinak žádné rámy, žádné stíny, žádné boxy — jen prostor.
   ========================================================== */

/* Klenba: eliptický poloměr se škáluje s velikostí fotky */
.q-figure,
.q-figure img,
.project-card-wrapper .relative.h-56,
.project-card-wrapper .relative.h-56 img {
    border-radius: 42% 42% 3px 3px / 16% 16% 3px 3px;
    overflow: hidden;
}

/* Před/po a mapa zůstávají pravoúhlé — porovnání a plán snesou klid */
#ba-container, iframe { border-radius: 3px; }

/* Karty realizací nejsou karty: bez rámu, bez pozadí, jen odsazení */
.project-card-wrapper article {
    border: 0;
    background-color: transparent;
    border-radius: 0;
}
.project-card-wrapper article > div:first-child { border-bottom: 0; }

/* Tlačítka a vstupy: bez zaoblení, bez výplně, jen vlasová linka */
a[class*="bg-copper"], button[class*="bg-copper"],
.filter-btn, input, textarea, select { border-radius: 0; }
input, textarea, select {
    border-width: 0 0 1px 0;
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

/* Žádné stíny nikde */
.hard-shadow, .hard-shadow-lg, .hard-shadow-hover:hover { box-shadow: none; }
.hard-shadow-hover:hover { transform: none; }

/* Vstupy: vlasová linka pod textem, nic víc */
#contact-form input, #contact-form textarea {
    border-radius: 0;
    border-width: 0 0 1px 0;
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
}