/* ============================================================
   TRUHLÁŘSTVÍ ŠTURC — VIZUÁLNÍ VYLEPŠENÍ (11. 10. 2026)
   Načítá se PO styles.css a jen přepisuje vzhled. Texty ani obsah
   se nemění (rozhodnutí klienta z 22. 9. 2026 platí).
   Návrh a důvody: NAVRH-VYLEPSENI-2026-10-11.md.
   Každá sekce jde vypnout smazáním jejího bloku.
   ============================================================ */

/* ── 0 · PÍSMA z vlastního serveru (dřív Google Fonts) ── */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+010C-010F, U+011A-011B, U+0147-0148, U+0158-0161, U+0164-0165, U+016E-016F, U+017D-017E; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+010C-010F, U+011A-011B, U+0147-0148, U+0158-0161, U+0164-0165, U+016E-016F, U+017D-017E; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+010C-010F, U+011A-011B, U+0147-0148, U+0158-0161, U+0164-0165, U+016E-016F, U+017D-017E; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/playfair-display-latin-500-italic.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/playfair-display-latin-500-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/playfair-display-latin-600-italic.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/playfair-display-latin-600-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/playfair-display-latin-700-italic.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/playfair-display-latin-700-normal.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/playfair-display-latin-ext-500-italic.woff2") format("woff2"); unicode-range: U+010C-010F, U+011A-011B, U+0147-0148, U+0158-0161, U+0164-0165, U+016E-016F, U+017D-017E; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/playfair-display-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+010C-010F, U+011A-011B, U+0147-0148, U+0158-0161, U+0164-0165, U+016E-016F, U+017D-017E; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/playfair-display-latin-ext-600-italic.woff2") format("woff2"); unicode-range: U+010C-010F, U+011A-011B, U+0147-0148, U+0158-0161, U+0164-0165, U+016E-016F, U+017D-017E; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/playfair-display-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+010C-010F, U+011A-011B, U+0147-0148, U+0158-0161, U+0164-0165, U+016E-016F, U+017D-017E; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/playfair-display-latin-ext-700-italic.woff2") format("woff2"); unicode-range: U+010C-010F, U+011A-011B, U+0147-0148, U+0158-0161, U+0164-0165, U+016E-016F, U+017D-017E; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/playfair-display-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+010C-010F, U+011A-011B, U+0147-0148, U+0158-0161, U+0164-0165, U+016E-016F, U+017D-017E; }


:root {
  --pravitko: rgba(90, 56, 37, .38);       /* rysky dílenského metru */
  --tma: #1c1712;                           /* tmavá plocha (hero, CTA) */
  --krem-text: #FAF7F0;
  --zlatava: #d8b48c;                       /* světlo na dřevě, drobné akcenty na tmavé */
}

/* ── 1 · TYPOGRAFIE ──────────────────────────────────────────────
   Playfair jen ve 500/600, těsnější prostrkání velkých stupňů.
   Logo už ne v řezu 800 (ten Playfair ani nemá, prohlížeč ho dělal
   uměle tučný). */
h1, h2 { font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
h1 { line-height: 1.04; }
h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.nav__logo, .footer .logo {
  font-weight: 600;
  letter-spacing: -0.015em;
}
.value__num { font-weight: 500; }

/* ── 2 · HLAVIČKA ────────────────────────────────────────────────
   Na stránce s fotkou přes celou šířku (úvod) je hlavička průhledná
   a světlá, po posunu se vrátí krémová. Na ostatních stránkách zůstává
   krémová. Na počítači menu nikdy nemá pozadí ani stín. */
@media (min-width: 881px) {
  .nav__menu { position: static; transform: none; background: none; box-shadow: none; border: 0; padding: 0; height: auto; width: auto; }
}
.nav--pres-foto { position: fixed; left: 0; right: 0; background: transparent; }
.nav--pres-foto:not(.is-scrolled) .nav__logo,
.nav--pres-foto:not(.is-scrolled) .nav__logo span { color: var(--krem-text); }
.nav--pres-foto:not(.is-scrolled) .nav__logo span { color: var(--zlatava); }
@media (min-width: 881px) {
  .nav--pres-foto:not(.is-scrolled) .nav__links a { color: rgba(250, 247, 240, .86); }
  .nav--pres-foto:not(.is-scrolled) .nav__links a:hover,
  .nav--pres-foto:not(.is-scrolled) .nav__links a[aria-current="page"] { color: var(--krem-text); }
  .nav--pres-foto:not(.is-scrolled) .nav__links a::after { background: var(--zlatava); }
}
.nav--pres-foto:not(.is-scrolled) .nav__toggle { border-color: rgba(250, 247, 240, .4); }
.nav--pres-foto:not(.is-scrolled) .nav__toggle span { background: var(--krem-text); }
body.menu-open .nav--pres-foto .nav__toggle span { background: var(--ink); }
.nav--pres-foto::before {
  /* jemná clona pod hlavičkou, aby menu bylo čitelné i přes světlou část fotky */
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 15, 11, .55), rgba(20, 15, 11, 0));
  transition: opacity .3s var(--ease);
}
.nav--pres-foto.is-scrolled::before { opacity: 0; }
.nav--pres-foto + .nav__scrim + main .hero-full { min-height: min(100vh, 900px); }
.nav--pres-foto + .nav__scrim + main .hero-full__inner { padding-top: clamp(120px, 18vh, 170px); }

/* ── 3 · HERO ────────────────────────────────────────────────────
   Fotka se po načtení pomalu „usadí“ (zmenšení z 1,07 na 1 za 2,8 s,
   jednou). Je to pohyb kamery, ne efekt — dívá se do dílny. */
@media (prefers-reduced-motion: no-preference) {
  .hero-full__bg { animation: usadit 2.8s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes usadit { from { transform: scale(1.07); } to { transform: none; } }
}
.hero-full__copy { max-width: 880px; }
.hero-full__copy h1 { font-size: clamp(40px, 5.6vw, 84px); }
.hero-full__copy .lead { max-width: 540px; }
.hero-full__badge { border-radius: 0; box-shadow: none; }

/* ── 4 · SLUŽBY (úvod, „Co pro vás postavíme“) ────────────────────
   První služba (kuchyně) přes celou šířku, fotka a text vedle sebe.
   Zbylé čtyři ve dvou sloupcích. Fotka se při najetí přiblíží uvnitř
   svého ořezu, karta se nehýbe. */
@media (min-width: 761px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-cat, .card-cat:nth-child(4), .card-cat:nth-child(5) { grid-column: auto; }
  .card-cat:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .card-cat:first-child .card__media .photo { aspect-ratio: auto; height: 100%; min-height: 380px; }
  .card-cat:first-child .card__body { justify-content: flex-end; padding: clamp(28px, 3.4vw, 48px); }
  .card-cat:first-child .card__body h3 { font-size: clamp(28px, 2.6vw, 38px); }
}
.card-cat .card__media .photo { transition: transform .9s var(--ease), filter .35s var(--ease); }
.card-cat:hover .card__media .photo { transform: scale(1.04); }
.card-cat .card__body h3 { position: relative; padding-top: 14px; }
.card-cat .card__body h3::before {
  /* krátká ryska jako rys tužkou */
  content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 1px; background: var(--oak);
}
.card-cat { counter-increment: sluzba; }
.cards { counter-reset: sluzba; }
.card-cat .card__body::before {
  content: counter(sluzba, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--oak);
  margin-bottom: 14px;
}

/* ── 5 · GALERIE ─────────────────────────────────────────────────
   Na dotyku popisek vidět vždy (hover tam nejde). */
@media (hover: none) { .gallery__overlay { opacity: 1; background: linear-gradient(to top, rgba(44, 38, 32, .6), rgba(44, 38, 32, 0) 45%); } }
.gallery__item { overflow: hidden; }
.gallery__item .photo { transition: transform .9s var(--ease), filter .35s var(--ease); }

/* ── 6 · DÍLENSKÝ METR (postup výroby, O dílně) ──────────────────
   Nad kroky běží rysky jako na skládacím metru. Při prvním zobrazení
   se metr „vytáhne“ zleva (scaleX), čísla kroků sedí na velkých ryskách. */
.process { position: relative; padding-top: 22px; }
.process::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  transform-origin: left; transition: transform 1.4s var(--ease);
}
.process::before {
  background:
    repeating-linear-gradient(90deg, var(--walnut) 0 1px, transparent 1px calc(100% / 5)) 0 0 / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, var(--pravitko) 0 1px, transparent 1px 16px) 0 0 / 100% 7px no-repeat,
    linear-gradient(var(--walnut), var(--walnut)) 0 0 / 100% 1px no-repeat;
}
.js .process:not(.je-videt)::before { transform: scaleX(0); }
.process .step__num { border-top: 0; padding-top: 6px; font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: .1em; color: var(--oak); }
.process .step__num::before { content: "0"; }
.process .step h3 { font-size: 22px; }
@media (max-width: 760px) {
  .process { padding-top: 0; padding-left: 22px; }
  .process::before {
    left: 0; top: 0; bottom: 0; right: auto; width: 14px; height: auto;
    background:
      repeating-linear-gradient(180deg, var(--pravitko) 0 1px, transparent 1px 14px) 0 0 / 7px 100% no-repeat,
      linear-gradient(var(--walnut), var(--walnut)) 0 0 / 1px 100% no-repeat;
    transform-origin: top;
  }
  .js .process:not(.je-videt)::before { transform: scaleY(0); }
  .process .step h3 { border-top: 0; }
}

/* ── 7 · VÝZVA NA KONCI STRÁNEK ──────────────────────────────────
   Místo ploché zelené čelní řez dubu (letokruhy) pod tmavou clonou.
   Zelená zůstává v tlačítku a v jemném nádechu clony. */
.section--forest {
  position: relative; isolation: isolate; background: var(--tma);
}
.section--forest::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("images/cta-dub.webp") center / cover no-repeat;
  opacity: .55;
}
.section--forest::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 90% at 50% 50%, rgba(28, 23, 18, .55), rgba(28, 23, 18, .9)),
    linear-gradient(180deg, rgba(36, 61, 51, .35), rgba(28, 23, 18, .2));
}
.section--forest .cta-banner h2 { font-size: clamp(34px, 4.6vw, 60px); }
.section--forest .btn--light { background: var(--krem-text); color: var(--forest-deep); border-radius: 2px; }
.section--forest .btn--light:hover { background: #fff; }

/* ── 8 · PATIČKA ─────────────────────────────────────────────────
   Nad patičkou úzký pruh rysek (stejný metr jako v postupu). */
.footer { position: relative; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: repeating-linear-gradient(90deg, rgba(216, 180, 140, .35) 0 1px, transparent 1px 12px) 0 0 / 100% 6px no-repeat,
              repeating-linear-gradient(90deg, rgba(216, 180, 140, .6) 0 1px, transparent 1px 120px) 0 0 / 100% 10px no-repeat;
}
.footer .logo { font-size: 26px; }
.footer__social a { border-radius: 2px; }

/* ── 9 · PODSTRÁNKY: hlavička stránky ────────────────────────────
   Pod nadpisem podstránky metr místo prosté linky. */
.page-hero { position: relative; }
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  background: repeating-linear-gradient(90deg, var(--pravitko) 0 1px, transparent 1px 12px) 0 100% / 100% 5px no-repeat,
              repeating-linear-gradient(90deg, var(--walnut) 0 1px, transparent 1px 120px) 0 100% / 100% 9px no-repeat;
  opacity: .7;
}

/* ── 10 · TLAČÍTKA ───────────────────────────────────────────────── */
.btn { border-radius: 2px; letter-spacing: .01em; }
.btn--cta:hover { background: var(--forest-deep); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--oak); outline-offset: 3px; }

/* ── 11 · PODSTRÁNKY: materiál vpravo v hlavičce stránky ────────────
   Na počítači vpravo detail dřeva (spoj, čelní řez, ořech), který se
   doleva rozplyne do krémové. Každá podstránka jiný kus dřeva. Na
   telefonu se nezobrazuje (text má přednost). */
@media (min-width: 881px) {
  .page-hero { overflow: hidden; isolation: isolate; }
  .page-hero::before {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 46%; z-index: -1;
    background: var(--page-hero-drevo, url("images/strana-spoj.webp")) center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
    opacity: .9;
  }
}

/* ============================================================
   12 · VIDEO V ÚVODU (11. 10. 2026)
   Leží nad plakátem (stejný první snímek), objeví se až když hraje.
   Přidává ho app.js jen od 600 px, bez omezeného pohybu a bez
   úsporného režimu dat. Závoj (.hero-full__overlay) je nad ním.
   ============================================================ */
.hero-full__video { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.hero-full__video.hraje { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-full__video { display: none; } }

/* ============================================================
   13 · O DÍLNĚ: FOTKA NÁŘADÍ POD CITÁTEM (11. 10. 2026)
   Široký výřez jako pás dřeva, jen z dílny. Bez popisku.
   ============================================================ */
.dilna-foto { margin: 0 0 clamp(56px, 9vw, 100px); overflow: hidden; }
.dilna-foto img { display: block; width: 100%; height: clamp(220px, 34vw, 460px); object-fit: cover; object-position: center 45%; }

/* ============================================================
   14 · PATIČKA: NADPISY SLOUPCŮ (11. 10. 2026)
   Byly <h4> hned po <h2>, čtečky hlásily přeskočenou úroveň.
   Teď <h2 class="footer__nadpis"> se stejným vzhledem jako dřív.
   ============================================================ */
.footer .footer__nadpis {
  font-family: var(--font-body); font-size: 13px; line-height: 1.4; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(250,247,240,.5); font-weight: 600; margin: 0 0 18px; text-wrap: initial;
}