/* GENEROVÁNO bin/sestav-kostru.py z navrh/casti/*.css — NEEDITUJ.
   Vzhled se mění v návrhu, ne tady. */

/* ==== zaklad ==== */
/* Sdílený základ – vytaženo ze schválené úvodní stránky.
   ⚠️ Needituj tady barvy a rozměry zvlášť: úvodní stránka a podstránky
   musí zůstat stejné. Když se něco mění, mění se to jen tady. */
/* =========================================================================
   VARIANTA 3 — „Na louce“
   Myšlenka: prodat pocit, ne fakta. Louka pod zámkem, podzimní listí,
   teplé světlo. Vede fotka, text ji jen doprovází. Podpisový prvek je
   pás smečky: portréty v obloukovém rámu, které se překrývají tak, jak
   psi sedí vedle sebe.
   ========================================================================= */
:root {
  --louka:   #23401E;
  --louka-2: #1A2F17;
  --svetlo:  #F7F3E9;
  --svetlo-2:#EDE6D6;
  --inkoust: #26200F;
  --inkoust-70:#5B5341;
  --inkoust-45:#8C8471;
  --slunce:  #C87A15;
  --mech:    #7C9E52;
  --pruh:    #152A11;   /* tmavá zeleň připnutého menu, tmavší než sekce */

  --f-nadpis: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
  --f-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --sirka: 1200px;
  --krok: clamp(3.5rem, 8vw, 6.5rem);
  --oblouk: 50% 50% 6px 6px / 30% 30% 2% 2%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --svetlo:#14160F; --svetlo-2:#1C1F16; --inkoust:#EFEBDD;
    --inkoust-70:#BDB6A3; --inkoust-45:#8B8574; --louka:#16240F; --louka-2:#101A0C;
    --slunce:#E8A33F; --mech:#9DC26F; --pruh:#0E1D0B;
  }
}
:root[data-theme="dark"] {
  --svetlo:#14160F; --svetlo-2:#1C1F16; --inkoust:#EFEBDD;
  --inkoust-70:#BDB6A3; --inkoust-45:#8B8574; --louka:#16240F; --louka-2:#101A0C;
  --slunce:#E8A33F; --mech:#9DC26F; --pruh:#0E1D0B;
}

* { box-sizing:border-box; }
/* ⚠️ Vlastní `display:` na prvku přebíjí výchozí `[hidden] { display:none }`
   prohlížeče. Doplatil na to lightbox a pak i cookie lišta — ta po
   odsouhlasení nezmizela a překrývala spodek stránky (14. 9. 2026).
   Proto jednou pro všechny a natvrdo, ať to nemusí hlídat každá součástka. */
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
/* Kotva nemá končit přesně na hraně okna. */
[id] { scroll-margin-top:88px; }

/* --- Nástup prvků při rolování -------------------------------------------
   ⚠️ Třídu .nastup nepřidává HTML, ale skript v patičce. Kdyby se skript
   nespustil nebo spadl, nic se neskryje a stránka zůstane normálně vidět.
   Proto se sem nikdy nepíše .nastup do markupu ručně. */
.nastup {
  opacity:0; transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.nastup.uvnitr { opacity:1; transform:none; }
body {
  margin:0; background:var(--svetlo); color:var(--inkoust);
  font-family:var(--f-text); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }
a { color:inherit; }
p { margin:0; }
h1,h2,h3 { margin:0; font-family:var(--f-nadpis); font-weight:700; line-height:1.06; letter-spacing:-.02em; text-wrap:balance; }
.obal { width:100%; max-width:var(--sirka); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.4rem); }
.sekce { padding:var(--krok) 0; }
.stitek { font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--slunce); }

.btn {
  display:inline-block; text-decoration:none; font-weight:600; font-size:.97rem;
  padding:.85rem 1.7rem; border-radius:999px; border:2px solid transparent;
  background:var(--slunce); color:#fff;
  transition:transform .16s ease, box-shadow .16s ease;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(200,122,21,.32); }
.btn.duty { background:transparent; border-color:currentColor; color:inherit; }
:focus-visible { outline:3px solid var(--slunce); outline-offset:3px; }

/* --- Souhlas s cookies a zamčené vložky -----------------------------------
   ⚠️ Lišta je v markupu `hidden` a ukáže ji až skript; bez JavaScriptu se
   stejně nic cizího nenačte, tak není co povolovat. */
.souhlas { position:fixed; inset:auto 0 0 0; z-index:60; padding:clamp(.8rem,2vw,1.4rem); display:flex; justify-content:center; }
.souhlas-okno {
  width:100%; max-width:640px; background:var(--svetlo); color:var(--inkoust);
  border:1px solid rgba(38,32,15,.14); border-radius:18px;
  box-shadow:0 18px 50px rgba(21,42,17,.28); padding:clamp(1.1rem,3vw,1.7rem);
  max-height:calc(100vh - 2rem); overflow:auto;
}
.souhlas-okno h2 { font-size:1.25rem; margin-bottom:.5rem; }
.souhlas-okno p { font-size:.95rem; color:var(--inkoust-70); }
.souhlas-volby { display:grid; gap:.7rem; margin:1rem 0; }
.souhlas-volby label { display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--inkoust-70); }
.souhlas-volby input { margin-top:.25rem; accent-color:var(--slunce); }
.souhlas-volby strong { color:var(--inkoust); }
.souhlas-tlacitka { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.souhlas-tlacitka .btn { padding:.7rem 1.3rem; font-size:.92rem; }
/* Na úzkém displeji ať tlačítka nejsou tři vedle sebe po dvou slovech. */
@media (max-width:520px) { .souhlas-tlacitka .btn { flex:1 1 100%; text-align:center; } }

.vlozka-vyzva {
  display:flex; flex-direction:column; justify-content:center; gap:.6rem;
  min-height:220px; height:100%; padding:1.4rem; text-align:center;
  background:var(--svetlo-2); border:1px dashed rgba(38,32,15,.28); border-radius:14px;
  color:var(--inkoust-70); font-size:.92rem;
}
.vlozka-vyzva strong { color:var(--inkoust); font-size:1.02rem; }
.vlozka-vyzva .btn { padding:.6rem 1.2rem; font-size:.9rem; }
.vlozka { height:100%; }
/* Patička: odkaz na vrácení lišty stojí vedle ostatního drobného textu. */
.pata .dole [data-souhlas-znovu] { color:rgba(255,255,255,.72); }

/* ==== hlavicka ==== */
/* --- Hlavička ------------------------------------------------------------
   Leží přes fotku, proto pod ní vede jemný přechod do černé. Bez něj se
   menu ztrácí, jakmile je pod ním rozsvícená obloha nebo strniště. */
.hlava {
  position:fixed; top:0; left:0; right:0; z-index:30;
  transition:background-color .28s ease, box-shadow .28s ease;
}
.hlava::before {
  /* Pás je schválně vyšší než hlavička (92 px). Když končil s ní, přechod
     se nestihl rozvinout a byl skoro k nepoznání. Takhle plynule dojede
     do fotky a bílé logo i menu se od ní oddělí. */
  content:""; position:absolute; top:0; left:0; right:0; height:240px; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.44) 30%,
    rgba(0,0,0,.20) 60%,
    rgba(0,0,0,0) 100%);
  transition:opacity .28s ease;
}
.hlava .obal {
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:98px; padding-top:.85rem; padding-bottom:.85rem;
  transition:min-height .28s ease;
}

/* Jakmile se odroluje z hero, hlavička se připne jako tmavě zelený pruh.
   Zeleň je schválně tmavší než sekce webu (--louka i --louka-2), aby se
   pruh neslil s obsahem, přes který zrovna leží.
   Přechod do černé se schová – pod plnou barvou nemá co dělat. */
.hlava.pripnuta { background:var(--pruh); box-shadow:0 8px 28px rgba(0,0,0,.34); }
.hlava.pripnuta::before { opacity:0; }
.hlava.pripnuta .obal { min-height:70px; }
.hlava.pripnuta .znacka { --znacka-vyska:48px; --text-vyska:38px; }
.hlava.pripnuta .znacka .jmeno { font-size:1.5rem; }
.hlava.pripnuta .znacka .jmeno,
.hlava.pripnuta .menu a { text-shadow:none; }
.hlava.pripnuta .nav-prepinac { background:rgba(255,255,255,.08); }
.znacka .mark, .znacka .napis, .znacka .plemena-znacky { transition:width .28s ease, height .28s ease; }
.znacka .jmeno { transition:font-size .28s ease; }

/* Značka: oblouk vlevo, vedle něj název s oborem, za svislým předělem
   tři plemena. Text se s obloukem nelícuje — je na jeho střed. Oba textové
   sloupce ale mají shodnou výšku (--text-vyska) a rozpouštějí se v ní přes
   space-between, takže navzájem lícují nahoře i dole. */
.znacka {
  --znacka-vyska:64px; --text-vyska:50px;
  display:flex; align-items:center; gap:1.05rem; color:#fff; text-decoration:none;
}
.znacka .mark { flex:none; display:block; width:var(--znacka-vyska); height:var(--znacka-vyska); }
.znacka .napis {
  display:flex; flex-direction:column; justify-content:space-between;
  height:var(--text-vyska);
}
.znacka .jmeno {
  font-family:var(--f-nadpis); font-weight:800; font-size:2.15rem;
  text-transform:uppercase; letter-spacing:.05em; line-height:.9;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(10,20,8,.45), 0 2px 14px rgba(10,20,8,.5);
}
.znacka .obor {
  font-size:.78rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  opacity:.85; line-height:1; white-space:nowrap;
  text-shadow:0 1px 3px rgba(10,20,8,.55);
}
.znacka .plemena-znacky {
  display:flex; flex-direction:column; justify-content:space-between;
  height:var(--text-vyska);
  padding-left:1.05rem; border-left:1px solid rgba(255,255,255,.5);
  box-shadow:inset 1px 0 0 rgba(10,20,8,.28);
  font-size:.74rem; line-height:1; opacity:.8; white-space:nowrap;
  text-shadow:0 1px 3px rgba(10,20,8,.55);
}
/* V připnutém pruhu a na užším okně zbyde jen název s oborem. */
.hlava.pripnuta .znacka .plemena-znacky { display:none; }
@media (max-width:1180px) {
  .hlava .znacka { --znacka-vyska:54px; --text-vyska:42px; }
  .hlava .znacka .plemena-znacky { display:none; }
  .hlava .znacka .jmeno { font-size:1.5rem; }
}
@media (max-width:560px) { .hlava .znacka { --znacka-vyska:46px; --text-vyska:36px; } .hlava .znacka .jmeno { font-size:1.28rem; } }

/* V patičce plemena zůstávají i na mobilu, ale vedle názvu by se nevešla
   (mají nezalomitelné řádky) – tak se přesunou pod něj a předěl zmizí. */
@media (max-width:620px) {
  .pata .znacka { flex-wrap:wrap; --znacka-vyska:58px; --text-vyska:46px; }
  .pata .znacka .jmeno { font-size:1.75rem; }
  .pata .znacka .plemena-znacky {
    flex-basis:100%; height:auto; margin-top:.85rem;
    padding-left:0; border-left:0; box-shadow:none; gap:.28rem;
  }
}

/* Přepínač menu se ukazuje jen na úzkém okně a jen když běží JS —
   bez skriptu by se menu nedalo rozbalit a návštěvník by zůstal bez navigace. */
.nav-prepinac {
  display:none; position:relative; z-index:2;
  width:2.9rem; height:2.9rem; padding:0; flex:none;
  border:1.5px solid rgba(255,255,255,.45); border-radius:50%;
  background:rgba(0,0,0,.18); cursor:pointer;
}
.nav-prepinac span {
  position:absolute; left:50%; width:1.15rem; height:2px; margin-left:-.575rem;
  border-radius:2px; background:#fff;
  transition:transform .25s ease, opacity .2s ease;
}
.nav-prepinac span:nth-child(1) { top:1.05rem; }
.nav-prepinac span:nth-child(2) { top:1.4rem; }
.nav-prepinac span:nth-child(3) { top:1.75rem; }
.nav-prepinac[aria-expanded="true"] span:nth-child(1) { transform:translateY(.35rem) rotate(45deg); }
.nav-prepinac[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-prepinac[aria-expanded="true"] span:nth-child(3) { transform:translateY(-.35rem) rotate(-45deg); }

.menu { display:flex; gap:1.9rem; flex-wrap:wrap; }
.menu a {
  position:relative; color:#fff; text-decoration:none;
  font-size:1.02rem; font-weight:600; letter-spacing:.005em;
  text-shadow:0 1px 2px rgba(10,20,8,.45), 0 2px 14px rgba(10,20,8,.5);
  padding:.2rem 0;
}
.menu a::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--slunce); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.menu a:hover::after, .menu a:focus-visible::after { transform:scaleX(1); }

/* --- Vysouvací podmenu ---------------------------------------------------
   Položka menu, která má podstránky, je ukáže na najetí. Panel visí pod
   položkou; ⚠️ `padding-top` na .polozka schválně není — mezera mezi
   odkazem a panelem by ukazatel „ztratila" a menu by se zavíralo dřív,
   než na něj člověk dojede. Panel proto začíná těsně pod položkou. */
.menu .polozka { position:relative; display:inline-flex; align-items:center; }
.podmenu {
  position:absolute; top:calc(100% + .85rem); left:50%; transform:translateX(-50%);
  z-index:5; display:none; flex-direction:column; min-width:13rem;
  padding:.5rem 0; border-radius:14px;
  background:var(--pruh); box-shadow:0 18px 40px rgba(0,0,0,.34);
}
/* Neviditelný můstek přes mezeru nahoru, aby cesta na panel nepřerušila hover. */
.podmenu::before { content:""; position:absolute; left:0; right:0; top:-.85rem; height:.85rem; }
.menu .polozka:hover > .podmenu,
.menu .polozka:focus-within > .podmenu { display:flex; }
.podmenu .polozka { display:block; position:relative; }
.podmenu a {
  display:block; padding:.55rem 1.1rem; font-size:.95rem; font-weight:500;
  text-shadow:none; white-space:nowrap;
}
/* ⚠️ Třetí úroveň vyjíždí do strany, ne dolů — pod druhou by pro ni nebylo
   místo a panel by spadl mimo obrazovku. Můstek `::before` proto taky vede
   doleva, aby cesta na panel nepřerušila hover (Michal, 10. 9. 2026). */
.podmenu-3 { top:-.5rem; left:100%; transform:none; margin-left:.3rem; }
.podmenu-3::before { top:0; bottom:0; left:-.6rem; right:auto; width:.6rem; height:auto; }
/* Šipka u položky, která má další úroveň. */
.podmenu .polozka > a[aria-expanded]::after {
  content:""; position:absolute; right:.75rem; top:50%;
  width:.4rem; height:.4rem; margin-top:-.25rem;
  border-right:2px solid var(--slunce); border-bottom:2px solid var(--slunce);
  transform:rotate(-45deg); background:none;
}
.podmenu .polozka > a[aria-expanded] { padding-right:1.9rem; }
.podmenu a::after { display:none; }
.podmenu a:hover, .podmenu a:focus-visible { background:rgba(255,255,255,.12); }

@media (max-width:980px) {
  .js .nav-prepinac { display:block; }
  .js .menu {
    position:absolute; top:100%; left:0; right:0; z-index:1;
    display:none; flex-direction:column; gap:0;
    padding:.25rem clamp(1.1rem,4vw,2.4rem) 1rem;
    background:var(--pruh); box-shadow:0 18px 40px rgba(0,0,0,.4);
  }
  .js .menu.otevreno { display:flex; animation:menu-dolu .22s ease; }
  .js .menu .polozka { display:block; }
  .js .menu > .polozka > a {
    display:block;
    font-size:1.12rem; padding:.95rem .1rem; text-shadow:none;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .js .menu > .polozka:last-child > a { border-bottom:0; }
  .js .menu a::after { display:none; }
  /* Na úzkém okně panel nevisí, ale rozbaluje se pod položkou. Rodičovská
     položka je tady rozbalovátko, ne odkaz — na rozcestník se stejně
     nechodí, je to stránka pro velký displej (Michal, 10. 9. 2026). */
  .js .menu .polozka > a[aria-expanded]::before {
    content:""; float:right; width:.55rem; height:.55rem; margin:.42rem .35rem 0 0;
    border-right:2px solid var(--slunce); border-bottom:2px solid var(--slunce);
    transform:rotate(45deg); transition:transform .2s ease;
  }
  .js .menu .polozka.otevreno > a[aria-expanded]::before { transform:rotate(-135deg); margin-top:.62rem; }
  .js .podmenu {
    position:static; transform:none; display:none; min-width:0;
    padding:.2rem 0 .6rem; border-radius:0; background:transparent; box-shadow:none;
  }
  .js .podmenu::before { display:none; }
  .js .menu .polozka.otevreno > .podmenu { display:flex; }
  .js .menu .polozka:hover > .podmenu { display:none; }
  .js .menu .polozka.otevreno:hover > .podmenu { display:flex; }
  .js .podmenu a { padding:.6rem .1rem .6rem 1.1rem; font-size:1rem; opacity:.9; }
  /* Třetí úroveň se na mobilu jen odsadí dál, žádné vyjíždění do strany. */
  .js .podmenu-3 { margin-left:0; padding:0 0 .3rem; }
  .js .podmenu-3 a { padding-left:2.2rem; font-size:.95rem; opacity:.8; }
  .js .podmenu .polozka > a[aria-expanded]::after { display:none; }
  .js .podmenu .polozka > a[aria-expanded]::before {
    content:""; float:right; width:.45rem; height:.45rem; margin:.45rem .5rem 0 0;
    border-right:2px solid var(--slunce); border-bottom:2px solid var(--slunce);
    transform:rotate(45deg); transition:transform .2s ease;
  }
  .js .podmenu .polozka.otevreno > a[aria-expanded]::before { transform:rotate(-135deg); margin-top:.6rem; }
}
@keyframes menu-dolu { from { opacity:0; transform:translateY(-.5rem); } to { opacity:1; transform:none; } }

/* ==== paticka ==== */
/* --- Patička ------------------------------------------------------------- */
.pata { background:var(--louka); color:rgba(255,255,255,.72); padding:var(--krok) 0 2.4rem; }
/* --- Loga členství a krmiv (zákaznice, 20. 9. 2026) ----------------------
   Zobrazují se BÍLE: `brightness(0) invert(1)` udělá z libovolného podkladu
   čistou bílou siluetu, takže barvy log nesoupeří s patičkou.
   ⚠️ Logo k tomu musí mít průhlednost — z plné plochy by vznikl bílý
   obdélník. Proto tu není ČMKU, jehož znak je celý vyplněný.
   ⚠️ 20. 9. se to psalo rovnou do web/css/web.css a 23. 9. to další
   sestav-kostru.py smazal. Místo je TADY, ve zdroji. */
.pata .loga { display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:center;
  margin:3rem 0 0; padding:1.3rem 0;
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16); }
.pata .loga .skupina { display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; }
.pata .loga .popis { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); }
.pata .loga img { height:32px; width:auto; display:block;
  filter:brightness(0) invert(1); opacity:.8; transition:opacity .2s ease; }
.pata .loga a:hover img, .pata .loga a:focus-visible img { opacity:1; }
/* FCI je pro zákaznici důležité a původní logo bylo nečitelné: nápisy
   kolem kolečka a pod ním se v 32 px slily do šedé skvrny. Obrázek je
   z bílého loga od zákaznice předělaný na kolečko vlevo a nápisy vedle
   (nápisy vysázené znovu, zvětšením rastru by se rozmazaly) a stojí
   vyšší než ostatní loga (Michal, 23. 9. 2026). Zdroj: input/FCI-LOG-FPDW-wide.JPG. */
.pata .loga img.fci { height:54px; opacity:.9; }
@media (max-width:560px) { .pata .loga { gap:1.1rem 1.8rem; } .pata .loga img { height:26px; } .pata .loga img.fci { height:44px; } }
.pata a { color:#fff; }
.pata .mriz { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; }
.pata .znacka { --znacka-vyska:68px; --text-vyska:54px; color:#fff; margin-bottom:1rem; }
.pata .znacka .jmeno { font-size:2.25rem; text-shadow:none; }
.pata .znacka .obor, .pata .znacka .plemena-znacky { text-shadow:none; }
.pata .znacka .plemena-znacky { border-left-color:rgba(255,255,255,.28); }
.pata h3 { font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mech); margin-bottom:.8rem; font-family:var(--f-text); font-weight:700; }
.pata ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; font-size:.95rem; }
/* Pruh klubů a krmiv nad copyrightem. Na starém webu to byl widget
   „Odkazy" v pravém sloupci; v patičce z něj zbyly zkratky bez odkazů,
   což je škoda — jsou to weby, kam lidé od chovatelky chodí
   (Michal, 14. 9. 2026). */
/* Linku nad odkazy nese spodní okraj pásu log — jinak by byly dvě přes sebe. */
.pata .kluby { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1.1rem;
  margin-top:1.4rem; font-size:.82rem; }
.pata .kluby a { color:rgba(255,255,255,.72); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28); }
.pata .kluby a:hover { color:#fff; border-bottom-color:#fff; }
.pata .kluby .krmivo { color:rgba(255,255,255,.5); }
.pata .kluby .vic { margin-left:auto; color:var(--mech); border-bottom-color:currentColor; }
@media (max-width:700px) { .pata .kluby .vic { margin-left:0; } }

.pata .dole { margin-top:1.2rem; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); }
@media (max-width:880px) { .pata .mriz { grid-template-columns:1fr; } }

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
  html { scroll-behavior:auto; }
  /* Nic se neskrývá – návštěvník s vypnutými animacemi vidí rovnou vše. */
  .nastup, .nastup.uvnitr, .pas.vlna .pes { opacity:1 !important; transform:none !important; }
}

/* ==== podstranky ==== */
/* =========================================================================
   PODSTRÁNKY — navazuje na schválenou úvodní stránku „Na louce“.
   Nepřidává žádnou novou barvu ani písmo, jen skládá stejné díly:
   obloukový rám, oranžový akcent, tmavě zelené plochy.
   ========================================================================= */

/* Podstránky nemají hero přes celou obrazovku, ale hlavička je fixed —
   proto musí obsah začít pod ní. */
body.podstranka { padding-top:92px; }
@media (max-width:980px) { body.podstranka { padding-top:78px; } }

/* --- Záhlaví stránky ------------------------------------------------------
   Tmavě zelený pruh, ze kterého vyrůstá nadpis. Drží spojitost s připnutým
   menu, které má stejnou zeleň. */
.zahlavi { position:relative; background:var(--louka); color:#fff; padding:clamp(2.4rem,5vw,4rem) 0 clamp(2.6rem,5.5vw,4.2rem); }
/* --- Sociální sítě v záhlaví -------------------------------------------
   ⚠️ Sedí v zeleném záhlaví, tedy na každé stránce KROMĚ úvodní — ta záhlaví
   nemá, začíná hero fotkou. Drží se vpravo nahoře, nad drobečky: je to
   doprovod, ne navigace, takže tok stránky nepřerušuje (Michal, 10. 9. 2026). */
.zahlavi .obal { position:relative; }
/* ⚠️ Ikony stojí POD SEBOU a natahují se přes celou výšku textu vlevo:
   horní lícuje s drobečky, dolní se spodkem nadpisu (nebo perexu). Vpravo
   sedí na okraji obalu, tedy v jedné svislici s pravým koncem menu
   (Michal, 10. 9. 2026). */
.socialni {
  position:absolute; top:0; bottom:0; right:clamp(1.1rem,4vw,2.4rem); z-index:1;
  display:flex; flex-direction:column; justify-content:space-between; gap:.45rem;
}
.socialni a {
  display:grid; place-items:center; width:2.1rem; height:2.1rem;
  border-radius:50%; color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.22);
  transition:color .2s ease, background-color .2s ease, border-color .2s ease;
}
.socialni svg { width:1.15rem; height:1.15rem; display:block; }
.socialni a:hover, .socialni a:focus-visible {
  color:var(--louka); background:#fff; border-color:#fff;
}
/* ⚠️ Na úzkém okně se ikony vysadí z absolutní pozice do toku. Vpravo
   nahoře se překrývaly s drobečky — obojí se pralo o tentýž roh
   (Michal, 10. 9. 2026). V markupu stojí před drobečky, takže se v toku
   samy postaví nad ně. */
@media (max-width:600px) {
  /* ⚠️ Na mobilu zpátky do řádku: svislý sloupec tří ikon nad drobečky by
     ukrojil čtvrtinu obrazovky, a natahovat ho přes výšku textu nemá kam. */
  .socialni {
    position:static; flex-direction:row; gap:.4rem; justify-content:flex-start;
    margin-bottom:1.1rem;
  }
  .socialni a { width:1.9rem; height:1.9rem; }
  .socialni svg { width:1rem; height:1rem; }
}
.zahlavi h1 { font-size:clamp(2.1rem,5vw,3.4rem); margin-bottom:.8rem; }
.zahlavi .perex { max-width:60ch; color:rgba(255,255,255,.75); font-size:1.05rem; }

/* Drobečky. Poslední položka není odkaz — je to místo, kde stojíš. */
.drobecky { font-size:.82rem; color:rgba(255,255,255,.55); margin-bottom:1.1rem; }
.drobecky a { color:rgba(255,255,255,.8); text-decoration:none; }
.drobecky a:hover { color:#fff; text-decoration:underline; }
.drobecky span { padding:0 .45rem; color:rgba(255,255,255,.35); }

/* --- Mřížka karet (psi, vrhy, sekce galerie) ------------------------------ */
.mrizka { display:grid; gap:clamp(1.4rem,3vw,2.4rem); }
.mrizka.tri { grid-template-columns:repeat(3,1fr); }
.mrizka.dve { grid-template-columns:repeat(2,1fr); }
@media (max-width:880px) { .mrizka.tri { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .mrizka.tri, .mrizka.dve { grid-template-columns:1fr; } }

.karta { text-decoration:none; color:inherit; display:block; }
/* ⚠️ Rám je na šířku, ne na výšku. Původní 3/4 vypadal na návrhu dobře,
   jenže fotky psů ze starého webu jsou celé postavy na šířku (poměr
   1,33–1,51) — do vysokého rámu se vešlo jen 50–56 % jejich šířky a psům
   to uřízlo hlavu. Se 4/3 je vidět 88–100 %. Změřeno nad všemi devíti. */
.karta .ram {
  overflow:hidden; border-radius:var(--oblouk); background:var(--svetlo-2);
  aspect-ratio:4/3; box-shadow:0 12px 30px rgba(0,0,0,.14);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
/* Svisle se teď skoro nic neořezává, takže není proč táhnout výřez nahoru. */
.karta .ram img { width:100%; height:100%; object-fit:cover; object-position:center; }
.karta:hover .ram { transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,.2); }
.karta h3 { font-size:1.3rem; margin-top:1rem; }
.karta .co { font-size:.85rem; color:var(--inkoust-45); margin-top:.2rem; }
/* Karty vrhů a galerií jsou na šířku, ne portréty. */
.mrizka.dve .karta .ram, .mrizka.sirka .karta .ram { aspect-ratio:4/3; }

/* --- Detail psa ----------------------------------------------------------- */
.medailonek { display:grid; grid-template-columns:minmax(0,380px) 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
/* ⚠️ Portrét je na šířku ze stejného důvodu jako karta v přehledu:
   fotky psů jsou celé postavy na šířku a do vysokého rámu se z nich
   vešla jen půlka — bez hlavy. */
.medailonek .portret { border-radius:var(--oblouk); overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.2); }
.medailonek .portret img { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center; }
@media (max-width:820px) { .medailonek { grid-template-columns:1fr; } }

/* Údaje o psovi. Definiční seznam, ne tabulka — je to popis, ne mřížka.
   ⚠️ Starý web na tohle používal <table>, to se nepřenáší. */
.udaje { margin:0 0 2rem; padding:1.4rem 1.6rem; background:var(--svetlo-2); border-radius:14px; }
.udaje div { display:grid; grid-template-columns:9.5rem 1fr; gap:.4rem 1rem; padding:.42rem 0; }
.udaje div + div { border-top:1px solid rgba(0,0,0,.07); }
.udaje dt { font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--inkoust-45); align-self:center; }
.udaje dd { margin:0; }
@media (max-width:480px) { .udaje div { grid-template-columns:1fr; gap:.1rem; } }

/* Tituly jako štítky – bývá jich hodně a v odstavci by se ztratily. */
.tituly { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.4rem; }
.tituly span { font-size:.76rem; font-weight:700; letter-spacing:.04em; padding:.3rem .7rem; border-radius:999px; background:var(--slunce); color:#fff; }
/* Rodokmen a dokumenty pod portrétem. U Eliáše je jich pět, tak menší
   tlačítka, která se zalomí, místo jednoho velkého pod druhým. */
.dokumenty { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.dokumenty .btn { font-size:.85rem; padding:.55rem 1.1rem; }

/* Kam za výsledky žijícího psa — jeho medailonek je nemá, jsou v Aktivitách.
   Je to rozcestník, ne obsah, tak drží při zemi: bez rámečku, jen odsazené
   od galerie pod ním. */
.kde-vysledky { margin-top:2.2rem; color:var(--inkoust-70); max-width:72ch; }
.kde-vysledky a { font-weight:600; }

/* --- Text z redakce -------------------------------------------------------
   Sem padá obsah, který píše zákaznice. Musí vypadat rozumně, i když do něj
   vloží cokoli — proto se stylují značky, ne třídy. */
.text { max-width:72ch; }
.text > * + * { margin-top:1.1rem; }
.text h2 { font-size:clamp(1.5rem,3vw,2rem); margin-top:2.4rem; }
.text h3 { font-size:1.2rem; margin-top:1.8rem; }
.text p { color:var(--inkoust-70); }
.text a { color:var(--slunce); text-underline-offset:3px; }
.text img { border-radius:12px; margin:1.6rem 0; }
.text ul, .text ol { padding-left:1.3rem; color:var(--inkoust-70); }
.text li + li { margin-top:.4rem; }
.text blockquote { margin:1.6rem 0; padding-left:1.4rem; border-left:4px solid var(--slunce); font-family:var(--f-nadpis); font-size:1.25rem; color:var(--inkoust); }
/* Text přes celou šířku obalu. Používá se tam, kde pod textem stojí něco
   stejně širokého (harmonika výsledků) — jinak by text končil o 300 px dřív
   než čára pod ním a vypadalo by to jako chyba sazby. */
/* Pes bez fotky — místo rozbitého obrázku značka stanice. Týká se psů
   založených v administraci, než k nim zákaznice sežene portrét
   (14. 9. 2026). */
.bez-fotky { display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-height:180px; aspect-ratio:1;
  background:var(--svetlo-2); color:var(--mech); }
.bez-fotky svg { width:46%; height:auto; opacity:.55; }
.portret .bez-fotky { border-radius:var(--oblouk); }

.text.siroky { max-width:none; }

/* --- „Proč štěně od nás": šest důvodů s velkými číslicemi ----------------
   ⚠️ Jeden sloupec. Zkoušely se dva (mřížka i `columns`) — vešly se, ale
   nevypadalo to dobře a Michal je 14. 9. 2026 zamítl.
   Číslice sází counter, ne text: když zákaznice důvod přidá nebo ubere,
   číslování si sedne samo. */
.text.duvody ol {
  list-style:none; padding:0; margin:0; counter-reset:duvod;
}
.text.duvody ol li {
  counter-increment:duvod; margin:0 0 1.8rem;
  padding-left:clamp(3.4rem,5vw,4.8rem); position:relative;
}
.text.duvody ol li + li { margin-top:0; }
.text.duvody ol li::before {
  content:counter(duvod); position:absolute; left:0; top:-.75rem;
  font-family:var(--f-nadpis); font-weight:800; line-height:1;
  font-size:clamp(2.6rem,5vw,3.7rem); color:var(--slunce);
}

/* Mřížka fotek z importu — ve WordPressu to byl `[gallery ids="…"]`, 65×.
   ⚠️ Fotky si z něj nesou inline `float: right` a vlastní okraje; bez téhle
   mřížky se sypaly pod sebe a vedle sebe podle toho, jak se zrovna vešly.
   Inline styl přebije jen `!important`. */
.text .fotky { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; margin:1.6rem 0; }
.text .fotky a { display:block; margin:0; }
.text .fotky img { float:none !important; margin:0 !important; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:10px; background:var(--svetlo-2); }

/* Dvousloupcové rozvržení, které na starém webu dělaly tabulky. */
.text-foto { display:grid; grid-template-columns:1fr minmax(0,300px); gap:clamp(1.6rem,4vw,3rem); align-items:start; }
.text-foto img { border-radius:var(--oblouk); margin:0; }
@media (max-width:760px) { .text-foto { grid-template-columns:1fr; } }

/* --- Galerie s harmonikou -------------------------------------------------
   Na /galerie/vylety/ je padesát galerií. Kdyby se rozbalily všechny,
   je to několik tisíc obrázků na jedné stránce. Proto je otevřená první
   a zbytek se otevírá na kliknutí. */
.harmonika { border-top:1px solid rgba(0,0,0,.1); }
.harmonika details { border-bottom:1px solid rgba(0,0,0,.1); }
.harmonika summary {
  cursor:pointer; list-style:none; padding:1.15rem 0;
  display:flex; align-items:center; gap:1rem;
  font-family:var(--f-nadpis); font-weight:700; font-size:1.18rem;
}
.harmonika summary::-webkit-details-marker { display:none; }
.harmonika summary:hover { color:var(--slunce); }
.harmonika summary .pocet { margin-left:auto; font-family:var(--f-text); font-size:.82rem; font-weight:500; color:var(--inkoust-45); }
/* Šipka se otočí, když je sekce otevřená. */
.harmonika summary .sipka { width:.6rem; height:.6rem; border-right:2.5px solid var(--slunce); border-bottom:2.5px solid var(--slunce); transform:rotate(-45deg); transition:transform .25s ease; flex:0 0 auto; }
.harmonika details[open] summary .sipka { transform:rotate(45deg); }
/* Harmonika kolem konce dlouhého textu (medailonky psů). Nadpis je tu
   výzva ke čtení, ne název sekce, takže je drobnější než u galerií. */
.harmonika.harmonika-textu { margin-top:1.4rem; }
.harmonika-textu summary { font-size:1rem; padding:.9rem 0; color:var(--slunce); }
.harmonika-textu .min { display:none; }
.harmonika-textu details[open] .vic { display:none; }
.harmonika-textu details[open] .min { display:inline; }
.harmonika-textu .schovany { padding-bottom:1.4rem; }
.harmonika-textu .schovany > * + * { margin-top:1.1rem; }

/* ⚠️ Tlačítko uvnitř textu z administrace bylo NEČITELNÉ: `.text a` je
   o třídu specifičtější než `.btn`, takže oranžová barva odkazu přebila
   bílý text tlačítka — na Doplňkových aktivitách z něj byl prázdný
   oranžový bochánek (Michal, 10. 9. 2026). Zákaznice tlačítka do textu
   sází, takže to musí platit obecně, ne jen na jedné stránce. */
.text a.btn { color:#fff; }
.text a.btn.duty { color:inherit; }

/* Ouško výsledků vedle pásu fotek (Pasení). Fotky jsou v obsahu stránky,
   tohle kolem nich jen obtočí dva sloupce. Na úzkém okně jde pás fotek
   pod výsledky — vedle sebe by se do 400 px nevešly. */
.dvojice { display:grid; grid-template-columns:1fr minmax(0,300px); gap:clamp(1.2rem,3vw,2.4rem); align-items:start; margin:1.6rem 0; }
.dvojice-obsah .harmonika { border-top:0; }
.dvojice-obsah .harmonika details:first-child { border-top:1px solid rgba(0,0,0,.1); }
/* ⚠️ Pás fotek má v textu dlaždice od 150 px a v úzkém sloupci mu na dvě
   nezbylo místo — spadl na jednu a z dvou fotek byl pruh přes 600 px,
   vedle kterého zůstalo prázdné pole tam, kde je zavřené ouško.
   Ve dvojici se proto sázejí dva sloupce natvrdo. */
.dvojice-foto .fotky { grid-template-columns:repeat(2,1fr); gap:.55rem; margin:0; }
@media (max-width:760px) { .dvojice { grid-template-columns:1fr; } }

/* Akce po rocích uvnitř harmoniky (dogtrekking). Jede to na .text, takže
   si odstavce nesou obvyklou barvu i odsazení — každý závod na svém řádku,
   jak to bylo na starém webu. Šířku jen vracíme zpátky: vnořený .text by
   se jinak zúžil na 72ch a soupis by končil dřív než úvod nad ním. */
.harmonika .udalosti { max-width:none; padding:.3rem 0 1.5rem; }

/* Pás fotek: zarovnané řady, ne mřížka čtverců.
   Výšku řady drží CSS, šířku každé dlaždice její vlastní poměr stran
   (inline styl z `dlazdice_styl()` v inc/prvky.php) — fotky na šířku jsou
   široké, fotky na výšku úzké a řada vždycky vyjde přesně na šířku obalu.
   ⚠️ `height:100%` na obrázku je nutnost, ne ozdoba: `<img>` má v HTML
   atributy width/height (kvůli poskakování stránky při načítání) a ty
   přebijí `aspect-ratio`. Bez tohohle řádku byly všechny dlaždice
   151 × 400 px — vysoké pruhy, na které si Michal stěžoval. */
.harmonika .fotky { --rada:170px; display:flex; flex-wrap:wrap; gap:.55rem; padding:.4rem 0 1.8rem; }
.harmonika .fotky a {
  display:block; height:var(--rada); overflow:hidden;
  flex-grow:var(--p,1); flex-shrink:1; flex-basis:calc(var(--p,1) * var(--rada));
  min-width:5rem; max-width:calc(var(--rada) * 2.6);
  border-radius:10px; background:var(--svetlo-2);
}
.harmonika .fotky img { width:100%; height:100%; object-fit:cover; display:block; border-radius:0; }
/* Poslední řada se nedoplňuje — `max-width` brání tomu, aby se jediná zbylá
   fotka roztáhla přes celou šířku do proužku. Nižší řada na úzkém displeji
   zároveň znamená užší dlaždice, takže se jich do řady vejde víc než jedna. */
@media (max-width:700px) {
  .harmonika .fotky { --rada:130px; gap:.4rem; }
  /* Na úzkém displeji strop padá: dlaždice přes celou šířku je tam běžný
     pás, ne proužek, a řada tak vyjde přesně i když v ní zbyde jedna fotka. */
  .harmonika .fotky a { max-width:none; }
}

/* --- Výpis novinek --------------------------------------------------------
   448 zápisků od roku 2012. Výpis musí zvládnout i to, že u zápisku není
   fotka — proto je náhled samostatný sloupec, který se dá vynechat. */
.novinky { display:grid; gap:1.6rem; }
/* ⚠️ Zápis NENÍ <a>. Uvnitř jsou odkazy na štítky a odkaz v odkazu HTML
   nedovoluje — prohlížeč element rozřízne a rozvržení se rozsype.
   Klikací je celá plocha, ale dělá to překryv nad odkazem v nadpisu. */
.zapis { position:relative; display:grid; grid-template-columns:200px 1fr;
         gap:1.6rem; align-items:start;
         padding-bottom:1.6rem; border-bottom:1px solid rgba(0,0,0,.09); }
.zapis h3 a { text-decoration:none; color:inherit; }
.zapis h3 a::after { content:""; position:absolute; inset:0; }
/* Štítky musí zůstat klikatelné, tedy nad překryvem. */
.zapis .stitky { position:relative; z-index:1; }
.zapis .nahled { border-radius:12px; overflow:hidden; background:var(--svetlo-2); }
.zapis .nahled img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .4s ease; }
.zapis:hover .nahled img { transform:scale(1.05); }
.zapis.bez-nahledu { grid-template-columns:1fr; }   /* ne .bez-fotky — ta patří zástupné značce psa a má aspect-ratio:1 */
.zapis .datum { font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--slunce); }
.zapis h3 { font-size:1.35rem; margin:.35rem 0 .5rem; }
.zapis:hover h3 a { color:var(--slunce); }
.zapis .perex { color:var(--inkoust-70); font-size:.97rem; }
@media (max-width:620px) { .zapis { grid-template-columns:1fr; } .zapis .nahled img { aspect-ratio:16/9; } }

/* Štítky a kategorie */
.stitky { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
.stitky a { font-size:.75rem; text-decoration:none; padding:.26rem .66rem; border-radius:999px;
            background:var(--svetlo-2); color:var(--inkoust-70); border:1px solid rgba(0,0,0,.07); }
.stitky a:hover { background:var(--slunce); color:#fff; border-color:transparent; }

/* Filtr nad výpisem – kategorie a roky. Vodorovně rolovatelný, protože
   roků je patnáct a na mobilu by se zalámaly do čtyř řádků. */
.filtr { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.8rem; margin-bottom:2rem;
         border-bottom:1px solid rgba(0,0,0,.09); scrollbar-width:thin; }
.filtr a { flex:0 0 auto; text-decoration:none; font-size:.88rem; font-weight:600;
           padding:.45rem .95rem; border-radius:999px; color:var(--inkoust-70); }
.filtr a.tady { background:var(--louka); color:#fff; }
.filtr a:hover:not(.tady) { background:var(--svetlo-2); }

/* --- Stránkování ---------------------------------------------------------- */
.strankovani { display:flex; justify-content:center; align-items:center; gap:.4rem; margin-top:3rem; flex-wrap:wrap; }
.strankovani a, .strankovani span { min-width:2.4rem; text-align:center; padding:.5rem .7rem; border-radius:8px; text-decoration:none; font-weight:600; font-size:.92rem; }
.strankovani a { color:var(--inkoust-70); }
.strankovani a:hover { background:var(--svetlo-2); }
.strankovani .tady { background:var(--louka); color:#fff; }
.strankovani .vypustka { color:var(--inkoust-45); }

/* --- Detail novinky ------------------------------------------------------- */
.zapis-detail { max-width:72ch; margin:0 auto; }
.zapis-detail .datum { font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--slunce); }
.zapis-detail h1 { font-size:clamp(1.9rem,4.4vw,2.9rem); margin:.6rem 0 1.6rem; }
.sousedi { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3.5rem; padding-top:2rem; border-top:1px solid rgba(0,0,0,.09); }
.sousedi a { text-decoration:none; color:inherit; font-weight:600; }
.sousedi a small { display:block; font-weight:500; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--inkoust-45); margin-bottom:.3rem; }
.sousedi a:hover { color:var(--slunce); }
.sousedi .dalsi { text-align:right; }
@media (max-width:560px) { .sousedi { grid-template-columns:1fr; } .sousedi .dalsi { text-align:left; } }

/* --- Vrhy (Odchovy) ------------------------------------------------------
   Karta vrhu: nahoře rodiče vedle sebe, pod nimi štěňata. Na starém webu
   to byla ručně sázená <table> se čtyřmi sloupci — tady je to mřížka
   a obsah přichází z `zl_vrhy` + `zl_stenata`.

   ⚠️ **Žádné zakulacené rohy.** Fotky odchovů mají černý rámeček
   1 px vypálený přímo v obrázku (dělal ho starý web) a oblouk ho v rozích
   uřízne — vypadá to jako ušpiněná fotka. Proto se tady od `border-radius`
   upouští, na rozdíl od zbytku webu. */
.vrhy { display:grid; gap:0; }
.vrh { padding:2.2rem 0; background:none; border-radius:0; }
/* Čára mezi vrhy — karta na barevném podkladu se u devíti vrhů pod sebou
   rozpadala na hromadu obdélníků. */
.vrh + .vrh { border-top:1px solid rgba(0,0,0,.12); }
/* Nadpis plemene je záchranná síť pro prohlížeč bez skriptu: tam se
   záložky nepřepínají a všechna plemena jsou pod sebou, takže musí být
   vidět, kde jedno končí. Se skriptem ho nahradí ouško nahoře. */
.plemeno-vrhu {
  font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:.6rem;
  padding-top:1.6rem; border-top:2px solid var(--slunce);
}
.js .plemeno-vrhu { display:none; }

/* Ouška plemen. Aktivní je „vytažené" nahoru: světlejší podklad, oranžová
   hrana dole a měkký stín — ne obtah, ten by se pral s čárami mezi vrhy. */
.zalozky.ouska { gap:.25rem; border-bottom:2px solid rgba(0,0,0,.12); margin-bottom:2rem; }
.ouska .zalozka {
  background:var(--svetlo-2); border-radius:12px 12px 0 0;
  padding:.85rem 1.5rem; font-family:var(--f-nadpis); font-size:1.02rem;
}
.ouska .zalozka:hover { background:rgba(0,0,0,.06); }
.ouska .zalozka[aria-selected="true"] {
  background:var(--svetlo); color:var(--inkoust);
  border-bottom-color:var(--slunce);
  box-shadow:0 -6px 16px rgba(0,0,0,.10);
}
.ouska .zalozka .kolik { color:var(--inkoust-45); }
@media (max-width:560px) {
  .ouska .zalozka { padding:.7rem .9rem; font-size:.92rem; }
}

.vrh h3 { font-size:1.45rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.7rem; }
.vrh h3 .datum { font-family:var(--f-text); font-size:.85rem; font-weight:600; color:var(--inkoust-45); letter-spacing:.02em; }

/* Rodiče vedle sebe. Přesně to dělaly ty čtyři sloupce tabulky. */
.vrh .rodice { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,4vw,3rem); margin-top:1.2rem; }
.vrh .rodic h4 { font-size:1.08rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; }
.vrh .rodic .role { font-family:var(--f-text); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--slunce); }
.vrh .rodic .info { font-size:.9rem; color:var(--inkoust-70); margin-top:.6rem; }
.vrh .rodic .odkazy { display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:.6rem; font-size:.88rem; }
.vrh .rodic .odkazy a { color:var(--slunce); text-underline-offset:3px; }
.vrh .portrety { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.7rem; }
.vrh .portrety a { display:block; }
.vrh .portrety img { display:block; height:150px; width:auto; max-width:100%; border-radius:0; }
@media (max-width:720px) {
  .vrh .rodice { grid-template-columns:1fr; }
  .vrh .portrety img { height:120px; }
}

/* Štěňata. ⚠️ Třída je `vrh-stenata`, ne `stenata`: `.stenata` už patří
   pásu „Štěňata" na úvodní stránce a ten má tmavě zelené pozadí — karty
   vrhů se do něj propadly.
   Fotka je na výšku i na šířku podle toho, jak byla nafocená —
   nic se neořezává, jen se srovná spodní hrana jménem pod ní. */
.vrh .vrh-stenata { margin-top:1.6rem; }
.vrh .vrh-stenata h4 { font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mech); }
.vrh .stenatka { display:flex; flex-wrap:wrap; gap:1.1rem; list-style:none; padding:0; margin:.7rem 0 0; }
.vrh .stenatka li { width:150px; }
.vrh .stenatka img { display:block; width:100%; height:auto; border-radius:0; background:var(--svetlo-2); }
.vrh .stenatka strong { display:block; margin-top:.4rem; font-size:.95rem; }
.vrh .stenatka .pozn { display:block; margin-top:.15rem; font-size:.78rem; line-height:1.45; color:var(--inkoust-45); }
@media (max-width:520px) { .vrh .stenatka li { width:calc(50% - .55rem); } }

/* --- Obrázky vložené v textu ---------------------------------------------
   ⚠️ Třídy alignleft/alignright/aligncenter přinesl WordPress a sedí ve
   všech 456 zápiscích a 42 stránkách. Přepisovat je při importu by znamenalo
   sáhnout do textu, který zákaznice zná — levnější je je znát.
   Pod 620 px se obtékání ruší, jinak by u fotky zbyl sloupec o třech
   slovech. */
/* ⚠️ Odstup je schválně velký: text nalepený na fotku vypadal jako chyba
   sazby (Michal, 14. 9. 2026). Platí i pro fotky, které si `float` nesou
   v inline stylu z WordPressu — ty mají vlastní `margin`, a ten se musí
   přebít, jinak zůstane na 15 px. */
.text img.alignleft  { float:left;  margin:.4rem 2.4rem 1.8rem 0 !important; }
.text img.alignright { float:right; margin:.4rem 0 1.8rem 2.4rem !important; }
.text p > img[style*="float: right"], .text p > img[style*="float:right"] {
  margin:.4rem 0 1.8rem 2.4rem !important;
}
.text p > img[style*="float: left"], .text p > img[style*="float:left"] {
  margin:.4rem 2.4rem 1.8rem 0 !important;
}
.text img.aligncenter, .text img.size-full { margin-left:auto; margin-right:auto; }
.text .wp-caption { max-width:100%; }
.text .wp-caption-text { font-size:.85rem; color:var(--inkoust-45); margin-top:-.6rem; }
.text::after { content:""; display:block; clear:both; }
@media (max-width:620px) {
  /* ⚠️ `!important` tu musí být taky: obtékání výš ho má kvůli inline
     stylům z WordPressu, a bez něj by fotka na mobilu obtékala dál
     a zbyl by na text pruh o třech slovech (14. 9. 2026). */
  .text img.alignleft, .text img.alignright,
  .text p > img[style*="float: right"], .text p > img[style*="float:right"],
  .text p > img[style*="float: left"], .text p > img[style*="float:left"] {
    float:none !important; margin:1.4rem auto !important;
  }
}

/* --- Tabulky, které zbyly z WordPressu -----------------------------------
   16 stránek sázelo rozvržení tabulkou. Než se přepíšou ručně, musí se
   aspoň vejít do okna a jít odrolovat, ne rozbít stránku do šířky. */
.text table { width:100%; border-collapse:collapse; }
.text .tabulka-obal { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.text td, .text th { padding:.4rem .6rem; vertical-align:top; }
.text td img { margin:.4rem 0; }

/* --- Záložky (psi u výsledků) ------------------------------------------
   ⚠️ Bez JS zůstanou vidět všechny bloky pod sebou — návštěvník o nic
   nepřijde, jen se víc naroluje. Skrývání zapíná až skript.
   --- Záložky (psi) ------------------------------------------------------- */
/* scroll-margin-top jako u kotev: na záložku se skáče odkazem z medailonku
   psa (#pes-boris) a připnutá hlavička by ji jinak překryla. */
.zalozky { display:flex; flex-wrap:wrap; gap:.4rem; border-bottom:2px solid rgba(0,0,0,.1); margin-bottom:1.6rem; scroll-margin-top:96px; }
.zalozka { appearance:none; border:0; background:none; font:inherit; cursor:pointer;
  padding:.7rem 1.15rem; border-radius:10px 10px 0 0; color:var(--inkoust-70);
  font-weight:600; position:relative; bottom:-2px; border-bottom:2px solid transparent; }
.zalozka:hover { color:var(--inkoust); background:rgba(0,0,0,.03); }
.zalozka[aria-selected="true"] { color:var(--inkoust); border-bottom-color:var(--slunce); }
.zalozka .kolik { font-weight:500; font-size:.8rem; color:var(--inkoust-45); margin-left:.4rem; }

/* --- Výsledky ------------------------------------------------------------ */
.vysledky { padding:.3rem 0 1.5rem; }
.trida { font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mech); margin:1.2rem 0 .5rem; }
.trida:first-child { margin-top:.3rem; }
/* ⚠️ Sloupec ocenění je `minmax`, ne pevných 11,5 rem: nejdelší ocenění
   („V1 CAC CACIB BOB užší výběr v BIG FCI 2. skupiny") se do užšího
   sloupce lámalo na čtyři řádky a vypadalo to jako chyba sazby. Takhle
   se roztáhne, dokud je čemu, a krátká ocenění ho nenafouknou. */
.vysledek { display:grid; grid-template-columns:minmax(11.5rem,15rem) 1fr 12rem auto; gap:.3rem 1.2rem;
  padding:.5rem 0; border-top:1px solid rgba(0,0,0,.07); align-items:baseline; }
/* ⚠️ Sloupce se přidělují natvrdo, ne pořadím v markupu — fotka je v HTML
   první (kvůli obtékání, viz níž), ale patří do posledního sloupce. */
.vysledek > .oceneni  { grid-area:1 / 1; }
.vysledek > .akce     { grid-area:1 / 2; }
.vysledek > .rozhodci { grid-area:1 / 3; }
.vysledek > .foto     { grid-area:1 / 4; }
/* Fotka poháru nebo diplomu u konkrétního výsledku. Drží se malá — je to
   doprovod řádku, ne galerie; ta je pod textem stránky. */
.vysledek .foto { align-self:center; }
.vysledek .foto img { width:64px; height:64px; object-fit:cover; border-radius:8px;
  background:var(--svetlo-2); transition:transform .16s ease; }
/* Fotka sezony: patřila k nadpisu, který se přestěhoval do ouška harmoniky.
   Visí vpravo nahoře a text sezony ji obtéká zleva. Není to zkouška jako
   zvětšené náhledy u řádků — bez ní by po nadpisu zbyla jen holá věta. */
.vysledky > .foto-sezony { float:right; display:block; margin:.2rem 0 .7rem 1.4rem; }
.vysledky > .foto-sezony img {
  display:block; width:clamp(120px, 14vw, 200px); height:auto;
  border-radius:10px; background:var(--svetlo-2);
}
/* Aby fotka nepřetekla do dalšího roku, když je text krátký. */
.vysledky::after { content:""; display:block; clear:both; }

/* Náhled u výsledku. 64 px byla poštovní známka — od 9. 9. 2026 je to
   150 px (Michal). Zdroj je náhled `-n.webp` o delší straně 400 px, takže
   to snese i retina; víc už by chtělo sáhnout na originály. */
.vysledek .foto img {
  width:clamp(96px, 11vw, 150px); height:clamp(96px, 11vw, 150px); border-radius:10px;
}
/* Řádek s fotkou opouští mřížku a fotka se obtéká: v mřížce jí text nikdy
   nešel pod spodní hranu a vedle velkého náhledu zbýval úzký sloupec.
   ⚠️ Sloupce se u těchhle řádků ztratí — sousední řádky bez fotky si
   zarovnání drží dál, takže tabulka jako celek nikam neuteče. */
.vysledek.s-fotkou { display:block; }
.vysledek.s-fotkou > span { display:block; }
.vysledek.s-fotkou > span:empty { display:none; }
.vysledek.s-fotkou .foto { float:right; margin:.1rem 0 .6rem 1.3rem; }
/* Plovoucí fotka nesmí přesáhnout do dalšího řádku výsledku. */
.vysledek.s-fotkou::after { content:""; display:block; clear:both; }
.vysledek .foto:hover img { transform:scale(1.08); }
.vysledek .oceneni { font-weight:700; color:var(--inkoust); }
/* ⚠️ Sloupec ocenění je 11,5 rem, protože se počítá se zkratkami („V1 CAC
   BOB"). Ve 40 záznamech je v něm ale celá věta — shrnutí sezony nebo název
   závodu, nejdelší má 217 znaků — a ta se v úzkém sloupci zlomí na pruh
   o třech slovech. Takový řádek dostane od šablony třídu `dlouhy` a sází se
   přes celou šířku, přesně jako každý řádek na mobilu. */
.vysledek.dlouhy { grid-template-columns:1fr auto; gap:.15rem 1.2rem; }
.vysledek.dlouhy > .oceneni  { grid-area:1 / 1; }
.vysledek.dlouhy > .akce     { grid-area:2 / 1; }
.vysledek.dlouhy > .rozhodci { grid-area:3 / 1; }
.vysledek.dlouhy > .foto     { grid-area:1 / 2 / 4 / 3; align-self:center; }
.vysledek .akce { color:var(--inkoust-70); }
.vysledek .rozhodci { font-size:.88rem; color:var(--inkoust-45); }
.titul-radek { margin:.7rem 0; }
.titul-radek span { display:inline-block; font-size:.8rem; font-weight:700;
  padding:.35rem .85rem; border-radius:999px; background:var(--slunce); color:#fff; }
@media (max-width:760px) {
  .vysledek { grid-template-columns:1fr auto; gap:.1rem .9rem; padding:.7rem 0; }
  .vysledek > .oceneni  { grid-area:1 / 1; }
  .vysledek > .akce     { grid-area:2 / 1; }
  .vysledek > .rozhodci { grid-area:3 / 1; }
  .vysledek > .foto     { grid-area:1 / 2 / 4 / 3; }
  .vysledek .rozhodci::before { content:"rozhodčí: "; }
}

/* --- Lightbox -------------------------------------------------------------
   Fotek je na webu skoro pět tisíc a klikací jsou skoro všechny. Otevírají
   se přes celou obrazovku, ne v nové kartě — návštěvník tak neztratí místo
   v galerii, ze které si prohlíží. Bez JS zůstává odkaz odkazem. */
/* ⚠️ `display:flex` níž přebíjí výchozí `[hidden] { display:none }`, takže
   by zavřený lightbox zůstal roztažený přes celou stránku a polykal kliknutí.
   Skrytí se musí říct výslovně. */
.lightbox[hidden] { display:none; }
.lightbox {
  position:fixed; inset:0; z-index:900;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(24,22,18,.97);
  animation:lb-nastup .22s ease;
}
@keyframes lb-nastup { 0% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .lightbox { animation:none; } }
/* Stránka pod otevřeným lightboxem se nesmí rolovat. */
body.lightbox-otevreny { overflow:hidden; }

.lightbox figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:.9rem; max-height:100%; }
.lightbox img {
  max-width:100%; max-height:calc(100vh - 9rem);
  width:auto; height:auto; object-fit:contain;
  border-radius:10px; background:rgba(255,255,255,.05);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.lightbox.nacita img { opacity:.35; transition:opacity .2s ease; }
.lightbox figcaption {
  max-width:60ch; text-align:center; color:rgba(255,255,255,.82);
  font-size:.92rem; line-height:1.5;
}
.lightbox .lb-pocet {
  position:absolute; left:0; right:0; bottom:1.1rem; margin:0;
  text-align:center; color:rgba(255,255,255,.5);
  font-size:.8rem; letter-spacing:.12em;
}

/* Ovládání. Plochy jsou velké schválně — na mobilu se do nich musí trefit
   palcem, na výšku je fotka přes celou šířku a šipky leží na ní. */
.lightbox button {
  position:absolute; appearance:none; border:0; cursor:pointer;
  background:rgba(255,255,255,.1); color:#fff;
  border-radius:999px; transition:background .2s ease, opacity .2s ease;
}
.lightbox button:hover { background:var(--slunce); }
.lightbox button:disabled { opacity:.25; cursor:default; background:rgba(255,255,255,.1); }
.lightbox button:focus-visible { outline:2px solid var(--slunce); outline-offset:3px; }

.lightbox .lb-zavrit {
  top:clamp(.6rem,2vw,1.4rem); right:clamp(.6rem,2vw,1.4rem);
  width:2.9rem; height:2.9rem; font-size:1.9rem; line-height:1;
}
.lightbox .lb-sem { top:50%; transform:translateY(-50%); width:3.2rem; height:3.2rem; }
.lightbox .lb-zpet  { left:clamp(.5rem,2vw,1.6rem); }
.lightbox .lb-vpred { right:clamp(.5rem,2vw,1.6rem); }
/* Šipka je jen dva okraje otočené o 45° — stejný trik jako v harmonice. */
.lightbox .lb-sem::before {
  content:""; display:block; width:.7rem; height:.7rem; margin:0 auto;
  border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
}
.lightbox .lb-zpet::before  { transform:rotate(135deg); margin-left:.9rem; }
.lightbox .lb-vpred::before { transform:rotate(-45deg); margin-right:.9rem; }

@media (max-width:560px) {
  .lightbox .lb-sem { top:auto; bottom:3.2rem; transform:none; }
  .lightbox img { max-height:calc(100vh - 12rem); }
}

/* --- Rozcestník (Aktivity) ------------------------------------------------
   Dlaždice s názvem přes fotku. Fotka je odbarvená na pětinu sytosti, aby
   nepřekřičela nadpis; pod myší se rozsvítí do plné barvy.

   ⚠️ Řádek je **flex, ne grid**. Aktivit je sedm, takže poslední řádek není
   plný — v mřížce by tři dlaždice zůstaly vlevo a vpravo by zela díra po
   čtvrté. Flex s `justify-content:center` poslední řádek vystředí. */
.rozcestnik { --mezera:1.1rem; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--mezera); }
.rozcestnik .dlazdice {
  position:relative; display:grid; place-items:center;
  flex:0 0 calc(25% - var(--mezera) * 3 / 4);
  aspect-ratio:4/3; overflow:hidden; border-radius:var(--oblouk);
  background:var(--louka); text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.rozcestnik img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.2);
  transition:filter .35s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
/* Závoj pod nadpisem. Bez něj se bílý text ztratí na světlé fotce —
   odbarvení sytost sundá, jas nechá. */
.rozcestnik .dlazdice::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.52));
  transition:background .35s ease;
}
.rozcestnik h3 {
  position:relative; z-index:1; margin:0; padding:0 .9rem;
  text-align:center; color:#fff; font-size:clamp(1rem,1.5vw,1.3rem);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.rozcestnik .dlazdice:hover, .rozcestnik .dlazdice:focus-visible {
  transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.22);
}
.rozcestnik .dlazdice:hover img, .rozcestnik .dlazdice:focus-visible img {
  filter:saturate(1); transform:scale(1.05);
}
.rozcestnik .dlazdice:hover::after, .rozcestnik .dlazdice:focus-visible::after {
  background:linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.38));
}
.rozcestnik .dlazdice:focus-visible { outline:3px solid var(--slunce); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
  .rozcestnik .dlazdice, .rozcestnik img { transition:none; }
}
@media (max-width:980px) { .rozcestnik .dlazdice { flex-basis:calc(33.333% - var(--mezera) * 2 / 3); } }

/* ⚠️ Když je pes na stránce činnosti jediný, záložky se nesázejí a nadpis
   s jeho jménem by se nalepil rovnou na zelené záhlaví — sekce výsledků má
   `padding-top:0` právě proto, že odsazení dělaly ty záložky (Michal,
   10. 9. 2026). Uvnitř záložek je nadpis první jen v tomhle případě. */
[data-zalozka-obsah] > h3:first-child { margin-top:1.8rem; }

/* Stavový štítek na /nabidka-stenat/ — „Momentálně žádná štěňata
   neplánujeme". ⚠️ Vlastní třída, ne `.stav` z úvodní stránky: ta má
   průsvitně bílé pozadí pro tmavou sekci a na světlé podstránce by nebyla
   vidět. Zelená tečka je z ní ale schválně stejná, ať to drží pohromadě. */
.stenata-stav {
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--inkoust); background:var(--svetlo-2);
  padding:.5rem 1.1rem; border-radius:999px;
}
.stenata-stav .tecka { width:.5rem; height:.5rem; border-radius:50%; background:var(--mech); flex:none; }

/* --- Kontakt: údaje, mapa a formulář ------------------------------------ */
.kontakt-mriz { display:grid; grid-template-columns:1fr minmax(0,420px); gap:clamp(1.8rem,4vw,3.2rem); align-items:start; }
@media (max-width:860px) { .kontakt-mriz { grid-template-columns:1fr; } }
/* ⚠️ Mapa drží poměr stran přes aspect-ratio, ne pevnou výšku: na mobilu
   by z pevných 400 px byl pruh přes půl obrazovky. */
/* ⚠️ Mapa i panel formuláře jsou HRANATÉ. Nejdřív měly `--oblouk`, což je
   oblouk pro portréty psů, a ukusoval jim půlku horní hrany do kupole;
   ani mírné zaoblení se k nim nehodilo (Michal, 10. 9. 2026). */
.mapa { margin-top:1.6rem; border-radius:0; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.14); }
.mapa iframe { display:block; width:100%; aspect-ratio:4/3; border:0; background:var(--svetlo-2); }
@media (max-width:860px) { .mapa iframe { aspect-ratio:3/2; } }

.formular-obal { background:var(--svetlo-2); border-radius:0; padding:clamp(1.4rem,3vw,2.2rem); }
.formular-obal h2 { font-size:clamp(1.5rem,3vw,2rem); margin-bottom:1.2rem; }
.formular .pole { display:block; margin-bottom:1.1rem; }
.formular label { display:block; font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--inkoust-70); margin-bottom:.35rem; }
.formular input, .formular textarea {
  width:100%; font:inherit; color:var(--inkoust);
  padding:.7rem .9rem; border:1.5px solid rgba(0,0,0,.16); border-radius:12px;
  background:var(--svetlo); transition:border-color .18s ease, box-shadow .18s ease;
}
.formular textarea { resize:vertical; min-height:8rem; }
.formular input:focus, .formular textarea:focus {
  outline:none; border-color:var(--slunce); box-shadow:0 0 0 3px rgba(200,122,21,.18);
}
.formular [aria-invalid="true"] { border-color:#B4442A; }
.formular .chyba { display:block; margin-top:.35rem; font-size:.85rem; color:#B4442A; }
.formular .poznamka { font-size:.85rem; color:var(--inkoust-45); }
/* ⚠️ Medová past se schovává posunem mimo obraz, ne `display:none`: část
   robotů si pole s `display:none` odpustí, kdežto tohle vyplní. Pro člověka
   je neviditelná tak jako tak. */
.formular .past { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.zprava-ok, .zprava-chyba { padding:.9rem 1.1rem; border-radius:12px; font-weight:600; }
.zprava-ok { background:rgba(124,158,82,.18); color:var(--inkoust); }
.zprava-chyba { background:rgba(180,68,42,.14); color:#8E3521; margin-bottom:1.1rem; }

/* --- Alba na /galerie/ ---------------------------------------------------
   ⚠️ Schválně jiný tvar než dlaždice Aktivit a psů: tam je za dlaždicí
   jedna stránka, tady album o pěti stech fotkách. Obálka proto leží na
   dvou vykukujících listech, v rohu má odznak s počtem a jméno stojí pod
   obrázkem, ne přes něj (Michal, 10. 9. 2026). */
/* ⚠️ Tři sloupce natvrdo, ne `auto-fill`: alb je devět a 3 × 3 je vyjde
   přesně (Michal, 10. 9. 2026). Dlaždice si přitom drží velikost —
   `max-width` jim brání se roztáhnout do širšího sloupce a zbytek místa
   se rozdá jako vzduch mezi ně. */
.alba { display:grid; grid-template-columns:repeat(3,1fr); justify-items:center;
        gap:clamp(2rem,4vw,3rem) clamp(1.2rem,2.5vw,2rem); }
.album { width:100%; max-width:265px; }
@media (max-width:860px) { .alba { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .alba { grid-template-columns:1fr; } }
.album { display:block; text-decoration:none; color:inherit; }
/* Místo navíc dole i po stranách je pro pootočené listy, aby je mřížka
   neuřízla a nelepily se na sousední dlaždici. */
.stoh { position:relative; display:block; margin:.5rem .7rem 1.1rem; }
/* ⚠️ Listy jsou `--svetlo-2`, ne `--svetlo`: stránka pod nimi má právě
   `--svetlo` a ve stejném odstínu nebyly vidět vůbec. V tmavém režimu se
   oba tokeny prohodí a rozdíl zůstává. */
.stoh .list {
  position:absolute; inset:0; border-radius:14px;
  background:var(--svetlo-2); border:1px solid rgba(0,0,0,.14);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.stoh .list:nth-child(1) { transform:rotate(-4deg) translate(-.55rem,.6rem); }
.stoh .list:nth-child(2) { transform:rotate(3deg) translate(.6rem,.35rem); }
/* Obálka leží na listech — v toku dokumentu, takže určuje výšku celého stohu. */
.stoh img, .stoh .bez-fotky {
  position:relative; display:block; width:100%; aspect-ratio:4/3;
  object-fit:cover; border-radius:14px; background:var(--svetlo-2);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease;
}
/* Odznak s počtem fotek. Sedí v rohu obálky, tedy nad listy. */
.stoh .odznak {
  position:absolute; z-index:1; right:.55rem; bottom:.55rem;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .6rem .3rem .5rem; border-radius:999px;
  background:rgba(12,24,10,.72); color:#fff;
  font-size:.8rem; font-weight:600; line-height:1;
  backdrop-filter:blur(3px);
}
.stoh .odznak svg { width:1.05rem; height:1.05rem; flex:none; }
.album .jmeno { display:block; font-family:var(--f-nadpis); font-weight:700; font-size:1.12rem; line-height:1.25; }
.album .kolik { display:block; margin-top:.2rem; font-size:.85rem; color:var(--inkoust-45); }
/* Na najetí se stoh rozevře — teprve tím je vidět, že listů je víc. */
.album:hover .stoh img, .album:focus-visible .stoh img { transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.24); }
.album:hover .stoh .list:nth-child(1) { transform:rotate(-7deg) translate(-.95rem,.8rem); }
.album:hover .stoh .list:nth-child(2) { transform:rotate(5.5deg) translate(1rem,.5rem); }
.album:hover .jmeno { color:var(--slunce); }
.album:focus-visible { outline:3px solid var(--slunce); outline-offset:4px; border-radius:6px; }
@media (prefers-reduced-motion: reduce) {
  .stoh img, .stoh .list { transition:none; }
  .album:hover .stoh img, .album:hover .stoh .list { transform:none; }
}

/* --- Karusel „Naše další aktivity" --------------------------------------
   Jede na dlaždicích rozcestníku, aby vypadaly stejně; mění se jen to, že
   se pás nezalamuje a roluje do strany. ⚠️ Pravidla musí zůstat POD těmi
   pro `.rozcestnik`: mají stejnou váhu a rozhoduje pořadí.
   Bez JS je pás pořád rolovatelný prstem i kolečkem, šipky jen zrychlují. */
.karusel-hlava { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.karusel-hlava h2 { font-size:clamp(1.6rem,3.4vw,2.3rem); margin:0; }
.karusel-sipky { display:flex; gap:.5rem; flex:none; }
.karusel-sip {
  width:2.6rem; height:2.6rem; padding:0; cursor:pointer; flex:none;
  border:1.5px solid var(--inkoust-45); border-radius:50%; background:transparent;
  color:var(--inkoust); font-size:1.3rem; line-height:1;
  display:grid; place-items:center;
  transition:background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.karusel-sip:hover { background:var(--slunce); border-color:var(--slunce); color:#fff; }
/* Pás jde od kraje ke kraji obrazovky — proto je v markupu mimo `.obal`
   a odsazení po stranách si drží sám, aby první dlaždice začínala pod
   nadpisem. ⚠️ Posuvník se schovává (jezdí se šipkami a prstem), ale pás
   MUSÍ zůstat rolovatelný: `overflow:hidden` by ho na dotyku zamkl. */
.karusel {
  flex-wrap:nowrap; justify-content:flex-start;
  /* ⚠️ Žádné odsazení po stranách. Dřív první dlaždice začínala pod
     nadpisem, jenže pás se pak rozjížděl až od kraje obsahu a vlevo
     zůstávalo prázdné pole (Michal, 10. 9. 2026). Teď jde od kraje ke
     kraji monitoru a dlaždice vyjíždějí i zajíždějí za oba okraje. */
  padding:0;
  /* ⚠️ Bez `scroll-behavior:smooth` a bez `scroll-snap` schválně: pás si
     polohu řídí sám po snímcích a obojí by se s tím pralo — plynulý posun
     by se trhal o přichytávání a o rozjeté hladké rolování. */
  overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.karusel::-webkit-scrollbar { display:none; }
/* ⚠️ Dlaždice mají pevnou šířku, ne procento z pásu. Procento by se počítalo
   z rolovatelné šířky, ne z viditelné, a `100vw` zase počítá i svislý
   posuvník — obojí utrhne poslední dlaždici. Takhle se jich prostě vejde
   tolik, kolik se vejde: na širokém okně pět, na mobilu dvě. */
.karusel .dlazdice { flex:0 0 clamp(180px,20vw,300px); }
@media (prefers-reduced-motion: reduce) { .karusel { scroll-behavior:auto; } }
@media (max-width:640px) {
  .rozcestnik .dlazdice { flex-basis:calc(50% - var(--mezera) / 2); }
  /* Dvě dlaždice na 390px displeji mají 169 px — „Sportovní kynologie"
     se do nich na jeden řádek nevejde, tak ať se rozdělí na dva. */
  .rozcestnik h3 { font-size:.92rem; line-height:1.25; padding:0 .5rem; }
}

/* ==== uvod ==== */
/* Úvodní stránka — hero, pás smečky a sekce pod ním.
   Vytaženo ze schválené varianty „Na louce" (6. 9. 2026).
   ⚠️ Barvy a rozměry se mění JEN tady a v ostatních _*.css,
   nikdy ve web/css/web.css — ten se generuje. */

/* --- Hero slider ----------------------------------------------------------
   Pět snímků a hesel převzatých beze změny ze slideru na stávajícím webu.
   Přepíná se prolnutím; fotka i text patří k jednomu snímku, aby se heslo
   nikdy neukázalo u cizí fotky. */
.hero { position:relative; min-height:clamp(500px,70vh,720px); display:flex; color:#fff; overflow:hidden; background:var(--louka-2); }
/* Vodorovné gesto si bere slider, svislé zůstává rolování stránky.
   Bez `pinch-zoom` by se nad herem nedalo přiblížit dvěma prsty. */
.hero { touch-action:pan-y pinch-zoom; }
.hero.tahne { cursor:grabbing; user-select:none; }
.hero img { -webkit-user-drag:none; user-select:none; }
.jen-pro-ctecky {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.snimky { position:absolute; inset:0; }
.snimek { position:absolute; inset:0; opacity:0; transition:opacity .9s ease; }
.snimek.je-videt { opacity:1; }
.snimek img { width:100%; height:100%; object-fit:cover; object-position:center 50%; }
/* Závoj ztmavuje jen tam, kde leží text — dole a vlevo. Nahoře jen tolik,
   aby bylo čitelné menu; psi uprostřed fotky zůstanou čistí. */
.snimek::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(20,38,17,.94) 0%, rgba(20,38,17,.62) 26%, rgba(20,38,17,0) 56%),
    linear-gradient(to right, rgba(20,38,17,.58) 0%, rgba(20,38,17,0) 50%),
    linear-gradient(to bottom, rgba(20,38,17,.10) 0%, rgba(20,38,17,0) 14%);
}
.hero-obsah { position:relative; z-index:2; align-self:flex-end; width:100%; padding-bottom:clamp(4.5rem,8vw,6rem); padding-top:10.5rem; }
.hesla { position:relative; }
.heslo { opacity:0; transition:opacity .55s ease, transform .55s ease; transform:translateY(10px); }
.heslo:not(.je-videt) { position:absolute; inset:0; pointer-events:none; }
.heslo.je-videt { opacity:1; transform:none; }
.heslo h2 { font-size:clamp(2.5rem,6.2vw,4.6rem); max-width:15ch; text-shadow:0 2px 22px rgba(12,24,10,.55); }
.heslo p { margin-top:1rem; font-size:clamp(1.1rem,1.8vw,1.35rem); color:rgba(255,255,255,.94); max-width:40ch; text-shadow:0 1px 14px rgba(12,24,10,.6); }
.hero .akce { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.4rem; }
.hero .btn.duty { color:#fff; }

/* Ovládání slideru */
.hero-ovladani {
  position:absolute; z-index:3; left:0; right:0; bottom:clamp(1.4rem,3vw,2.2rem);
  display:flex; align-items:center; gap:1rem;
}
.hero-ovladani .obal { display:flex; align-items:center; gap:1rem; width:100%; }
.tecky { display:flex; gap:.55rem; }
.tecka {
  width:.7rem; height:.7rem; padding:0; border:0; cursor:pointer; border-radius:50%;
  background:rgba(255,255,255,.4); transition:background-color .2s ease, transform .2s ease;
}
.tecka[aria-current="true"] { background:var(--slunce); transform:scale(1.25); }
.tecka:hover { background:rgba(255,255,255,.8); }
.sip {
  width:2.5rem; height:2.5rem; flex:none; padding:0; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.5); border-radius:50%; background:transparent;
  color:#fff; font-size:1.2rem; line-height:1;
  display:grid; place-items:center;
  transition:background-color .2s ease, border-color .2s ease;
}
.sip:hover { background:rgba(255,255,255,.16); border-color:#fff; }
@media (max-width:600px) { .sip { display:none; } }

/* --- Pás smečky ---------------------------------------------------------
   Portréty v obloukovém rámu se překrývají, jako když psi sedí vedle sebe.
   Najetím se pes „postaví“ dopředu. */
.smecka { background:var(--louka); color:#fff; padding:var(--krok) 0; }
.smecka .uvod { text-align:center; max-width:52ch; margin:0 auto 3rem; }
.smecka .skupina-popis {
  text-align:center; margin:3.2rem auto 1.6rem; max-width:52ch;
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.pas.kryci { gap:1.6rem; padding-left:clamp(1rem,4vw,2.4rem); }
.pas.kryci .pes { max-width:150px; margin-left:0; }
.smecka h2 { font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:.7rem; }
.smecka .uvod p { color:rgba(255,255,255,.75); }
.pas { display:flex; justify-content:center; align-items:flex-start; padding-left:calc(clamp(1rem,4vw,2.4rem) + 26px); padding-right:clamp(1rem,4vw,2.4rem); }
.pes {
  position:relative; flex:1 1 0; min-width:0; max-width:180px;
  margin-left:-26px; text-align:center; text-decoration:none; color:#fff;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), opacity .5s ease;
}
/* Vlna: psi naskakují zleva doprava, jako když se smečka postupně posadí.
   Zpoždění jednotlivých portrétů nastavuje skript podle pořadí. */
.pas.vlna .pes { opacity:0; transform:translateY(30px) scale(.94); }
.pas.vlna.bezi .pes { opacity:1; transform:none; }
/* Nadzvednutí při najetí musí přebít stav vlny, proto je až za ní —
   obě pravidla mají stejnou specificitu a rozhoduje pořadí. */
.pas .pes:hover, .pas .pes:focus-visible { transform:translateY(-14px); z-index:5; }
.pas.vlna .pes { transition:transform .65s cubic-bezier(.2,.8,.3,1), opacity .5s ease; }
.pes .ram {
  aspect-ratio:3/4; overflow:hidden; border-radius:var(--oblouk);
  border:5px solid var(--louka); background:var(--louka-2);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
}
/* Portréty jsou hlava a hruď, ne celý pes — do vysokého oblouku se celá
   postava nevejde a psovi se uřízne hlava. Těžiště je nahoře. */
.pes .ram img { width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.pes.odesel .ram img, .karta.odesel .ram img { filter:grayscale(1) brightness(1.05); }
.pes .jmeno { font-family:var(--f-nadpis); font-weight:700; font-size:1.05rem; margin-top:.85rem; }
.pes .co { font-size:.78rem; color:rgba(255,255,255,.62); line-height:1.4; }
/* Oficiální jméno pod volacím. Menší než volací jméno, ale světlejší
   než plemeno — pořád je to jméno, ne popisek. */
.pes .cele { font-size:.82rem; color:rgba(255,255,255,.82); line-height:1.35; margin-top:.1rem; }
/* Portréty se překrývají o 26 px, popisky nesmí: „dánsko-švédský farmářský
   pes" přes celou šířku karty lezl sousedovi do textu (Michal, 11. 9. 2026).
   18 px z každé strany = 26 px překryvu + 10 px mezera; dlouhé plemeno se
   zalomí. Portréty jsou zarovnané nahoru (výš `align-items`), aby delší
   popisek — i křížek u psů, co odešli — nezvedal portrét nad ostatní. */
.pes .jmeno, .pes .cele, .pes .co { padding-inline:18px; }
.pas.kryci .pes .jmeno, .pas.kryci .pes .cele, .pas.kryci .pes .co { padding-inline:0; }
@media (max-width:820px) {
  .pas { flex-wrap:wrap; gap:1rem 0; padding-left:clamp(1rem,4vw,2.4rem); }
  .pes { flex:0 0 33.333%; max-width:none; margin-left:0; padding:0 .4rem; }
  .pes .jmeno, .pes .cele, .pes .co { padding-inline:0; }
}
@media (max-width:480px) { .pes { flex-basis:50%; } }

/* --- Vyprávění ----------------------------------------------------------- */
.pribeh { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.pribeh img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--oblouk); }
.pribeh h2 { font-size:clamp(2rem,4.4vw,3rem); margin-bottom:1.2rem; }
.pribeh p + p { margin-top:1rem; }
.pribeh p { color:var(--inkoust-70); }
.citat {
  margin-top:2rem; padding-left:1.4rem; border-left:4px solid var(--slunce);
  font-family:var(--f-nadpis); font-size:1.35rem; font-weight:500; line-height:1.35; color:var(--inkoust);
}
.citat .kdo { display:block; margin-top:.6rem; font-family:var(--f-text); font-size:.85rem; font-weight:500; color:var(--inkoust-45); letter-spacing:.02em; }
@media (max-width:880px) { .pribeh { grid-template-columns:1fr; } .pribeh img { aspect-ratio:4/3; } }

/* --- Plemena ------------------------------------------------------------- */
.plemena-sekce { background:var(--svetlo-2); }
.hlavicka { text-align:center; max-width:56ch; margin:0 auto 3rem; }
.hlavicka h2 { font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:.7rem; }
.hlavicka p { color:var(--inkoust-70); }
/* ⚠️ Karty plemen jsou ohraničené `.plemena`. Bez toho přebíjely karty psů
   na podstránkách (`_podstranky.css` se sází dřív) — psi dostali bílý rámeček
   s `overflow:hidden`, který ukusoval první písmeno u názvu plemene. */
.plemena { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.2rem); }
.plemena .karta { background:var(--svetlo); border-radius:20px; overflow:hidden; box-shadow:0 6px 22px rgba(38,32,15,.09); display:flex; flex-direction:column; }
.plemena .karta img { width:100%; aspect-ratio:5/4; object-fit:cover; }
.plemena .karta .telo { padding:1.5rem 1.5rem 1.8rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.plemena .karta h3 { font-size:1.3rem; }
.plemena .karta p { font-size:.95rem; color:var(--inkoust-70); }
.plemena .karta .odkud { font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mech); }
/* Tlačítko na stránku plemene (24. 9. 2026) je v obsahu zl_texty, ne tady —
   zákaznice ho může přepsat i smazat. margin-top:auto ho srovná do spodku
   karty, takže v řadě stojí tlačítka na stejné výšce i při různě dlouhém textu;
   rozestup od textu dává gap v .telo. */
.plemena .karta .btn { margin-top:auto; align-self:flex-start; padding:.6rem 1.35rem; font-size:.9rem; color:var(--mech); }
@media (max-width:880px) { .plemena { grid-template-columns:1fr; } }

/* --- Aktivity ------------------------------------------------------------ */
.aktivity { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.akt { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:3/4; }
.akt img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
/* Celá dlaždice je odkaz do příslušné sekce Aktivit (zákaznice, 20. 9. 2026).
   Odkaz vyplní dlaždici, aby se dal kliknout i mimo popisek. */
.akt a { position:absolute; inset:0; display:block; color:inherit; text-decoration:none; }
.akt a:focus-visible { outline:3px solid var(--slunce); outline-offset:3px; border-radius:16px; }
.akt:hover img { transform:scale(1.06); }
.akt figcaption {
  position:absolute; inset:auto 0 0 0; padding:1.6rem 1rem .9rem;
  background:linear-gradient(to top, rgba(20,32,16,.88), transparent);
  color:#fff; font-family:var(--f-nadpis); font-weight:600; font-size:1.02rem;
}
.akt { margin:0; }
@media (max-width:820px) { .aktivity { grid-template-columns:repeat(2,1fr); } }

/* --- Deník ---------------------------------------------------------------
   ⚠️ Ohraničené `#denik`. `.novinky` se jmenuje i mřížka výpisu novinek
   na podstránce; bez ohraničení jí tohle vnutilo tři sloupce. */
#denik .novinky { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
#denik .novinka { background:var(--svetlo-2); border-radius:18px; padding:1.6rem; text-decoration:none; display:block; transition:transform .18s ease; }
#denik .novinka:hover { transform:translateY(-3px); }
#denik .novinka .kdy { font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--slunce); font-variant-numeric:tabular-nums; }
#denik .novinka h3 { font-size:1.15rem; margin:.5rem 0 .5rem; }
#denik .novinka p { font-size:.93rem; color:var(--inkoust-70); }
@media (max-width:880px) { #denik .novinky { grid-template-columns:1fr; } }
.stred { text-align:center; margin-top:2.4rem; }

/* --- Štěňata ------------------------------------------------------------- */
.stenata { background:var(--louka-2); color:#fff; }
.stenata .obal { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.stenata img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:20px; }
.stenata h2 { font-size:clamp(2rem,4.4vw,3rem); margin:.9rem 0 1rem; }
.stenata p { color:rgba(255,255,255,.78); }
.stav { display:inline-flex; align-items:center; gap:.6rem; font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.1); padding:.45rem 1rem; border-radius:999px; }
.stav .tecka { width:.5rem; height:.5rem; border-radius:50%; background:var(--mech); }
.body { list-style:none; margin:1.6rem 0 2rem; padding:0; display:grid; gap:.6rem; }
.body li { padding-left:1.6rem; position:relative; color:rgba(255,255,255,.8); font-size:.95rem; }
.body li::before { content:""; position:absolute; left:0; top:.66em; width:.45rem; height:.45rem; border-radius:50%; background:var(--slunce); }
@media (max-width:880px) { .stenata .obal { grid-template-columns:1fr; } }