/* ============================================
   JL – Redesign v3
   Homepage + Blog + Kontakt
   ============================================ */

:root {
    --c-bg: #f4f4f8;
    --c-surface: #ffffff;
    --c-dark: #0f0f1a;
    --c-dark-soft: #1a1a2e;
    --c-text: #1e1e32;
    --c-text-2: #555570;
    --c-text-3: #8888a0;
    --c-primary: #4f46e5;
    --c-primary-soft: #ededff;
    --c-primary-dark: #3730a3;
    --c-border: #e0e0ea;
    --c-blue: #3b82f6;    --c-blue-bg: #eff6ff;
    --c-purple: #8b5cf6;  --c-purple-bg: #f5f3ff;
    --c-orange: #f97316;  --c-orange-bg: #fff7ed;
    --c-green: #22c55e;   --c-green-bg: #f0fdf4;
    --c-cyan: #06b6d4;    --c-cyan-bg: #ecfeff;
    --c-red: #ef4444;     --c-red-bg: #fef2f2;
    --c-indigo: #6366f1;  --c-indigo-bg: #eef2ff;
    --c-teal: #14b8a6;    --c-teal-bg: #f0fdfa;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --header-h: 60px;
    --container: 1320px;
    --pad: 1.5rem;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --tr: 0.2s ease;
}

/* === Reset === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: var(--c-border) transparent; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > .footer { margin-top: auto; }
body.ready {
    opacity: 1;
}
a { color: inherit; text-decoration: none; }

/* =============================================
   HEADER
   ============================================= */
.header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: rgba(244,244,248,0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    z-index: 100;
    transition: background 0.6s ease, box-shadow 0.6s ease, border-color 0.6s ease, backdrop-filter 0.6s ease, -webkit-backdrop-filter 0.6s ease;
}
.header--scrolled {
    background: rgba(255,255,255,0.92);
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

/* Dark header: over hero (transparent) */
.header--dark {
    background: transparent;
    border-bottom-color: rgba(255,255,255,0.03);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* Dark header: scrolled past hero → footer-colored glass */
.header--dark.header--scrolled {
    background: rgba(26,26,46,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: rgba(255,255,255,0.04);
    box-shadow: 0 4px 30px rgba(0,0,0,0.25);
}
/* White text for dark header */
.header--dark .header__logo-text { color: rgba(255,255,255,0.9); }
.header--dark .header__link { color: rgba(255,255,255,0.6); }
.header--dark .header__link:hover { color: rgba(255,255,255,0.95); }
.header--dark .header__link--active { color: #a5b4fc; }
.header--dark .header__link::after { background: #a5b4fc; }
.header--dark .header__social-link { color: rgba(255,255,255,0.5); }
.header--dark .header__social-link:hover { color: #a5b4fc; background: rgba(255,255,255,0.08); }
.header--dark .header__burger span { background: rgba(255,255,255,0.9); }
.header__inner {
    max-width: var(--container);
    margin: 0 auto; padding: 0 var(--pad);
    height: 100%;
    display: flex; align-items: center; gap: 2rem;
}
.header__logo {
    display: flex; align-items: center; gap: 0.6rem;
    margin-right: auto;
}
.header__logo-icon {
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    object-fit: contain;
}
.header__logo-text { font-size: 15px; font-weight: 600; color: var(--c-text); transition: color 0.5s ease; }
.header__nav { display: flex; gap: 1.75rem; }
.header__link {
    font-size: 14px; font-weight: 500;
    color: var(--c-text-2); position: relative;
    transition: color 0.5s ease;
}
.header__link::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 2px;
    background: var(--c-primary); border-radius: 1px;
    transition: width var(--tr);
}
.header__link:hover { color: var(--c-text); }
.header__link:hover::after { width: 100%; }
.header__link--active { color: var(--c-primary); }
.header__link--active::after { width: 100%; }

.header__right { display: flex; align-items: center; gap: 1rem; }
.header__social { display: flex; gap: 0.25rem; }
.header__social-link {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    color: var(--c-text-3); border-radius: var(--r-sm);
    transition: color 0.5s ease, background 0.5s ease;
}
.header__social-link:hover { color: var(--c-primary); background: var(--c-primary-soft); }
.header__cta {
    font-size: 14px; font-weight: 600;
    padding: 0.4rem 1rem;
    background: var(--c-primary); color: #fff;
    border-radius: var(--r-sm);
    transition: background var(--tr);
}
.header__cta:hover { background: var(--c-primary-dark); }

/* Burger */
.header__burger {
    display: none; flex-direction: column; justify-content: center;
    gap: 4px; width: 32px; height: 32px;
    background: none; border: none; cursor: pointer; padding: 5px;
}
.header__burger span {
    display: block; width: 100%; height: 2px;
    background: var(--c-text); border-radius: 1px;
    transition: transform var(--tr), opacity var(--tr);
}
.header__burger.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.header__burger.active span:nth-child(2) { opacity: 0; }
.header__burger.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* Mobile Nav */
/* Mobile nav overlay (dim background) */
.mobile-nav {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 98;
    background: rgba(15,15,26,0);
    pointer-events: none;
    transition: background 0.35s ease;
}
.mobile-nav.active {
    background: rgba(15,15,26,0.4);
    pointer-events: auto;
}

/* Mobile nav panel (slides from right) */
.mobile-nav__links {
    position: fixed; top: var(--header-h); right: 0; bottom: 0;
    width: 280px; max-width: 80vw;
    z-index: 99;
    display: flex; flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.75rem;
    gap: 0.25rem;
    background: rgba(26,26,46,0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255,255,255,0.08);
    box-shadow: -8px 0 40px rgba(0,0,0,0.25);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav.active .mobile-nav__links {
    transform: translateX(0);
}

/* Nav link items */
.mobile-nav__links > a {
    font-size: 1rem; font-weight: 500;
    color: rgba(255,255,255,0.85);
    padding: 0.6rem 0.5rem;
    width: 100%;
    border-radius: var(--r-sm);
    transition: color 0.2s ease, background 0.2s ease;
    opacity: 0;
    transform: translateX(20px);
}
.mobile-nav.active .mobile-nav__links > a {
    opacity: 1;
    transform: translateX(0);
    transition: color 0.2s ease, background 0.2s ease,
                opacity 0.3s ease, transform 0.3s ease;
}
.mobile-nav.active .mobile-nav__links > a:nth-child(1) { transition-delay: 0.1s; }
.mobile-nav.active .mobile-nav__links > a:nth-child(2) { transition-delay: 0.15s; }
.mobile-nav.active .mobile-nav__links > a:nth-child(3) { transition-delay: 0.2s; }
.mobile-nav__links > a:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

.mobile-nav__divider {
    width: 100%; height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 0.75rem 0;
    opacity: 0;
    transition: opacity 0.3s ease 0.25s;
}
.mobile-nav.active .mobile-nav__divider { opacity: 1; }

.mobile-nav__social {
    display: flex; gap: 1.25rem;
    padding: 0.25rem 0.5rem;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-nav.active .mobile-nav__social {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}
.mobile-nav__social a {
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    transition: color 0.2s ease;
}
.mobile-nav__social a:hover { color: #a5b4fc; }

/* =============================================
   SHARED: Label, Buttons
   ============================================= */
.label {
    display: block;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--c-primary); margin-bottom: 0.3rem;
}
.btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    font-size: 14px; font-weight: 600; font-family: inherit;
    border-radius: var(--r-sm); cursor: pointer;
    transition: all var(--tr); border: none;
}
.btn--primary {
    background: var(--c-primary); color: #fff;
    box-shadow: 0 2px 12px rgba(79,70,229,0.4);
}
.btn--primary:hover {
    background: var(--c-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(79,70,229,0.5);
}
.btn--ghost {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.15);
}
.btn--ghost:hover { background: rgba(255,255,255,0.14); color: #fff; }
.btn--outline {
    background: transparent; color: var(--c-text);
    border: 1.5px solid var(--c-border);
}
.btn--outline:hover {
    border-color: var(--c-primary); color: var(--c-primary);
    background: var(--c-primary-soft);
}
.btn--full { width: 100%; justify-content: center; }

/* =============================================
   HERO (Homepage)
   ============================================= */
.hero {
    position: relative;
    padding: calc(var(--header-h) + 5rem) 0 4.5rem;
    background: linear-gradient(135deg, #0f0f1a 0%, #1e1b4b 50%, #312e81 100%);
    color: #fff; overflow: hidden;
}
.hero__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 600px 400px at 75% 20%, rgba(79,70,229,0.25) 0%, transparent 70%),
        radial-gradient(ellipse 400px 300px at 20% 80%, rgba(99,102,241,0.15) 0%, transparent 70%);
}
/* Hero illustration (background image, right side, supports slideshow) */
.hero__illustration {
    position: absolute;
    top: 50%;
    /* Anchor to the right side of the centered container, not the viewport edge */
    left: calc(50% - 60px);
    right: auto;
    transform: translateY(-50%);
    width: 900px; height: 130%;
    background: center center / contain no-repeat;
    filter: invert(1) brightness(2);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, black 25%, black 70%, transparent 100%),
        linear-gradient(to bottom, transparent 5%, black 35%, black 65%, transparent 95%);
    -webkit-mask-composite: destination-in;
    mask-image:
        linear-gradient(to right, transparent 0%, black 25%, black 70%, transparent 100%),
        linear-gradient(to bottom, transparent 5%, black 35%, black 65%, transparent 95%);
    mask-composite: intersect;
    pointer-events: none;
}
.hero__illustration.active {
    opacity: 0.12;
}

/* Floating icon particles */
.hero__particles {
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* Izoluje layout/paint/size — změny uvnitř nepovedou k reflow okolí */
    contain: strict;
}
.hero__particle {
    position: absolute;
    color: rgba(255,255,255,0.12);
    opacity: 0;
    /* Jediný hint pro compositor — opacity se promovuje automaticky,
       translate3d v keyframes spolehlivě promuje vrstvu během animace.
       Dřívější `backface-visibility: hidden` + `transform: translateZ(0)`
       byly REDUNDANTNÍ a zároveň způsobovaly „multi-promote" bugy na
       AMD integrovaných GPU (Radeon Vega/R5/R7 v Dell business noteboocích),
       kde ovladač při čtyřnásobné promoci náhodně demoval vrstvy. */
    will-change: transform;
    animation: particleFloat var(--dur) var(--delay) ease-in-out infinite;
}
@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(0.8);
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)) scale(1);
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(var(--dx) * 2), calc(var(--dy) * 2), 0) rotate(calc(var(--rot) * 2)) scale(0.8);
    }
}
.hero__container {
    position: relative;
    max-width: var(--container);
    margin: 0 auto; padding: 0 var(--pad);
}
.hero__badge {
    display: inline-block;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 0.3rem 0.8rem; border-radius: 999px;
    margin-bottom: 1.25rem;
}
.hero__title {
    font-size: clamp(2.75rem, 5.2vw, 4rem);
    font-weight: 800; line-height: 1.05;
    letter-spacing: -0.03em; margin-bottom: 1.25rem;
}
.hero__title--smaller {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
}
.hero__dot { color: var(--c-primary); }
.hero__text {
    font-size: 18px; line-height: 1.7;
    color: rgba(255,255,255,0.8);
    max-width: 640px; margin-bottom: 0.75rem;
}
.hero__subtext {
    font-size: 16px; color: rgba(255,255,255,0.55);
    max-width: 560px; margin-bottom: 1.75rem;
}
.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero__actions .btn--outline {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.25);
}
.hero__actions .btn--outline:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.1);
}

/* =============================================
   SERVICES / BENTO (Homepage)
   ============================================= */
.services {
    padding: 3.5rem 0 4rem;
    background:
        radial-gradient(ellipse 700px 500px at 15% 20%, rgba(79,70,229,0.15) 0%, transparent 70%),
        radial-gradient(ellipse 500px 400px at 85% 60%, rgba(59,130,246,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 400px 300px at 50% 80%, rgba(139,92,246,0.1) 0%, transparent 70%),
        var(--c-bg);
}
.services__container {
    max-width: var(--container);
    margin: 0 auto; padding: 0 var(--pad);
}
.services__header {
    display: flex; align-items: flex-end;
    justify-content: space-between;
    gap: 2rem; margin-bottom: 2rem;
}
.services__title {
    font-size: 1.75rem; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.2;
}
.services__desc {
    font-size: 15px; color: var(--c-text-2);
    max-width: 360px; text-align: right; line-height: 1.5;
}

/* Bento Grid */
.bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Card */
.card {
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    position: relative; overflow: hidden;
    /* 4-vrstvý box-shadow se STEJNOU STRUKTUROU jako .card:hover — klíčové
       pro plynulý fade. CSS interpoluje box-shadow po vrstvách; když se
       struktura liší (zejm. inset vs non-inset), interpolace glitchuje.
       V rest jsou glow vrstvy 3 a 4 ALPHA=0 → neviditelné, ale existují
       ve struktuře → transition interpoluje alpha plynule na cílovou hodnotu. */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 20px 50px rgba(79, 70, 229, 0),
        0 8px 20px rgba(0, 0, 0, 0);
    /* Hover scale roste směrem nahoru, spodní hrana zůstává nehybná. */
    transform-origin: center bottom;
    /* box-shadow 0.5s — prodloužené pro jasně viditelný fade (0.2s bylo
       neznatelně krátké, 0.4s stále rychlé). 0.5s dává uživateli čas
       vnímat přechod jako „smooth animation". */
    transition: transform 0.15s ease-out,
                box-shadow 0.5s ease,
                border-color 0.2s ease,
                background 0.2s ease;
}
.card__accent {
    position: absolute; top: 0; left: 0;
    width: 4px; height: 0;
    border-radius: 0 0 4px 0;
    transition: height 0.3s ease;
}
.card:hover {
    /* Pure scale s transform-origin:bottom center → žádný translateY →
       žádná dead zone → žádné flash-loop. box-shadow (Y offset) dodává dojem vznášení. */
    transform: scale(1.03);
    z-index: 10;
    background: rgba(255, 255, 255, 0.75);
    /* STEJNÁ STRUKTURA jako .card (4 vrstvy) — pouze alfa vrstev 3 a 4
       se změní z 0 na viditelnou hodnotu (0.15 a 0.10). CSS transition
       interpoluje po vrstvách plynule. Alfa 0.15 (mírně více než 0.12)
       = zřetelnější cílový stav = viditelnější fade.

       POZOR: ŽÁDNÁ `animation: ...` zde. Důvod: CSS spec říká že když má
       element animation na property, transition na stejné property je
       SUPPRESSED (i během animation-delay se `fill-mode: none`). Dřívější
       pokus přidat „breathing" animaci zcela rozbil fade-in/out — shadow
       skákal místo přecházel. Pro robustní fade používáme pouze transition,
       žádná keyframes. */
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 20px 50px rgba(79, 70, 229, 0.15),
        0 8px 20px rgba(0, 0, 0, 0.10);
    border-color: rgba(255, 255, 255, 0.6);
}
.card:hover .card__accent { height: 100%; }

/* Dominant card — spans 2 columns */
.card--dominant {
    grid-column: span 2;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0;
}

/* L3 dominant — single column with dominant visual styling */
.card--dominant-sm {
    grid-column: span 1;
    padding: 2rem;
}

/* Minimal card — compact horizontal layout, half vertical space */
.card--minimal {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.85rem;
    row-gap: 0;
    padding: 0.85rem 1.1rem;
    align-items: start;
}
/* Minimal karta — stejný princip jako .card:hover (origin bottom, pure scale).
   Scale 1.02 místo 1.01 + bez translate odpovídá původnímu jemnému „lift"
   efektu u kompaktních karet. box-shadow transition se dědí z .card. */
.card--minimal:hover { transform: scale(1.02); }
.card--minimal .card__accent { width: 3px; }
.card--minimal .card__head {
    grid-column: 1; grid-row: 1 / 3;
    margin-bottom: 0; align-self: center;
}
.card--minimal .card__tag { display: none; }
.card--minimal .card__icon { width: 30px; height: 30px; }
.card--minimal .card__icon svg { width: 17px; height: 17px; }
.card--minimal .card__title {
    grid-column: 2; grid-row: 1;
    font-size: 15px; margin-bottom: 0; line-height: 1.35;
    align-self: end;
}
.card--minimal .card__text {
    grid-column: 2; grid-row: 2;
    color: var(--c-text-2);
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.card--minimal .card__chips { display: none; }
/* Full text — disable line clamping, card grows to fit content */
.card--full-text .card__text {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Minimal pair — two minimals stacked in one grid cell */
.card-pair {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.card-pair .card--minimal {
    flex: 1;
}

/* Inline group — consecutive minimals side by side on one full row */
.card-inline-group {
    grid-column: 1 / -1;
    display: flex;
    gap: 1rem;
}
.card-inline-group .card--minimal {
    flex: 1;
    min-width: 0;
}
@media (max-width: 640px) {
    .card-inline-group { flex-direction: column; }
}

/* Span overrides — applied by PHP grid simulation to fill gaps */
.card--span-2 { grid-column: span 2; }
.card--span-3 { grid-column: 1 / -1; }

.card__head {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}
.card__icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    transition: transform var(--tr);
}
.card:hover .card__icon { transform: scale(1.1); }

.card__icon--blue    { background: var(--c-blue-bg);   color: var(--c-blue); }
.card__icon--purple  { background: var(--c-purple-bg); color: var(--c-purple); }
.card__icon--orange  { background: var(--c-orange-bg); color: var(--c-orange); }
.card__icon--green   { background: var(--c-green-bg);  color: var(--c-green); }
.card__icon--cyan    { background: var(--c-cyan-bg);   color: var(--c-cyan); }
.card__icon--red     { background: var(--c-red-bg);    color: var(--c-red); }
.card__icon--indigo  { background: var(--c-indigo-bg); color: var(--c-indigo); }
.card__icon--teal    { background: var(--c-teal-bg);   color: var(--c-teal); }

.card:has(.card__icon--blue)   .card__accent { background: var(--c-blue); }
.card:has(.card__icon--purple) .card__accent { background: var(--c-purple); }
.card:has(.card__icon--orange) .card__accent { background: var(--c-orange); }
.card:has(.card__icon--green)  .card__accent { background: var(--c-green); }
.card:has(.card__icon--cyan)   .card__accent { background: var(--c-cyan); }
.card:has(.card__icon--red)    .card__accent { background: var(--c-red); }
.card:has(.card__icon--indigo) .card__accent { background: var(--c-indigo); }
.card:has(.card__icon--teal)   .card__accent { background: var(--c-teal); }

.card__tag {
    font-size: 12px; font-weight: 600;
    color: var(--c-text-3); background: var(--c-bg);
    padding: 0.2rem 0.55rem; border-radius: 999px;
}
.card__title {
    font-size: 20px; font-weight: 700;
    margin-bottom: 0.5rem; line-height: 1.3;
}
.card__text {
    font-size: 16px; color: var(--c-text-2); line-height: 1.65;
}

/* Chips in dominant card */
.card__chips {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin-top: 1rem;
}
.chip {
    font-size: 12px; font-weight: 500;
    color: var(--c-blue); background: var(--c-blue-bg);
    padding: 0.25rem 0.6rem; border-radius: 999px;
    border: 1px solid rgba(59,130,246,0.15);
}

/* =============================================
   QUOTE (Homepage)
   ============================================= */
.quote {
    padding: 2.5rem 0 3rem;
}
.quote__container {
    max-width: var(--container);
    margin: 0 auto; padding: 0 var(--pad);
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
/* Subtle accent line */
.quote__accent {
    width: 40px; height: 2px;
    border-radius: 2px;
    background: var(--c-primary);
    opacity: 0.25;
    margin-bottom: 1rem;
}
/* Typographic quote mark */
.quote__mark {
    font-size: 3rem;
    line-height: 0.8;
    font-style: normal;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--c-primary);
    opacity: 0.15;
    float: left;
    margin-right: 0.35rem;
    margin-top: -0.05rem;
}
.quote__text {
    font-size: clamp(1.15rem, 2.2vw, 1.35rem);
    font-weight: 400; line-height: 1.7;
    color: var(--c-text-2);
    font-style: italic; border: none;
    max-width: 700px;
}
.quote__sub {
    display: block;
    font-size: 0.82em;
    color: var(--c-text-3);
    margin-top: 0.4rem;
}

/* =============================================
   PAGE HERO (Blog, Kontakt)
   ============================================= */
.page-hero {
    padding: calc(var(--header-h) + 3rem) 0 2.5rem;
    background: linear-gradient(135deg, #0f0f1a 0%, #1e1b4b 60%, #312e81 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 500px 300px at 70% 40%, rgba(79,70,229,0.2) 0%, transparent 70%);
}
.page-hero__container {
    position: relative;
    max-width: var(--container);
    margin: 0 auto; padding: 0 var(--pad);
}
.page-hero .label { color: rgba(255,255,255,0.5); }
.page-hero__title {
    font-size: clamp(2.15rem, 4.2vw, 3rem);
    font-weight: 800; letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}
.page-hero__text {
    font-size: 16px; line-height: 1.7;
    color: rgba(255,255,255,0.6);
    max-width: 560px;
}

/* Page hero illustration (same visual style as main hero) */
.page-hero__illustration {
    position: absolute;
    top: 50%;
    left: calc(50% + 40px);
    right: auto;
    transform: translateY(-50%);
    width: 500px; height: 100%;
    background: center center / contain no-repeat;
    filter: invert(1) brightness(2);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, black 25%, black 70%, transparent 100%),
        linear-gradient(to bottom, transparent 5%, black 35%, black 65%, transparent 95%);
    -webkit-mask-composite: destination-in;
    mask-image:
        linear-gradient(to right, transparent 0%, black 25%, black 70%, transparent 100%),
        linear-gradient(to bottom, transparent 5%, black 35%, black 65%, transparent 95%);
    mask-composite: intersect;
    pointer-events: none;
}
.page-hero__illustration.active {
    opacity: 0.12;
}
.page-hero__container { z-index: 2; }

/* Error page (403/404) — full-viewport page-hero variant */
.page-hero--error {
    flex: 1;
}
/* Override illustration position: anchor to the text area at top, not 50% of full viewport */
.page-hero--error .page-hero__illustration {
    top: calc(var(--header-h) + 3rem);
    transform: none;
    height: 200px;
}
.page-hero--error .page-hero__particles {
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
/* Showcase container — full-panel main hero background */
.page-hero__showcase {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
/* Main hero image — barely visible, fills entire error hero panel edge to edge */
.page-hero__main-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    background: center center / cover no-repeat;
    filter: invert(1) brightness(2);
    mix-blend-mode: screen;
    opacity: 0.025;
}

/* =============================================
   BLOG
   ============================================= */
.blog { padding: 2.5rem 0 4rem; }
.blog__container {
    max-width: var(--container);
    margin: 0 auto; padding: 0 var(--pad);
}

/* Filters */
.blog__filters {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--c-border);
}
.filter-btn {
    font-family: inherit;
    font-size: 13px; font-weight: 600;
    padding: 0.35rem 0.85rem;
    background: transparent; color: var(--c-text-3);
    border: 1px solid var(--c-border);
    border-radius: 999px; cursor: pointer;
    transition: all var(--tr);
}
.filter-btn:hover {
    color: var(--c-text); border-color: var(--c-text-2);
}
.filter-btn--active {
    background: var(--c-primary); color: #fff;
    border-color: var(--c-primary);
}

/* Articles Grid */
.blog__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Blog filter — smooth grid crossfade */
.blog__grid {
    transition: opacity 0.25s ease;
}
.blog__grid--fading {
    opacity: 0;
}

/* Tiled Grid — exact column count, responsive step-down via breakpoints */
.blog__grid--tiled {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.blog__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.blog__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.blog__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Tile spanning — featured articles and gap-filling */
.tile--featured { grid-column: span 2; }
.tile--span-2 { grid-column: span 2; }
.tile--span-3 { grid-column: span 3; }
.tile--span-4 { grid-column: span 4; }
/* Featured tiles keep the same height — wider but not taller.
   Title size is unified with normal tiles (see .tile__title). */
.tile--featured .tile__excerpt { -webkit-line-clamp: 3; }

/* Tile Card */
.tile {
    --tile-radius: var(--r-lg);
    position: relative;
    height: 340px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tile:hover {
    transform: translateY(-4px);
}
/* Corner rounding variants */
.tile--corners-none   { --tile-radius: 0; }
.tile--corners-small  { --tile-radius: 6px; }
.tile--corners-medium { --tile-radius: var(--r-lg); }
.tile--corners-large  { --tile-radius: 24px; }
.tile--corners-pill   { --tile-radius: 36px; }
.tile__link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    border-radius: var(--tile-radius);
    background: var(--c-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.tile:hover .tile__link {
    box-shadow: 0 24px 48px rgba(0,0,0,0.3), 0 10px 20px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1);
}

/* Tile Image */
.tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.tile__img--grad {
    background-size: cover;
}
.tile:hover .tile__img {
    transform: scale(1.08);
}

/* Tile Overlay — two layers cross-faded via opacity for smooth gradient animation.
   ::before = resting gradient (bottom only), ::after = hover gradient (full dark).
   Opacity cross-fade is GPU-composited = perfectly smooth. */
.tile__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.tile__overlay::before,
.tile__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Resting state: bottom gradient for title readability */
.tile__overlay::before {
    background: linear-gradient(to top,
        rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.8) 15%,
        rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.25) 45%,
        rgba(0,0,0,0.08) 60%, transparent 75%);
    opacity: 1;
}
/* Hover state: heavy dark overlay for maximum text readability */
.tile__overlay::after {
    background: linear-gradient(to top,
        rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.95) 15%,
        rgba(0,0,0,0.9) 30%, rgba(0,0,0,0.82) 42%,
        rgba(0,0,0,0.7) 55%, rgba(0,0,0,0.55) 67%,
        rgba(0,0,0,0.38) 78%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0.08) 100%);
    opacity: 0;
}
.tile:hover .tile__overlay::before { opacity: 0; }
.tile:hover .tile__overlay::after { opacity: 1; }

/* Tile Content — positioned at bottom */
.tile__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Tile Meta */
.tile__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.05s;
}
.tile:hover .tile__meta {
    opacity: 1;
    transform: translateY(0);
}
/* Elements placed above title — same hover reveal animation */
.tile__excerpt--above,
.tile__tags--above,
.tile__author--above,
.tile__read--above {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.05s;
    margin-bottom: 0.3rem;
}
.tile:hover .tile__excerpt--above,
.tile:hover .tile__tags--above,
.tile:hover .tile__author--above,
.tile:hover .tile__read--above {
    opacity: 1;
    transform: translateY(0);
}
/* Meta inside detail section */
.tile__meta--detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.tile__category {
    font-size: 11px;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.15);
    letter-spacing: 0.01em;
}
.tile__date {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}
.tile__date--updated::before {
    content: 'Akt. ';
    font-size: 10px;
    opacity: 0.7;
}

/* Tile Title — always visible. Unified size for featured and normal tiles. */
.tile__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    margin: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.tile:hover .tile__title {
    transform: translateY(-4px);
}

/* Tile Detail — hidden, slides up on hover */
.tile__detail {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.tile:hover .tile__detail {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
}
.tile__excerpt {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.7);
    margin: 0.5rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tile__read {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin-top: 0.6rem;
    transition: color 0.2s ease;
}
.tile__read svg {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.tile:hover .tile__read svg {
    transform: translateX(3px);
}
.tile__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}
.tile__tag {
    font-size: 11px;
    font-weight: 500;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.12);
}
.tile__author {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    margin-top: 0.5rem;
}
.tile__author-avatar {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 50%;
    font-size: 8px;
    font-weight: 800;
}

/* Tile fade-up scroll reveal fix */
.tile.fade-up.visible {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease;
}
.tile.fade-up.visible:hover {
    transform: translateY(-4px);
}

/* Empty Notice */
.blog__empty-notice {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
}
.blog__empty-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    margin-bottom: 1.5rem;
}
.blog__empty-notice-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 0.5rem;
}
.blog__empty-notice-text {
    color: var(--c-text-2);
    font-size: 0.95rem;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

/* === Custom Page === */
.custom-page {
    padding: 4rem 0;
}
.custom-page__container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
}
.custom-page__content {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 3rem;
    line-height: 1.8;
    font-size: 1rem;
    color: var(--c-text);
}
.custom-page__content h1 {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--c-text);
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4em;
    border-bottom: 2px solid var(--c-primary);
}
.custom-page__content h1:first-child { margin-top: 0; }
.custom-page__content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 2rem 0 1rem;
    color: var(--c-text);
    padding-bottom: 0.35em;
    border-bottom: 1px solid var(--c-border);
}
.custom-page__content h2:first-child { margin-top: 0; }
.custom-page__content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 1.5rem 0 0.75rem;
}
.custom-page__content h4 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 1.25rem 0 0.5rem;
    color: var(--c-text);
}
.custom-page__content p { margin-bottom: 1rem; }
.custom-page__content ul, .custom-page__content ol {
    margin: 0 0 1rem 0;
    padding-left: 2rem;
}
.custom-page__content li { margin-bottom: 0.25rem; line-height: 1.7; }
.custom-page__content li::marker { color: var(--c-primary); }
.custom-page__content ul.list-flow-root,
.custom-page__content ol.list-flow-root {
    display: flow-root;
}
.custom-page__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
    margin: 1rem 0;
}

/* Custom Page — fullwidth layout variant */
.custom-page--fullwidth .custom-page__content {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}
.custom-page--fullwidth .custom-page__content table {
    display: table;
    overflow-x: visible;
}

/* === Boxed content overflow containment (shared) === */
/* Both .custom-page__content (default boxed) and .post__layout--boxed
   need overflow protection to prevent wide tables, images, embeds etc.
   from breaking out of the rounded white box. */
.custom-page__content,
.post__layout--boxed .post__content {
    overflow: hidden;
}
/* Tables: scrollable when wider than box, but keep table display */
.custom-page__content table,
.post__layout--boxed .post__content table {
    display: table;
    overflow-x: auto;
    max-width: 100%;
}
/* Pre/code blocks: horizontal scroll */
.post__layout--boxed .post__content pre {
    overflow-x: auto;
    max-width: 100%;
}
/* Images: constrain to box */
.post__layout--boxed .post__content img {
    max-width: 100%;
    height: auto;
}
/* Embeds: constrain to container, responsive aspect ratio */
.post__content iframe,
.post__content video,
.post__content embed,
.custom-page__content iframe,
.custom-page__content video,
.custom-page__content embed {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
/* Content Video — inline video in articles/pages */
.post__content video,
.custom-page__content video {
    display: block;
    background: #000;
}
/* Gallery: neutralize full-viewport breakout inside boxed content */
.post__layout--boxed .article-gallery[data-size="full"] {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--r-md);
}
/* Gallery: constrain margin in boxed layout */
.post__layout--boxed .article-gallery {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* Article — boxed layout variant */
.post__layout--boxed .post__body {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
}
.post__layout--boxed .post__content {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 3rem;
    text-align: left;
}

/* Content links — modern style for user-created links on light backgrounds */
.custom-page__content a:not(.btn),
.post__content a:not(.btn),
.blog__empty-notice-text a,
.article__excerpt a,
.services__desc a,
.card__text a,
.quote__text a,
.contact__text a {
    color: var(--c-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}
.custom-page__content a:not(.btn):hover,
.post__content a:not(.btn):hover,
.blog__empty-notice-text a:hover,
.article__excerpt a:hover,
.services__desc a:hover,
.card__text a:hover,
.quote__text a:hover,
.contact__text a:hover {
    color: #2563eb;
}
/* Content links on dark hero backgrounds */
.hero__text a,
.hero__subtext a,
.page-hero__text a,
.post__lead a {
    color: #93c5fd;
    text-decoration: none;
    transition: color 0.3s ease;
}
.hero__text a:hover,
.hero__subtext a:hover,
.page-hero__text a:hover,
.post__lead a:hover {
    color: #ffffff;
}
.custom-page__content pre {
    background: var(--c-dark);
    color: #e0e0e0;
    padding: 1.5rem;
    border-radius: var(--r-md);
    overflow-x: auto;
    margin: 1rem 0;
    font-size: 0.85rem;
    line-height: 1.5;
}
.custom-page__content code {
    background: var(--c-primary-soft);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}
.custom-page__content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}
.custom-page__content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-border) 15%, var(--c-border) 85%, transparent);
    margin: 2rem 0;
}
.custom-page__content mark {
    background: #fef08a;
    color: inherit;
    padding: 0.1em 0.3em;
    border-radius: 3px;
}
.custom-page__content figcaption {
    font-size: 13px;
    color: var(--c-text-3);
    text-align: center;
    margin-top: 0.5em;
    font-style: italic;
}

/* --- Content Box / Callout — shared across articles & custom pages ---
   Uses doubled class selectors (.content-box.content-box) to beat
   container-level rules like .post__content p (specificity 0-1-1).
   This ensures content-box colors/sizes are never overridden. */
.content-box {
    display: flex;
    gap: 0.85rem;
    padding: 1.15rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    border-left: 4px solid;
    line-height: 1.65;
    font-size: 14px;
}
.content-box::before {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.4;
    width: 22px;
    text-align: center;
}
.content-box > div { min-width: 0; }
.content-box.content-box p { margin: 0 0 0.4em; font-size: 14px; line-height: 1.65; }
.content-box.content-box p:last-child { margin-bottom: 0; }
.content-box > div > strong:first-child { display: block; font-size: 14px; margin-bottom: 0.2em; }

/* Lists inside content boxes — inherit box colors (doubled class for specificity over .post__content li::marker) */
.content-box.content-box ul, .content-box.content-box ol { margin: 0.3em 0 0.5em 1.2em; padding: 0; font-size: 14px; color: inherit; }
.content-box.content-box li { font-size: 14px; line-height: 1.65; margin-bottom: 0.25em; color: inherit; }
.content-box.content-box li::marker { color: currentColor; opacity: 0.5; }

/* Info (blue) */
.content-box--info { background: var(--c-blue-bg); border-left-color: var(--c-blue); color: #1e40af; }
.content-box--info::before {
    content: "\2139";
    color: var(--c-blue);
    width: 19px; height: 19px;
    border: 1.5px solid var(--c-blue);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 600; line-height: 1;
    padding: 0 1px 1px 0;
}
.content-box.content-box--info p { color: #1e40af; }
.content-box.content-box--info strong { color: #1e40af; }

/* Tip (indigo — matches website primary palette) */
.content-box--tip { background: var(--c-indigo-bg); border-left-color: var(--c-indigo); color: #3730a3; }
.content-box--tip::before {
    content: "";
    height: 22px;
    align-self: flex-start;
    background-color: var(--c-indigo);
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a4.5 4.5 0 0 0-3 8V15h6v-2a4.5 4.5 0 0 0-3-8z'/%3E%3Cpath d='M9.5 17h5'/%3E%3Cpath d='M10.5 19h3'/%3E%3Cpath d='M12 0v2.5'/%3E%3Cpath d='M19 2.5l-1.8 1.8'/%3E%3Cpath d='M5 2.5l1.8 1.8'/%3E%3Cpath d='M21.5 7h-2.5'/%3E%3Cpath d='M2.5 7h2.5'/%3E%3Cpath d='M21 13l-1.5-1.5'/%3E%3Cpath d='M3 13l1.5-1.5'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
            mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a4.5 4.5 0 0 0-3 8V15h6v-2a4.5 4.5 0 0 0-3-8z'/%3E%3Cpath d='M9.5 17h5'/%3E%3Cpath d='M10.5 19h3'/%3E%3Cpath d='M12 0v2.5'/%3E%3Cpath d='M19 2.5l-1.8 1.8'/%3E%3Cpath d='M5 2.5l1.8 1.8'/%3E%3Cpath d='M21.5 7h-2.5'/%3E%3Cpath d='M2.5 7h2.5'/%3E%3Cpath d='M21 13l-1.5-1.5'/%3E%3Cpath d='M3 13l1.5-1.5'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
}
.content-box.content-box--tip p { color: #3730a3; }
.content-box.content-box--tip strong { color: #3730a3; }

/* Success (green) */
.content-box--success { background: var(--c-green-bg); border-left-color: var(--c-green); color: #166534; }
.content-box--success::before { content: "\2713"; color: var(--c-green); }
.content-box.content-box--success p { color: #166534; }
.content-box.content-box--success strong { color: #166534; }

/* Warning (orange) */
.content-box--warning { background: var(--c-orange-bg); border-left-color: var(--c-orange); color: #9a3412; }
.content-box--warning::before { content: "\26A0"; color: var(--c-orange); }
.content-box.content-box--warning p { color: #9a3412; }
.content-box.content-box--warning strong { color: #9a3412; }

/* Danger (red) */
.content-box--danger { background: var(--c-red-bg); border-left-color: var(--c-red); color: #991b1b; }
.content-box--danger::before { content: "\2716"; color: var(--c-red); }
.content-box.content-box--danger p { color: #991b1b; }
.content-box.content-box--danger strong { color: #991b1b; }

/* Custom (user-defined colors via inline styles) */
.content-box--custom {
    background: #f8fafc;
    border-left: none;
    border-radius: var(--r-sm);
    color: #334155;
}
.content-box--custom::before { display: none; }
.content-box.content-box--custom p { color: inherit; }
.content-box.content-box--custom strong { color: inherit; }

/* Highlight (dark) */
.content-box--highlight {
    background: var(--c-dark);
    border-left: none;
    border-radius: var(--r-md);
    color: rgba(255, 255, 255, 0.85);
    padding: 1.25rem 1.5rem;
}
.content-box--highlight::before { content: "\2605"; }
.content-box.content-box--highlight p { color: rgba(255, 255, 255, 0.85); }
.content-box.content-box--highlight strong { color: #fff; }
.content-box.content-box--highlight li::marker { color: rgba(255,255,255,0.4); }
.content-box.content-box--custom li::marker { color: currentColor; opacity: 0.4; }

/* Grey/light list markers — for use on dark backgrounds */
ul.list-light li::marker, ol.list-light li::marker { color: rgba(255,255,255,0.4); }
ul.list-muted li::marker, ol.list-muted li::marker { color: var(--c-text-3); }

/* Content box — layout support (float, width, alignment) */
.content-box {
    box-sizing: border-box;
    min-width: 120px;
}
.content-box[style*="float:left"],
.content-box[style*="float: left"] {
    margin-right: 1.5em;
    margin-bottom: 1em;
}
.content-box[style*="float:right"],
.content-box[style*="float: right"] {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

/* Floating tables — text wraps around (same convention as .content-box float) */
.post__content table[style*="float:left"],
.post__content table[style*="float: left"],
.custom-page__content table[style*="float:left"],
.custom-page__content table[style*="float: left"] {
    width: auto;
    margin-right: 1.5em;
    margin-bottom: 1em;
}
.post__content table[style*="float:right"],
.post__content table[style*="float: right"],
.custom-page__content table[style*="float:right"],
.custom-page__content table[style*="float: right"] {
    width: auto;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

/* Floating images — default "free space" when admin leaves Okraj fields empty
   (placeholder "auto"). Save logic in richtext.js emits no inline margin for
   empty fields, so these rules provide the modern magazine-style spacing
   (matching the .content-box float convention above).
   Cascade: inline `margin-<side>: Xpx` from the dialog overrides the matching
   long-hand property here (inline > author CSS). So explicit 0 or any explicit
   number wins; only empty-field → CSS default behavior. */
.post__content img[style*="float:left"],
.post__content img[style*="float: left"],
.post__content .img-wrap[style*="float:left"],
.post__content .img-wrap[style*="float: left"],
.post__content .vid-wrap[style*="float:left"],
.post__content .vid-wrap[style*="float: left"],
.custom-page__content img[style*="float:left"],
.custom-page__content img[style*="float: left"],
.custom-page__content .img-wrap[style*="float:left"],
.custom-page__content .img-wrap[style*="float: left"],
.custom-page__content .vid-wrap[style*="float:left"],
.custom-page__content .vid-wrap[style*="float: left"] {
    margin-right: 1.5em;
    margin-bottom: 1em;
}
.post__content img[style*="float:right"],
.post__content img[style*="float: right"],
.post__content .img-wrap[style*="float:right"],
.post__content .img-wrap[style*="float: right"],
.post__content .vid-wrap[style*="float:right"],
.post__content .vid-wrap[style*="float: right"],
.custom-page__content img[style*="float:right"],
.custom-page__content img[style*="float: right"],
.custom-page__content .img-wrap[style*="float:right"],
.custom-page__content .img-wrap[style*="float: right"],
.custom-page__content .vid-wrap[style*="float:right"],
.custom-page__content .vid-wrap[style*="float: right"] {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

@media (max-width: 768px) {
    .content-box[style*="float"] {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Images — responsive on small screens */
    .post__content img,
    .custom-page__content img {
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .post__content .article-gallery__slide[data-fit] img,
    .custom-page__content .article-gallery__slide[data-fit] img {
        height: 100% !important;
    }
    .post__content .img-wrap,
    .custom-page__content .img-wrap,
    .post__content .vid-wrap,
    .custom-page__content .vid-wrap {
        max-width: 100% !important;
        width: auto !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
    }
    .post__content .img-wrap img,
    .custom-page__content .img-wrap img {
        width: 100% !important;
    }
    .post__content .vid-wrap video,
    .post__content .vid-wrap iframe,
    .custom-page__content .vid-wrap video,
    .custom-page__content .vid-wrap iframe {
        width: 100% !important;
    }
    /* Videos/iframes — responsive on small screens */
    .post__content iframe,
    .post__content video,
    .post__content embed,
    .custom-page__content iframe,
    .custom-page__content video,
    .custom-page__content embed {
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* --- Enhanced blockquote (articles & custom pages) --- */
.post__content blockquote,
.custom-page__content blockquote {
    border-left: 4px solid var(--c-primary);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--c-primary-soft);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--c-primary-dark);
    font-style: italic;
    line-height: 1.7;
    position: relative;
}
.post__content blockquote::before,
.custom-page__content blockquote::before {
    content: "\201C";
    position: absolute;
    top: -0.15em;
    left: 0.35em;
    font-size: 3em;
    color: rgba(79, 70, 229, 0.12);
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}
.post__content blockquote p,
.custom-page__content blockquote p {
    color: var(--c-primary-dark);
}
.post__content blockquote cite,
.post__content blockquote footer,
.custom-page__content blockquote cite,
.custom-page__content blockquote footer {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--c-text-3);
    margin-top: 0.5em;
    font-weight: 600;
}

/* --- Enhanced tables (articles) --- */
.post__content table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 1.5rem 0;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    overflow: hidden;
    font-size: 14px;
}
.post__content table th {
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-text-3);
    padding: 0.6rem 1rem;
    background: var(--c-bg);
    border-bottom: 2px solid var(--c-border);
}
.post__content table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-2);
}
.post__content table tr:last-child td { border-bottom: none; }
.post__content table td strong { color: var(--c-text); }
.post__content table tr:hover td { background: var(--c-bg); }

/* --- Enhanced custom-page table (modern) --- */
.custom-page__content table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.custom-page__content th, .custom-page__content td {
    border: none;
    border-bottom: 1px solid var(--c-border);
}
.custom-page__content tr:last-child td { border-bottom: none; }
.custom-page__content tr:hover td { background: var(--c-bg); }

/* --- Table style variants (data attributes) — shared for all content areas --- */
/* Order: 1) style presets  2) border overrides (higher priority)  3) modifiers */

/* Caption */
.post__content table caption,
.custom-page__content table caption {
    caption-side: top;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-3);
    text-align: left;
    padding: 0 0 0.5em;
    letter-spacing: 0.02em;
}

/* Custom border color via CSS variable on table element */
.post__content table[data-table-border-color],
.custom-page__content table[data-table-border-color] {
    border-color: var(--tbl-border, var(--c-border));
}
.post__content table[data-table-border-color] td,
.post__content table[data-table-border-color] th,
.custom-page__content table[data-table-border-color] td,
.custom-page__content table[data-table-border-color] th {
    border-color: var(--tbl-border, var(--c-border));
}

/* ---- STYLE PRESETS ---- */

/* Style: striped / stripe toggle */
.post__content table[data-table-style="striped"] tbody tr:nth-child(even) td,
.custom-page__content table[data-table-style="striped"] tbody tr:nth-child(even) td,
.post__content table[data-table-stripe="true"] tbody tr:nth-child(even) td,
.custom-page__content table[data-table-stripe="true"] tbody tr:nth-child(even) td {
    background: var(--c-bg);
}

/* Style: minimal */
.post__content table[data-table-style="minimal"],
.custom-page__content table[data-table-style="minimal"] {
    border: none;
    border-radius: 0;
}
.post__content table[data-table-style="minimal"] th,
.custom-page__content table[data-table-style="minimal"] th {
    background: transparent;
    border-bottom: 2px solid var(--tbl-border, var(--c-text));
    color: var(--c-text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}
.post__content table[data-table-style="minimal"] td,
.custom-page__content table[data-table-style="minimal"] td {
    border-bottom: 1px solid var(--tbl-border, var(--c-border));
}
.post__content table[data-table-style="minimal"] tr:last-child td,
.custom-page__content table[data-table-style="minimal"] tr:last-child td {
    border-bottom: 1px solid var(--tbl-border, var(--c-border));
}

/* Style: elegant */
.post__content table[data-table-style="elegant"],
.custom-page__content table[data-table-style="elegant"] {
    border: none;
    border-radius: 0;
    border-top: 2px solid var(--tbl-border, var(--c-text));
    border-bottom: 2px solid var(--tbl-border, var(--c-text));
}
.post__content table[data-table-style="elegant"] th,
.custom-page__content table[data-table-style="elegant"] th {
    background: transparent;
    border-bottom: 1px solid var(--tbl-border, var(--c-text));
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--c-text);
}
.post__content table[data-table-style="elegant"] td,
.custom-page__content table[data-table-style="elegant"] td {
    border-bottom: none;
}

/* ---- BORDER TYPE OVERRIDES (higher specificity via double attribute) ---- */

/* Horizontal lines only (no outer border) */
.post__content table[data-table-border="horizontal-only"],
.custom-page__content table[data-table-border="horizontal-only"] {
    border: none;
    border-radius: 0;
}
.post__content table[data-table-border="horizontal-only"] td,
.custom-page__content table[data-table-border="horizontal-only"] td {
    border-bottom: var(--tbl-bw, 1px) solid var(--tbl-border, var(--c-border));
    border-left: none; border-right: none;
}
.post__content table[data-table-border="horizontal-only"] th,
.custom-page__content table[data-table-border="horizontal-only"] th {
    border-bottom: calc(var(--tbl-bw, 1px) + 1px) solid var(--tbl-border, var(--c-border));
    border-left: none; border-right: none;
}
.post__content table[data-table-border="horizontal-only"] tr:last-child td,
.custom-page__content table[data-table-border="horizontal-only"] tr:last-child td {
    border-bottom: none;
}

/* Full grid */
.post__content table[data-table-border="full"] td,
.post__content table[data-table-border="full"] th,
.custom-page__content table[data-table-border="full"] td,
.custom-page__content table[data-table-border="full"] th {
    border: var(--tbl-bw, 1px) solid var(--tbl-border, var(--c-border));
}

/* Vertical — keep header bottom line */
.post__content table[data-table-border="vertical"] td,
.custom-page__content table[data-table-border="vertical"] td {
    border-bottom: none;
    border-right: var(--tbl-bw, 1px) solid var(--tbl-border, var(--c-border));
}
.post__content table[data-table-border="vertical"] th,
.custom-page__content table[data-table-border="vertical"] th {
    border-bottom: calc(var(--tbl-bw, 1px) + 1px) solid var(--tbl-border, var(--c-border));
    border-right: var(--tbl-bw, 1px) solid var(--tbl-border, var(--c-border));
}
.post__content table[data-table-border="vertical"] td:last-child,
.post__content table[data-table-border="vertical"] th:last-child,
.custom-page__content table[data-table-border="vertical"] td:last-child,
.custom-page__content table[data-table-border="vertical"] th:last-child {
    border-right: none;
}

/* Outer only — remove inner borders, keep header separator */
.post__content table[data-table-border="outer"] td,
.custom-page__content table[data-table-border="outer"] td {
    border: none;
}
.post__content table[data-table-border="outer"] th,
.custom-page__content table[data-table-border="outer"] th {
    border: none;
    border-bottom: calc(var(--tbl-bw, 1px) + 1px) solid var(--tbl-border, var(--c-border));
}

/* No borders at all */
.post__content table[data-table-border="none"],
.custom-page__content table[data-table-border="none"] {
    border: none;
}
.post__content table[data-table-border="none"] td,
.post__content table[data-table-border="none"] th,
.custom-page__content table[data-table-border="none"] td,
.custom-page__content table[data-table-border="none"] th {
    border: none;
}

/* ---- MODIFIERS ---- */

/* No hover */
.post__content table[data-table-hover="false"] tr:hover td,
.custom-page__content table[data-table-hover="false"] tr:hover td {
    background: transparent;
}

/* Compact */
.post__content table[data-table-compact="true"] td,
.post__content table[data-table-compact="true"] th,
.custom-page__content table[data-table-compact="true"] td,
.custom-page__content table[data-table-compact="true"] th {
    padding: 0.35rem 0.65rem;
    font-size: 13px;
}

/* Header style: bold */
.post__content table[data-table-header="bold"] th,
.custom-page__content table[data-table-header="bold"] th {
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--c-text);
}

/* Header style: accent (indigo) */
.post__content table[data-table-header="accent"] th,
.custom-page__content table[data-table-header="accent"] th {
    background: var(--c-primary);
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 14px;
    border-bottom-color: var(--c-primary);
}

/* Header style: plain */
.post__content table[data-table-header="plain"] th,
.custom-page__content table[data-table-header="plain"] th {
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: inherit;
    color: inherit;
}

@media (max-width: 768px) {
    .custom-page { padding: 2rem 0; }
    .custom-page__content { padding: 1.5rem; }
    .content-box { flex-direction: column; gap: 0.5rem; }
    /* keep the icon a fixed-size circle/shape — do NOT reset its width here
       (width:auto stretched the round info icon across the whole box) */
    .content-box::before { align-self: flex-start; }
}

/* Boxed content layout ("Bílý box na středu") on phones: make the white box
   span edge-to-edge so the content gets the full screen width. Removes the
   outer gutter + side border/rounding and trims the inner padding. Fullwidth
   layouts (.custom-page--fullwidth) keep their readable gutter — excluded via :not(). */
@media (max-width: 640px) {
    .custom-page:not(.custom-page--fullwidth) .custom-page__container,
    .post__layout--boxed .post__body {
        padding-left: 0;
        padding-right: 0;
    }
    .custom-page:not(.custom-page--fullwidth) .custom-page__content,
    .post__layout--boxed .post__content {
        border-left: none;
        border-right: none;
        border-radius: 0;
        padding: 1.5rem 1rem;
    }
}

/* Article Card */
.article {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.article:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
    border-color: rgba(79,70,229,0.15);
}

/* Featured article: horizontal layout */
.article--featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Regular article: horizontal compact */
.article:not(.article--featured) {
    display: grid;
    grid-template-columns: 220px 1fr;
}

/* No-image mode: single column */
.article--no-image {
    grid-template-columns: 1fr !important;
}

/* Article image */
.article__image {
    overflow: hidden;
    position: relative;
}
.article__image--placeholder {
    background: linear-gradient(135deg, var(--c-primary-soft) 0%, #ddd8ff 100%);
    display: flex; align-items: center; justify-content: center;
    min-height: 200px;
}
.article__image--sm {
    min-height: auto;
}
.article__image--photo {
    display: flex;
    align-items: stretch;
    text-decoration: none;
}
.article__image--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.article:hover .article__image--photo img {
    transform: scale(1.06);
}
.article__image-icon {
    color: var(--c-primary); opacity: 0.4;
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.article:hover .article__image-icon {
    opacity: 0.6;
    transform: scale(1.08);
}

/* Image overlay effects */
.article__image-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.article__image-overlay--gradient-bottom {
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.08) 40%, transparent 65%);
}
.article:hover .article__image-overlay--gradient-bottom {
    opacity: 0.7;
}
.article__image-overlay--gradient-dark {
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 100%);
}
.article:hover .article__image-overlay--gradient-dark {
    opacity: 0.75;
}
.article__image-overlay--vignette {
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.30) 100%);
}
.article:hover .article__image-overlay--vignette {
    opacity: 0.65;
}
.article__image-overlay--color-tint {
    background: linear-gradient(135deg, rgba(79,70,229,0.18) 0%, rgba(99,102,241,0.12) 100%);
    mix-blend-mode: multiply;
}
.article:hover .article__image-overlay--color-tint {
    opacity: 0.5;
}

/* Image edge blend — CSS mask fades the image to transparent,
   revealing the card background naturally. Works with all overlays. */
.article--blend .article__image {
    -webkit-mask-image: var(--blend-mask);
    mask-image: var(--blend-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.article--blend-soft {
    --blend-mask: linear-gradient(to right,
        #000 68%, rgba(0,0,0,0.97) 73%, rgba(0,0,0,0.88) 78%,
        rgba(0,0,0,0.71) 83%, rgba(0,0,0,0.48) 88%,
        rgba(0,0,0,0.24) 93%, rgba(0,0,0,0.06) 97%, transparent 100%);
}
.article--blend-medium {
    --blend-mask: linear-gradient(to right,
        #000 50%, rgba(0,0,0,0.97) 56%, rgba(0,0,0,0.88) 62%,
        rgba(0,0,0,0.71) 69%, rgba(0,0,0,0.48) 77%,
        rgba(0,0,0,0.24) 85%, rgba(0,0,0,0.06) 93%, transparent 100%);
}
.article--blend-strong {
    --blend-mask: linear-gradient(to right,
        #000 30%, rgba(0,0,0,0.97) 38%, rgba(0,0,0,0.88) 46%,
        rgba(0,0,0,0.71) 55%, rgba(0,0,0,0.48) 66%,
        rgba(0,0,0,0.24) 78%, rgba(0,0,0,0.06) 90%, transparent 100%);
}

/* Image / text ratio variants */
.article--ratio-compact:not(.article--featured) { grid-template-columns: 160px 1fr; }
.article--ratio-balanced:not(.article--featured) { grid-template-columns: 260px 1fr; }
.article--ratio-default:not(.article--featured) { grid-template-columns: 1fr 1fr; }
.article--ratio-wide:not(.article--featured) { grid-template-columns: 3fr 2fr; }
.article--ratio-cinematic:not(.article--featured) { grid-template-columns: 2fr 1fr; }

.article--ratio-compact.article--featured { grid-template-columns: 2fr 5fr; }
.article--ratio-balanced.article--featured { grid-template-columns: 2fr 3fr; }
.article--ratio-default.article--featured { grid-template-columns: 1fr 1fr; }
.article--ratio-wide.article--featured { grid-template-columns: 3fr 2fr; }
.article--ratio-cinematic.article--featured { grid-template-columns: 2fr 1fr; }

.article__body {
    padding: 1.5rem;
    display: flex; flex-direction: column;
}
.article:not(.article--featured) .article__body {
    padding: 1.25rem 1.5rem;
}

.article__meta {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 0.6rem;
}
.article__category {
    font-size: 12px; font-weight: 600;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    transition: transform 0.2s ease;
    letter-spacing: 0.01em;
}
.article__category:hover {
    transform: scale(1.05);
}
.article__category--blue   { background: var(--c-blue-bg);   color: var(--c-blue); }
.article__category--purple { background: var(--c-purple-bg); color: var(--c-purple); }
.article__category--orange { background: var(--c-orange-bg); color: var(--c-orange); }
.article__category--green  { background: var(--c-green-bg);  color: var(--c-green); }
.article__category--cyan   { background: var(--c-cyan-bg);   color: var(--c-cyan); }
.article__category--red    { background: var(--c-red-bg);    color: var(--c-red); }
.article__category--indigo { background: var(--c-indigo-bg); color: var(--c-indigo); }
.article__category--teal   { background: var(--c-teal-bg);   color: var(--c-teal); }
.article__category--neutral {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.2);
}
/* On light backgrounds (blog list cards) — invert the glass for dark surface */
.article__meta .article__category--neutral,
.post__related .article__category--neutral {
    background: rgba(0,0,0,0.06);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    color: var(--c-text-2);
    border: 1px solid rgba(0,0,0,0.08);
}
/* Category displayed as plain text (no badge background) */
.article__category-text {
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.01em;
}
.article__category-text--blue   { color: var(--c-blue); }
.article__category-text--purple { color: var(--c-purple); }
.article__category-text--orange { color: var(--c-orange); }
.article__category-text--green  { color: var(--c-green); }
.article__category-text--cyan   { color: var(--c-cyan); }
.article__category-text--red    { color: var(--c-red); }
.article__category-text--indigo { color: var(--c-indigo); }
.article__category-text--teal   { color: var(--c-teal); }
.article__category-text--neutral { color: var(--c-text-3); }

.article__date {
    font-size: 13px; color: var(--c-text-3);
    display: flex; align-items: center; gap: 0.3rem;
}
.article__date--updated::before {
    content: 'Akt. ';
    font-size: 11px;
    opacity: 0.7;
}

/* Unified title size for featured and normal articles. */
.article__title {
    font-size: 22px; font-weight: 700;
    line-height: 1.35; margin-bottom: 0.5rem;
    color: var(--c-text);
}

.article__excerpt {
    font-size: 14px; color: var(--c-text-2);
    line-height: 1.6; margin-bottom: 1rem;
    flex: 1;
}

.article__footer {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--c-border);
}
.article__read-time {
    display: flex; align-items: center; gap: 0.3rem;
    font-size: 13px; color: var(--c-text-3);
}
.article__link {
    font-size: 14px; font-weight: 600;
    color: var(--c-primary);
    transition: color 0.2s ease, gap 0.2s ease;
    display: inline-flex; align-items: center; gap: 0.3rem;
    text-decoration: none;
}
.article__link-arrow {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}
.article__link:hover { color: var(--c-primary-dark); }
.article__link:hover .article__link-arrow {
    transform: translateX(3px);
}

/* Article tags & author */
.article__tags {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    margin-bottom: 1rem;
}
.article__tag {
    font-size: 12px; font-weight: 500;
    color: var(--c-text-3);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.article__tag:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}
.article__author {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 13px; color: var(--c-text-3);
}
.article__author-avatar {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark, #4338ca));
    color: #fff;
    border-radius: 50%;
    font-size: 9px; font-weight: 800;
    box-shadow: 0 2px 6px rgba(79,70,229,0.25);
}
.article__title a { color: inherit; transition: color 0.2s ease; text-decoration: none; }
.article__title a:hover { color: var(--c-primary); }

/* =============================================
   ARTICLE DETAIL (clanek.html)
   ============================================= */

/* Article hero */
.post__hero {
    padding: calc(var(--header-h) + 2.5rem) 0 2.5rem;
    background: linear-gradient(135deg, #0f0f1a 0%, #1e1b4b 60%, #312e81 100%);
    color: #fff;
    position: relative;
}
.post__hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 500px 300px at 30% 60%, rgba(79,70,229,0.2), transparent 70%);
}

/* Hero with background image */
.post__hero--has-image {
    background-image: var(--hero-img);
    background-position: var(--hero-pos, center);
    background-size: cover;
    background-repeat: no-repeat;
    padding: calc(var(--header-h) + 3.5rem) 0 3.5rem;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
}
.post__hero--has-image::before {
    background: linear-gradient(to top, rgba(15, 15, 26, 0.92) 0%, rgba(15, 15, 26, 0.7) 50%, rgba(15, 15, 26, 0.5) 100%);
}
.post__hero--has-image .post__hero-container {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    width: 100%;
    z-index: 0;
}
.post__hero--has-image .post__hero-container::before {
    content: '';
    position: absolute;
    /* Horizontal inset stays 0: the container is full-width on small screens, so a
       negative left/right would push this backdrop past the viewport edges and
       cause a horizontal scrollbar. The container's own padding already gives the
       panel breathing room around the text. */
    inset: -1rem 0;
    background: rgba(10, 10, 20, 0.20);
    border-radius: 1rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: -1;
}
.post__hero-container {
    position: relative;
    max-width: var(--container);
    margin: 0 auto; padding: 0 var(--pad);
}
.post__back {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 14px; font-weight: 500;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1.5rem;
    transition: color var(--tr);
}
.post__back:hover { color: rgba(255,255,255,0.85); }

.post__meta-top {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.post__date { font-size: 13px; color: rgba(255,255,255,0.45); }
.post__date--updated::before { content: 'Aktualizováno '; font-size: 11px; opacity: 0.7; }
.post__author {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 13px; color: rgba(255,255,255,0.45);
}

.post__title {
    font-size: clamp(1.9rem, 4.2vw, 2.5rem);
    font-weight: 800; letter-spacing: -0.02em;
    line-height: 1.2; margin-bottom: 1rem;
}
.post__lead {
    font-size: 16px; line-height: 1.7;
    color: rgba(255,255,255,0.6);
    max-width: 600px;
    margin-bottom: 1.25rem;
}
.post__tags {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.post__tags .article__tag {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.55);
}

/* Article layout — single full-width column.
   Content uses full viewport width (edge to edge).
   Sidebars are absolutely positioned outside the content flow. */
/* Article layout — positioning context for the absolute TOC wrapper.
   Body centers itself via max-width + margin:0 auto (see .post__body below). */
.post__layout {
    position: relative;
}

/* Floating TOC — positioned inside .post__layout so it starts BELOW hero
   (never overlays the hero on page load). Uses absolute+sticky rather than
   grid gutters — this intentionally allows TOC to overlap body content on
   mid-size viewports (768–1768px) instead of hiding the TOC entirely. User
   explicitly prefers visible-with-overlap over hidden at these widths.
   Only mobile (< 768px) hides the TOC entirely.
   History:
     47be3cb: original grid overlay design (TOC in gutter, sticky)
     f0bbab5: regressed to position:fixed viewport-top (overlapped hero)
     05b426f: right-side placement preference
     now:     absolute wrapper inside post__layout + sticky inner;
              pointer-events:none on wrapper so body content underneath
              remains clickable; inner card re-enables pointer events. */
.post__toc-float {
    position: absolute;
    right: var(--pad);
    top: 2.5rem;
    bottom: 0;                   /* stretch to layout bottom so sticky inner can slide */
    width: 200px;
    z-index: 10;
    pointer-events: none;        /* transparent gutter; body stays clickable */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.post__toc-float.visible {
    opacity: 1;
    transform: translateY(0);
}
.post__toc-float-inner {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    pointer-events: auto;        /* the TOC card itself IS interactive */
    width: 200px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    border-radius: var(--r-md);
    padding: 1rem;
}
.post__toc-float-inner .post__sidebar-heading {
    color: var(--c-text-2);
    font-weight: 800;
    margin-bottom: 0;
    transition: margin-bottom 0.3s ease;
}
.post__toc-float.expanded .post__sidebar-heading {
    margin-bottom: 0.85rem;
}

/* Collapsed: single active item with swipe animation */
.post__toc-active {
    overflow: hidden;
    transition: height 0.3s ease;
}
.post__toc-active-text {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-primary);
    padding: 0.4rem 0 0.15rem 0.75rem;
    border-left: 2px solid var(--c-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.post__toc-active-text.swipe-up-out {
    animation: tocSwipeUpOut 0.25s ease forwards;
}
.post__toc-active-text.swipe-up-in {
    animation: tocSwipeUpIn 0.25s ease forwards;
}
.post__toc-active-text.swipe-down-out {
    animation: tocSwipeDownOut 0.25s ease forwards;
}
.post__toc-active-text.swipe-down-in {
    animation: tocSwipeDownIn 0.25s ease forwards;
}
@keyframes tocSwipeUpOut {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(-100%); opacity: 0; }
}
@keyframes tocSwipeUpIn {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes tocSwipeDownOut {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
}
@keyframes tocSwipeDownIn {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Expanded: full TOC nav */
.post__toc-float .post__toc {
    overflow: hidden;
    transition: height 0.35s ease, opacity 0.3s ease;
    height: 0;
    opacity: 0;
}
.post__toc-float.expanded .post__toc {
    opacity: 1;
}
.post__toc-float.expanded .post__toc-active {
    height: 0 !important;
    opacity: 0;
    transition: height 0.3s ease, opacity 0.15s ease;
}

.post__toc-float-inner .post__toc-link {
    color: var(--c-text-2);
}
.post__toc-float-inner .post__toc-link:hover {
    color: var(--c-primary);
}

/* Article body — full width with padding for text readability */
.post__body {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2.5rem var(--pad) 4rem;
    min-width: 0;
}

/* "Další články" reveal block — in normal flow, full width. It stays hidden
   (translated + opacity 0) until the reader nears the article bottom. Reveal must
   use a VERTICAL fade-up, never translateX: a horizontal translate on this
   full-width block pushed it past the right viewport edge and created a phantom
   horizontal scrollbar on the whole page from load. translateY cannot overflow. */
.post__sidebar-float {
    max-width: var(--container);
    margin: 0 auto 2.5rem;
    padding: 0 var(--pad);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.post__sidebar-float.visible {
    opacity: 1;
    transform: translateY(0);
}
.post__sidebar-float-inner {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    border-radius: var(--r-md);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}
.post__sidebar-float-inner .post__sidebar-heading {
    white-space: nowrap;
    margin: 0;
    padding-top: 0.45rem;
}
.post__sidebar-float .post__related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Content typography — isolated formatting context prevents rogue HTML from breaking layout */
.post__content {
    display: flow-root;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.post__content h1 {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--c-text);
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4em;
    border-bottom: 2px solid var(--c-primary);
}
.post__content h1:first-child { margin-top: 0; }
.post__content h2 {
    font-size: 1.3rem; font-weight: 700;
    letter-spacing: -0.01em;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--c-border);
}
.post__content h2:first-child { margin-top: 0; }
.post__content h3 {
    font-size: 1.05rem; font-weight: 700;
    margin: 1.5rem 0 0.5rem;
}
.post__content h4 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 1.25rem 0 0.5rem;
    color: var(--c-text);
}
.post__content p {
    font-size: 16px; line-height: 1.75;
    color: var(--c-text-2);
    margin-bottom: 1rem;
}
.post__content strong { color: var(--c-text); }
.post__content ul, .post__content ol {
    margin: 0 0 1.25rem 0;
    padding-left: 2rem;
    color: var(--c-text-2);
}
.post__content li {
    font-size: 15px; line-height: 1.7;
    margin-bottom: 0.4rem;
}
.post__content li::marker {
    color: var(--c-primary);
}
.post__content ul.list-flow-root,
.post__content ol.list-flow-root {
    display: flow-root;
}
.post__content code {
    font-size: 14px;
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}
.post__content pre {
    background: var(--c-dark);
    color: #e0e0e0;
    padding: 1.5rem;
    border-radius: var(--r-md);
    overflow-x: auto;
    margin: 1.5rem 0;
    font-size: 0.85rem;
    line-height: 1.6;
}
.post__content pre code {
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}
.post__content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-border) 15%, var(--c-border) 85%, transparent);
    margin: 2rem 0;
}
.post__content mark {
    background: #fef08a;
    color: inherit;
    padding: 0.1em 0.3em;
    border-radius: 3px;
}
.post__content figcaption {
    font-size: 13px;
    color: var(--c-text-3);
    text-align: center;
    margin-top: 0.5em;
    font-style: italic;
}

/* Callout box */
.post__callout {
    display: flex; gap: 0.85rem;
    padding: 1.25rem;
    background: var(--c-blue-bg);
    border-left: 3px solid var(--c-blue);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    margin: 1.5rem 0;
}
.post__callout-icon {
    color: var(--c-blue); flex-shrink: 0; padding-top: 0.1rem;
}
.post__callout p {
    font-size: 14px !important; margin-bottom: 0 !important;
}
.post__callout strong {
    display: block; font-size: 15px; margin-bottom: 0.3rem;
}
.post__callout--quote {
    background: var(--c-primary-soft);
    border-left-color: var(--c-primary);
}
.post__callout--quote p {
    font-style: italic; font-size: 16px !important;
    color: var(--c-primary-dark);
}

/* Highlight box */
.post__highlight {
    padding: 1.25rem 1.5rem;
    background: var(--c-dark);
    color: #fff;
    border-radius: var(--r-md);
    margin: 1.5rem 0;
}
.post__highlight p {
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 0 !important;
    font-size: 16px;
}
.post__highlight strong { color: #fff; }

/* Table */
.post__table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0;
}
.post__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.post__table th {
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-text-3);
    padding: 0.6rem 1rem;
    background: var(--c-bg);
    border-bottom: 2px solid var(--c-border);
}
.post__table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-2);
}
.post__table td strong { color: var(--c-text); }
.post__table tr:hover td { background: var(--c-bg); }

/* Sidebar heading + links (shared between TOC and related articles) */
.post__sidebar-heading {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-text-3);
    margin-bottom: 0.85rem;
}
.post__toc {
    display: flex; flex-direction: column;
}
.post__toc-link {
    font-size: 14px; color: var(--c-text-2);
    padding: 0.3rem 0;
    border-left: 2px solid transparent;
    padding-left: 0.75rem;
    transition: all var(--tr);
}
.post__toc-link:hover {
    color: var(--c-primary);
    border-left-color: var(--c-primary);
}
.post__toc-link.active {
    color: var(--c-primary);
    border-left-color: var(--c-primary);
    font-weight: 600;
}
/* TOC sub-level indentation */
.post__toc-link--l1 { padding-left: 1.5rem; font-size: 13px; }
.post__toc-link--l2 { padding-left: 2.25rem; font-size: 12px; }
.post__toc-link--l3 { padding-left: 3rem; font-size: 12px; }
.post__related {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 14px; font-weight: 500;
    color: var(--c-text-2);
    padding: 0.5rem 0.65rem;
    border-radius: var(--r-md);
    background: transparent;
    transition: background var(--tr), box-shadow var(--tr), transform var(--tr), color var(--tr);
    line-height: 1.35;
    max-width: 340px;
}
/* Modern hover — lift + indigo-tinted glow, matching .card:hover / .article:hover */
.post__related:hover {
    color: var(--c-primary);
    background: var(--c-surface);
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.14), 0 2px 6px rgba(0, 0, 0, 0.05);
    transform: translateY(-3px);
}
.post__related:hover .post__related-title { color: var(--c-primary); }
/* Extra pool references — hidden by default; the client shows the most relevant
   unread ones (see related-articles.js). No-JS visitors see the server's top picks. */
.post__related--pool { display: none; }
/* Small reference thumbnail */
.post__related-thumb {
    flex: 0 0 auto;
    width: 54px; height: 54px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
}
.post__related-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.post__related:hover .post__related-thumb img { transform: scale(1.06); }
.post__related-thumb-ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.post__related-thumb-ph svg { width: 24px; height: 24px; }
.post__related-text {
    display: flex; flex-direction: column;
    gap: 0.25rem; min-width: 0;
}
.post__related .article__category { align-self: flex-start; margin: 0; }
.post__related-title {
    font-size: 16px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================
   CONTACT
   ============================================= */
.contact {
    padding: calc(var(--header-h) + 3rem) 0 4rem;
    background: var(--c-bg);
}
.contact__container {
    max-width: var(--container);
    margin: 0 auto; padding: 0 var(--pad);
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: start;
}
.contact__title {
    font-size: clamp(2.15rem, 4.2vw, 3rem);
    font-weight: 800; letter-spacing: -0.03em;
    margin-bottom: 1rem;
}
.contact__text {
    font-size: 16px; line-height: 1.7;
    color: var(--c-text-2);
    margin-bottom: 2rem;
}

/* Contact channels */
.contact__channels {
    display: flex; flex-direction: column;
    gap: 1.25rem; margin-bottom: 2rem;
}
.contact__channel {
    display: flex; align-items: center; gap: 1rem;
}
.contact__channel-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    flex-shrink: 0;
}
.contact__channel-icon--mail     { background: var(--c-primary-soft); color: var(--c-primary); }
.contact__channel-icon--linkedin { background: var(--c-blue-bg);     color: var(--c-blue); }
.contact__channel-icon--location { background: var(--c-green-bg);    color: var(--c-green); }

.contact__channel-label {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--c-text-3); margin-bottom: 0.1rem;
}
.contact__channel-value {
    font-size: 15px; font-weight: 600; color: var(--c-text);
    transition: color var(--tr);
}
a.contact__channel-value:hover { color: var(--c-primary); }
.contact__channel-value--static { font-weight: 500; color: var(--c-text-2); }

/* Social buttons */
.contact__social {
    display: flex; gap: 0.6rem;
}
.contact__social-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 14px; font-weight: 500;
    padding: 0.5rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text-2);
    transition: all var(--tr);
}
.contact__social-btn:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: var(--c-primary-soft);
}

/* Contact Form */
.contact__form-wrap {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 2rem;
}
/* Honeypot — visually hidden but accessible to bots */
.contact-form__hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.contact-form__heading {
    font-size: 1.1rem; font-weight: 700;
    margin-bottom: 1.5rem;
}
.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.contact-form__field {
    margin-bottom: 1rem;
}
.contact-form__field label {
    display: block;
    font-size: 13px; font-weight: 600;
    color: var(--c-text-2);
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-bg);
    color: var(--c-text);
    transition: border-color var(--tr), box-shadow var(--tr);
    outline: none;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}
.contact-form__field textarea { resize: vertical; min-height: 120px; }
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
    color: var(--c-text-3);
}
.contact-form .btn { margin-top: 0.5rem; }

/* Contact form field animations */
.contact-form__field {
    position: relative;
    transition: transform 0.2s ease;
}
.contact-form__field--focus label {
    color: var(--c-primary) !important;
    transform: translateY(-1px);
    transition: color 0.2s ease, transform 0.2s ease;
}
.contact-form__field--filled label {
    color: var(--c-text) !important;
}
.contact-form__field--error input,
.contact-form__field--error textarea {
    border-color: var(--c-red) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}
.contact-form__field--error label {
    color: var(--c-red) !important;
}

/* Shake animation for validation */
@keyframes contactShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(5px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}
.shake { animation: contactShake 0.45s ease; }

/* Submit button success state */
.btn--success {
    background: var(--c-green) !important;
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.4) !important;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Flash messages (animated) */
/* Flash positioned as overlay — no layout shift */
.contact__form-wrap {
    position: relative;
    overflow: hidden;
}
.contact-form__flash {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 2rem;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-form__flash--visible {
    opacity: 1;
    transform: translateY(0);
}
.contact-form__flash--out {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-form__flash-icon {
    display: flex;
    flex-shrink: 0;
}
.contact-form__flash--success {
    background: #f0fdf4;
    color: #15803d;
    border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}
.contact-form__flash--error {
    background: #fef2f2;
    color: #b91c1c;
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

/* ---- Contact form privacy notice ---- */
.contact-form__privacy {
    margin-top: 1rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--c-text-3);
    text-align: center;
}
.contact-form__privacy a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.contact-form__privacy a:hover { color: var(--c-primary-dark); }

/* ---- Confirmation Dialog Overlay ---- */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 26, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.confirm-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Glass dialog */
.confirm-dialog {
    position: relative;
    width: 90%;
    max-width: 440px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.confirm-dialog__content {
    width: 100%;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--r-lg);
    padding: 2rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    text-align: center;
}
.confirm-dialog--enter .confirm-dialog__content {
    animation: confirmEnter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.confirm-dialog--exit .confirm-dialog__content {
    animation: confirmExit 0.25s ease forwards;
}

@keyframes confirmEnter {
    from { opacity: 0; transform: scale(0.85) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes confirmExit {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.9) translateY(10px); }
}
@keyframes confirmShrink {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.6); }
}

.confirm-dialog__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    margin: 0 auto 1rem;
}
.confirm-dialog__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--c-text);
    margin-bottom: 1rem;
}
.confirm-dialog__summary {
    text-align: left;
    background: rgba(0, 0, 0, 0.03);
    border-radius: var(--r-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--c-text-2);
}
.confirm-dialog__field {
    margin-bottom: 2px;
}
.confirm-dialog__field span {
    color: var(--c-text-3);
    font-size: 0.8rem;
}
.confirm-dialog__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}
.confirm-dialog__actions .btn {
    min-width: 110px;
    justify-content: center;
    padding: 0.65rem 1.5rem;
}
.confirm-dialog__cancel {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid var(--c-border) !important;
}
.confirm-dialog__cancel:hover {
    background: rgba(0, 0, 0, 0.07) !important;
}

/* Spinner in send button */
.confirm-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: confirmSpin 0.6s linear infinite;
}
@keyframes confirmSpin {
    to { transform: rotate(360deg); }
}

/* ---- Envelope Animation ---- */
.confirm-envelope {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.confirm-envelope__body {
    position: relative;
    width: 100px;
    height: 70px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: visible;
}
.confirm-envelope__flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    transform-origin: top center;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}
.confirm-envelope--close .confirm-envelope__flap {
    transform: rotateX(180deg);
    background: linear-gradient(135deg, #c7d2fe 0%, var(--c-primary-soft) 100%);
}
.confirm-envelope__letter {
    position: absolute;
    top: -20px;
    left: 10%;
    width: 80%;
    height: 55px;
    background: #fff;
    border: 1px solid #e0e0ea;
    border-radius: 3px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}
.confirm-envelope--close .confirm-envelope__letter {
    top: 8px;
}
.confirm-envelope__line {
    height: 3px;
    background: #e2e8f0;
    border-radius: 2px;
    width: 100%;
}
.confirm-envelope__line--short {
    width: 60%;
}

/* Envelope appear */
.confirm-envelope--appear {
    display: block;
    animation: envelopeAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes envelopeAppear {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Envelope fly away */
.confirm-envelope--fly .confirm-envelope__body {
    animation: envelopeFly 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes envelopeFly {
    0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
    30% { transform: translateY(5px) scale(1.05) rotate(-2deg); opacity: 1; }
    100% { transform: translateY(-200px) translateX(120px) scale(0.3) rotate(15deg); opacity: 0; }
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
    padding: 2.5rem 0 1.5rem;
    background: var(--c-dark-soft);
    color: rgba(255,255,255,0.5);
}
.footer__container {
    max-width: var(--container);
    margin: 0 auto; padding: 0 var(--pad);
}
.footer__main {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__brand { display: flex; align-items: center; gap: 0.75rem; }
.footer__logo {
    width: 44px; height: 44px;
    border-radius: var(--r-sm);
    object-fit: contain;
    flex-shrink: 0;
}
.footer__name { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85); }
.footer__tagline { font-size: 13px; color: rgba(255,255,255,0.35); }
.footer__nav { display: flex; gap: 1.5rem; }
.footer__nav a {
    font-size: 14px; color: rgba(255,255,255,0.45);
    transition: color var(--tr);
}
.footer__nav a:hover { color: rgba(255,255,255,0.85); }
.footer__social { display: flex; gap: 1.25rem; }
.footer__social-link {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 14px; color: rgba(255,255,255,0.4);
    transition: color var(--tr);
}
.footer__social-link:hover { color: var(--c-primary); }
.footer__social-link svg { flex-shrink: 0; }
.footer__bottom { padding-top: 1rem; text-align: center; }
.footer__bottom p { font-size: 13px; color: rgba(255,255,255,0.25); }
.footer__legal-link {
    color: rgba(255,255,255,0.35);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--tr);
}
.footer__legal-link:hover { color: rgba(255,255,255,0.7); }

/* =============================================
   COOKIE NOTICE
   ============================================= */
.cookie-notice {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9000;
    max-width: 380px;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.cookie-notice--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.cookie-notice--hiding {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.cookie-notice__inner {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--r-md);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
}
.cookie-notice__icon {
    flex-shrink: 0;
    color: var(--c-primary);
    margin-top: 1px;
}
.cookie-notice__text {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--c-text-2);
    flex: 1;
    margin: 0;
}
.cookie-notice__link {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.cookie-notice__link:hover { color: var(--c-primary-dark); }
.cookie-notice__btn {
    flex-shrink: 0;
    align-self: center;
    padding: 0.3rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: var(--c-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--tr), transform 0.1s ease;
    white-space: nowrap;
}
.cookie-notice__btn:hover {
    background: var(--c-primary-dark);
}
.cookie-notice__btn:active {
    transform: scale(0.96);
}

@media (max-width: 480px) {
    .cookie-notice {
        bottom: 0.75rem;
        right: 0.75rem;
        left: 0.75rem;
        max-width: none;
    }
    .cookie-notice__inner { padding: 0.75rem 0.85rem; }
}

/* =============================================
   PRIVACY POLICY
   ============================================= */
.privacy-policy h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--c-border);
}
.privacy-policy h2:first-child { margin-top: 0; }
.privacy-policy h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-text);
    margin: 1.5rem 0 0.75rem;
}
.privacy-policy p { margin: 0.75rem 0; line-height: 1.7; }
.privacy-policy ul {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}
.privacy-policy ul li {
    margin: 0.4rem 0;
    line-height: 1.6;
}
.privacy-policy a {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.privacy-policy a:hover { color: var(--c-primary-dark); }
.privacy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.95rem;
}
.privacy-table th,
.privacy-table td {
    padding: 0.65rem 1rem;
    text-align: left;
    border: 1px solid var(--c-border);
    vertical-align: top;
}
.privacy-table th {
    background: var(--c-primary-soft);
    font-weight: 600;
    white-space: nowrap;
    width: 160px;
}
.privacy-table td { background: var(--c-surface); }
.privacy-policy__updated {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--c-border);
    color: var(--c-text-3);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .privacy-table th { width: auto; white-space: normal; }
    .privacy-table th,
    .privacy-table td { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
}

/* === Image Wrapper & Overlay (richtext images) === */
.img-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    line-height: 0;
    /* Reset browser default <figure> margins (1em 40px) via author CSS
       rather than inline style. Inline `margin: 0` would block long-hand
       overrides from the float-spacing rules above (.post__content .img-wrap
       [style*="float:left"] { margin-right: 1.5em; ... }). With this reset
       in author CSS, those long-hand rules cleanly layer on top. */
    margin: 0;
}
.img-wrap img {
    display: block;
    transition: transform 0.3s ease;
}
.img-wrap:hover img { transform: scale(1.03); }
.img-wrap figcaption {
    max-width: 0;
    min-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-align: center;
    font-size: 0.9rem;
    color: var(--c-text-2);
    margin-top: 0.5rem;
    line-height: 1.5;
}
.img-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
}
.img-overlay__text {
    padding: 0.5em 0.75em;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    max-width: 100%;
    overflow-wrap: break-word;
}

/* === Video Wrapper (richtext videos) === */
.vid-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    line-height: 0;
    margin: 0;
}
.vid-wrap video,
.vid-wrap iframe {
    display: block;
}
.vid-wrap figcaption {
    max-width: 0;
    min-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-align: center;
    font-size: 0.9rem;
    color: var(--c-text-2);
    margin-top: 0.5rem;
    line-height: 1.5;
}

/* Image scroll animations */
[data-animation] { opacity: 0; }
[data-animation].visible {
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-duration: var(--anim-dur, 600ms);
    animation-delay: var(--anim-del, 0ms);
}
[data-animation="fade-in"].visible { animation-name: imgFadeIn; }
[data-animation="slide-up"].visible { animation-name: imgSlideUp; }
[data-animation="slide-down"].visible { animation-name: imgSlideDown; }
[data-animation="slide-left"].visible { animation-name: imgSlideLeft; }
[data-animation="slide-right"].visible { animation-name: imgSlideRight; }
[data-animation="zoom-in"].visible { animation-name: imgZoomIn; }

@keyframes imgFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes imgSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes imgSlideDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes imgSlideLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes imgSlideRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes imgZoomIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

/* Gallery overlay */
.gal-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
    z-index: 5;
}
.gal-overlay__text {
    padding: 0.5em 0.75em;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    max-width: 100%;
    overflow-wrap: break-word;
}

/* =============================================
   ANIMATIONS
   ============================================= */
.fade-up {
    opacity: 0;
    /* 2D translateY — NE translate3d. Proč: elementy s fade-up jsou často
       karty s `backdrop-filter: blur()`. Vynutit compositor vrstvu přes
       translate3d + backdrop-filter = rendering bug na AMD GPU, kde se
       animace vůbec nevykreslí (skoky 0 % → 100 % bez frames).
       translateY necháva prohlížeč rozhodnout o promoci — pro elementy
       BEZ backdrop-filter může dynamicky promovat, pro karty zůstane
       na main paint path (spolehlivé napříč GPU). Stagger timing fix
       v JS (script.js) zajišťuje spuštění animace i bez force-promote. */
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Cards: restore own transitions after reveal animation completes.
   box-shadow 0.5s MUSÍ odpovídat .card základu (jinak by hover po
   fade-up revealu měl jinou (kratší) transition durace → asymmetry bug
   mezi před-reveal a po-reveal hoverem). */
.card.fade-up.visible {
    transition: transform 0.15s ease-out,
                box-shadow 0.5s ease,
                border-color 0.2s ease,
                background 0.2s ease,
                opacity 0.3s ease;
}
.card.fade-up.visible:hover {
    /* Musí odpovídat .card:hover — pure scale bez translateY, origin bottom
       je zděděn z základního .card (viz výše). Po dokončení fade-up reveal
       přechází hover na tuto třídu místo na holý .card:hover. */
    transform: scale(1.03);
}

/* Articles: restore own transitions after reveal animation completes */
.article.fade-up.visible {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1300px) {
    .hero__illustration { left: auto; right: 0; width: 50%; }
    .page-hero__illustration { left: auto; right: 0; width: 45%; }
    .page-hero__main-img { width: 100%; }
    .page-hero--error .page-hero__illustration { width: 45%; }
}

/* TOC is hidden only on mobile (< 768px). On tablets and narrow desktops
   (768–1399px) the TOC remains visible and overlaps the right side of body
   content — user explicitly prefers overlap over hidden TOC at these widths.
   The backdrop-filter on .post__toc-float-inner blurs whatever text sits
   behind the card, keeping the TOC readable without being too disruptive. */
@media (max-width: 768px) {
    .post__toc-float { display: none; }
}

@media (max-width: 1024px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .card--dominant { grid-column: span 2; }
    .card--span-2 { grid-column: span 2; }
    .card--span-3 { grid-column: 1 / -1; }
    .services__header { flex-direction: column; align-items: flex-start; }
    .services__desc { text-align: left; max-width: 100%; }
    .article--featured { grid-template-columns: 1fr; }
    .article:not(.article--featured):not(.article--no-image) { grid-template-columns: 180px 1fr; }
    .article[class*="--ratio-"]:not(.article--featured):not(.article--no-image) { grid-template-columns: 180px 1fr; }
    .article[class*="--ratio-"].article--featured { grid-template-columns: 1fr; }
    /* Blend: switch to bottom-edge mask for featured articles going vertical */
    .article--featured.article--blend-soft { --blend-mask: linear-gradient(to bottom, #000 68%, rgba(0,0,0,0.97) 73%, rgba(0,0,0,0.88) 78%, rgba(0,0,0,0.71) 83%, rgba(0,0,0,0.48) 88%, rgba(0,0,0,0.24) 93%, rgba(0,0,0,0.06) 97%, transparent 100%); }
    .article--featured.article--blend-medium { --blend-mask: linear-gradient(to bottom, #000 50%, rgba(0,0,0,0.97) 56%, rgba(0,0,0,0.88) 62%, rgba(0,0,0,0.71) 69%, rgba(0,0,0,0.48) 77%, rgba(0,0,0,0.24) 85%, rgba(0,0,0,0.06) 93%, transparent 100%); }
    .article--featured.article--blend-strong { --blend-mask: linear-gradient(to bottom, #000 30%, rgba(0,0,0,0.97) 38%, rgba(0,0,0,0.88) 46%, rgba(0,0,0,0.71) 55%, rgba(0,0,0,0.48) 66%, rgba(0,0,0,0.24) 78%, rgba(0,0,0,0.06) 90%, transparent 100%); }
    .contact__container { grid-template-columns: 1fr; gap: 2rem; }
    /* Tiled: 4-col → 3-col */
    .blog__grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
    .tile--span-4 { grid-column: span 3; }
}

@media (max-width: 900px) {
    /* Tiled: 3-col/4-col → 2-col */
    .blog__grid--cols-3,
    .blog__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
    /* Featured keeps span 2; non-featured gap-fills reset to auto (flow naturally) */
    .tile--featured { grid-column: span 2; }
    .tile--span-2:not(.tile--featured),
    .tile--span-3:not(.tile--featured),
    .tile--span-4:not(.tile--featured) { grid-column: auto; }
}

@media (max-width: 768px) {
    .header__nav, .header__right { display: none; }
    /* Tiled: → 1-col, show all content */
    .blog__grid--tiled { grid-template-columns: 1fr; }
    .tile, .tile--featured, .tile--span-2, .tile--span-3, .tile--span-4 {
        grid-column: auto;
        height: auto;
        min-height: 280px;
    }
    /* Always show hover content on mobile (no hover on touch) */
    .tile__overlay::before {
        background: linear-gradient(to top,
            rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.9) 20%,
            rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.5) 60%,
            rgba(0,0,0,0.25) 80%, rgba(0,0,0,0.08) 100%);
    }
    .tile__meta,
    .tile__excerpt--above,
    .tile__tags--above,
    .tile__author--above,
    .tile__read--above {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .tile__detail {
        max-height: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
    .tile__title {
        transform: none;
    }
    .header__burger { display: flex; }
    .hero { padding: calc(var(--header-h) + 2rem) 0 2rem; }
    .hero__illustration.active { opacity: 0.04; }
    .hero__illustration { width: 90%; left: auto; right: -15%; }
    .page-hero__illustration.active { opacity: 0.04; }
    .page-hero__illustration { width: 90%; left: auto; right: -15%; }
    .hero__particle { color: rgba(255,255,255,0.07); }
    .page-hero__main-img { opacity: 0.03; }
    .page-hero--error .page-hero__illustration { width: 90%; left: auto; right: -15%; height: 180px; }
    .hero__title { font-size: 2.5rem; }
    .hero__title--smaller { font-size: 1.65rem; }
    .bento { grid-template-columns: 1fr; }
    .card--dominant,
    .card--span-2,
    .card--span-3 { grid-column: auto; }
    .services { padding: 2.5rem 0 3rem; }
    .quote__container { padding: 2rem 1.5rem 2rem 1.75rem; }
    .quote__mark { font-size: 2.75rem; }
    .footer__main {
        flex-direction: column; align-items: flex-start; gap: 1.25rem;
    }
    .article:not(.article--featured):not(.article--no-image) { grid-template-columns: 1fr; }
    .article[class*="--ratio-"]:not(.article--no-image) { grid-template-columns: 1fr; }
    .article__image--sm { min-height: 140px; }
    /* Blend: switch to bottom-edge mask in vertical layout */
    .article--blend-soft { --blend-mask: linear-gradient(to bottom, #000 68%, rgba(0,0,0,0.97) 73%, rgba(0,0,0,0.88) 78%, rgba(0,0,0,0.71) 83%, rgba(0,0,0,0.48) 88%, rgba(0,0,0,0.24) 93%, rgba(0,0,0,0.06) 97%, transparent 100%); }
    .article--blend-medium { --blend-mask: linear-gradient(to bottom, #000 50%, rgba(0,0,0,0.97) 56%, rgba(0,0,0,0.88) 62%, rgba(0,0,0,0.71) 69%, rgba(0,0,0,0.48) 77%, rgba(0,0,0,0.24) 85%, rgba(0,0,0,0.06) 93%, transparent 100%); }
    .article--blend-strong { --blend-mask: linear-gradient(to bottom, #000 30%, rgba(0,0,0,0.97) 38%, rgba(0,0,0,0.88) 46%, rgba(0,0,0,0.71) 55%, rgba(0,0,0,0.48) 66%, rgba(0,0,0,0.24) 78%, rgba(0,0,0,0.06) 90%, transparent 100%); }
    .page-hero { padding: calc(var(--header-h) + 2rem) 0 2rem; }
    .post__body { padding: 1.5rem var(--pad) 3rem; }
    .post__layout--boxed .post__content { padding: 1.5rem; }
    .post__hero { padding: calc(var(--header-h) + 1.5rem) 0 2rem; }
    .contact { padding: calc(var(--header-h) + 2rem) 0 3rem; }
    .contact-form__row { grid-template-columns: 1fr; }
    .contact__social { flex-wrap: wrap; }
    .post__sidebar-float-inner { flex-direction: column; gap: 0.75rem; padding: 1rem 1.25rem; }
}

/* Blog tiles on phones: the overlaid-text card (absolute .tile__content over the
   image) cannot grow, so on narrow screens long titles/text get CROPPED inside the
   fixed-height box. Switch to a flow-stacked card — image banner on top, text in
   normal document flow on the dark card below — so the box grows to fit ALL the
   text. (641–768px keeps the overlay card, which is wide enough to fit.) */
@media (max-width: 640px) {
    .blog__grid--tiled { grid-template-columns: 1fr; }
    .tile, .tile--featured, .tile--span-2, .tile--span-3, .tile--span-4 {
        grid-column: auto;
        height: auto;
        min-height: 0;
    }
    .tile__link {
        display: flex;
        flex-direction: column;
        height: auto;
    }
    /* Image/gradient becomes a fixed-ratio banner at the top (in flow) */
    .tile__img {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        flex: 0 0 auto;
    }
    .tile:hover .tile__img { transform: none; }
    /* Text flows below the image on the dark card → never clipped */
    .tile__overlay { display: none; }
    .tile__content {
        position: relative;
        bottom: auto;
        padding: 0.85rem 1.1rem 1.1rem;
    }
    /* Reveal all content; the title wraps freely so it is fully visible */
    .tile__meta,
    .tile__excerpt--above,
    .tile__tags--above,
    .tile__author--above,
    .tile__read--above,
    .tile__detail {
        opacity: 1;
        transform: none;
        transition: none;
        max-height: none;
    }
    .tile__title { transform: none; }
    .tile__excerpt { -webkit-line-clamp: 3; }
}

@media (max-width: 480px) {
    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; justify-content: center; }
    .blog__filters { gap: 0.35rem; }
    .filter-btn { font-size: 12px; padding: 0.3rem 0.65rem; }
    /* Tiled: smaller minimum on small screens */
    .tile, .tile--featured, .tile--span-2, .tile--span-3, .tile--span-4 {
        min-height: 240px;
    }
}

/* === Article Gallery (Carousel) === */
.article-gallery {
    margin: 1.5rem auto;
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    background: #000;
    user-select: none;
}
/* After JS init: overflow moves to viewport so gallery name is not clipped */
.article-gallery--init {
    overflow: visible;
    background: none;
    border-radius: 0;
}
.article-gallery__viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    background: #000;
}
/* Size variants */
.article-gallery[data-size="small"] { max-width: 480px; }
.article-gallery[data-size="medium"] { max-width: 680px; }
.article-gallery[data-size="large"] { max-width: 100%; }
.article-gallery[data-size="full"] {
    max-width: none;
    border-radius: 0;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}
.article-gallery[data-size="full"] > .article-gallery__viewport {
    border-radius: 0;
    width: 100vw;
}
/* Custom size — width and height set via inline style (slideshow only) */
.article-gallery[data-size="custom"] { max-width: 100%; }
.article-gallery[data-size="custom"]:not([data-mode]) .article-gallery__slide img,
.article-gallery[data-size="custom"][data-mode="slideshow"] .article-gallery__slide img { max-height: 100%; height: 100%; }
/* Alignment variants (only when not full-width and not floated) */
.article-gallery[data-align="left"]:not([data-size="full"]):not([data-float]) { margin-left: 0; margin-right: auto; }
.article-gallery[data-align="center"]:not([data-size="full"]):not([data-float]) { margin-left: auto; margin-right: auto; }
.article-gallery[data-align="right"]:not([data-size="full"]):not([data-float]) { margin-left: auto; margin-right: 0; }
/* Text flow (float) — vertical margins follow the base spacing scale, horizontal
   margins create the text-wrap gap */
.article-gallery[data-float="left"] {
    float: left;
    margin: 1.5rem 5rem 1.5rem 0;
    clear: left;
}
.article-gallery[data-float="right"] {
    float: right;
    margin: 1.5rem 0 1.5rem 5rem;
    clear: right;
}
/* Fade transition */
.article-gallery[data-transition="fade"] .article-gallery__track {
    position: relative;
    transition: none;
    transform: none !important;
}
.article-gallery[data-transition="fade"] .article-gallery__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.article-gallery[data-transition="fade"] .article-gallery__slide.gal-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}
/* Inline (side by side) */
.article-gallery[data-inline] {
    display: inline-block;
    vertical-align: top;
    margin: 1.5rem;
}
/* Vertical spacing presets — override margin-top/bottom only so horizontal
   layout (auto-centering, float text-wrap gap, inline surroundings) stays
   intact. Default (attribute absent) = small = 1.5rem inherited from the
   base rules above. Rules must come AFTER the float/inline rules so their
   margin-top/margin-bottom win at equal specificity. */
.article-gallery[data-spacing="none"]   { margin-top: 0;    margin-bottom: 0;    }
.article-gallery[data-spacing="normal"] { margin-top: 3rem; margin-bottom: 3rem; }
.article-gallery[data-spacing="large"]  { margin-top: 6rem; margin-bottom: 6rem; }
/* Shadow presets */
/* Shadow presets — on gallery pre-init, on viewport after init */
.article-gallery[data-shadow="light"]:not(.article-gallery--init) { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.article-gallery[data-shadow="medium"]:not(.article-gallery--init) { box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
.article-gallery[data-shadow="strong"]:not(.article-gallery--init) { box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.article-gallery__track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    cursor: grab;
    user-select: none;
}
.article-gallery__track:active { cursor: grabbing; }
.article-gallery__slide {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.article-gallery__slide img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}
/* Slideshow hover zoom (matches .img-wrap and carousel behavior) */
.article-gallery:not([data-mode]) .article-gallery__slide:hover img,
.article-gallery[data-mode="slideshow"] .article-gallery__slide:hover img {
    transform: scale(1.03);
}
/* Hide per-image figcaptions in slides — JS shows them in the footer dynamically */
.article-gallery__slide figcaption { display: none; }
/* Links inside slides should not affect slide layout */
.article-gallery__slide a { display: contents; }
.article-gallery[data-size="full"] .article-gallery__slide img { max-height: 70vh; }

/*
 * Per-image fit modes.
 *
 * object-fit: contain — show full image, letterbox empty space (default)
 * object-fit: cover   — fill entire area, crop overflow, keep aspect ratio
 * object-fit: scale-down — like contain, never scales up
 *
 * For cover to work, the <figure> slide needs a defined height.
 * - Preset-size galleries: aspect-ratio: 16/10 on the slide
 * - Custom-size galleries: height flows from gallery → track → slide → img
 * - Full-width: aspect-ratio: 21/9
 */

/* Cover slides in preset-size galleries: aspect-ratio defines the area */
.article-gallery__slide[data-fit="cover"],
.article-gallery__slide[data-fit="cover-top"],
.article-gallery__slide[data-fit="cover-bottom"],
.article-gallery__slide[data-fit="cover-left"],
.article-gallery__slide[data-fit="cover-right"],
.article-gallery__slide[data-fit="fill"] {
    aspect-ratio: 16 / 10;
}

/* Images in cover/scale-down slides fill the entire slide area */
.article-gallery__slide[data-fit] img {
    width: 100%;
    height: 100%;
    max-height: none;
}

/* Object-fit + position per mode */
.article-gallery__slide[data-fit="contain"] img     { object-fit: contain; }
.article-gallery__slide[data-fit="cover"] img,
.article-gallery__slide[data-fit="fill"] img         { object-fit: cover; object-position: center; }
.article-gallery__slide[data-fit="cover-top"] img    { object-fit: cover; object-position: center top; }
.article-gallery__slide[data-fit="cover-bottom"] img { object-fit: cover; object-position: center bottom; }
.article-gallery__slide[data-fit="cover-left"] img   { object-fit: cover; object-position: left center; }
.article-gallery__slide[data-fit="cover-right"] img  { object-fit: cover; object-position: right center; }
.article-gallery__slide[data-fit="scale-down"] img   { object-fit: scale-down; }

/* Full-width gallery: wider aspect ratio */
.article-gallery[data-size="full"] .article-gallery__slide[data-fit="cover"],
.article-gallery[data-size="full"] .article-gallery__slide[data-fit="cover-top"],
.article-gallery[data-size="full"] .article-gallery__slide[data-fit="cover-bottom"],
.article-gallery[data-size="full"] .article-gallery__slide[data-fit="cover-left"],
.article-gallery[data-size="full"] .article-gallery__slide[data-fit="cover-right"],
.article-gallery[data-size="full"] .article-gallery__slide[data-fit="fill"] {
    aspect-ratio: 21 / 9;
}

/* Custom-size gallery: height chain gallery → track → slide → img (slideshow only) */
.article-gallery[data-size="custom"]:not([data-mode]) .article-gallery__track,
.article-gallery[data-size="custom"][data-mode="slideshow"] .article-gallery__track { height: 100%; }
.article-gallery[data-size="custom"]:not([data-mode]) .article-gallery__slide,
.article-gallery[data-size="custom"][data-mode="slideshow"] .article-gallery__slide { height: 100%; }
.article-gallery[data-size="custom"]:not([data-mode]) .article-gallery__slide[data-fit],
.article-gallery[data-size="custom"][data-mode="slideshow"] .article-gallery__slide[data-fit] { aspect-ratio: auto; }
.article-gallery[data-size="custom"]:not([data-mode]) .article-gallery__slide img,
.article-gallery[data-size="custom"][data-mode="slideshow"] .article-gallery__slide img { max-height: none; height: 100%; }
/* Slideshow aspect ratio via CSS custom property (from data-aspect) */
.article-gallery:not([data-mode])[data-aspect] .article-gallery__slide,
.article-gallery[data-mode="slideshow"][data-aspect] .article-gallery__slide {
    aspect-ratio: var(--gal-aspect, auto);
}
.article-gallery:not([data-mode])[data-aspect] .article-gallery__slide img,
.article-gallery[data-mode="slideshow"][data-aspect] .article-gallery__slide img {
    width: 100%; height: 100%; max-height: none; object-fit: cover;
}
.article-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    color: var(--c-dark);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background 0.2s, opacity 0.2s;
    opacity: 0;
    line-height: 1;
}
.article-gallery:hover .article-gallery__nav { opacity: 1; }
.article-gallery__nav:hover { background: #fff; }
.article-gallery__nav--prev { left: 12px; }
.article-gallery__nav--next { right: 12px; }
/* Header: dots + counter at top, barely visible */
.article-gallery__header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 0;
    z-index: 3;
    opacity: 0.35;
    transition: opacity 0.3s ease;
}
.article-gallery:hover .article-gallery__header { opacity: 0.75; }
.article-gallery__dots {
    display: flex;
    gap: 5px;
}
.article-gallery__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.article-gallery__dot.active {
    background: #fff;
    transform: scale(1.3);
}
.article-gallery__counter {
    color: rgba(255,255,255,0.75);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
/* Footer: per-image caption below viewport (matches .img-wrap figcaption style) */
.article-gallery__footer {
    padding: 0.5rem 0 0;
    overflow: hidden;
}
.article-gallery__caption {
    font-size: 0.9rem;
    color: var(--c-text-2);
    font-style: italic;
    text-align: center;
    line-height: 1.5;
}
/* Gallery name — sibling element directly after .article-gallery */
.article-gallery__name {
    text-align: center;
    font-size: 0.85rem;
    color: var(--c-text-3);
    padding-top: 0.5rem;
    line-height: 1.4;
}

/* ---- Carousel mode ---- */
.article-gallery[data-mode="carousel"] { background: transparent; }
.article-gallery[data-mode="carousel"] .article-gallery__viewport {
    padding: 0 var(--gal-peek, 0px);
    background: transparent; overflow: hidden; border-radius: 0;
    border: none !important; box-shadow: none !important; filter: none !important;
}
/* Peek dissolve: nonlinear fade at edges when peek is active */
.article-gallery[data-mode="carousel"][data-peek] .article-gallery__viewport {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0px,
        rgba(0,0,0,0.08) calc(var(--gal-peek) * 0.15),
        rgba(0,0,0,0.25) calc(var(--gal-peek) * 0.35),
        rgba(0,0,0,0.55) calc(var(--gal-peek) * 0.55),
        rgba(0,0,0,0.85) calc(var(--gal-peek) * 0.8),
        black var(--gal-peek),
        black calc(100% - var(--gal-peek)),
        rgba(0,0,0,0.85) calc(100% - var(--gal-peek) * 0.8),
        rgba(0,0,0,0.55) calc(100% - var(--gal-peek) * 0.55),
        rgba(0,0,0,0.25) calc(100% - var(--gal-peek) * 0.35),
        rgba(0,0,0,0.08) calc(100% - var(--gal-peek) * 0.15),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0px,
        rgba(0,0,0,0.08) calc(var(--gal-peek) * 0.15),
        rgba(0,0,0,0.25) calc(var(--gal-peek) * 0.35),
        rgba(0,0,0,0.55) calc(var(--gal-peek) * 0.55),
        rgba(0,0,0,0.85) calc(var(--gal-peek) * 0.8),
        black var(--gal-peek),
        black calc(100% - var(--gal-peek)),
        rgba(0,0,0,0.85) calc(100% - var(--gal-peek) * 0.8),
        rgba(0,0,0,0.55) calc(100% - var(--gal-peek) * 0.55),
        rgba(0,0,0,0.25) calc(100% - var(--gal-peek) * 0.35),
        rgba(0,0,0,0.08) calc(100% - var(--gal-peek) * 0.15),
        transparent 100%
    );
}
.article-gallery[data-mode="carousel"] .article-gallery__track {
    display: flex;
    gap: var(--gal-gap, 12px);
    overflow: visible;
    flex-wrap: nowrap;
    /* Transform-based animation (set by JS), override base slideshow styles */
    will-change: transform;
    cursor: grab;
    user-select: none;
}
.article-gallery[data-mode="carousel"] .article-gallery__track:active { cursor: grabbing; }
.article-gallery[data-mode="carousel"] .article-gallery__slide {
    /* Override base flex: 0 0 100% — size for multiple visible items */
    flex: 0 0 calc((100% - (var(--gal-visible, 3) - 1) * var(--gal-gap, 12px)) / var(--gal-visible, 3));
    aspect-ratio: var(--gal-aspect, 16/9);
    overflow: hidden;
    border-radius: 6px;
    position: relative;
    background: transparent;
    min-width: 0;
}
.article-gallery[data-mode="carousel"] .article-gallery__slide img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block; cursor: pointer;
    /* Override base max-height/object-fit */
    max-height: none;
    transition: transform 0.3s ease;
}
.article-gallery[data-mode="carousel"] .article-gallery__slide:hover img { transform: scale(1.03); }
/* Override base figcaption display:none — show on hover for carousel */
.article-gallery[data-mode="carousel"] .article-gallery__slide figcaption {
    display: block;
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 0.5em 0.75em;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff; font-size: 0.8rem;
    opacity: 0; transition: opacity 0.3s ease;
}
.article-gallery[data-mode="carousel"] .article-gallery__slide:hover figcaption { opacity: 1; }
/* Carousel nav arrows — positioned outside track inside viewport */
.article-gallery[data-mode="carousel"] .article-gallery__nav {
    width: 36px; height: 36px;
    font-size: 1.1rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    top: 50%; transform: translateY(-50%);
}
.article-gallery[data-mode="carousel"] .article-gallery__nav--prev { left: 6px; }
.article-gallery[data-mode="carousel"] .article-gallery__nav--next { right: 6px; }
/* Carousel dots */
.article-gallery[data-mode="carousel"] .article-gallery__dots { justify-content: center; display: flex; gap: 6px; padding: 8px 0 2px; }
.article-gallery[data-mode="carousel"] .article-gallery__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-text-3, #aaa); border: none; padding: 0; cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.article-gallery[data-mode="carousel"] .article-gallery__dot.active { background: var(--c-primary, #3b82f6); transform: scale(1.25); }
.article-gallery[data-mode="carousel"] .article-gallery__header { position: static; background: none; padding: 0; }
.article-gallery[data-mode="carousel"] .article-gallery__counter { display: none; }
/* Carousel responsive: on small screens, JS still controls transform */
@media (max-width: 640px) {
    .article-gallery[data-mode="carousel"] .article-gallery__viewport { padding: 0; }
}

/* ---- Grid mode ---- */
.article-gallery[data-mode="grid"] { background: transparent; }
.article-gallery[data-mode="grid"] .article-gallery__viewport {
    background: transparent; overflow: visible; border-radius: 0;
    border: none !important; box-shadow: none !important; filter: none !important;
}
/* Fixed columns */
.article-gallery[data-mode="grid"]:not([data-columns="auto"]) .article-gallery__track {
    display: grid;
    grid-template-columns: repeat(var(--gal-columns, 3), 1fr);
    gap: var(--gal-grid-gap, 12px);
    justify-content: center;
    /* Override base slideshow track styles */
    overflow: visible;
    transition: none;
    will-change: auto;
    cursor: default;
}
/* Auto columns */
.article-gallery[data-mode="grid"][data-columns="auto"] .article-gallery__track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--gal-min-width, 180px), 1fr));
    gap: var(--gal-grid-gap, 12px);
    justify-content: center;
    /* Override base slideshow track styles */
    overflow: visible;
    transition: none;
    will-change: auto;
    cursor: default;
}
/* Auto columns — fill width: images stretch to use all available space */
.article-gallery[data-mode="grid"][data-columns="auto"][data-grid-fill] .article-gallery__track {
    grid-template-columns: repeat(auto-fit, minmax(var(--gal-min-width, 180px), 1fr));
}
.article-gallery[data-mode="grid"] .article-gallery__slide {
    /* Override base flex/display — let CSS Grid control sizing */
    flex: none;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: transparent;
    position: relative;
    min-width: 0;
    margin: 0;
}
/* Grid images: fill the cell, crop via object-fit */
.article-gallery[data-mode="grid"] .article-gallery__slide img {
    width: 100%;
    height: auto;
    object-fit: cover; object-position: center;
    display: block; cursor: pointer;
    max-height: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}
/* With explicit aspect ratio: slide constrains to ratio, image fills it */
.article-gallery[data-mode="grid"][data-img-aspect]:not([data-img-aspect="auto"]) .article-gallery__slide {
    aspect-ratio: var(--gal-img-aspect, auto);
}
.article-gallery[data-mode="grid"][data-img-aspect]:not([data-img-aspect="auto"]) .article-gallery__slide img {
    height: 100%;
}
/* Auto aspect ratio: each image keeps its natural height */
.article-gallery[data-mode="grid"][data-img-aspect="auto"] .article-gallery__track {
    align-items: start;
}
/* Per-image fit in grid: override height:auto so object-fit takes effect (only with explicit aspect) */
.article-gallery[data-mode="grid"][data-img-aspect]:not([data-img-aspect="auto"]) .article-gallery__slide[data-fit] img {
    height: 100%;
}
.article-gallery[data-mode="grid"] .article-gallery__slide[data-fit="contain"] img {
    object-fit: contain;
}
.article-gallery[data-mode="grid"] .article-gallery__slide[data-fit="cover"] img {
    object-fit: cover; object-position: center;
}
.article-gallery[data-mode="grid"] .article-gallery__slide[data-fit="cover-top"] img {
    object-fit: cover; object-position: center top;
}
.article-gallery[data-mode="grid"] .article-gallery__slide[data-fit="cover-bottom"] img {
    object-fit: cover; object-position: center bottom;
}
.article-gallery[data-mode="grid"] .article-gallery__slide[data-fit="cover-left"] img {
    object-fit: cover; object-position: left center;
}
.article-gallery[data-mode="grid"] .article-gallery__slide[data-fit="cover-right"] img {
    object-fit: cover; object-position: right center;
}
.article-gallery[data-mode="grid"] .article-gallery__slide[data-fit="scale-down"] img {
    object-fit: scale-down;
}
.article-gallery[data-mode="grid"] .article-gallery__slide:hover img { transform: scale(1.04); filter: brightness(1.06); }
/* Override base figcaption display:none — show on hover overlay (same as carousel) */
.article-gallery[data-mode="grid"] .article-gallery__slide figcaption {
    display: block;
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 0.5em 0.75em;
    background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.88));
    color: #fff; font-size: 0.8rem;
    opacity: 0; transition: opacity 0.3s ease;
}
.article-gallery[data-mode="grid"] .article-gallery__slide:hover figcaption { opacity: 1; }
.article-gallery[data-mode="grid"][data-grid-captions="false"] .article-gallery__slide figcaption { display: none; }
/* Permanent caption display — applies to any mode that uses the hover overlay
   (grid, carousel). The grid "captions disabled" rule above still wins by
   specificity so an admin can simultaneously hide captions in grid while the
   "always" flag is set. */
.article-gallery[data-captions-display="always"] .article-gallery__slide figcaption { opacity: 1; }
/* Grid: no nav, no header, no footer (all images are visible) */
.article-gallery[data-mode="grid"] .article-gallery__nav,
.article-gallery[data-mode="grid"] .article-gallery__header,
.article-gallery[data-mode="grid"] .article-gallery__footer,
.article-gallery[data-mode="grid"] .article-gallery__counter { display: none; }
/* Grid justify-content via data attribute */
.article-gallery[data-mode="grid"][data-justify="start"] .article-gallery__track { justify-content: start; }
.article-gallery[data-mode="grid"][data-justify="center"] .article-gallery__track { justify-content: center; }
.article-gallery[data-mode="grid"][data-justify="end"] .article-gallery__track { justify-content: end; }
.article-gallery[data-mode="grid"][data-justify="space-between"] .article-gallery__track { justify-content: space-between; }
.article-gallery[data-mode="grid"][data-justify="space-evenly"] .article-gallery__track { justify-content: space-evenly; }
/* Grid responsive: 2 columns max on small screens for fixed cols > 2 */
@media (max-width: 640px) {
    .article-gallery[data-mode="grid"]:not([data-columns="auto"]):not([data-columns="2"]) .article-gallery__track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
    .article-gallery[data-mode="grid"] .article-gallery__track { grid-template-columns: 1fr !important; }
}

/* Lightbox */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-lightbox.active { background: rgba(0,0,0,0.92); }
.gallery-lightbox__img {
    max-width: 92vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--r-sm);
    /* Default cursor hints that clicking closes the lightbox. Flips to grab
       when .lb-zoomed is toggled by the gesture controller. */
    cursor: zoom-out;
    user-select: none;
    -webkit-user-drag: none;
    /* Take over all touch gestures — the controller implements pinch/pan/swipe
       itself so the browser's default pinch-zoom / pan must not interfere. */
    touch-action: none;
    will-change: transform;
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    /* White background for transparent images — invisible on opaque ones */
    background: #fff;
}
/* When zoomed in, the cursor becomes grab/grabbing to hint at panning */
.gallery-lightbox.lb-zoomed .gallery-lightbox__img { cursor: grab; }
.gallery-lightbox.lb-zoomed .gallery-lightbox__img:active { cursor: grabbing; }
.gallery-lightbox.active .gallery-lightbox__img {
    transform: scale(1);
    opacity: 1;
}
/* Navigation swipe transitions between images */
.gallery-lightbox__img.lb-nav {
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.gallery-lightbox__img.lb-swipe-left {
    opacity: 0 !important;
    transform: translateX(-80px) scale(0.97) !important;
}
.gallery-lightbox__img.lb-swipe-right {
    opacity: 0 !important;
    transform: translateX(80px) scale(0.97) !important;
}
.gallery-lightbox__img.lb-enter-left {
    opacity: 0 !important;
    transform: translateX(80px) scale(0.97) !important;
    transition: none !important;
}
.gallery-lightbox__img.lb-enter-right {
    opacity: 0 !important;
    transform: translateX(-80px) scale(0.97) !important;
    transition: none !important;
}
/* Image caption in lightbox */
.gallery-lightbox__caption {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80vw;
    color: rgba(255,255,255,0.95);
    font-size: 20px;
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    padding: 10px 22px;
    background: rgba(0,0,0,0.55);
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s 0.2s;
}
.gallery-lightbox.active .gallery-lightbox__caption { opacity: 1; }
/* Resolution info bar */
.gallery-lightbox__info {
    position: absolute;
    bottom: 16px;
    right: 16px;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    font-family: system-ui, -apple-system, sans-serif;
    pointer-events: none;
    transition: opacity 0.2s;
}
.gallery-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0;
    transition: background 0.2s, opacity 0.3s 0.15s;
}
.gallery-lightbox.active .gallery-lightbox__close { opacity: 1; }
.gallery-lightbox__close:hover { background: rgba(255,255,255,0.3); }
.gallery-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0;
    transition: background 0.2s, opacity 0.3s 0.15s;
}
.gallery-lightbox.active .gallery-lightbox__nav { opacity: 1; }
.gallery-lightbox__nav:hover { background: rgba(255,255,255,0.3); }
.gallery-lightbox__nav--prev { left: 16px; }
.gallery-lightbox__nav--next { right: 16px; }
.gallery-lightbox__counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s 0.2s;
}
.gallery-lightbox.active .gallery-lightbox__counter { opacity: 1; }

@media (max-width: 768px) {
    .article-gallery__slide img { max-height: 320px; }
    .article-gallery__nav { opacity: 1; width: 34px; height: 34px; font-size: 15px; }
    .article-gallery__nav--prev { left: 6px; }
    .article-gallery__nav--next { right: 6px; }
    .article-gallery[data-float] { float: none !important; margin: 1.5rem auto !important; width: auto !important; }
    .gallery-lightbox__nav { width: 36px; height: 36px; font-size: 18px; }
    .gallery-lightbox__nav--prev { left: 8px; }
    .gallery-lightbox__nav--next { right: 8px; }
    .gallery-lightbox__info { bottom: 8px; right: 8px; font-size: 11px; }
    .gallery-lightbox__caption { bottom: 40px; font-size: 17px; max-width: 92vw; padding: 7px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    /* KRITICKÉ: `animation-iteration-count: 1 !important` nesmí chybět.
       Bez něj infinite animace (particleFloat na 20 hero ikonách) cyklí
       každých 0.01 ms = ~100 000 cyklů/s. Blink compositor takový throughput
       neudrží — výsledkem je zamrznutá animace (symptom „ikony nehybné,
       nikoliv statický end-state"). Antipattern popsán na
       css-tricks.com/nuking-motion-with-prefers-reduced-motion. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
    html { scroll-behavior: auto; }

    /* Hero dekorativní ikony — animace zcela vypnuta (particleFloat
       end-frame má opacity: 0, takže by s iteration-count:1 skončily
       neviditelné). Statická opacity 0.35 ponechá vizuální hustotu
       ikon jako decor bez jakéhokoli pohybu. */
    .hero__particle {
        animation: none !important;
        opacity: 0.35 !important;
    }
}