/* ============================================================
   BLUD — pivovarblud.cz
   ============================================================ */

/* Poleno (Suitcase Type Foundry) — self-hosted, brand typeface. Latin + Czech. */
@font-face {
  font-family: 'Poleno';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/poleno-medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Poleno';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poleno-semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Poleno';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poleno-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Poleno';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url('fonts/poleno-black.woff2') format('woff2');
}

/* Inter (OFL) — body / reading text. Subsets: latin, latin-ext (Czech). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer reset, tokens, base, components, utilities;

/* ---------- Tokens (dark-only) ---------- */
@layer tokens {
  :root {
    color-scheme: dark;

    /* Surfaces */
    --bg:                   #0e0e0e;
    --bg-elevated:          #161616;
    --bg-inverse:           #f0ede6;

    /* Foreground */
    --fg:                   #f0ede6;
    --fg-muted:             #b3afa6;
    --fg-faint:             #8a877e;
    --fg-inverse:           #0e0e0e;

    /* Borders */
    --border:               #2a2a2a;
    --border-strong:        #3a3a3a;

    /* Logo swap */
    --logo-url:             url('../images/logo-blud-white.png');
    --logo-url-inverse:     url('../images/logo-blud-black.png');

    /* Typography */
    --font-body:            'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display:         'Poleno', 'Inter', system-ui, sans-serif;

    /* Spacing scale (4-base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* Layout */
    --container-max:        1280px;
    --container-padding:    var(--space-5);
    --header-height:        72px;

    /* Transitions */
    --ease:                 cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast:               180ms var(--ease);
    --t-med:                300ms var(--ease);
    --t-slow:               500ms var(--ease);

    /* Radii */
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            12px;
    --radius-full:          999px;
  }
}

/* ---------- Reset ---------- */
@layer reset {
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

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

  body {
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

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

  button {
    font: inherit;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul, ol {
    list-style: none;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
}

/* ---------- Base ---------- */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: 16px;
    background: var(--bg);
    color: var(--fg);
    transition: background var(--t-med), color var(--t-med);
  }

  ::selection {
    background: var(--fg);
    color: var(--bg);
  }

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


@layer components {
  /* ---------- Header ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    padding-top: 18px;
    transition: padding var(--t-fast);
  }

  .site-header.is-scrolled {
    backdrop-filter: blur(8px);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
  }

  /* Torn-edge above the menu — jagged silhouette in --fg color
     fills the top padding area of the sticky header */
  .site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
    background: var(--fg);
    -webkit-mask-image: url('../images/torn-edge.svg');
            mask-image: url('../images/torn-edge.svg');
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    transform: scaleY(-1);
    pointer-events: none;
  }

  .site-header__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .brand__logo {
    display: block;
    width: 120px;
    height: 40px;
    background-image: var(--logo-url);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
  }

  .site-nav {
    display: flex;
    gap: var(--space-5);
    font-weight: 500;
    font-size: 0.9375rem;
  }

  .site-nav a {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--fg-muted);
    transition: color var(--t-fast);
  }
  .site-nav a:hover { color: var(--fg); }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .socials {
    display: flex;
    gap: var(--space-2);
  }
  .socials a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: var(--fg-muted);
    transition: color var(--t-fast), background var(--t-fast);
  }
  .socials a:hover {
    color: var(--fg);
    background: var(--border);
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1;
    transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
  }

  .btn--primary {
    background: var(--fg);
    color: var(--bg);
  }
  .btn--primary:hover {
    transform: translateY(-1px);
  }

  .btn--ghost {
    border: 1px solid var(--border-strong);
    color: var(--fg);
  }
  .btn--ghost:hover {
    background: var(--bg-elevated);
  }

  .btn--lg {
    padding: var(--space-4) var(--space-5);
    font-size: 1rem;
  }

  /* ---------- Burger (mobile only) ---------- */
  .burger {
    display: none;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px;
  }
  .burger span {
    display: block;
    height: 2px;
    background: var(--fg);
    transition: transform var(--t-fast), opacity var(--t-fast);
  }
  .burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* ---------- Mobile menu panel ---------- */
  .mobile-menu {
    border-top: 1px solid var(--border);
    background: var(--bg);
    padding: var(--space-4) var(--container-padding);
  }
  .mobile-menu[hidden] {
    display: none;
  }
  .mobile-menu__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    font-size: 1.125rem;
    font-weight: 600;
  }
  .mobile-menu__nav a {
    font-family: var(--font-display);
    font-weight: 600;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    .site-nav,
    .site-header__actions .socials,
    .site-header__actions .btn--eshop {
      display: none;
    }
    .burger {
      display: flex;
    }
  }
}

@layer components {
  .age-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    opacity: 1;
    transition: opacity var(--t-slow);
  }
  .age-gate[hidden] { display: none; }
  .age-gate.is-leaving { opacity: 0; pointer-events: none; }

  .age-gate__panel {
    max-width: 460px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .age-gate__logo {
    width: 160px;
    height: 56px;
    background-image: var(--logo-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: var(--space-3);
  }

  .age-gate__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin: 0;
  }

  .age-gate__text {
    color: var(--fg-muted);
    max-width: 320px;
  }

  .age-gate__actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
  }

  .age-gate__note {
    margin-top: var(--space-5);
    font-size: 0.75rem;
    color: var(--fg-faint);
  }
}

@layer components {
  .hero {
    position: relative;
    min-height: clamp(560px, 90vh, 860px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--header-height) + var(--space-8)) var(--container-padding) var(--space-9);
    overflow: hidden;
    isolation: isolate;
  }

  .hero__bg { position: absolute; inset: 0; z-index: 0; }
  .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    filter: brightness(0.62) saturate(1.05);
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(8, 10, 14, 0.62) 0%,
      rgba(8, 10, 14, 0.12) 38%,
      rgba(8, 10, 14, 0.74) 100%);
  }

  .hero__inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }

  .hero__logo {
    display: block;
    width: min(560px, 80vw);
    aspect-ratio: 998 / 272;
    background-image: var(--logo-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 10px 34px rgba(0, 0, 0, 0.6));
  }

  .hero__claim {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.8vw, 1.9rem);
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
    margin: 0;
  }

  .hero__cta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
  }

  @media (max-width: 640px) {
    .hero { min-height: 80vh; }
  }
}

@layer components {
  /* ---------- Section primitives ---------- */
  .section {
    padding: var(--space-9) 0;
  }
  .section__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
  }
  .section__inner--narrow { max-width: 800px; }

  /* ---------- FAQ ---------- */
  .faq { display: flex; flex-direction: column; gap: var(--space-3); }
  .faq__item {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .faq__q {
    list-style: none;
    cursor: pointer;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q::after {
    content: "+";
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--fg-muted);
    transition: transform var(--t-fast);
  }
  .faq__item[open] .faq__q::after { content: "−"; }
  .faq__item[open] .faq__q { border-bottom: 1px solid var(--border); }
  .faq__a { padding: var(--space-4) var(--space-5); }
  .faq__a p { color: var(--fg-muted); line-height: 1.7; }
  .section__head {
    margin-bottom: var(--space-7);
    text-align: center;
  }
  .section__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    margin-top: var(--space-2);
  }
  .eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
  }

  /* ---------- Piva ---------- */
  .pivo-cat { margin-top: var(--space-8); }
  .pivo-cat:first-of-type { margin-top: 0; }
  .pivo-cat__title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
  }
  .pivo-group__title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin: var(--space-6) 0 var(--space-4);
  }
  .pivo-cat__title + .pivo-group__title { margin-top: var(--space-3); }
  .pivo-cat__note {
    color: var(--fg-muted);
    font-size: 0.95rem;
    margin: 0 0 var(--space-5);
    max-width: 60ch;
  }
  .pivo-cat__note a { color: var(--fg); text-decoration: underline; }

  .piva-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
  }

  .pivo-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--t-fast), border-color var(--t-fast);
  }
  .pivo-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
  }

  .pivo-card__art {
    position: relative;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(180deg, var(--c-top, #2faa6a), var(--c-bot, #0b3d2e));
  }
  .pivo-card__art::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 42%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35));
  }
  .pivo-card__wm {
    position: relative;
    z-index: 1;
    font-weight: 900;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    letter-spacing: 0.04em;
    color: #fff;
    opacity: 0.92;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  }

  .pivo-card__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .pivo-card__style {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
  }

  .pivo-card__name {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.05;
    margin: 0;
  }

  .pivo-card__desc {
    color: var(--fg-muted);
    font-size: 0.9rem;
    margin: 0;
  }

  .pivo-card__pack {
    font-size: 0.8rem;
    color: var(--fg-faint);
    margin: 0;
  }

  .spec-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-1);
  }

  .chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    background: #000;
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 0.85rem;
    font-weight: 700;
  }
  .chip em {
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-faint);
  }
  .chip--abv {
    background: var(--fg);
    color: var(--fg-inverse);
  }
  .chip--abv em { color: rgba(0, 0, 0, 0.55); }
}

@layer components {
  .proc-grid {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: var(--space-7);
    align-items: center;
  }

  .proc-grid__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  }

  .proc-grid__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .proc-grid__text p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--fg-muted);
  }

  @media (max-width: 760px) {
    .proc-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  }

  .brewery-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
  }
  .brewery-strip__item { margin: 0; overflow: hidden; border-radius: var(--radius-lg); }
  .brewery-strip__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--t-med);
  }
  .brewery-strip__item:hover img { transform: scale(1.05); }
  @media (max-width: 640px) {
    .brewery-strip { grid-template-columns: 1fr 1fr; }
    .brewery-strip__item:last-child { grid-column: span 2; }
  }

  .section__lead {
    margin-top: var(--space-3);
    color: var(--fg-muted);
    font-size: 1rem;
  }

  .timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
    position: relative;
  }
  .timeline::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 9%;
    right: 9%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border-strong) 16%, var(--border-strong) 84%, transparent 100%);
  }

  .timeline__item {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  .timeline__node {
    min-width: 60px;
    height: 60px;
    padding: 0 var(--space-4);
    margin-bottom: var(--space-2);
    background: var(--bg-elevated);
    color: var(--fg-muted);
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    position: relative;
    z-index: 1;
    line-height: 1;
  }
  .timeline__node.is-done {
    background: var(--fg);
    color: var(--bg);
    box-shadow: 0 0 0 4px var(--bg);
  }
  .timeline__node.is-current {
    box-shadow: 0 0 0 4px var(--bg), 0 0 24px rgba(240, 237, 230, 0.4);
  }
  .timeline__node-year { font-size: 1rem; }
  .timeline__node-month {
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .timeline__label {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fg);
  }

  .timeline__desc {
    font-size: 0.85rem;
    color: var(--fg-muted);
    line-height: 1.5;
    max-width: 24ch;
  }

  @media (max-width: 760px) {
    .timeline {
      grid-template-columns: 1fr;
      gap: var(--space-6);
      max-width: 420px;
      margin: 0 auto;
      padding-left: var(--space-6);
    }
    .timeline::before {
      top: 0;
      bottom: 0;
      left: calc(var(--space-6) + 30px);
      right: auto;
      width: 1px;
      height: auto;
      background: linear-gradient(180deg, transparent 0%, var(--border-strong) 12%, var(--border-strong) 88%, transparent 100%);
    }
    .timeline__item {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      column-gap: var(--space-4);
      row-gap: var(--space-1);
      text-align: left;
      align-items: start;
    }
    .timeline__node { grid-row: 1 / 3; margin-bottom: 0; align-self: start; }
    .timeline__label { align-self: center; }
    .timeline__desc { max-width: none; }
  }

  .ig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }
  .ig-tile {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bg-elevated);
  }
  .ig-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-med);
  }
  .ig-tile:hover img {
    transform: scale(1.05);
  }

  @media (max-width: 640px) {
    .ig-grid { grid-template-columns: repeat(2, 1fr); }
    .ig-tile:nth-child(n+5) { display: none; }
  }
}

@layer components {
  .pre-footer {
    background: var(--bg-inverse);
    color: var(--fg-inverse);
    padding: var(--space-9) var(--container-padding);
    text-align: center;
  }
  .pre-footer__inner {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }
  .pre-footer__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
  }
  .pre-footer__sub {
    color: color-mix(in srgb, var(--fg-inverse) 70%, transparent);
    font-size: 1.0625rem;
  }
  .btn--inverse {
    background: var(--fg-inverse);
    color: var(--bg-inverse);
  }
}

@layer components {
  .site-footer {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: var(--space-7) 0;
  }
  .site-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }
  .site-footer__brand .brand__logo {
    width: 100px;
    height: 34px;
  }
  .site-footer__socials {
    display: flex;
    gap: var(--space-3);
  }
  .site-footer__socials a {
    color: var(--fg-muted);
    transition: color var(--t-fast);
  }
  .site-footer__socials a:hover { color: var(--fg); }

  .site-footer__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    font-size: 0.8125rem;
    color: var(--fg-muted);
  }
  .site-footer__meta a {
    color: var(--fg);
    font-weight: 600;
  }
  .site-footer__meta a:hover { text-decoration: underline; }

  @media (max-width: 720px) {
    .site-footer__inner { flex-direction: column; align-items: center; text-align: center; }
    .site-footer__meta { align-items: center; }
  }
}

@layer components {
  .map-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-5);
  }

  .map-layout__map {
    height: 600px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    position: relative;
    z-index: 0;
    /* isolate Leaflet's internal z-index stack so its controls/panes
       never paint over the sticky header */
    isolation: isolate;
  }

  /* Lighten CARTO dark_all tiles — the raw style is near-black and blends
     into the page background, so roads/labels are hard to read. */
  .leaflet-tile {
    filter: brightness(1.7) contrast(0.92) saturate(1.15);
  }

  .map-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    text-align: center;
    color: var(--fg-muted);
  }

  .map-layout__list {
    max-height: 600px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-right: var(--space-2);
  }

  .map-empty {
    padding: var(--space-5);
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    color: var(--fg-muted);
    text-align: center;
  }

  .loc-card {
    padding: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--t-fast), transform var(--t-fast);
  }
  .loc-card:hover,
  .loc-card.is-active {
    border-color: var(--fg);
    transform: translateX(2px);
  }
  .loc-card__city {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg-muted);
  }
  .loc-card__name {
    font-size: 1rem;
    font-weight: 700;
    margin-top: var(--space-1);
  }
  .loc-card__addr {
    font-size: 0.8125rem;
    color: var(--fg-muted);
    margin-top: var(--space-1);
  }
  .loc-card__hours {
    font-size: 0.75rem;
    color: var(--fg-faint);
    margin-top: var(--space-2);
  }

  /* Marker custom DivIcon */
  .blud-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fg);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform var(--t-fast);
  }
  .blud-marker svg {
    width: 18px;
    height: 18px;
  }
  .blud-marker.is-active {
    transform: scale(1.4);
    outline: 3px solid var(--fg);
    outline-offset: 2px;
  }

  @media (max-width: 760px) {
    .map-layout { grid-template-columns: 1fr; }
    .map-layout__map { height: 360px; }
    .map-layout__list { max-height: none; }
  }
}

@layer components {
  .kontakt-hero {
    padding: var(--space-9) var(--container-padding) var(--space-7);
    text-align: center;
  }
  .kontakt-hero__inner {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
  }
  .kontakt-hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
  }
  .kontakt-hero__lede {
    color: var(--fg-muted);
    font-size: 1.0625rem;
  }

  .kontakt-section {
    padding: var(--space-7) 0;
    border-top: 1px solid var(--border);
  }
  .kontakt-section__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
  }
  .kontakt-section__title {
    font-size: 1.5rem;
    margin-bottom: var(--space-5);
  }

  .people {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
  }

  .person {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .person__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--fg);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    flex-shrink: 0;
  }
  .person__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .person__name {
    font-size: 1rem;
  }
  .person__role {
    font-size: 0.8125rem;
    color: var(--fg-muted);
    margin-bottom: var(--space-2);
  }
  .person__email,
  .person__phone {
    font-size: 0.875rem;
    font-weight: 500;
  }
  .person__email:hover,
  .person__phone:hover {
    text-decoration: underline;
  }

  .kontakt-addr-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-7);
    align-items: start;
  }
  .kontakt-section__addr,
  .kontakt-section__hours {
    font-size: 0.9375rem;
    color: var(--fg-muted);
    line-height: 1.7;
    margin-bottom: var(--space-4);
  }
  .kontakt-section__map {
    height: 360px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    position: relative;
    z-index: 0;
    isolation: isolate;
  }

  .kontakt-firma p {
    color: var(--fg-muted);
    line-height: 1.7;
  }
  .kontakt-sister {
    margin-top: var(--space-4);
    font-size: 0.875rem;
  }

  @media (max-width: 760px) {
    .kontakt-addr-grid { grid-template-columns: 1fr; }
    .kontakt-section__map { height: 280px; }
  }
}

@layer components {
  .not-found {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-7) var(--container-padding);
  }
  .not-found__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
  }
  .not-found__logo {
    width: 140px;
    height: 48px;
    background-image: var(--logo-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: var(--space-4);
  }
  .not-found__code {
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 900;
    line-height: 1;
    color: var(--fg-faint);
    letter-spacing: -0.04em;
  }
  .not-found__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
  }
  .not-found__sub {
    color: var(--fg-muted);
    margin-bottom: var(--space-3);
  }
}

@layer components {
  /* ---------- Poster band: BLUD brand moment with torn edges ---------- */
  .poster-band {
    position: relative;
    background: var(--fg);
    color: var(--bg);
    padding: var(--space-9) var(--container-padding);
    margin: var(--space-9) 0;
    overflow: visible;
  }

  .poster-band::before,
  .poster-band::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 36px;
    background: var(--fg);
    -webkit-mask-image: url('../images/torn-edge.svg');
            mask-image: url('../images/torn-edge.svg');
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    pointer-events: none;
  }

  .poster-band::before {
    top: -35px;
  }

  .poster-band::after {
    bottom: -35px;
    transform: scaleY(-1);
  }

  .poster-band__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .poster-band__logo {
    display: block;
    width: clamp(220px, 35vw, 420px);
    height: clamp(70px, 11vw, 130px);
    background-image: var(--logo-url-inverse);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* ---------- Thin torn divider (no logo, just the silhouette break) ---------- */
  .torn-divider {
    position: relative;
    height: 36px;
    color: var(--fg);
    background: currentColor;
    -webkit-mask-image: url('../images/torn-edge.svg');
            mask-image: url('../images/torn-edge.svg');
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    margin: 0;
    pointer-events: none;
  }
  .torn-divider--flip {
    transform: scaleY(-1);
  }

  /* ===================== B2B "NA ČEPU" ===================== */
  .section--b2b { background: var(--bg-elevated); border-block: 1px solid var(--border); }
  .b2b {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }
  .b2b__text { max-width: 46ch; }
  .b2b__text p { color: var(--fg-muted); margin: var(--space-2) 0 0; }
  .b2b__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

  /* ===================== DAILY-JOURNEY PALETTES ===================== */
  /* Per-section mood — set on the <section> element via class */
  .mood-dawn   { --sky-top:#16324a; --sky-mid:#3a6b7a; --sky-bot:#d9a96b; --ridge:#0d2433; }
  .mood-day    { --sky-top:#0e0e0e; --sky-mid:#13201a; --sky-bot:#0e0e0e; --ridge:#06281e; }
  .mood-land   { --sky-top:#14110d; --sky-mid:#1c1812; --sky-bot:#14110d; --ridge:#0a0805; }
  .mood-noon   { --sky-top:#0c1418; --sky-mid:#102028; --sky-bot:#0c1418; --ridge:#06141a; }
  .mood-dusk   { --sky-top:#2a1838; --sky-mid:#5a2a52; --sky-bot:#1a0e22; --ridge:#160a1e; }
  .mood-night  { --sky-top:#080808; --sky-mid:#0c0c10; --sky-bot:#050505; --ridge:#040404; }

  .section.mood-day, .section.mood-noon, .section.mood-dusk, .section.mood-land {
    background: linear-gradient(180deg, var(--sky-top), var(--sky-mid) 50%, var(--sky-bot));
  }

  /* ===================== LANDSCAPE LAYERS ===================== */
  .landscape { position:absolute; inset:0; overflow:hidden; z-index:0;
    background:linear-gradient(180deg, var(--sky-top,#16324a), var(--sky-mid,#3a6b7a) 55%, var(--sky-bot,#d9a96b)); }
  .landscape__glow { position:absolute; left:50%; top:42%; width:42vmax; height:42vmax;
    transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(255,228,170,.28), rgba(255,228,170,0) 65%); }
  .landscape__ridges { position:absolute; left:0; right:0; bottom:0; width:100%; height:clamp(120px,22vh,260px); }
  .landscape__ridges svg { position:absolute; left:0; right:0; bottom:0; width:100%; height:100%; }
  .ridge { fill:var(--ridge,#0d2433); }
  .ridge--far  { opacity:.55; transform:translateY(8%); }
  .ridge--mid  { opacity:.8;  transform:translateY(4%); }
  .ridge--near { opacity:1; }
}

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