/* ============================================================ 
   style.css — poradit.cz hlavní design systém
   Session 6 | 2026-04-18
   Pořadí: base → layout → utility → komponenty → responsive → print
   ============================================================ */

@import url('variables.css');

/* ============================================================
   1. BASE — reset, typo, základní prvky
   ============================================================ */

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

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

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
  min-height: 100vh;
}

/* Typografie — rubriky.cz mixed: H1/H2 serif (autoritativní nadpisy), H3-H6 sans (UI konzistence) */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  margin: 1.5em 0 0.5em;
  color: var(--color-text);
}
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
h1 { font-size: 2rem; font-weight: 900; }
h2 { font-size: 1.5rem; }
h3, h4, h5, h6 { font-family: var(--font-sans); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: 1rem; }

p { margin: 1rem 0; }

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

ul, ol { margin: 1rem 0; padding-left: 1.5rem; }
li { margin-bottom: 0.35rem; }

dl { margin: 1rem 0; }
dt { font-weight: 600; }
dd { margin: 0 0 0.5rem 1rem; }

blockquote {
  margin: 1.5rem 0;
  padding: var(--space-4) var(--space-6);
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-text-muted);
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow-x: auto;
  margin: 1.5rem 0;
}
pre code {
  background: none;
  border: none;
  padding: 0;
}

img { max-width: 100%; height: auto; }

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

::selection {
  background: var(--color-primary-light);
  color: var(--color-text);
}

/* ============================================================
   2. LAYOUT — kontejner, header, main, footer
   ============================================================ */

.site-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 9999;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* === HEADER (branding pruh) === */
.site-header {
  background: var(--color-primary-dark);
  padding: 0;
  border-bottom: 4px solid var(--color-accent);
  position: relative;
  box-shadow: none;
}

.site-header .site-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-header__brand {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "icon logo"
    "icon tagline";
  align-items: center;
  column-gap: 0.7rem;
  row-gap: 2px;
  min-width: 0;
}
.site-brand-icon {
  grid-area: icon;
  width: 46px;
  height: 46px;
  align-self: center;
  display: block;
}

.site-logo {
  grid-area: logo;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}
.site-logo:hover {
  color: #fff;
  opacity: 0.9;
  text-decoration: none;
}
.site-logo span {
  color: var(--color-accent);
}

.site-tagline {
  grid-area: tagline;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 400;
}

.header-date {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Theme toggle — na tmavé hlavičce */
.theme-toggle {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
  line-height: 0;
  color: #fff;
}
.theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.theme-icon {
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.72;
  transition: opacity 0.2s;
}
.theme-toggle:hover .theme-icon { opacity: 1; }
.theme-icon--dark { display: none; }
[data-theme="dark"] .theme-icon--light { display: none; }
[data-theme="dark"] .theme-icon--dark { display: block; }

/* === NAV (sticky pruh) === */
.site-nav {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  box-shadow: var(--shadow);
}

.site-nav .site-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  flex-wrap: nowrap;
}

.site-nav__links {
  display: flex;
  gap: 0;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  /* Scrollbar skrytý, posun naznačen stínem na okrajích */
  scrollbar-width: none;
  -ms-overflow-style: none;
  background:
    linear-gradient(to right, var(--color-bg) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--color-bg) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0% 50%,   rgba(0,0,0,0.1), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.1), transparent) right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
.site-nav__links::-webkit-scrollbar { display: none; }

.site-nav a {
  display: block;
  padding: 0.65rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  transition: border-color 0.2s, color 0.2s;
}
.site-nav a:hover,
.site-nav a.active,
.site-nav a[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  background: transparent;
  text-decoration: none;
}
.site-nav a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* === SEARCH BAR (uvnitř nav) === */
.search-bar__form {
  display: flex;
  flex-shrink: 0;
  padding: 0.3rem 0;
  margin-left: 1rem;
}
.search-bar__field {
  display: flex;
  position: relative;
  width: 220px;
}
.search-bar__input {
  flex: 1;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 0.35rem 2.2rem 0.35rem 0.7rem;
  font-size: 0.9rem;
  font-family: inherit;
}
.search-bar__input:focus {
  z-index: 1;
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}
.search-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  flex-shrink: 0;
  margin-left: -36px;
  z-index: 2;
}
.search-bar__btn:hover { color: var(--color-accent); }
.search-bar__btn:disabled { opacity: 0.4; cursor: wait; }
.search-bar__field:focus-within .search-bar__btn { color: var(--color-accent); }

/* Honeypot pole */
.form-group--alt { position: absolute; left: -9999px; }

/* Main content */
main.site-wrapper {
  padding-top: var(--space-6);
  padding-bottom: var(--space-12);
  min-height: 60vh;
}

/* === FOOTER === */
.site-footer {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 2.5rem 0 0;
  margin-top: var(--space-12);
  font-size: 0.85rem;
  border-top: none;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer__col { min-width: 0; }

.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.footer__logo-text {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
}
.footer__logo-accent { color: var(--color-accent); }

.footer__desc {
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0 0 0.75rem 0;
}
.footer__disclaimer {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0;
}

.footer__heading {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.75rem 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__links li { margin-bottom: 0.4rem; }
.footer__links a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  text-decoration: none;
}
.footer__links a:hover {
  color: #fff;
  text-decoration: none;
}

.footer__disclosure {
  font-size: 0.8rem;
  margin-top: 1.25rem;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1rem;
  line-height: 1.6;
}
.footer__disclosure a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}
.footer__disclosure a:hover {
  color: #fff;
}

.site-footer__provider {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  margin: var(--space-3) 0 var(--space-2);
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.25rem 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8rem;
  margin-top: 1.5rem;
}
.footer__bottom p { margin: 0; }

/* starý alias — pro případ zbývajících referencí */
.site-footer__copy {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: var(--space-2);
}

/* === PWA INSTALL BUTTON (Apple App Store-style pill) === */
.pwa-appstore-btn {
    display: inline-flex;
    align-items: center;
    background: #000;
    border: 1px solid #a6a6a6;
    border-radius: 7px;
    padding: 6px 16px 6px 8px;
    text-decoration: none;
    color: #fff;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    transition: background 0.2s, border-color 0.2s;
}
.pwa-appstore-btn:hover,
.site-footer .pwa-appstore-btn:hover {
    background: #222;
    border-color: #ccc;
    text-decoration: none;
    color: #fff;
}
.pwa-appstore-btn svg { flex-shrink: 0; margin-right: 6px; }
.pwa-appstore-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-top: 1px;
}
.pwa-appstore-small {
    color: #fff;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: -1px;
}
.pwa-appstore-big {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}
/* Výchozí stav skrytý — JS (pwa-installer.js) je odkryje. CSS pravidlo
   zabraňuje probliknutí, pokud CSP ignoruje inline style="display:none". */
#pwa-install-btn { display: none; }
#pwa-install-link { display: none; }

/* === PWA iOS INSTALL MODAL (fallback návod pro Safari) === */
.pwa-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.pwa-modal-box {
    background: var(--color-bg, #fff);
    color: var(--color-text, #1a202c);
    border: 1px solid var(--color-border, #d6dee8);
    border-radius: 10px;
    max-width: 380px;
    width: 100%;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.pwa-modal-icon {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.pwa-modal-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 1rem;
}
.pwa-modal-list {
    text-align: left;
    color: var(--color-text-muted, #556070);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
    padding-left: 1.2rem;
}
.pwa-modal-btn {
    background: var(--color-primary, #0b5394);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.pwa-modal-btn:hover { opacity: 0.9; }

/* === SEARCH RESULTS === */
.search-results__header { margin-bottom: var(--space-6); }
.search-results__section {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.search-results__section:last-child { border-bottom: 0; }
.search-results__heading {
    font-size: 1.25rem;
    margin: 0 0 var(--space-4);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.search-results__count {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-muted, #6b7280);
}
.search-results__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-2);
}
.search-results__item {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    background: var(--color-bg-card, #fff);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.search-results__item:hover {
    border-color: var(--color-primary, #1d4ed8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}
.search-results__link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: inherit;
}
.search-results__link:hover { text-decoration: none; }
.search-results__icon {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
    padding-top: 2px;
}
.search-results__body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}
.search-results__title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text, #111827);
}
.search-results__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted, #6b7280);
}
.search-results__badge {
    display: inline-block;
    padding: 1px 8px;
    background: var(--color-accent, #f59e0b);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.search-results__score { font-weight: 600; color: var(--color-accent, #f59e0b); }
.search-results__chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--color-bg-chip, #eef2ff);
    color: var(--color-primary, #1d4ed8);
}
.search-results__chip--review { background: #fef3c7; color: #92400e; }
.search-results__chip--pillar { background: #dbeafe; color: #1e40af; }
.search-results__chip--comparison { background: #fce7f3; color: #9d174d; }
.search-results__chip--guide { background: #d1fae5; color: #065f46; }
.search-results__chip--subcategory { background: #ede9fe; color: #5b21b6; }
.search-results__cat { font-style: italic; }
.search-results__lead {
    color: var(--color-text-muted, #4b5563);
    font-size: 0.9rem;
    line-height: 1.5;
}
.search-results__lead mark,
.search-results__title mark {
    background: #fef08a;
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}
.search-results__empty {
    padding: var(--space-4);
    background: var(--color-bg-subtle, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    margin-bottom: var(--space-6);
}
.search-results__empty ul { margin: var(--space-2) 0 0; padding-left: 1.5rem; }
.search-results__empty li { margin: 0.25rem 0; }

@media (max-width: 600px) {
    .search-results__link { padding: var(--space-3); }
    .search-results__icon { font-size: 1.25rem; }
    .search-results__title { font-size: 0.95rem; }
}

/* Grid helpers */
.grid { display: grid; gap: var(--space-6); }
.grid--cols-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--cols-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ============================================================
   3. UTILITY
   ============================================================ */

.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;
}

.text-muted { color: var(--color-text-muted); }
.text-small { font-size: 0.875rem; }
.text-center { text-align: center; }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

.hide-mobile { display: none; }

/* ============================================================
   4. BREADCRUMBS
   ============================================================ */

.breadcrumb {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  white-space: nowrap;
  overflow-x: auto;
  padding-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: 0;
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-1);
}
.breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }

.breadcrumb__sep {
  margin: 0 var(--space-1);
  color: var(--color-border);
  user-select: none;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: 500;
}

/* ============================================================
   5. HERO
   ============================================================ */

.hero {
  text-align: center;
  padding: var(--space-8) 0 var(--space-12);
}

.hero h1 {
  font-size: 2.25rem;
  margin-bottom: var(--space-3);
  margin-top: 0;
}

.hero p {
  color: var(--color-text-muted);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0 auto;
}

/* ============================================================
   6. CATEGORY GRID
   ============================================================ */

.category-grid { margin: var(--space-4) 0 var(--space-8); }

.category-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--color-text);
  text-decoration: none;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.category-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  text-decoration: none;
  transform: translateY(-2px);
}

.category-card__icon {
  font-size: 2rem;
  display: block;
}

.category-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  display: block;
  color: var(--color-text);
}

.category-card__desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: block;
  line-height: 1.4;
}

/* ============================================================
   7. ARTICLE CARD (homepage listing)
   ============================================================ */

.latest-articles { margin: var(--space-8) 0; }

.articles-list {
  display: grid;
  gap: var(--space-4);
}

.article-card {
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: box-shadow var(--transition);
}
.article-card:hover { box-shadow: var(--shadow-md); }

.article-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
}
.article-card h3 a { color: var(--color-text); }
.article-card h3 a:hover { color: var(--color-primary); text-decoration: none; }

.article-card__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-1) 0;
}

.article-card__category {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 0.1em 0.5em;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.75rem;
}

.article-card__lead {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ============================================================
   8. SCORE BADGE — OPRAVENÉ TŘÍDY (sync s PHP score_badge_class())
   ============================================================ */

.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

/* Třídy odpovídají výstupu PHP score_badge_class() */
.score-badge--high   { background: var(--color-success); }
.score-badge--medium { background: var(--color-warning); color: #1a202c; }
.score-badge--low    { background: var(--color-error); }

/* Inline varianta (v tabulkách) */
.score-badge--inline {
  min-width: 36px;
  height: 36px;
  font-size: 0.875rem;
}

/* ============================================================
   9. VERDICT BOX
   ============================================================ */

.verdict-box {
  background: var(--color-bg-alt);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-8) 0;
}

.verdict-box__data {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  column-gap: var(--space-6);
  row-gap: var(--space-3);
  align-items: center;
  margin: 0;
}

.verdict-box__cta-wrap {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.verdict-box__cta {
  display: inline-block;
}

.verdict-box dt {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.verdict-box dd {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text);
}

/* Hero: první dd = score-badge, zvětšena na vizuální kotvu */
.verdict-box dd:first-of-type .score-badge {
  min-width: 64px;
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
}

/* Verbální verdikt (druhý dd) — zdůrazněn primární barvou */
.verdict-box dd:nth-of-type(2) {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* ============================================================
   10. COMPARISON TABLE + TABLE-WRAP
   ============================================================ */

/* .table-wrap = hlavní třída z šablon; .table-responsive = alias */
.table-wrap,
.table-responsive {
  overflow-x: auto;
  margin: var(--space-6) 0;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  /* Shadow indikátor scrollu */
  background:
    linear-gradient(to right, var(--color-bg) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--color-bg) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.1), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.1), transparent) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  white-space: nowrap;
}

.comparison-table caption {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: var(--space-3);
  text-align: left;
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.comparison-table thead th {
  background: var(--color-bg-alt);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  position: sticky;
  top: 0;
}

.comparison-table tbody tr:hover td,
.comparison-table tbody tr:hover th {
  background: var(--color-bg-alt);
}

.comparison-table tbody tr:last-child td,
.comparison-table tbody tr:last-child th {
  border-bottom: none;
}

.plan--recommended {
  background: rgba(11, 83, 148, 0.04);
}
.plan--recommended td,
.plan--recommended th {
  font-weight: 600;
}
/* 3-sloupcová tabulka (scorecard, pricing) — rovnoměrné sloupce bez prázdného prostoru */
.comparison-table--compact {
  table-layout: auto;
  white-space: normal;
}
.comparison-table--compact th:first-child,
.comparison-table--compact td:first-child { width: 55%; }
.comparison-table--compact th + th,
.comparison-table--compact td + td       { width: 22.5%; text-align: right; }

/* ============================================================
   11. PICK GRID — OPRAVENÉ TŘÍDY (sync se šablonou pillar.php)
   ============================================================ */

.quick-picks { margin: var(--space-8) 0; }

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.pick {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  transition: box-shadow var(--transition);
}
.pick:hover { box-shadow: var(--shadow-md); }

/* Pick jako <a> (klikací card přes celou plochu) — reset link styling */
a.pick, a.pick--linked {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.pick--linked:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
a.pick--linked:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Comparison table: klikací řádek (delegovaný JS click + name jako anchor) */
.comparison-row--linked { cursor: pointer; transition: background var(--transition); }
.comparison-row--linked:hover { background: var(--color-bg-alt); }
.comparison-row__link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
}
.comparison-row__link:hover { color: var(--color-primary); text-decoration: underline; }

.pick--winner {
  border-color: var(--color-accent);
  background: rgba(242, 165, 22, 0.05);
}

.pick--free {
  border-color: var(--color-success);
  background: rgba(26, 107, 58, 0.05);
}

.pick__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.pick--winner .pick__label { color: var(--color-accent-dark); }
.pick--free .pick__label    { color: var(--color-success); }

.pick h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
}
.pick p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ============================================================
   12. MINI REVIEW (pillar — sekce podrobných hodnocení)
   ============================================================ */

.mini-review {
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  background: var(--color-bg);
}
.mini-review:hover { box-shadow: var(--shadow); }

.mini-review h3 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

/* ============================================================
   13. SERVICE GRID + SERVICE CARD (catalog_category.php)
   ============================================================ */

/* .service-grid z šablony; .services-grid = alias */
.service-grid,
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
  list-style: none;
  padding: 0;
}

.service-card {
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.service-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.service-card h2 {
  margin: 0;
  font-size: 1.05rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
}
.service-card h2 a { color: var(--color-text); }
.service-card h2 a:hover { color: var(--color-primary); text-decoration: none; }

.service-card__logo {
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.service-card__meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

.service-card__badge,
.service-card__free {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1em 0.5em;
  border-radius: 100px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: var(--space-2);
}

.service-card__badge { background: var(--color-accent); color: #1a202c; }
.service-card__free  { background: var(--color-success); color: #fff; }

/* Clickable service card (wrapper <a> around the card leading to review) */
.service-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
}
.service-card-link:hover { text-decoration: none; }
.service-card-link:hover .service-card--linked,
.service-card-link:focus-visible .service-card--linked {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}
.service-card-link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.service-card--linked { cursor: pointer; }
.service-card__cta {
  font-weight: 600;
  color: var(--color-primary);
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
}

/* Services rank (kategorie hub — žebříček) */
.services-rank {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rank-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.rank-item--linked { cursor: pointer; }
.rank-item:hover,
.rank-item--linked:focus-within {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}
.rank-item__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-lg);
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.rank-item__overlay:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
/* Akční tlačítka musí být nad overlay (klikatelná samostatně),
   ostatní obsah karty (text/score) zůstane pod overlay (klik propaguje na recenzi). */
.rank-item__actions {
  position: relative;
  z-index: 2;
}
.rank-item__pos {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-muted);
  min-width: 2.5rem;
  text-align: right;
}
.rank-item__main {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}
.rank-item__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-sans);
  line-height: 1.3;
}
.rank-item__price {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.rank-item__meta {
  margin: var(--space-1) 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.rank-item__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.rank-item__actions .btn { font-size: 0.875rem; padding: 0.45em 0.95em; }

/* Badge — "Testováno" v katalog_category */
.badge--tested {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.1em 0.45em;
  border-radius: 100px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: var(--space-2);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Badge — "katalog" v service-card__meta a category_hub (veřejný katalog souborů) */
/* Specificity .badge.badge--catalog překonává .badge {} definované níže v souboru. */
.badge--catalog,
.badge.badge--catalog {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1em 0.5em;
  border-radius: 100px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: var(--space-2);
  background: var(--color-success);
  color: #fff;
  border: 0;
}

/* ============================================================
   14. FAQ ACCORDION — OPRAVENÉ TŘÍDY (sync s render_faq_accordion())
   ============================================================ */

.faq-section {
  margin: var(--space-8) 0;
}

.faq-section h2 { margin-top: 0; }

/* .faq = třída z render_faq_accordion() */
.faq {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  overflow: hidden;
  background: var(--color-bg);
}

.faq summary {
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  user-select: none;
  color: var(--color-text);
  transition: background var(--transition);
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '▸';
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq[open] summary::after { transform: rotate(90deg); }

.faq summary:hover { background: var(--color-bg-alt); }
.faq summary:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

/* .faq__body = třída z render_faq_accordion() */
.faq__body {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: 1.7;
}

.faq__body p:first-child { margin-top: 0; }
.faq__body p:last-child  { margin-bottom: 0; }

/* Changelog details */
.article-changelog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-top: var(--space-8);
}
.article-changelog summary {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  list-style: none;
}
.article-changelog summary::-webkit-details-marker { display: none; }
.article-changelog p { padding: 0 var(--space-4) var(--space-3); margin: 0; font-size: 0.875rem; }

/* ============================================================
   15. AUTHOR BOX
   ============================================================ */

.author-box {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-8);
}

.author-box__author {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.author-box__photo {
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.author-box__body { flex: 1; }

.author-box__name {
  margin: 0 0 var(--space-1);
  font-size: 1.05rem;
}
.author-box__name a { color: var(--color-text); }
.author-box__name a:hover { color: var(--color-primary); }

.author-box__title {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.author-box__desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.author-box__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.author-box__reviewer {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.author-box__reviewer a { color: var(--color-primary); }

/* ============================================================
   16. DISCLOSURE BOXY — NOVÉ (sync s render_disclosure() a render_ymyl_banner())
   ============================================================ */

/* Base .disclosure třída — výstup render_disclosure(), render_ymyl_banner() atd. */
.disclosure {
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 8px);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: var(--space-6);
  position: relative;
}

.disclosure::before {
  content: '';
  position: absolute;
  left: var(--space-2);
  top: var(--space-3);
  bottom: var(--space-3);
  width: 4px;
  border-radius: 2px;
}

/* Affiliate */
.disclosure--affiliate {
  background: rgba(242, 165, 22, 0.1);
  border: 1px solid var(--color-accent);
  color: var(--color-text);
}
.disclosure--affiliate::before { background: var(--color-accent); }

/* YMYL (finance/zdraví/bezpečnost) */
.disclosure--ymyl {
  background: rgba(11, 83, 148, 0.06);
  border: 1px solid var(--color-primary);
  color: var(--color-text);
}
.disclosure--ymyl::before { background: var(--color-primary); }

/* Vlastní produkt (Znamost.cz) — záměrně diskrétní, jde o transparentní sdělení, ne varování */
.disclosure--own {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}
.disclosure--own::before { background: var(--color-text-muted); opacity: 0.5; }
.disclosure--own strong { color: var(--color-text); font-weight: 600; }

/* Draft banner (SITE_LEGAL_REVIEWED=false) */
.disclosure--draft {
  background: rgba(212, 160, 23, 0.12);
  border: 1px solid var(--color-warning);
  color: var(--color-text);
}
.disclosure--draft::before { background: var(--color-warning); }

.disclosure a { color: var(--color-primary); font-weight: 600; }
.disclosure strong { color: var(--color-text); }

/* ============================================================
   17. BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  min-height: 44px;
  line-height: 1.2;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Variant tlačítka — specificity .btn.btn--xxx přebíjí kontextové overrides
   typu .category-pillar-link a (link color v parent containeru). */
.btn.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn.btn--primary:hover,
.btn.btn--primary:focus {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

.btn.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn.btn--secondary:hover,
.btn.btn--secondary:focus {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.btn.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn.btn--ghost:hover,
.btn.btn--ghost:focus {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn.btn--accent {
  background: var(--color-accent);
  color: #1a202c;
  border-color: var(--color-accent);
}
.btn.btn--accent:hover,
.btn.btn--accent:focus {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #1a202c;
}

.btn--sm,
.btn--small { padding: var(--space-2) var(--space-4); font-size: 0.85rem; min-height: 36px; }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: 1.05rem; }
.btn--full { width: 100%; }

/* ============================================================
   18. FORMS (catalog filter, GDPR request, kontakt)
   ============================================================ */

.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-4) 0 var(--space-6);
}

.catalog-filters label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--color-text);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 44px;
  box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 83, 148, 0.15);
  outline: none;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23556070' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-help {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Inline input jako v catalog-filters */
.catalog-filters input,
.catalog-filters select {
  min-width: 140px;
  min-height: 40px;
}

/* ============================================================
   19. GLOSSARY
   ============================================================ */

.glossary-az {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-6) 0;
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
}

/* .chip = třída z glossary.php pro A-Z písmena */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  min-width: 36px;
  min-height: 36px;
}
.chip:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}
.chip:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* .tag = expertise badges, kategorie */
.tag {
  display: inline-block;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 0.15em 0.6em;
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0.15rem;
}

.glossary-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: grid;
  gap: var(--space-2);
}

.glossary-list li {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  border-left: 3px solid var(--color-border);
  margin: 0;
  transition: border-color var(--transition);
}
.glossary-list li:hover { border-left-color: var(--color-primary); }

.glossary-list a { color: var(--color-text); font-weight: 600; }
.glossary-list a:hover { color: var(--color-primary); }

/* ============================================================
   20. LEGAL PAGES — definition lists
   ============================================================ */

.legal-page dl {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}

.legal-page dt {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.legal-page dt:first-child { margin-top: 0; }

.legal-page dd {
  margin: var(--space-1) 0 0 0;
  color: var(--color-text);
  font-size: 0.95rem;
}

/* Article definition lead */
.definition-lead {
  font-size: 1.05rem;
  line-height: 1.8;
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-6);
  margin: var(--space-6) 0;
  color: var(--color-text);
}

/* Article body */
.article-body {
  max-width: var(--content-width);
  margin: var(--space-6) auto;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.article-body > section + section { margin-top: var(--space-8); }
.article-body p  { margin: 0 0 var(--space-4); }
.article-body h2 {
  margin-top: var(--space-8);
  scroll-margin-top: 7rem;
}
.article-body h3 {
  margin-top: var(--space-6);
  scroll-margin-top: 7rem;
}
.article-body ul,
.article-body ol { margin: 0 0 var(--space-4) var(--space-6); }
.article-body li { margin-bottom: var(--space-2); }

/* Article figure + generic table */
.article-body figure { margin: var(--space-6) 0; }
.article-body figcaption {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-2);
  font-style: italic;
}
.article-body figure > table,
.article-body table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: 0.95rem;
}
.article-body table th,
.article-body table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  white-space: normal;
}
.article-body table thead th {
  background: var(--color-bg-alt);
  font-weight: 600;
  border-bottom: 2px solid var(--color-border);
}
.article-body table tbody tr:hover { background: var(--color-bg-alt); }

/* Sup/footnote odkazy v body */
.article-body sup a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  padding: 0 1px;
}
.article-body sup a:hover { text-decoration: underline; }

/* Article footnotes (helper + inline fallback) */
.article-footnotes {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.article-footnotes h2,
.article-footnotes h3 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  scroll-margin-top: 7rem;
}
.article-footnotes .footnote,
.article-footnotes li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: var(--space-2) 0;
  scroll-margin-top: 7rem;
}
.article-footnotes .footnote sup,
.article-footnotes ol li::marker {
  color: var(--color-accent);
  font-weight: 600;
}
.article-footnotes cite { font-style: normal; }
.article-footnotes a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Article source (pod tabulkou/obrázkem) */
.article-source {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Read-also inline odkaz */
.read-also {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}
.read-also__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.read-also__link {
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.read-also__link:hover { text-decoration: underline; }

/* Callout boxy */
.callout {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg-alt);
}
.callout--tip     { border-left-color: var(--color-success); }
.callout--warning { border-left-color: var(--color-warning); }
.callout--note    { border-left-color: var(--color-primary); }
.callout p:last-child { margin-bottom: 0; }

.article-meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.article-meta a { color: var(--color-text-muted); }
.article-meta a:hover { color: var(--color-primary); }

/* ============================================================
   21. PAGINATION
   ============================================================ */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-8) 0;
  flex-wrap: wrap;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background var(--transition), border-color var(--transition);
}
.pagination__link:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-primary);
  text-decoration: none;
}
.pagination__link--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.pagination__link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.pagination__info {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  padding: 0 var(--space-2);
}

/* ============================================================
   22. AUTHOR/REVIEWER PROFILE STRÁNKA
   ============================================================ */

.author-profile {
  text-align: center;
  padding: var(--space-8) 0;
}

.author-profile__photo {
  border-radius: 50%;
  margin-bottom: var(--space-4);
  border: 3px solid var(--color-border);
  object-fit: cover;
}

.author-profile__bio {
  max-width: 620px;
  margin: var(--space-3) auto;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.author-profile__expertise {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* ============================================================
   23. STICKY CTA (mobile bar na review/pillar)
   ============================================================ */

.sticky-cta {
  display: none;
}

/* ============================================================
   24. LISTING PAGES (changelog, authors, news, etc.)
   ============================================================ */

.listing-grid {
  display: grid;
  gap: var(--space-4);
}

.listing-item {
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  transition: box-shadow var(--transition);
}
.listing-item:hover { box-shadow: var(--shadow-md); }

.listing-item h2 {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
}

/* Verdict sekce na review stránce */
.verdict {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.verdict h2 { margin-top: 0; }

/* ============================================================
   26. ARTICLE GRID — widescreen layout (≥1024 px)
   Všechny přímé děti <article.article> se centrují na --content-width.
   Hero/disclosure odbleedují třídou .article__full nebo .article__wide.
   ============================================================ */
.article > * {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}
/* Výjimky — prvky záměrně plné šířky */
.article > .article-header,
.article > .disclosure {
  max-width: 100%;
}
/* Vědomě roztažené sekce (srovnávač 5+ služeb, wide media) */
.article > .article__wide {
  max-width: var(--wide-width);
}
.article > .article__full {
  max-width: 100%;
}

/* ============================================================
   25. DARK MODE — per-component overrides
   ============================================================ */

[data-theme="dark"] .site-header {
  background: var(--color-bg);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .site-nav a.active,
[data-theme="dark"] .site-nav a[aria-current="page"] {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

[data-theme="dark"] .site-footer {
  background: var(--color-bg-alt);
  border-top-color: var(--color-border);
}

[data-theme="dark"] .category-card {
  background: var(--color-bg-alt);
}
[data-theme="dark"] .category-card:hover {
  border-color: var(--color-primary);
}

[data-theme="dark"] .article-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .mini-review,
[data-theme="dark"] .pick,
[data-theme="dark"] .faq,
[data-theme="dark"] .listing-item {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}
/* Zvýraznění shody zůstává světle žluté → vynutit tmavý text i v dark módu */
[data-theme="dark"] .search-results__lead mark,
[data-theme="dark"] .search-results__title mark {
  color: #1a202c;
}

[data-theme="dark"] .comparison-table thead th {
  background: var(--color-bg);
}
[data-theme="dark"] .comparison-table tbody tr:hover td,
[data-theme="dark"] .comparison-table tbody tr:hover th {
  background: var(--color-bg);
}

[data-theme="dark"] .table-wrap,
[data-theme="dark"] .table-responsive {
  border-color: var(--color-border);
  background:
    linear-gradient(to right, var(--color-bg-alt) 30%, rgba(26,32,44,0)) left center,
    linear-gradient(to left,  var(--color-bg-alt) 30%, rgba(26,32,44,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.3), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.3), transparent) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

[data-theme="dark"] .verdict-box {
  background: var(--color-bg-alt);
  border-color: var(--color-primary);
}

[data-theme="dark"] .author-box {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}

[data-theme="dark"] .disclosure--affiliate {
  background: rgba(242, 165, 22, 0.12);
}
[data-theme="dark"] .disclosure--ymyl {
  background: rgba(74, 158, 255, 0.1);
}
[data-theme="dark"] .disclosure--draft {
  background: rgba(241, 196, 15, 0.12);
}

[data-theme="dark"] .catalog-filters {
  background: var(--color-bg-alt);
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .glossary-az {
  background: var(--color-bg-alt);
}
[data-theme="dark"] .chip {
  background: var(--color-bg);
  border-color: var(--color-border);
}
[data-theme="dark"] .chip:hover {
  background: var(--color-primary-light);
}

[data-theme="dark"] .legal-page dl {
  background: var(--color-bg-alt);
}

[data-theme="dark"] .plan--recommended {
  background: rgba(74, 158, 255, 0.06);
}

[data-theme="dark"] .pick--winner {
  background: rgba(242, 165, 22, 0.08);
}
[data-theme="dark"] .pick--free {
  background: rgba(46, 204, 113, 0.08);
}

[data-theme="dark"] blockquote {
  background: var(--color-bg-alt);
}

[data-theme="dark"] code {
  background: var(--color-bg-alt);
}

/* Score badges v dark — jen mírně světlejší */
[data-theme="dark"] .score-badge--high   { background: var(--color-success); }
[data-theme="dark"] .score-badge--medium { background: var(--color-warning); color: #1a202c; }
[data-theme="dark"] .score-badge--low    { background: var(--color-error); }

/* ============================================================
   26. RESPONSIVE — mobile first (@media min-width = enhance)
   ============================================================ */

/* Tablet+ (768px+) */
@media (min-width: 768px) {
  h1 { font-size: 2.25rem; }
  .hero h1 { font-size: 2.75rem; }

  .hide-mobile { display: revert; }

  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .category-grid__items {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .articles-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .author-box__author {
    flex-direction: row;
  }

  /* Sticky CTA jen na mobilu → skryté na tablet+ */
  .sticky-cta { display: none; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .site-wrapper { padding: 0 var(--space-6); }

  main.site-wrapper {
    padding-top: var(--space-8);
  }

  .hero { padding: var(--space-12) 0; }

  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* Mobile specifika (max 767px) */
@media (max-width: 767px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.1rem; }

  .hero h1 { font-size: 1.9rem; }

  .site-header .site-wrapper {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    padding-bottom: 1rem;
  }
  .site-header__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0.4rem;
    row-gap: 2px;
    width: 100%;
  }
  .site-brand-icon { width: 1.9rem; height: 1.9rem; }
  .site-tagline { flex-basis: 100%; text-align: center; }
  .header-date time { display: none; }
  .theme-toggle {
    position: absolute;
    top: 0.6rem;
    right: var(--space-4);
  }
  .site-nav .site-wrapper { flex-wrap: wrap; }
  .site-nav__links {
    flex: 0 0 100%;
    scrollbar-width: none;
  }
  .site-nav__links::-webkit-scrollbar { display: none; }
  .search-bar__form { flex: 0 0 100%; margin-left: 0; padding: 0.3rem 0 0.5rem; }
  .search-bar__field { width: 100%; }
  .footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer__col:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1rem;
  }

  .category-grid__items { grid-template-columns: repeat(2, 1fr); }

  .pick-grid { grid-template-columns: 1fr; }

  .service-grid,
  .services-grid { grid-template-columns: 1fr; }

  .rank-item {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "pos main score"
      "actions actions actions";
    row-gap: var(--space-2);
    column-gap: var(--space-3);
    padding: var(--space-3);
  }
  .rank-item__pos {
    grid-area: pos;
    min-width: auto;
    font-size: 0.875rem;
    align-self: center;
  }
  .rank-item__main { grid-area: main; min-width: 0; gap: var(--space-1) var(--space-2); }
  .rank-item__name { font-size: 1rem; }
  .rank-item__meta { font-size: 0.78rem; }
  .rank-item__price { font-size: 0.8rem; white-space: nowrap; }
  /* Pokud je cena viditelná, na mobilu skryj redundantní Zdarma badge */
  .rank-item__main .service-card__free--with-price { display: none; }
  .rank-item > .score-badge,
  .rank-item__noscore { grid-area: score; }
  .rank-item > .score-badge {
    min-width: 36px;
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  .rank-item__actions {
    grid-area: actions;
    justify-content: stretch;
    width: 100%;
    gap: var(--space-2);
  }
  .rank-item__actions .btn {
    flex: 1;
    text-align: center;
    padding: 0.5em 0.5em;
    font-size: 0.875rem;
  }

  .verdict-box__cta { display: block; text-align: center; }

  .author-box__author { flex-direction: column; align-items: center; text-align: center; }
  .author-box__reviewer { flex-direction: column; align-items: flex-start; }

  .verdict-box {
    padding: var(--space-4);
  }
  .verdict-box__data {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .verdict-box dt { margin-top: var(--space-3); }
  .verdict-box dt:first-child { margin-top: 0; }
  .verdict-box dd { margin-top: var(--space-1); }
  .verdict-box dd:first-of-type .score-badge {
    min-width: 56px;
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
  }

  .catalog-filters { flex-direction: column; }
  .catalog-filters label { width: 100%; }
  .catalog-filters input,
  .catalog-filters select { width: 100%; }

  /* Sticky CTA na mobilu */
  .sticky-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    z-index: var(--z-overlay);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  }
  .sticky-cta .btn { width: 100%; }

  body:has(.sticky-cta) { padding-bottom: 72px; }

  /* Tabulky scrollují horizontálně */
  .comparison-table { font-size: 0.85rem; }
  .comparison-table th,
  .comparison-table td { padding: var(--space-2) var(--space-3); }
}

/* Extra small (max 480px) */
@media (max-width: 479px) {
  .category-grid__items { grid-template-columns: 1fr; }
}

/* Nav + search wrap na středních obrazovkách */
@media (max-width: 960px) {
  .site-nav .site-wrapper { flex-wrap: wrap; }
  .site-nav__links { flex: 0 0 100%; }
  .search-bar__form { flex: 0 0 100%; margin-left: 0; padding: 0.3rem 0 0.5rem; }
  .search-bar__field { width: 100%; }
}

/* Hover pouze na zařízeních s myší (ne touch) */
@media (hover: hover) {
  .category-card:hover { transform: translateY(-2px); }
  .article-card:hover { box-shadow: var(--shadow-md); }
  .service-card:hover { box-shadow: var(--shadow-md); }
}

/* ============================================================
   HOMEPAGE — trust bar, quick picks, methodology teaser, FAQ
   ============================================================ */

.hero--home { text-align: left; padding: var(--space-8) 0 var(--space-6); }
.hero--home h1 { margin-top: 0; }
.hero--home .definition-lead {
  font-size: 1.05rem;
  max-width: 62ch;
  margin: var(--space-4) 0;
  color: var(--color-text);
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.hero__cta-row .btn { min-width: 200px; }

.section-lead {
  color: var(--color-text-muted);
  font-size: 0.98rem;
  margin: var(--space-2) 0 var(--space-4);
  max-width: 68ch;
}

/* --- Trust bar --- */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  margin: 0 0 var(--space-8);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.trust-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  text-align: center;
}
.trust-bar__item:hover {
  background: var(--color-bg);
  text-decoration: none;
}
.trust-bar__num {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
}
.trust-bar__label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* --- Quick picks (reuse .pick-grid, .pick) --- */
.quick-picks { margin: var(--space-8) 0; }
.quick-picks h2 { margin-bottom: var(--space-2); }
.pick__price { color: var(--color-text-muted); font-size: 0.9rem; }
.pick__desc { color: var(--color-text-muted); font-size: 0.9rem; margin-top: var(--space-2); }

/* --- Category card stats --- */
.category-card__stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-2);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.category-card__winner {
  color: var(--color-success, #1a6b3a);
  font-weight: 500;
}

/* --- Methodology teaser --- */
.methodology-teaser {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
}
.methodology-teaser h2 { margin-top: 0; }
.methodology-teaser__list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-6);
}
.methodology-teaser__list li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.95rem;
}
.methodology-teaser__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 700;
}
.methodology-teaser__cta { margin: var(--space-4) 0 0; }

/* Dark mode: teaser background jemnější */
[data-theme="dark"] .methodology-teaser {
  background: var(--color-primary-light);
  border-left-color: var(--color-primary);
}

/* --- Home FAQ --- */
.home-faq { margin: var(--space-8) 0; }
.home-faq h2 { margin-bottom: var(--space-4); }

/* --- Home author box (reuse .author-box) --- */
.home-author { margin: var(--space-8) 0 var(--space-4); }

/* --- Article card doplněk pro home --- */
.article-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 0.8rem;
}
.article-card__badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.article-card__badge--review { background: var(--color-accent); color: #fff; }
.article-card__badge--comparison { background: #2c7ea1; color: #fff; }
.article-card__badge--pillar { background: var(--color-primary); color: #fff; }

/* Responsivní pravidla homepage (mobile first fallbacks) */
@media (max-width: 767px) {
  .trust-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .trust-bar__num { font-size: 1.6rem; }
  .trust-bar__label { font-size: 0.78rem; }
  .methodology-teaser {
    padding: var(--space-4);
  }
  .methodology-teaser__list {
    grid-template-columns: 1fr;
  }
  .hero--home { padding: var(--space-6) 0 var(--space-4); }
  .hero__cta-row .btn { min-width: 0; width: 100%; }
}

@media (max-width: 479px) {
  .trust-bar { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   27. PAGE-SPECIFIC COMPONENTS (doplněk)
   ============================================================ */

/* --- Category hub --- */
.category-header { padding: var(--space-6) 0; }
.category-header h1 { margin-top: 0; }
.category-header__desc { color: var(--color-text-muted); font-size: 1.05rem; }

.category-pillar-link {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background: var(--color-primary-light);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.category-pillar-link a { font-weight: 600; color: var(--color-primary); }

.services-list { margin: var(--space-6) 0; }

.service-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.service-card__price {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: var(--space-1) 0;
}

.related-categories { margin: var(--space-6) 0; }
.related-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
}

.category-articles { margin: var(--space-8) 0; }
.article-card__type {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  padding: 0.1em 0.5em;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  margin-right: var(--space-2);
}

/* --- Authors / Reviewers index --- */
.author-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.author-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  text-decoration: none;
}
.author-card:hover { text-decoration: none; }
.author-card img {
  border-radius: 50%;
  object-fit: cover;
  width: 80px;
  height: 80px;
}
.author-card h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0;
  margin: 0;
}
.author-card a { color: var(--color-text); font-weight: 600; }
.author-card a:hover { color: var(--color-primary); text-decoration: none; }

.author-card__cred,
.author-card__exp,
.author-card__count {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.author-card__count { font-weight: 600; color: var(--color-primary); }

/* --- Author/Reviewer detail --- */
.author-profile__title  { font-size: 1rem; color: var(--color-text-muted); margin: 0; }
.author-profile__credentials { margin: var(--space-4) 0; font-size: 0.9rem; }
.author-profile__links { margin: var(--space-3) 0; display: flex; gap: var(--space-3); flex-wrap: wrap; }
.author-profile__note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  margin: var(--space-4) 0;
}

/* --- Catalog profile --- */
.service-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.service-header__logo {
  border-radius: var(--radius);
  flex-shrink: 0;
}
.service-header__meta { flex: 1; }
.service-header__meta h1 { margin-top: 0; }

.catalog-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  margin: var(--space-4) 0;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1em 0.5em;
  border-radius: 100px;
  font-weight: 700;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}

/* User reviews */
.user-review-list { margin: var(--space-6) 0; }
.user-review {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-3);
  background: var(--color-bg);
}
.user-review__meta { font-size: 0.8rem; color: var(--color-text-muted); margin: var(--space-2) 0 0; }

.user-review-form-wrap { margin: var(--space-6) 0; }
.user-review-form { display: grid; gap: var(--space-4); }

/* --- About page (o-nas.php) --- */
.about-page { max-width: 840px; }

.team-member {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}
.team-member:first-of-type { border-top: none; }
.team-member__photo {
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 2px solid var(--color-border);
}
.team-member__role { font-size: 0.875rem; color: var(--color-text-muted); margin: var(--space-1) 0 var(--space-3); }
.team-member__body { flex: 1; }
.team-member__body h3 { margin-top: 0; }

/* --- Methodology --- */
.methodology { max-width: 840px; }
.methodology-meta {
  display: flex;
  gap: var(--space-4);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.methodology-weights {
  overflow-x: auto;
}

/* --- Glossary term --- */
.glossary-term { margin: var(--space-6) 0; }
.term-body { margin: var(--space-6) 0; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.related-terms { margin: var(--space-6) 0; }

/* --- News update --- */
.news-update { margin: var(--space-4) 0; }
.news-meta { font-size: 0.85rem; color: var(--color-text-muted); margin: var(--space-2) 0; }
.news-list { display: grid; gap: var(--space-4); margin: var(--space-4) 0; }
.previous-news { margin: var(--space-8) 0; }

/* --- Deal alert --- */
.deal-alert {
  background: var(--color-bg-alt);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.deal-expired {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.deal-summary { font-size: 1.1rem; font-weight: 600; margin: var(--space-3) 0; }
.deal-valid { font-size: 0.875rem; color: var(--color-success); font-weight: 600; }
.deals-list { display: grid; gap: var(--space-4); margin: var(--space-4) 0; }
.deals-expired { opacity: 0.7; }

/* --- Changelog --- */
.changelog-list { list-style: none; padding: 0; margin: var(--space-4) 0; }
.changelog-item {
  border-left: 3px solid var(--color-border);
  padding: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
}
.changelog-type {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1em 0.5em;
  border-radius: 100px;
  margin-right: var(--space-2);
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.changelog-ref { font-size: 0.8rem; color: var(--color-text-muted); }
.changelog-filters { margin: var(--space-4) 0; display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* --- Hub page --- */
.child-pages { margin: var(--space-6) 0; }
.child-pages__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

/* --- How-to --- */
.howto-summary { margin: var(--space-6) 0; }

/* --- Tools index --- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.tool-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--color-bg);
  transition: box-shadow var(--transition);
}
.tool-card:hover { box-shadow: var(--shadow-md); }

/* --- Calculator --- */
.calculator-widget {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}

/* --- Impressum / legal specifics --- */
.impressum-list { margin: var(--space-4) 0; }
.impressum-contacts dt { margin-top: var(--space-4); }
.cookies-table { overflow-x: auto; margin: var(--space-4) 0; }
.gdpr-table { overflow-x: auto; margin: var(--space-4) 0; }
.gdpr-form { display: grid; gap: var(--space-4); max-width: 540px; }
.legal-updated {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-8);
}

/* --- Related articles (article footer) --- */
.related-articles {
  margin: var(--space-8) 0;
}
.related-articles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.related-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  transition: var(--transition);
}
.related-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.related-card__type {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.related-card__title {
  font-size: 1.05rem;
  margin: 0 0 var(--space-2) 0;
  line-height: 1.35;
}
.related-card__title a {
  color: inherit;
  text-decoration: none;
}
.related-card__title a:hover {
  color: var(--color-primary);
}
.related-card__lead {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}
[data-theme="dark"] .related-card { background: var(--color-bg-alt); }

/* --- Dark mode for page-specific --- */
[data-theme="dark"] .category-pillar-link { background: var(--color-primary-light); }
[data-theme="dark"] .author-card { background: var(--color-bg-alt); }
[data-theme="dark"] .user-review { background: var(--color-bg-alt); }
[data-theme="dark"] .deal-alert { background: var(--color-bg-alt); }
[data-theme="dark"] .tool-card { background: var(--color-bg-alt); }
[data-theme="dark"] .calculator-widget { background: var(--color-bg); border-color: var(--color-border); }
[data-theme="dark"] .changelog-item { border-left-color: var(--color-border); }

/* ============================================================
   28. PRINT
   ============================================================ */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .site-header,
  .site-nav,
  .theme-toggle,
  .sticky-cta,
  .search-bar__form,
  .disclosure--affiliate,
  .pagination,
  .share,
  .catalog-filters {
    display: none !important;
  }

  .disclosure--ymyl {
    border: 1px solid #000;
    display: block;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }
  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }

  .site-header { position: static; border-bottom: 1px solid #000; }
  .site-logo { font-size: 1.25rem; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }

  .comparison-table { border: 1px solid #ccc; }
  .comparison-table th,
  .comparison-table td { border: 1px solid #ccc; }

  .score-badge--high   { background: #1a6b3a !important; color: #fff !important; }
  .score-badge--medium { background: #d4a017 !important; color: #000 !important; }
  .score-badge--low    { background: #c0392b !important; color: #fff !important; }

  main { padding-top: 1rem; }
}

/* ============ ARECENZE PARITY ============ */

.rank-badge {
    display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
    background: var(--color-bg-alt); font-weight: 600; font-size: .85em; white-space: nowrap;
}
.rank-badge--winner { background: var(--color-accent); color: var(--color-bg); }

.score-label { display: block; font-size: .85em; color: var(--color-text-muted); margin-top: var(--space-1); }

.pros-cons { display: grid; gap: var(--space-4); }
.pros-cons--grid   { grid-template-columns: 1fr 1fr; }
.pros-cons--inline { grid-template-columns: 1fr; font-size: .85em; gap: var(--space-2); }
.pros-cons__list { margin: 0; padding: 0; list-style: none; }
.pros-cons__list li { padding-left: 1.4em; text-indent: -1.4em; line-height: 1.45; margin: var(--space-1) 0; }
.pros-cons__list--pros li span[aria-hidden] { color: var(--color-success); font-weight: 700; }
.pros-cons__list--cons li span[aria-hidden] { color: var(--color-error);   font-weight: 700; }
@media (max-width: 540px) {
    .pros-cons--grid { grid-template-columns: 1fr; }
}

.comparison-table--expanded td,
.comparison-table--expanded th { vertical-align: top; }
.comparison-table--expanded .row-winner { background: var(--color-primary-light); }
.comparison-table--expanded .row-collapsed { display: none; }
.comparison-table--expanded.show-all-rows .row-collapsed { display: table-row; }
@media (max-width: 768px) {
    .comparison-table--expanded .col-hide-mobile { display: none; }
}

.discount-box {
    display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--color-accent); border-radius: var(--radius-sm);
    background: var(--color-primary-light); margin: var(--space-4) 0;
}
.discount-box__code {
    padding: .25em .6em; border-radius: var(--radius-sm);
    background: var(--color-bg); font-family: var(--font-mono); font-weight: 700; cursor: copy;
    border: 1px solid var(--color-border); transition: background-color .2s;
}
.discount-box__code.is-copied { background: var(--color-success); color: var(--color-bg); }

.methodology-inline { margin: var(--space-8) 0; }
.methodology-inline__criteria { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.methodology-inline__criteria li {
    padding: var(--space-2) var(--space-3); background: var(--color-bg-alt); border-radius: var(--radius-sm);
}
.methodology-inline__weight { color: var(--color-text-muted); font-weight: 400; }
.score-scale { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.score-scale dt { font-weight: 600; }

.expert-tip {
    border-left: 3px solid var(--color-accent);
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-alt); margin: var(--space-8) 0;
}
.expert-tip__quote p { margin: 0 0 var(--space-3); font-style: italic; }
.expert-tip__caption { display: flex; gap: var(--space-3); align-items: center; font-size: .9em; color: var(--color-text-muted); }
.expert-tip__photo { border-radius: 50%; }

.helpful-vote {
    margin: var(--space-12) auto var(--space-6); padding: var(--space-4);
    text-align: center; border-top: 1px solid var(--color-border);
}
.helpful-vote__form { display: inline-flex; gap: var(--space-2); margin: var(--space-3) 0; flex-wrap: wrap; justify-content: center; align-items: center; }
/* Honeypot — musí být hidden přes třídu (CSP s nonce blokuje inline style atribut) */
.helpful-vote__honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    opacity: 0;
}
.helpful-vote__snapshot,
.helpful-vote__thanks { font-size: .9em; color: var(--color-text-muted); margin-top: var(--space-3); }

.article-helpful-snapshot { font-size: .9em; color: var(--color-text-muted); margin: var(--space-2) 0 0; }
.text-muted { color: var(--color-text-muted); }

/* === F6: Empty category placeholder (Připravujeme) === */
.empty-category {
    background: var(--color-bg-alt);
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius);
    text-align: center;
    margin: var(--space-8) 0;
    border: 1px solid var(--color-border);
}
.empty-category h2 {
    margin-top: 0;
    color: var(--color-text);
}
.empty-category__alts {
    list-style: none;
    padding: 0;
    margin: var(--space-4) auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 480px;
}
.empty-category__alts li {
    font-size: 1.05rem;
}
.empty-category__cta {
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* ============================================================
 * F8 (2026-05-07) — externí audit response
 * .personal-observation — osobní pozorování autora/recenzenta
 * .speedtest-evidence   — naměřené hodnoty + screenshoty
 * ============================================================ */

.personal-observation {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--color-bg-muted, #f8fafb);
    border-left: 4px solid var(--color-accent, #0a66c2);
    border-radius: 4px;
    font-size: 1rem;
}

.personal-observation__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.personal-observation__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e1e5ea);
}

.personal-observation__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-accent, #0a66c2);
    text-transform: uppercase;
}

.personal-observation__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    line-height: 1.3;
}

.personal-observation__author {
    font-weight: 600;
    color: var(--color-text, #1f2933);
    text-decoration: none;
}

.personal-observation__author:hover {
    text-decoration: underline;
}

.personal-observation__role {
    font-size: 0.875rem;
    color: var(--color-text-muted, #6b7280);
}

.personal-observation__date {
    font-size: 0.875rem;
    color: var(--color-text-muted, #6b7280);
    margin-left: auto;
}

.personal-observation__body {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    line-height: 1.55;
    color: var(--color-text, #1f2933);
}

.personal-observation__body p:first-child { margin-top: 0; }
.personal-observation__body p:last-child  { margin-bottom: 0; }

/* --- Speedtest evidence --- */

.speedtest-evidence {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e1e5ea);
    border-radius: 6px;
}

.speedtest-evidence__caption {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    color: var(--color-text-muted, #6b7280);
    line-height: 1.4;
}

.speedtest-evidence__caption strong {
    color: var(--color-text, #1f2933);
}

.speedtest-evidence__table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.speedtest-evidence__table th,
.speedtest-evidence__table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border, #e1e5ea);
    font-size: 0.95rem;
}

.speedtest-evidence__table thead th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted, #6b7280);
    border-bottom: 2px solid var(--color-border, #e1e5ea);
}

.speedtest-evidence__table tbody th {
    font-weight: 600;
}

.speedtest-evidence__baseline {
    background: var(--color-bg-muted, #f8fafb);
    font-style: italic;
}

@media (max-width: 600px) {
    .speedtest-evidence__table { font-size: 0.875rem; }
    .speedtest-evidence__table th,
    .speedtest-evidence__table td { padding: 0.4rem 0.5rem; }
}