/* ŽELEMENT — veřejný web
   Bulvár podle varianty B z prototypu: hodně červené, výkřiky,
   mozaika dlaždic, ostré hrany. Žádné zaoblené rohy, žádné gradienty
   na pozadí — brand je tisk. */

/* Barvy: zdroj pravdy je tokens.css (načítá se před tímhle souborem).
   Tady jsou jen krátké aliasy, ať se v pravidlech nepíše žádný hex.
   Kde se web od tokenu záměrně liší, je u toho proč. */
:root {
  --red: var(--color-red);
  --red-dark: var(--color-red-dark);
  --red-tint: var(--color-red-tint);
  --black: #000;                      /* tokeny čistou černou nemají; tisk ji má */
  --ink: var(--color-ink);
  --ink-2: var(--color-ink-2);
  --white: var(--color-white);
  --bg: #f4f1ea;                      /* teplejší než --color-bg: novinový papír, ne obrazovka */
  --paper: #fdfbf6;
  --paper-dim: #ece7db;               /* podklad poznámek, o stupeň tmavší než --bg */
  --muted: var(--color-muted);
  --hairline: #d8d2c4;                /* teplá linka k teplému papíru */
  --nav-hairline: #2a2a2a;
  --pink: #ffd0d4;                    /* světlá červená na černé (aktuální číslo) */
  --coral: #ff6b7a;                   /* červená na černé: čistá --red má na černé jen 3,8:1 */
  --grey-on-black: #9a9a9a;           /* meta text na černé, 6:1 */
  --grey-on-black-light: #ddd;
  --cream: #ffffdd;                   /* kurzíva na červené dlaždici */
  --success: var(--color-success);
  --success-bg: var(--color-success-bg);
  --warning: var(--color-warning);
  --warning-bg: var(--color-warning-bg);
  --error-text: #8a0512;
  /* Android nemá Times ani Georgii — bez Noto Serif a Roboto by spadl
     na systémový fallback, který se liší zařízení od zařízení. */
  --serif: 'Times New Roman', Times, 'Noto Serif', Georgia, serif;
  --serif-body: Georgia, 'Times New Roman', 'Noto Serif', serif;
  --sans: Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 16px;
  line-height: 1.55;
}

a { color: inherit; }

/* ======================================================= horní proužek */
.strip {
  background: var(--black);
  color: var(--white);
  padding: 6px 20px;
  font: 700 11px/1.6 var(--sans);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* Korálová místo čisté červené: --red má na černé 3,8:1, tohle 7,6:1. */
.strip em { color: var(--coral); font-style: italic; font-weight: 800; }
.strip a { color: var(--white); text-decoration: none; margin-left: 14px; }
.strip a:hover { color: var(--coral); }

/* ======================================================= hlavička */
.mast {
  background: var(--red);
  color: var(--white);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  border-bottom: 6px solid var(--black);
}
.mast::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.4px);
  background-size: 4px 4px;
  pointer-events: none;
}
.mast__left { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }

.babovka {
  width: 64px; height: 64px; flex: 0 0 64px;
  background-image: url('../img/babovka.jpg');
  background-size: cover;
  background-position: center;
  background-color: var(--white);
  /* Bez mix-blend-mode: forma na fotce je červená a na červené
     hlavičce by splynula s pozadím. Bílý podklad z ní udělá
     vystřiženou fotku, což k novinám sedí líp. */
  filter: contrast(1.08);
  border: 3px solid var(--white);
  transform: rotate(-4deg);
  cursor: pointer;
  padding: 0;
  transition: transform 0.25s ease;
}
.babovka:hover { transform: rotate(4deg) scale(1.04); }
.babovka.je-rozjeta { animation: babovka-tocit 0.9s ease-in-out; }
@keyframes babovka-tocit { 100% { transform: rotate(356deg) scale(1); } }

.mast__slovo {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font: 900 clamp(38px, 7vw, 70px)/0.85 var(--serif);
  letter-spacing: -2px;
  color: var(--white);
  text-shadow: 3px 3px 0 var(--black);
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.mast__slovo.je-otresena { animation: logo-trest 0.4s ease; }
@keyframes logo-trest {
  25% { transform: rotate(-1.5deg) translateX(-3px); }
  75% { transform: rotate(1.5deg) translateX(3px); }
}
/* Bílá s lehkou průhledností místo růžové: #ffd0d4 na červené měla
   jen 4:1, tohle přes 5:1 a pořád působí jako podtitul, ne jako text. */
.mast__tag {
  font: 700 11px/1.4 var(--sans);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.94;
  margin-top: 4px;
  min-height: 1.4em;
}
.mast__tag.je-nova { animation: tag-naskoc 0.35s ease; }
@keyframes tag-naskoc { from { opacity: 0; transform: translateY(-6px); } }

.mast__cislo {
  position: relative; z-index: 1;
  background: var(--black);
  color: var(--white);
  padding: 10px 18px;
  font: 800 12px/1.3 var(--sans);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transform: rotate(2deg);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
  text-decoration: none;
}
.mast__cislo b { display: block; font-size: 18px; color: var(--pink); letter-spacing: 0.5px; }

/* ======================================================= navigace */
.nav {
  background: var(--black);
  display: flex;
  flex-wrap: wrap;            /* na mobilu se zalomí — nic se neschová za okraj */
  align-items: stretch;
  padding: 0 20px;
  font: 800 13px/1 var(--sans);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.nav__hledat {
  display: inline-flex; align-items: center;
  padding: 12px 14px !important;
}
.nav a {
  color: var(--white);
  text-decoration: none;
  padding: 12px 15px;
  border-right: 1px solid var(--nav-hairline);
  white-space: nowrap;
}
.nav a:hover, .nav a.je-aktivni { background: var(--red); }
.nav__live {
  margin-left: auto;
  padding: 12px 15px;
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.nav__live .dot {
  width: 8px; height: 8px; background: var(--white); border-radius: 50%;
  animation: puls 1.4s ease-in-out infinite;
}
@keyframes puls { 50% { opacity: 0.3; } }
.nav__ucet { display: flex; align-items: center; padding: 0 12px; }
.nav form { margin: 0; display: inline; }

/* ======================================================= mozaika */
.mozaika {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;      /* kdyby něco nevyšlo na řadu, menší dlaždice díru zalepí */
  gap: 8px;
  padding: 16px 20px;
  max-width: 1500px;
  margin: 0 auto;
}

.dlazdice {
  border: 4px solid var(--black);
  background: var(--paper);
  padding: 16px 20px;
  position: relative;
  isolation: isolate;         /* fotka a přechod jdou pod text přes záporný z-index */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: inherit;
  min-height: 180px;
}
/* Odkaz je jen na nadpisu — čtečka tak přečte „odkaz: Lžou dětem",
   ne celý obsah dlaždice jako jeden dlouhý odkaz. Klikatelná je ale
   celá dlaždice: pseudoprvek odkazu ji přikryje. */
.dlazdice h2 a, .dlazdice h3 a { color: inherit; text-decoration: none; }
.dlazdice h2 a::after, .dlazdice h3 a::after { content: ""; position: absolute; inset: 0; }
.dlazdice h2 a:focus-visible, .dlazdice h3 a:focus-visible { outline: none; }
.dlazdice:hover, .dlazdice:focus-within { outline: 4px solid var(--red); outline-offset: -4px; }
.dlazdice h2, .dlazdice h3 {
  font-family: var(--serif);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -1px;
  line-height: 0.95;
  margin: 6px 0;
  overflow-wrap: anywhere;    /* dlouhé slovo se nesmí oříznout */
  hyphens: auto;
}
.dlazdice em { color: var(--red); font-style: italic; }
.dlazdice .cat {
  font: 900 11px/1.4 var(--sans);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red);
}
.dlazdice .meta {
  font: 700 11px/1.4 var(--sans);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.dlazdice .perex {
  font-family: var(--serif-body);
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
}

/* hero */
.dlazdice--hero {
  grid-column: span 8;
  background: var(--black);
  color: var(--white);
  justify-content: flex-end;
  padding: 30px 32px;
  min-height: 380px;
  background-image:
    linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.7) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(211,7,26,0.6), transparent 60%),
    repeating-linear-gradient(45deg, var(--ink) 0 2px, #0a0a0a 2px 8px);
}
/* Hlavní obrázek jde pod text; přechod nad ním drží titulek čitelný
   i na světlé fotce. Bez fotky zůstává rastr z pozadí výš. */
.dlazdice__foto { position: absolute; inset: 0; z-index: -2; margin: 0; }
.dlazdice__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dlazdice--s-fotkou::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.62) 45%, rgba(0,0,0,0.12) 100%);
}
.dlazdice--hero .cat {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 2px;
  padding: 5px 12px;
  width: fit-content;
  white-space: normal; max-width: 100%;
}
.dlazdice--hero h2 {
  font-size: clamp(38px, 6vw, 88px);
  letter-spacing: -3px;
  line-height: 0.9;
  margin: 12px 0 14px;
  text-wrap: balance;
}
.dlazdice--hero .perex { color: var(--grey-on-black-light); font-size: 16px; max-width: 75%; }
.dlazdice--hero .meta { color: var(--grey-on-black); }

/* boční dlaždice */
.dlazdice--krik { grid-column: span 4; background: var(--red); color: var(--white); min-height: 206px; }
.dlazdice--krik .cat { background: var(--black); color: var(--white); padding: 3px 8px; width: fit-content; }
.dlazdice--krik h2 { font-size: 34px; }
.dlazdice--krik em { color: var(--cream); }
.dlazdice--krik .meta, .dlazdice--krik .perex { color: rgba(255,255,255,0.85); }

/* Papír má 6/12, aby s dvěma malými (3+3) zavřel řadu — se 4/12 zbývala
   dvousloupcová díra, kterou žádná dlaždice nezaplní. */
.dlazdice--papir { grid-column: span 6; min-height: 206px; }
.dlazdice--papir h2 { font-size: 30px; }

.dlazdice--mala { grid-column: span 3; min-height: 170px; }
.dlazdice--mala h3 { font-size: 21px; letter-spacing: -0.5px; }
.dlazdice--cerna { background: var(--black); color: var(--white); }
.dlazdice--cerna .cat { color: var(--coral); }
.dlazdice--cerna em { color: var(--coral); }
.dlazdice--cerna .meta, .dlazdice--cerna .perex { color: var(--grey-on-black); }
.dlazdice--ruda { background: var(--red); color: var(--white); }
.dlazdice--ruda .cat { background: var(--white); color: var(--black); padding: 2px 6px; width: fit-content; }
.dlazdice--ruda em { color: var(--black); }
.dlazdice--ruda .meta, .dlazdice--ruda .perex { color: rgba(255,255,255,0.85); }

/* Dorovnání poslední řady: zbylé malé dlaždice se roztáhnou, ať mozaika
   nekončí dírou. Třídu přiděluje home.twig podle počtu článků. */
.dlazdice--cela { grid-column: span 12; flex-direction: row; align-items: flex-end; gap: 24px; min-height: 120px; }
.dlazdice--cela h3 { font-size: 28px; }
.dlazdice--cela .meta { white-space: nowrap; }
.dlazdice--pul { grid-column: span 6; }
.dlazdice--tretina { grid-column: span 4; }

/* hvězdice a cedulka */
.hvezdice {
  position: absolute;
  top: 18px; right: 22px;
  width: 124px; height: 124px;
  background: var(--red);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font: 900 13px/1.05 var(--sans);
  text-transform: uppercase;
  transform: rotate(8deg);
  padding: 16px;
  z-index: 3;
  pointer-events: none;       /* ozdoba nesmí sebrat kliknutí odkazu pod sebou */
  clip-path: polygon(
    50% 0%, 60% 18%, 80% 8%, 75% 30%, 95% 35%, 78% 50%, 95% 65%, 75% 70%,
    80% 92%, 60% 82%, 50% 100%, 40% 82%, 20% 92%, 25% 70%, 5% 65%, 22% 50%,
    5% 35%, 25% 30%, 20% 8%, 40% 18%
  );
}
.hvezdice--rozek { top: -16px; right: -16px; width: 92px; height: 92px; font-size: 11px;
                   transform: rotate(-14deg); padding: 14px; }

/* ======================================================= tip a PDF */
.pruh-zapoji {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
  padding: 0 20px 16px;
  max-width: 1500px;
  margin: 0 auto;
}
.tip, .pdf-box {
  border: 4px solid var(--black);
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}
.tip { background: var(--paper); padding-right: 96px; }
.tip h3, .pdf-box h3 { font: 900 26px/1 var(--serif); text-transform: uppercase;
                       letter-spacing: -1px; margin: 0 0 8px; }
.tip em, .pdf-box em { color: var(--red); font-style: italic; }
.tip p { margin: 0 0 8px; font-size: 15px; }
.pdf-box { background: var(--black); color: var(--white); display: flex; flex-direction: column;
           justify-content: space-between; }
.pdf-box p { font-size: 13px; color: var(--grey-on-black); margin: 0 0 12px; }
.pdf-box .button { border-color: var(--white); background: var(--white); color: var(--black); }

/* ======================================================= obsah stránek */
main.stranka { max-width: 820px; margin: 0 auto; padding: 28px 20px 48px; }
main.siroka { max-width: 1500px; }
.note--titulka { margin: 12px 20px; }

h1 { font: 900 clamp(32px, 5vw, 52px)/0.98 var(--serif); letter-spacing: -1.6px;
     text-transform: uppercase; margin: 0 0 12px; }
h1 em, h2 em { color: var(--red); font-style: italic; }
h2 { font: 900 26px/1.1 var(--serif); letter-spacing: -0.8px; text-transform: uppercase; }
.eyebrow { font: 700 11px/1.4 var(--sans); letter-spacing: 2.5px; text-transform: uppercase;
           color: var(--muted); margin: 0; }
.lead { font: italic 17px/1.5 var(--serif-body); color: var(--ink-2); }
.meta { font: 700 11px/1.5 var(--sans); letter-spacing: 1.2px; text-transform: uppercase;
        color: var(--muted); }
.meta a { color: var(--muted); }
.kicker { font: 900 11px/1.3 var(--sans); letter-spacing: 1.6px; text-transform: uppercase;
          color: var(--red); margin: 0 0 6px; }

.ribbon {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  padding: 4px 12px;
  font: 900 11px/1.4 var(--sans);
  text-transform: uppercase;
  letter-spacing: 1.8px;
}
.ribbon--inline { margin: 18px 0; }

/* výpis článků ve sloupci */
.karta { border-bottom: 1px solid var(--hairline); padding-bottom: 20px; margin-bottom: 24px; }
.karta__titulek { font: 900 28px/1.05 var(--serif); letter-spacing: -0.8px;
                  text-transform: uppercase; margin: 4px 0 8px; }
.karta__titulek a { text-decoration: none; }
.karta__titulek a:hover { color: var(--red); }
.karta__titulek em { color: var(--red); font-style: italic; }
.karta__perex { font-style: italic; color: var(--ink-2); margin: 0 0 8px; }
/* Karta s náhledem: fotka vlevo, text vpravo; na mobilu pod sebou. */
.karta--s-fotkou { display: flex; gap: 18px; align-items: flex-start; }
.karta__foto { flex: 0 0 200px; margin: 0; }
.karta__foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
                   display: block; border: 3px solid var(--black); }
.karta__text { flex: 1 1 auto; min-width: 0; }

/* stránkování výpisů */
.strankovani {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 28px; padding-top: 16px; border-top: 4px solid var(--black);
  font: 800 12px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase;
}
.strankovani a { text-decoration: none; border: 3px solid var(--black); padding: 10px 16px; }
.strankovani a:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.strankovani__stav { color: var(--muted); }

/* ======================================================= článek */
.clanek__titulek { font: 900 clamp(34px, 6vw, 64px)/0.95 var(--serif); letter-spacing: -2.2px;
                   text-transform: uppercase; margin: 8px 0 14px; text-wrap: balance; }
.clanek__titulek em { color: var(--red); font-style: italic; }
.perex { font: italic 18px/1.5 var(--serif-body); color: var(--ink-2); border-left: 4px solid var(--red);
         padding-left: 16px; }
.clanek__telo { font-size: 17px; }
.clanek__telo p { margin: 0 0 18px; }
.clanek__telo .mezititulek { font: 900 24px/1.15 var(--serif); text-transform: uppercase;
                             letter-spacing: -0.6px; margin: 32px 0 12px; }
.clanek__telo blockquote { border-left: 5px solid var(--red); margin: 28px 0; padding-left: 18px; }
.clanek__telo blockquote p { font: italic 900 24px/1.25 var(--serif); margin: 0 0 6px; }
.clanek__telo cite { font: 700 11px/1.4 var(--sans); text-transform: uppercase;
                     letter-spacing: 1.4px; color: var(--muted); font-style: normal; }
.clanek__telo figure { margin: 28px 0; }
.clanek__telo img { max-width: 100%; height: auto; border: 3px solid var(--black); }
.clanek__telo figcaption { font: 12px/1.4 var(--sans); color: var(--muted); margin-top: 6px; }
.clanek__telo .seznam li { margin-bottom: 6px; }
.oddelovac { border: none; border-top: 4px solid var(--black); margin: 36px 0; }
.clanek__patka { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.clanek__patka time { font-variant-numeric: tabular-nums; }
.stitky a { margin-right: 10px; color: var(--red); font-size: 13px; text-decoration: none; }
.stitky a:hover { text-decoration: underline; }
.disclaimer { font: 700 11px/1.6 var(--sans); text-transform: uppercase; letter-spacing: 1.4px;
              color: var(--muted); border-top: 1px solid var(--hairline);
              border-bottom: 1px solid var(--hairline); padding: 10px 0; margin: 24px 0; }
.souvisejici { margin-top: 36px; border-top: 4px solid var(--black); padding-top: 14px; }
.souvisejici a { font: 900 18px/1.25 var(--serif); text-decoration: none; }
.souvisejici a:hover { color: var(--red); }
.hero-obrazek { margin: 24px 0; }
.hero-obrazek img { width: 100%; height: auto; border: 4px solid var(--black); display: block; }

/* ======================================================= diskuse */
.diskuse { margin-top: 44px; border-top: 4px solid var(--black); padding-top: 16px; }
.komentar { border-bottom: 1px solid var(--hairline); padding: 14px 0; }
.komentar--odpoved { margin-left: 24px; border-left: 3px solid var(--hairline);
                     padding-left: 14px; border-bottom: none; }
.komentar__hlava { margin: 0 0 4px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.komentar p { margin: 0 0 6px; }
.komentar-form, .odpoved-form { margin: 18px 0; }
.odpoved-form { margin: 8px 0 0; }
/* Odpověď: jedno tlačítko, formulář se rozbalí až po kliknutí.
   Nativní <details> — bez JS, s klávesnicí, bez skoku v adrese. */
.odpoved { margin-left: 24px; }
.odpoved > summary {
  display: inline-block; list-style: none; cursor: pointer;
  font: 800 11px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--red); padding: 6px 0;
}
.odpoved > summary::-webkit-details-marker { display: none; }
.odpoved > summary::before { content: "↳ "; }
.odpoved[open] > summary { color: var(--muted); }
textarea, input[type=search], input[type=text], input[type=email] {
  width: 100%; padding: 10px; border: 2px solid var(--black); background: var(--white);
  font: 16px/1.5 var(--serif-body);   /* pod 16 px iOS při zaměření pole přiblíží stránku */
}
textarea:focus, input:focus { outline: 3px solid var(--red); outline-offset: 1px; }
label { display: block; font: 700 11px/1.4 var(--sans); text-transform: uppercase;
        letter-spacing: 1.4px; margin: 12px 0 5px; }
.napoveda { font: 13px/1.5 var(--sans); color: var(--muted); margin: 6px 0 0; }

button, .button {
  display: inline-block; margin-top: 10px; padding: 11px 20px;
  border: 3px solid var(--black); background: var(--black); color: var(--white);
  font: 900 11px/1 var(--sans); text-transform: uppercase; letter-spacing: 1.6px;
  cursor: pointer; text-decoration: none;
}
button:hover, .button:hover { background: var(--red); border-color: var(--red); }
.odkaz { background: none; border: none; color: inherit; text-decoration: underline;
         padding: 0; margin: 0; letter-spacing: 1.2px; cursor: pointer;
         font: 800 13px/1 var(--sans); text-transform: uppercase; }
.nav .odkaz { color: var(--white); text-decoration: none; }
.inline-form { display: inline; }

.note { padding: 12px 16px; margin-bottom: 16px; border-left: 5px solid var(--muted);
        background: var(--paper-dim); font: 15px/1.5 var(--serif-body); }
.note--error { border-color: var(--red); background: var(--red-tint); }
.note--success { border-color: var(--success); background: var(--success-bg); }
.note--warn { border-color: var(--warning); background: var(--warning-bg); }
.note a { color: var(--red); }

.hledani { display: flex; gap: 8px; margin: 16px 0 28px; }
.hledani input { flex: 1; }
.hledani button { margin: 0; }
.cisla { list-style: none; padding: 0; }
.cisla li { border-bottom: 1px solid var(--hairline); padding: 10px 0; }

/* chybové stránky: nabídnou, kudy dál */
.kudy-dal { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.kudy-dal a {
  display: inline-block; padding: 9px 13px; border: 2px solid var(--ink);
  font: 700 11px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase;
  text-decoration: none;
}
.kudy-dal a:hover { background: var(--ink); color: var(--white); }

.login-volby { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.login-volba { flex: 1 1 260px; border: 4px solid var(--black); padding: 22px; background: var(--paper); }
.login-volba h2 { font-size: 19px; margin: 0 0 8px; }
.dev-odkaz { margin-top: 20px; }
/* testovací přihlášení (jen localhost v ladicím režimu) */
.dev-ucty { display: grid; gap: 10px; margin-top: 20px; }
.dev-ucet { display: flex; align-items: center; justify-content: space-between; gap: 16px;
            border: 3px solid var(--black); background: var(--paper); padding: 12px 16px; }
.dev-ucet.je-pozastaveny { opacity: 0.55; }
.dev-ucet__kdo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dev-ucet__kdo .meta { text-transform: none; letter-spacing: 0.3px; font-weight: 400; }

/* ======================================================= patička */
.foot {
  border-top: 6px solid var(--black);
  margin-top: 48px;
  padding: 22px 20px;
  background: var(--paper);
}
.foot__slogan { font: 900 22px/1.1 var(--serif); text-transform: uppercase;
                letter-spacing: -0.6px; margin: 0 0 8px; cursor: pointer;
                background: none; border: 0; padding: 0; color: inherit; text-align: left; }
.foot__disclaimer { font: 700 11px/1.6 var(--sans); text-transform: uppercase;
                    letter-spacing: 1.4px; color: var(--muted); margin: 0; }
/* Patička s odkazy — na mobilu jediná cesta k O nás a Archivu. */
.foot__odkazy {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  margin-top: 14px;
  font: 700 11px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase;
}
.foot__odkazy a { color: var(--ink); text-decoration: none; }
.foot__odkazy a:hover { color: var(--red); }

/* ======================================================= hravé prvky */
.vzkaz {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--white);
  border: 3px solid var(--red);
  padding: 14px 22px;
  font: 700 14px/1.4 var(--sans);
  max-width: min(520px, calc(100vw - 32px));
  text-align: center;
  z-index: 60;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
  animation: vzkaz-naskoc 0.3s ease;
}
@keyframes vzkaz-naskoc { from { opacity: 0; transform: translate(-50%, 16px); } }

body.rezim-pravdy { filter: grayscale(1); }
body.rezim-pravdy .ribbon, body.rezim-pravdy .hvezdice { opacity: 0.25; }

/* Logo jako odkaz, podtitul jako tlačítko — vzhled zůstává. */
a.mast__slovo { text-decoration: none; color: inherit; display: inline-block; }
button.mast__tag {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer; text-align: left;
}
button.mast__tag:hover { text-decoration: underline dotted; }

/* Sdílení pod článkem */
.sdileni {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 18px 0;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.sdileni__tlacitko {
  font: 700 11px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase;
  padding: 9px 13px; margin: 0;   /* tlačítko i odkaz na stejné lince */
  border: 2px solid var(--ink); background: var(--white); color: var(--ink);
  text-decoration: none; cursor: pointer;
}
.sdileni__tlacitko:hover { background: var(--ink); color: var(--white); }
.sdileni__stav { font: 12px/1 var(--sans); color: var(--muted); margin-left: 4px; }

.komentar-form__chyba {
  margin: 0 0 8px;
  padding: 10px 12px;
  background: var(--red-tint);
  border-left: 4px solid var(--red);
  font: 14px/1.4 var(--sans);
  color: var(--error-text);
}
.komentar-form textarea[aria-invalid="true"] { border-color: var(--red); }

/* Viditelné zaměření pro každý interaktivní prvek, ne jen inputy. */
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.nav a:focus-visible { outline-offset: -3px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Kdo si nastavil, že nechce animace, ten je nedostane. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ======================================================= tablet */
@media (max-width: 900px) {
  .mozaika { grid-template-columns: repeat(6, 1fr); }
  .dlazdice--hero { grid-column: span 6; min-height: 340px; }
  .dlazdice--krik, .dlazdice--papir { grid-column: span 3; }
  .dlazdice--mala { grid-column: span 3; }
  .dlazdice--cela { grid-column: span 6; }
  .dlazdice--pul, .dlazdice--tretina { grid-column: span 3; }
  .pruh-zapoji { grid-template-columns: 1fr; }
}

/* ======================================================= mobil */
@media (max-width: 620px) {
  .strip { font-size: 11px; letter-spacing: 0.8px; }
  .strip > div:last-child { display: none; }
  .mast { flex-wrap: wrap; padding: 12px 16px; }
  .mast__cislo { transform: none; padding: 7px 12px; font-size: 11px; }
  .mast__cislo b { font-size: 14px; }
  .babovka { width: 48px; height: 48px; flex-basis: 48px; }
  .nav { padding: 0 6px; }
  .nav a { padding: 11px 10px; font-size: 12px; border-right: 0; }
  .nav__ucet { margin-left: auto; }
  .nav__live { display: none; }
  .mozaika { grid-template-columns: 1fr; padding: 12px; gap: 10px; }
  .dlazdice--hero, .dlazdice--krik, .dlazdice--papir, .dlazdice--mala,
  .dlazdice--cela, .dlazdice--pul, .dlazdice--tretina { grid-column: span 1; }
  .dlazdice--cela { flex-direction: column; align-items: stretch; }
  .dlazdice--cela h3 { font-size: 21px; }
  .dlazdice--hero { padding: 20px; min-height: 260px; }
  .dlazdice--hero .perex { max-width: 100%; }
  .dlazdice--hero .cat { font-size: 11px; letter-spacing: 1.2px; }
  .hvezdice { width: 88px; height: 88px; font-size: 11px; padding: 12px; top: 12px; right: 12px; }
  .pruh-zapoji { padding: 0 12px 12px; }
  /* Hvězdice „Pošli tip" přelézala přes text — na úzké obrazovce
     se schová, obsah je důležitější než ozdoba. */
  .tip .hvezdice { display: none; }
  .tip { padding-right: 20px; }
  main.stranka { padding: 20px 16px 40px; }
  .karta--s-fotkou { flex-direction: column; gap: 10px; }
  .karta__foto { flex-basis: auto; width: 100%; }
  .komentar--odpoved, .odpoved { margin-left: 12px; }
  .strankovani { flex-wrap: wrap; }
}

@media print {
  .strip, .nav, .foot__odkazy, .sdileni, .babovka, .mast__cislo, .nav__live { display: none !important; }
  .mast { background: none !important; color: #000 !important; padding: 0 !important; }
  .mast__slovo { color: #000 !important; text-shadow: none !important; }
  .dlazdice, .stranka { box-shadow: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
}