/* ==========================================================
   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 F — Čistý produkt
   Bílá plocha, jediný modrý akcent, velké měkké zaoblení.
   Sekce se neoddělují linkami, ale změnou odstínu podkladu.
   ========================================================== */

:root {
    --c-base: 255 255 255;        /* čistá bílá */
    --c-cream: 29 29 31;          /* #1D1D1F hlavní text */
    --c-ink: 0 0 0;

    /* Akcent: produktová modrá (5,1:1 na bílé i s bílým textem) */
    --c-copper: 0 102 204;        /* #0066CC */
    --c-copper-light: 0 113 227;
    --c-copper-dark: 0 82 163;

    --c-surface: 245 245 247;     /* #F5F5F7 světlá plocha sekcí */
    --c-line: 210 210 215;
    --c-accent-soft: 210 226 245;

    /* Tlumené texty */
    --c-sand-100: 60 60 65;
    --c-sand-200: 85 85 90;
    --c-sand-300: 110 110 115;    /* #6E6E73 */
    --c-sand-500: 134 134 139;
    /* Plochy */
    --c-sand-700: 210 210 215;
    --c-sand-800: 238 238 240;
    --c-sand-900: 245 245 247;

    --font-display: 'Figtree';
    --font-body: 'Figtree';
    --font-tech: 'Figtree';
}

/* ==========================================================
   TYPOGRAFIE — jedno písmo na všechno, těsné prostrkání
   ========================================================== */

h1, h2, h3, h4 {
    font-family: var(--font-display), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.06;
    text-transform: none !important;   /* produktová stránka nekřičí verzálkami */
}

.font-mono {
    font-family: var(--font-body), -apple-system, sans-serif;
    letter-spacing: 0.01em;
    text-transform: none;
    font-weight: 600;
}

/* Nadpisové stupně */
.ap-h1 { font-size: clamp(2.6rem, min(7vw, 9vh), 5.5rem); letter-spacing: -0.035em; }
.ap-h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); letter-spacing: -0.03em; }
.ap-h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; }

/* Nadřazený „eyebrow" popisek nad nadpisem */
.ap-eyebrow {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgb(var(--c-copper));
}

.ap-lead {
    font-size: clamp(1.05rem, 1.6vw, 1.45rem);
    line-height: 1.5;
    font-weight: 400;
    color: rgb(var(--c-sand-200));
}

/* ==========================================================
   TVAROSLOVÍ — pilulky, velké zaoblení, žádné rámy
   Sekce odděluje odstín podkladu, ne linka.
   ========================================================== */

.ap-section-alt { background-color: rgb(var(--c-surface)); }
.ap-dark { background-color: #000; color: #F5F5F7; }
.ap-dark .ap-lead { color: #C7C7CC; }

/* display má nulovou specificitu (:where), aby ho přebily
   utility jako .hidden nebo .md:inline-flex ze sdílených šablon */
:where(.ap-btn, .ap-link) { display: inline-flex; }

/* Pilulková tlačítka */
.ap-btn {
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.85rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.ap-btn-primary { background-color: rgb(var(--c-copper)); color: #fff; }
.ap-btn-primary:hover { background-color: rgb(var(--c-copper-light)); }
.ap-btn-ghost { background-color: rgb(var(--c-surface)); color: rgb(var(--c-copper)); }
.ap-btn-ghost:hover { background-color: rgb(var(--c-line) / 0.6); }

/* Odkaz se šipkou */
.ap-link {
    align-items: center;
    gap: 0.3rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: rgb(var(--c-copper));
    transition: gap 0.25s ease;
}
.ap-link:hover { gap: 0.55rem; text-decoration: underline; text-underline-offset: 4px; }
.ap-link svg { width: 0.85rem; height: 0.85rem; }

/* Fotky: velké měkké zaoblení, žádný rám */
.ap-figure {
    border-radius: 28px;
    overflow: hidden;
    background-color: rgb(var(--c-surface));
}
.ap-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .ap-figure { border-radius: 20px; } }

/* Dlaždice */
.ap-tile {
    border-radius: 28px;
    overflow: hidden;
    background-color: rgb(var(--c-surface));
    padding: 2.5rem;
}
.ap-tile-dark { background-color: #000; color: #F5F5F7; }

/* ==========================================================
   PŘEPISY SDÍLENÝCH ŠABLON
   Vnitřní stránky mají stejný jazyk: žádné rámy, velké zaoblení.
   ========================================================== */

.project-card-wrapper article {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    background-color: rgb(var(--c-surface));
    box-shadow: none;
}
.project-card-wrapper article > div:first-child { border-bottom: 0; }
.project-card-wrapper .relative.h-56 { border-bottom: 0; }

/* Tlačítka a filtry ze sdílených šablon → pilulky */
a[class*="bg-copper"], button[class*="bg-copper"],
.filter-btn, button[type="submit"] {
    border-radius: 999px;
    border: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
}
.filter-btn { background-color: rgb(var(--c-surface)); color: rgb(var(--c-sand-100)); }
.filter-btn.active { background-color: rgb(var(--c-copper)); color: #fff !important; }

/* Vstupy: měkké, bez ostrých hran (Tailwind třídy mají přednost → přes id) */
#contact-form input, #contact-form textarea {
    border-radius: 14px;
    border: 1px solid rgb(var(--c-line));
    background-color: rgb(var(--c-base));
    padding-left: 1rem;
    padding-right: 1rem;
}
#contact-form input:focus, #contact-form textarea:focus {
    border-color: rgb(var(--c-copper));
    box-shadow: 0 0 0 4px rgb(var(--c-copper) / 0.15);
    outline: none;
}

/* Žádné tvrdé stíny ani mřížky — plochu dělá odstín */
.hard-shadow, .hard-shadow-lg { box-shadow: none; border: 0; }
.hard-shadow-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hard-shadow-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.22);
}
.bg-grid { background-image: none; }
.bg-hazard { background-image: none; background-color: rgb(var(--c-line)); height: 1px !important; opacity: 1; }

/* Vrstvy podloží = jen střídání bílé a světlé šedi */
.strata-surface, .strata-jil, .strata-skala { background: rgb(var(--c-base)); }
.strata-ornice, .strata-sterk, .strata-bedrock { background: rgb(var(--c-surface)); }
.strata::before { display: none; }

/* Zaoblení i u mapy a modalů */
iframe, #modal-content, .cookie-modal-content { border-radius: 18px; }

@media (prefers-reduced-motion: reduce) {
    .ap-btn, .ap-link, .hard-shadow-hover { transition: none; }
    .hard-shadow-hover:hover { transform: none; }
}

/* ==========================================================
   NAVIGACE — tenká lišta s rozmazaným podkladem
   ========================================================== */

.ap-nav {
    background-color: rgb(var(--c-base) / 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgb(var(--c-line) / 0.7);
}
.ap-nav-link {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgb(var(--c-sand-100));
    transition: color 0.2s ease;
}
.ap-nav-link:hover { color: rgb(var(--c-cream)); }
.ap-nav-link.is-active { color: rgb(var(--c-copper)); }
.ap-btn-sm { padding: 0.45rem 1.05rem; font-size: 0.8rem; }
.ap-burger { color: rgb(var(--c-cream)); padding: 0.35rem; background: transparent; border: 0; line-height: 0; }

.ap-mobile-menu {
    position: fixed;
    left: 0; right: 0; top: 3rem; bottom: 0;
    z-index: 40;
    background-color: rgb(var(--c-base) / 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1.5rem;
    overflow-y: auto;
}
@media (min-width: 768px) { .ap-mobile-menu { display: none; } }
.ap-mobile-link {
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: rgb(var(--c-cream));
    padding: 0.9rem 0;
    border-bottom: 1px solid rgb(var(--c-line));
}
.ap-mobile-link.is-active { color: rgb(var(--c-copper)); }

/* Kotvy pod lepivou lištou */
section[id], footer[id], main[id] { scroll-margin-top: 4rem; }