/* Landing page Centra Laguna.
   Tmavé plochy jsou v modré Laguny, ne ve smyšleném odstínu: #0087BE je
   nejčastější modrá na starém webu centrumlaguna.cz (42 výskytů napříč
   styly) a #4470B3 a #313280 jsou přímo z jejich loga. Tmavá #003D54 je
   ztmavená #0087BE, aby na ní držel krémový text.

   Mosazný akcent zůstal — v logu je žlutá #EFC72D a #E2A52C, takže ke
   značce patří a na modré drží líp než cokoli dalšího.

   POZOR: stránka „Naše zvířata“ má pořád zelenou paletu. Dokud se
   nepřebarví i ona, vypadají obě části webu jinak.

   Tokeny se jmenují podle role, ne podle barvy (--tmava, ne --modra) —
   při příštím přebarvení se tak nemusí přejmenovávat. Záměrně BEZ tmavého
   režimu, zbytek webu je pevně světlý. */

:root {
  --tmava: #003D54;
  --tmava-2: #0A5473;
  --gold: #C9A24B;
  --gold-tmava: #8A6B21;
  --cream: #F8F4EA;
  --paper: #FBF8F1;
  --ink: #17212A;
  --muted: #53626D;
  --line: #E4DCC8;
  --bila: #FFFFFF;
  --stin: rgba(0, 61, 84, 0.10);
  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-tmava); outline-offset: 3px; border-radius: 3px; }

.obal {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

h1, h2, h3 { font-family: var(--serif); margin: 0; font-weight: 500; }

.nadtitulek {
  display: flex; align-items: center; gap: 0.85rem;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-tmava); margin: 0 0 1rem;
}
.nadtitulek::before { content: ""; width: 34px; height: 1.5px; background: var(--gold); flex: none; }

/* ------------------------------------------------------------------ hero */

/* Hlavička: vlevo značka a text, vpravo mozaika tří fotek. Text stojí na
   barvě, ne na fotce — tím padá veškeré dohadování se závojem a čitelností
   a fotky jsou vidět celé, ne jako podklad pod písmem.

   Tři fotky místo jedné proto, že Laguna není jeden pták: velký ara
   ararauna vlevo, vedle něj ara vojenský a kakadu. */
.hero { position: relative; background: var(--tmava); color: var(--cream); overflow: hidden; }
.hero-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.4rem);
}
.hero-mozaika {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.7rem;
  min-width: 0;
}
.hero-mozaika img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 8px; display: block;
  box-shadow: 0 12px 30px rgba(0, 20, 30, 0.35);
}
.hero-velka { grid-row: span 2; aspect-ratio: 3 / 4; }
.hero-mozaika img:not(.hero-velka) { aspect-ratio: 4 / 3; }

/* Na úzké obrazovce je text nad sebou a fotky v řádku pod ním. */
@media (max-width: 54rem) {
  .hero-text { grid-template-columns: 1fr; }
  .hero-mozaika { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto; }
  .hero-velka { grid-row: auto; aspect-ratio: 3 / 4; }
  .hero-mozaika img:not(.hero-velka) { aspect-ratio: 3 / 4; }
}

/* Text drží čitelnou šířku; hlavička kolem něj je přes celou plochu, aby
   mohlo motto sedět vpravo nahoře naproti logu. */
.hero-telo { max-width: 44ch; }
.hero h1 {
  text-shadow: 0 2px 20px rgba(0, 24, 34, 0.5);
  font-size: clamp(2.3rem, 5.2vw, 3.8rem); line-height: 1.04;
  letter-spacing: -0.02em; text-wrap: balance; margin-bottom: 1.1rem;
}
.hero p { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: #E8F0F5; margin: 0 0 1.8rem;
          text-shadow: 0 1px 14px rgba(0, 24, 34, 0.6); }

.tlacitka { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.btn {
  display: inline-block; padding: 0.8rem 1.5rem; border-radius: 3px;
  font-size: 0.95rem; font-weight: 600; text-decoration: none;
  background: var(--gold); color: var(--tmava); border: 1px solid var(--gold);
}
.btn--linka { background: transparent; color: var(--cream); border-color: rgba(248,244,234,0.4); }

/* ----------------------------------------------------------------- čísla */

.pas { background: var(--cream); border-block: 1px solid var(--line); }
.cisla { display: grid; gap: 1.6rem 2.4rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
         list-style: none; margin: 0; padding-block: clamp(36px, 6vw, 56px); }
.cisla li { display: flex; flex-direction: column; gap: 0.3rem; }
.cislo { font-family: var(--serif); font-size: clamp(2.3rem, 6vw, 3.2rem); line-height: 1;
         color: var(--tmava); font-variant-numeric: tabular-nums; }
.cislo-pie { font-size: 0.84rem; line-height: 1.35; color: var(--muted); max-width: 18ch; }

/* ----------------------------------------------------------------- sekce */

.sekce { padding-block: clamp(48px, 8vw, 88px); }
.sekce h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.1; color: var(--tmava);
            letter-spacing: -0.015em; text-wrap: balance; margin-bottom: 1rem; }
.perex { font-size: 1.08rem; max-width: 60ch; color: var(--ink); }
.perex + .perex { margin-top: 0.9rem; }

/* --------------------------------------------------------------- projekty */

.projekty { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.4rem;
            grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.projekt {
  display: flex; flex-direction: column;
  background: var(--bila); border: 1px solid var(--line); border-radius: 5px;
  box-shadow: 0 1px 2px var(--stin); overflow: hidden;
}
.projekt-foto { aspect-ratio: 16 / 9; background: var(--cream); }
.projekt-foto img { width: 100%; height: 100%; object-fit: cover; }
.projekt-foto figcaption {
  padding: 0.45rem 1.3rem 0; font-size: 0.74rem; color: var(--muted);
  letter-spacing: 0.04em;
}
.projekt-telo { padding: 1.3rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.projekt h3 { font-size: 1.35rem; line-height: 1.2; color: var(--tmava); }
.projekt-perex { font-weight: 600; font-size: 0.97rem; margin: 0; }
.projekt-text { font-size: 0.94rem; color: var(--muted); margin: 0; }
.projekt-cisla { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; margin: 0.2rem 0 0; padding: 0; }
.projekt-cisla li { display: flex; flex-direction: column; }
.projekt-cisla .n { font-family: var(--serif); font-size: 1.5rem; line-height: 1.05; color: var(--gold-tmava);
                    font-variant-numeric: tabular-nums; }
.projekt-cisla .p { font-size: 0.76rem; color: var(--muted); max-width: 16ch; line-height: 1.3; }
.projekt-odkaz { margin-top: auto; font-size: 0.9rem; font-weight: 600; color: var(--tmava); }

.stav { align-self: flex-start; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em;
        text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 999px; }
.stav--bezi { background: #E8F0E9; color: #2C5E3F; }
.stav--byvaly { background: var(--cream); color: var(--muted); border: 1px solid var(--line); }

/* -------------------------------------------------------------- jak pomoci */

.pomoc { background: var(--tmava); color: var(--cream); }
.pomoc h2 { color: var(--cream); }
.pomoc .nadtitulek { color: var(--gold); }
.pomoc .perex { color: #D7E3EA; }
.ucet { margin-top: 1.6rem; padding: 1.2rem 1.4rem; border: 1px solid rgba(248,244,234,0.22);
        border-radius: 4px; max-width: 32rem; display: grid; gap: 0.3rem; }
.ucet dt { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #9EB6C3; }
.ucet dd { margin: 0; font-family: var(--serif); font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.ucet .banka { font-family: var(--sans); font-size: 0.9rem; color: #D7E3EA; }

/* ---------------------------------------------------------------- patička */

.paticka { background: var(--cream); border-top: 1px solid var(--line); font-size: 0.9rem; }
.paticka .obal { padding-block: 2.2rem; display: grid; gap: 1.2rem; }
.paticka a { color: var(--tmava); }
.paticka-radek { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; color: var(--muted); }

/* Znak spolku je záchranný kruh s arou ararauna — tedy přesně tím druhem,
   který se v Paraguayi pašuje nejvíc. Na tmavém poli hero sekce drží sám,
   proto bez podkladu. */
/* Znak nese po obvodu nápis „SPOLEČNOST LAGUNA"; pod zhruba 130 px se
   přestane dát přečíst, tak má spodní mez výš, než by se zdálo nutné. */
/* Hlavička má na první pohled říct, kde člověk je: velký znak a vedle
   něj velký název. Motto je až pod nimi — je to věta k přečtení, ne
   vizitka. */
.znacka {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.6rem);
  margin-bottom: clamp(1rem, 2.5vw, 1.6rem);
}
.hero .logo {
  width: clamp(124px, 17vw, 230px);
  height: auto;
  flex: none;
  filter: drop-shadow(0 10px 26px rgba(0, 20, 30, 0.45));
}
/* Selektor je schválně `.hero .znacka-nazev`, ne jen `.znacka-nazev`:
   název je <p> uvnitř hlavičky a obecné `.hero p` (velikost běžného
   odstavce) ho jinak přebije. Název pak vyjde menší než text pod ním
   a hlavička přestane říkat, kde člověk je. */
.hero .znacka-nazev {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.3rem, 6.4vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(0, 24, 34, 0.55);
}

.motto {
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem);
  max-width: 44ch;
  padding-left: clamp(0.9rem, 2vw, 1.4rem);
  border-left: 2px solid var(--gold);
}
.hero .motto p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.98rem, 1.9vw, 1.18rem);
  line-height: 1.3;
  color: var(--cream);
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(0, 24, 34, 0.6);
}
.motto footer {
  margin-top: 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-text { position: relative; padding-block: clamp(44px, 7vw, 86px); }

.paticka .znak { width: 104px; height: auto; }

/* Logo partnera v kartě projektu. Na rozdíl od fotky se nesmí ořezávat,
   tak dostává vlastní pole s odsazením a vejde se celé. */
.projekt-logo {
  display: grid; place-items: center;
  padding: 1.6rem 1.3rem 0.2rem;
  background: var(--bila);
}
/* Logo partnera je vodorovný nápis, ne čtverec. Omezovat ho výškou znamená
   drobek; šířka mu dá velikost, jakou má mít. */
.projekt-logo img { width: auto; max-width: 78%; max-height: 72px; }

/* ------------------------------------------------------------ klub patronů
   QR kód je obrázek pro foťák, ne prvek vzhledu: destička je natvrdo bílá
   a kresba natvrdo tmavá, ne přes proměnné. Kdyby se obarvoval podle
   palety, stačilo by jedno budoucí ztmavení pozadí a čtečka v mobilu by ho
   nepřečetla — a to je rozdíl mezi „vypadá hůř“ a „nefunguje“.

   Číslo účtu a částka stojí vedle kódu textem. QR je pro čtečku obrazovky
   prázdný obrázek; bez textu by si nevidomý dárce trvalý příkaz nezaložil. */

.klub { background: var(--cream); border-top: 1px solid var(--line); }

.patron-karty {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
}
.patron {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.3rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
}
.patron-castka {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--tmava);
  font-variant-numeric: tabular-nums;
}
.patron-castka span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.patron-castka--vlastni { font-size: 1.3rem; }

/* Výzva k pomoci na stránce projektu.

   Tmavý panel uvnitř světlé stránky: je to jediné místo článku, které
   po čtenáři něco chce, a má se od vyprávění odlišit. Tmavý podklad má
   i praktický důvod — `.ucet` je psaný pro tmavé pozadí hlavní stránky
   a takhle se dá použít beze změny. */
.pomoc-projekt {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  background: var(--tmava);
  color: var(--cream);
  border-radius: 6px;
}
.pomoc-projekt h2 { color: var(--cream); margin: 0 0 0.6rem; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.pomoc-projekt > p { color: #D7E3EA; margin: 0 0 1.4rem; max-width: 60ch; }
.pomoc-projekt-telo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: start;
}
/* Projekty bez QR mají v mřížce jediné dítě, ať se text neroztahuje
   do sloupce, který nikdo nezaplnil. */
.pomoc-projekt-telo > :only-child { grid-column: 1 / -1; }
.pomoc-projekt-telo > div > p { color: #D7E3EA; margin: 0; font-size: 0.95rem; }
.pomoc-projekt-qr { display: grid; gap: 0.6rem; justify-items: start; max-width: 11rem; }
.pomoc-projekt-pozn { margin: 0; font-size: 0.82rem; line-height: 1.45; color: #9EB6C3; }
.pomoc-projekt .tlacitka { margin-top: 1.4rem; }
.pomoc-projekt .btn--tmavylink { color: var(--cream); border-color: rgba(248, 244, 234, 0.38); }
/* QR vedle textu je zbytečně velký a na úzké obrazovce by text rozmáčkl;
   pod 40rem jde nad něj. */
@media (max-width: 40rem) {
  .pomoc-projekt-telo { grid-template-columns: 1fr; }
}

.patron-qr {
  display: block;
  width: 100%;
  max-width: 9.5rem;
  height: auto;
  margin-top: auto;
  padding: 0.6rem;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.patron-qr path { fill: #0B2630; }

.patron-ucet {
  margin: 1.6rem 0 0;
  padding: 1.1rem 1.3rem;
  max-width: 32rem;
  display: grid;
  gap: 0.3rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.patron-ucet dt {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.patron-ucet dd {
  margin: 0; font-family: var(--serif); font-size: 1.45rem;
  color: var(--tmava); font-variant-numeric: tabular-nums;
}
.patron-ucet .banka {
  font-family: var(--sans); font-size: 0.9rem; color: var(--muted);
}

.patron-jak { max-width: 62ch; margin: 1.8rem 0 0; color: var(--ink); }
.patron-pozn {
  max-width: 62ch;
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}
.patron .patron-pozn { margin: 0; font-size: 0.8rem; max-width: none; }
.klub .btn--linka { color: var(--tmava); border-color: var(--line); }

/* ------------------------------------------------- podstránky s texty
   Texty projektů přenesené ze starého webu (laguna/stranky.json). Mají
   jen úzký pruh s logem místo velké hlavičky s fotkou — jsou to články
   ke čtení, ne vstupní brána. */

/* Přeskočit menu rovnou na obsah.

   Nabídka má pětadvacet odkazů. Kdo chodí po webu klávesnicí nebo
   s odečítačem obrazovky, jimi musel projít na každé stránce znovu,
   než se dostal k textu. Odkaz je schovaný mimo plochu a vyjede, až
   když na něj někdo stoupne tabulátorem — myší ho nikdo neuvidí. */
.preskocit {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 0.7rem 1.1rem;
  background: var(--tmava);
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 0 0 6px 0;
}
.preskocit:focus { left: 0; }

/* Horní menu. Tmavé, se značkou vlevo a dvouúrovňovou nabídkou vpravo.
   Nese všech devatenáct stránek — návštěvník vidí, co na webu je, aniž
   musí někam klikat.

   Ve značce je ZNAK, ne logo s nápisem: nápisová verze je modrá na
   průhledném pozadí a na tmavém pruhu by zanikla. Název je vedle ní
   textem, krémový.

   Rozbalování dělá :hover a :focus-within, tedy čisté CSS. Na úzké
   obrazovce se podmenu nevysouvá, ale vypíše pod rodičem — bez skriptu
   a dotykem je tak všechno dostupné. */
.menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  padding: 0.5rem max(16px, env(safe-area-inset-left, 0px))
           0.5rem max(16px, env(safe-area-inset-right, 0px));
  background: var(--tmava);
  color: var(--cream);
}
.menu-znacka {
  display: flex; align-items: center; gap: 0.6rem; flex: none;
  color: var(--cream); text-decoration: none;
  font-family: var(--serif); font-size: 1.05rem; white-space: nowrap;
}
.menu-znacka img { width: 40px; height: 40px; flex: none; }

/* Tlačítko nabídky patří jen úzké obrazovce; na široké není potřeba. */
.menu-prepinac, .menu-tlacitko { display: none; }

.menu-odkazy {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.2rem 1.3rem;
  order: 2;
}
.menu-odkazy > li { position: relative; }
.menu-odkazy a {
  display: inline-block;
  color: var(--cream); font-size: 0.93rem; font-weight: 600;
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
}
.menu-odkazy a:hover, .menu-odkazy a:focus-visible { border-bottom-color: var(--gold); }

.menu-pod { list-style: none; margin: 0; padding: 0; }
.menu-pod a { font-weight: 500; font-size: 0.9rem; }

/* Vysouvací podmenu až tam, kde je na ně místo a kde se ukazuje myší. */
@media (min-width: 60rem) {
  .menu-pod {
    position: absolute; top: 100%; left: -0.9rem; z-index: 20;
    min-width: 13rem;
    padding: 0.5rem 0.9rem 0.7rem;
    background: var(--tmava-2);
    border: 1px solid rgba(248, 244, 234, 0.16);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 14px 30px rgba(0, 20, 30, 0.35);
    visibility: hidden; opacity: 0;
  }
  .menu-odkazy > li:hover > .menu-pod,
  .menu-odkazy > li:focus-within > .menu-pod { visibility: visible; opacity: 1; }
  .menu-pod a { display: block; padding: 0.3rem 0; }
}

/* Na úzké obrazovce je nabídka schovaná pod tlačítkem. Přepínač jazyků
   zůstává v horním pruhu vidět — je to jedna z mála věcí, kterou člověk
   hledá hned, a za tlačítkem by ji nenašel. Rozbalené podmenu se jen
   odsadí: vysouvat ho dotykem nejde. */
@media (max-width: 59.99rem) {
  /* Zaškrtávátko není `hidden`, jen neviditelné — jinak by se na něj
     nedalo stoupnout tabulátorem a tlačítko by bylo jen pro myš. */
  .menu-prepinac {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; margin: 0; pointer-events: none;
  }
  .menu-tlacitko {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(248, 244, 234, 0.35); border-radius: 6px;
    color: var(--cream); font-size: 0.93rem; font-weight: 600;
    cursor: pointer;
  }
  .menu-prepinac:focus-visible + .menu-tlacitko {
    outline: 2px solid var(--gold); outline-offset: 2px;
  }
  .menu-prepinac:checked + .menu-tlacitko {
    background: rgba(248, 244, 234, 0.12);
  }
  /* Tři čárky z jednoho prvku: prostřední je on sám, krajní jsou stíny. */
  .menu-carky {
    width: 18px; height: 2px; flex: none; background: currentColor;
    box-shadow: 0 -6px currentColor, 0 6px currentColor;
  }

  .menu-odkazy { display: none; }
  .menu-prepinac:checked ~ .menu-odkazy {
    display: flex; width: 100%; flex-direction: column; gap: 0;
    order: 9; padding-bottom: 0.4rem;
  }
  .menu-odkazy > li { border-top: 1px solid rgba(248, 244, 234, 0.12); }
  .menu-pod { padding: 0 0 0.3rem 1.1rem; }
  .menu-pod a { padding: 0.25rem 0; }
}

.podnadpis {
  font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08;
  letter-spacing: -0.015em; color: var(--tmava);
  text-wrap: balance; margin: 0 0 1.6rem;
}
.text { max-width: 68ch; }
.text p { margin: 0 0 1.1rem; font-size: 1.04rem; line-height: 1.65; color: var(--ink); }
.text h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.2;
  color: var(--tmava); margin: 2.2rem 0 0.8rem;
}
.vycet { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.vycet li { margin-bottom: 0.45rem; line-height: 1.6; color: var(--ink); }

/* Obrysové tlačítko na světlém pozadí — bez toho má krémový text na krému. */
.btn--tmavylink { color: var(--tmava); border-color: var(--tmava); }

/* Odkazy ven s rokem a zdrojem — Laguna v médiích. */
.odkazy { list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: 68ch; }
.odkazy li {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0.2rem 0.9rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.odkazy li:last-child { border-bottom: 1px solid var(--line); }
.odkazy-rok {
  grid-row: span 2;
  font-family: var(--serif); font-size: 1.1rem; color: var(--tmava);
  font-variant-numeric: tabular-nums;
}
.odkazy-zdroj { font-size: 0.84rem; color: var(--muted); }

/* Karty míst, kde Laguna vystavuje. */
.karty { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.2rem;
         grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.karty > li {
  min-width: 0; padding: 1.2rem 1.3rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
}
.karty h3 { margin: 0 0 0.25rem; font-size: 1.2rem; line-height: 1.2; color: var(--tmava); }
.karty p { margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.55; color: var(--ink); }
.karty-kde { font-weight: 600; color: var(--muted) !important; font-size: 0.86rem !important; }
.karty-pozn { font-size: 0.82rem !important; color: var(--muted) !important; }
.karty > li > p:last-child { margin-bottom: 0; }

.poznamka { max-width: 68ch; margin-top: 1.8rem; font-size: 0.86rem; line-height: 1.55;
            color: var(--muted); padding-top: 1rem; border-top: 1px solid var(--line); }

/* Rozcestník podstránek v patičce. Na úzké obrazovce se zalomí. */
.paticka-stranky {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  margin-top: 0.9rem; padding-top: 0.9rem;
  border-top: 1px solid rgba(248, 244, 234, 0.18);
  font-size: 0.9rem;
}

/* Přepínač jazyků v menu. Popisek je ten jazyk, ve kterém návštěvník
   právě je; zbylé dva jsou odkazy. Mimo stránku zvířat vedou obě cizí
   řeči na ni, protože přeložená je zatím jen ona. */
.menu-jazyky { display: flex; align-items: center; gap: 0.55rem; order: 3; }
.menu-jazyky span,
.menu-jazyky a {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 0.2rem 0.45rem; border: 1px solid rgba(248, 244, 234, 0.3);
  border-radius: 3px; line-height: 1.2;
}
.menu-jazyky span { color: var(--cream); background: rgba(248, 244, 234, 0.14); }
.menu-jazyky a { color: var(--cream); border-bottom: 1px solid rgba(248, 244, 234, 0.3); }
.menu-jazyky a:hover, .menu-jazyky a:focus-visible {
  border-color: var(--gold); border-bottom-color: var(--gold);
}