/* ============================================================
   VĚDA.cz — Science Magazine Design System
   Visual style: clean editorial / modern science magazine
   Inspired by NASA.gov / veda.cz aesthetic
   ============================================================ */

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Colors */
  --color-bg:              #ffffff;
  --color-bg-soft:         #f7f9fc;
  --color-bg-subtle:       #eef2f7;
  --color-surface:         #ffffff;
  --color-surface-raised:  #ffffff;

  --color-primary:         #0066ff;
  --color-primary-dark:    #0052cc;
  --color-primary-light:   #e8f0ff;
  --color-primary-hover:   #0052cc;

  --color-text:            #1a2332;
  --color-text-secondary:  #4a5568;
  --color-text-muted:      #718096;
  --color-text-inverse:    #ffffff;

  --color-border:          #e2e8f0;
  --color-border-light:    #f0f4f8;
  --color-divider:         #e2e8f0;

  --color-accent:          #0066ff;
  --color-accent-orange:   #ff6b35;
  --color-tag-bg:          #e8f0ff;
  --color-tag-text:        #0052cc;

  --color-header-bg:       #ffffff;
  --color-header-border:   #e2e8f0;
  --color-footer-bg:       #1a2332;
  --color-footer-text:     #a0aec0;
  --color-footer-text-inv: #ffffff;

  --color-tray-bg:         #f7f9fc;
  --color-tray-border:     #e2e8f0;

  /* Typography */
  --font-ui:               'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:             'Inter', system-ui, sans-serif;
  --font-mono:             'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:               0.75rem;
  --text-sm:               0.8125rem;
  --text-base:             1rem;
  --text-md:               1.0625rem;
  --text-lg:               1.125rem;
  --text-xl:               1.25rem;
  --text-2xl:              1.5rem;
  --text-3xl:              1.875rem;
  --text-4xl:              2.25rem;
  --text-5xl:              3rem;

  --weight-normal:         400;
  --weight-medium:         500;
  --weight-semibold:       600;
  --weight-bold:           700;

  --leading-tight:         1.25;
  --leading-snug:          1.4;
  --leading-normal:        1.6;
  --leading-relaxed:       1.75;
  --leading-body:          1.82;

  /* Spacing */
  --space-1:               0.25rem;
  --space-2:               0.5rem;
  --space-3:               0.75rem;
  --space-4:               1rem;
  --space-5:               1.25rem;
  --space-6:               1.5rem;
  --space-8:               2rem;
  --space-10:              2.5rem;
  --space-12:              3rem;
  --space-16:              4rem;
  --space-20:              5rem;

  /* Layout */
  --container-max:         1280px;
  --container-pad:         1.25rem;
  --content-max:           760px;
  --sidebar-width:         320px;
  --gap-grid:              1.5rem;
  --gap-card:              1.25rem;

  /* Borders & Radius */
  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             12px;
  --radius-xl:             16px;
  --radius-full:           9999px;
  --border-width:          1px;

  /* Shadows */
  --shadow-xs:             0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:             0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:             0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:             0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
  --shadow-xl:             0 16px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-card:           0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card-hover:     0 8px 24px rgba(0,102,255,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-header:         0 1px 0 var(--color-border), 0 2px 8px rgba(0,0,0,0.04);

  /* Gradients */
  --gradient-hero-overlay: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.08) 100%);
  --gradient-hero-sm:      linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 60%, transparent 100%);
  --gradient-accent:       linear-gradient(135deg, #0066ff 0%, #0052cc 100%);
  --gradient-card-hover:   linear-gradient(135deg, #0066ff 0%, #338aff 100%);

  /* Transitions */
  --transition-fast:       0.15s ease;
  --transition-base:       0.22s ease;
  --transition-slow:       0.35s ease;
  --transition-spring:     0.28s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-base:                1;
  --z-card:                2;
  --z-overlay:             10;
  --z-header:              100;
  --z-mobile-nav:          200;
  --z-popup:               300;
  --z-progress:            400;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ============================================================
   3. PROGRESS BAR
   ============================================================ */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--gradient-accent);
  z-index: var(--z-progress);
  transition: width 0.1s linear;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* ============================================================
   4. WRAPPER
   ============================================================ */
.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   5. HEADER
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background-color: var(--color-header-bg);
  box-shadow: var(--shadow-header);
  transition: box-shadow var(--transition-base);
}

.header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Logo */
.header__logo {
  flex-shrink: 0;
}

.header__logo a {
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  text-decoration: none;
  line-height: 1;
}

.header__logo a img {
  height: 36px;
  width: auto;
}

/* Logo wordmark fallback text styling */
.header__logo a:not(:has(img)) {
  color: var(--color-text);
}

/* Nav inside header (logo mode) */
.header .nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.header .nav ul li a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.header .nav ul li a:hover {
  background-color: var(--color-bg-soft);
  color: var(--color-primary);
}

/* Toggle button */
.header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  margin-left: auto;
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.header__toggle:hover {
  background-color: var(--color-bg-soft);
}

.header__toggle svg {
  stroke: currentColor;
}

/* ============================================================
   6. TRAY — Category Menu (2-row grid, FIX 1)
   ============================================================ */
.tray {
  background-color: var(--color-tray-bg);
  border-bottom: var(--border-width) solid var(--color-tray-border);
}

.tray__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.tray__inner ul {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: auto auto;
  width: 100%;
}

.tray__inner ul li {
  border-right: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
}

.tray__inner ul li:first-child {
  border-left: var(--border-width) solid var(--color-border);
}

/* Every 8th item (end of first row) — no right border duplication needed */
.tray__inner ul li:nth-child(8) {
  border-right: var(--border-width) solid var(--color-border);
}

/* Second row first item */
.tray__inner ul li:nth-child(9) {
  border-left: var(--border-width) solid var(--color-border);
}

.tray__inner ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-align: center;
}

.tray__inner ul li a:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.tray__inner ul li.active a,
.tray__inner ul li a.active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   7. MOBILE NAV (smallnav)
   ============================================================ */
.smallnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-surface);
  z-index: var(--z-mobile-nav);
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
}

.smallnav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  margin-left: auto;
  margin-bottom: var(--space-6);
  color: var(--color-text);
  transition: background-color var(--transition-fast);
}

.smallnav__close:hover {
  background-color: var(--color-bg-soft);
}

.smallnav__close svg {
  stroke: currentColor;
}

.smallnav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.smallnav ul li a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.smallnav ul li a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* ============================================================
   8. MAIN LAYOUT
   ============================================================ */
.main {
  flex: 1;
  padding: var(--space-8) 0;
}

.main__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-grid);
}

/* With sidebar */
@media (min-width: 1024px) {
  .main__inner {
    grid-template-columns: 1fr var(--sidebar-width);
    align-items: start;
  }
}

.content {
  min-width: 0;
}

/* ============================================================
   9. HERO / TOP ARTICLES (FIX 3 — compact, overlay text)
   ============================================================ */
.top {
  background-color: var(--color-bg-soft);
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-4) 0;
}

.top__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .top__inner {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: auto;
  }

  /* First (featured) article takes left column, full height */
  .top__inner .article--hero:first-child {
    grid-row: 1 / span 2;
  }
}

@media (min-width: 1024px) {
  .top__inner {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-4);
  }

  .top__inner .article--hero:first-child {
    grid-row: 1 / span 3;
  }
}

/* Hero article card */
.article--hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-text);
  cursor: pointer;
}

.article--hero .article__image {
  margin: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.article--hero .article__image a {
  display: block;
  width: 100%;
  height: 100%;
}

.article--hero .article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-slow);
}

.article--hero:hover .article__image img {
  transform: scale(1.04);
}

/* Overlay */
.article__overlay {
  position: relative;
  z-index: var(--z-overlay);
  padding: var(--space-4) var(--space-5);
  background: var(--gradient-hero-overlay);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
}

/* First hero card taller */
.top__inner .article--hero:first-child .article__overlay {
  min-height: 280px;
}

@media (min-width: 640px) {
  .article__overlay {
    min-height: 180px;
  }

  .top__inner .article--hero:first-child .article__overlay {
    min-height: 100%;
    padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .top__inner .article--hero:first-child .article__overlay {
    padding: var(--space-8);
  }
}

/* Hero article inner structure */
.article--hero {
  display: flex;
  flex-direction: column;
}

.article--hero .article__image {
  position: relative;
  flex: 1;
}

.article--hero .article__image a {
  display: block;
}

.article--hero .article__image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.top__inner .article--hero:first-child .article__image img {
  aspect-ratio: 4/3;
}

@media (min-width: 640px) {
  .article--hero .article__image img {
    aspect-ratio: 3/2;
  }

  .top__inner .article--hero:first-child .article__image img {
    aspect-ratio: unset;
    height: 100%;
    min-height: 300px;
  }
}

/* Hero overlay on top of image */
.article--hero {
  position: relative;
}

.article--hero .article__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  background: var(--gradient-hero-overlay);
  padding: var(--space-4) var(--space-4) var(--space-4);
  min-height: unset;
}

.top__inner .article--hero:first-child .article__overlay {
  padding: var(--space-6);
}

.article--hero .article__category {
  margin: 0 0 var(--space-2);
}

.article--hero .article__category a {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.article--hero .article__title {
  margin: 0;
}

.article--hero .article__title a {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  line-height: var(--leading-snug);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.article--hero .article__title a:hover {
  opacity: 0.9;
}

.top__inner .article--hero:first-child .article__title a {
  font-size: var(--text-xl);
}

@media (min-width: 640px) {
  .top__inner .article--hero:first-child .article__title a {
    font-size: var(--text-2xl);
  }
}

@media (min-width: 1024px) {
  .top__inner .article--hero:first-child .article__title a {
    font-size: var(--text-3xl);
  }
}

.article--hero .article__perex {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  line-height: var(--leading-normal);
}

@media (min-width: 1024px) {
  .top__inner .article--hero:first-child .article__perex {
    display: block;
  }
}

/* ============================================================
   10. ARTICLE CARDS (post-list, bottom sections)
   ============================================================ */
.articles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-card);
}

@media (min-width: 480px) {
  .articles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .articles {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .articles {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Article card base */
.article {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  display: flex;
  flex-direction: column;
}

.article:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

/* Card image */
.article__image {
  margin: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.article__image a {
  display: block;
}

.article__image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.article:hover .article__image img {
  transform: scale(1.04);
}

/* Card body */
.article__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
}

/* Category pill */
.article__category {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

.article__category a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.article__category a:hover {
  color: var(--color-primary-dark);
}

/* Article title in card */
.article__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.article__title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.article__title a:hover {
  color: var(--color-primary);
}

/* Perex */
.article__perex {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Date */
.article__date {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* Card animation initial state */
.card-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-base);
}

.card-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.card-animate.is-visible:hover {
  transform: translateY(-3px);
}

/* ============================================================
   11. SIDEBAR (FIX 2 — three separate stacked blocks)
   ============================================================ */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .sidebar {
    position: sticky;
    top: calc(64px + var(--space-6));
    max-height: calc(100vh - 64px - var(--space-12));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }

  /* FIX 2: override sticky/overflow so blocks expand naturally */
  .sidebar {
    position: sticky;
    top: calc(64px + var(--space-4));
    overflow-y: visible;
    max-height: none;
  }
}

/* Each sidebar block = independent card */
.sidebar__block {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.sidebar__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}

/* Sidebar nav (category/information) */
.sidebar .nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar .nav ul li a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar .nav ul li a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Sidebar article (small) */
.article--sidebar {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border-light);
  background: transparent;
  transform: none !important;
}

.article--sidebar:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.article--sidebar:hover {
  box-shadow: none;
  transform: none !important;
}

.article--sidebar .article__image {
  flex-shrink: 0;
  width: 72px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.article--sidebar .article__image img {
  width: 72px;
  height: 54px;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.article--sidebar .article__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  flex: 1;
}

.sidebar__articles {
  display: flex;
  flex-direction: column;
}

/* Sidebar tags */
.sidebar .tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sidebar .tags li a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background-color: var(--color-tag-bg);
  color: var(--color-tag-text);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar .tags li a:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Sidebar authors */
.sidebar .authors {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar .authors li a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar .authors li a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.sidebar .authors li a svg {
  stroke: var(--color-primary);
  flex-shrink: 0;
}

/* Sidebar promo */
.sidebar .promo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar .promo li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ============================================================
   12. BOTTOM SECTIONS (category post lists, similar posts)
   ============================================================ */
.bottom {
  margin-top: var(--space-10);
}

.bottom__header {
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.bottom__title {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  position: relative;
  padding-left: var(--space-4);
}

.bottom__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
}

.bottom__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-card);
}

@media (min-width: 480px) {
  .bottom__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .bottom__inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .bottom__inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================================
   13. SECTION HEADING
   ============================================================ */
.section-heading {
  font-family: var(--font-ui);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-border);
}

/* ============================================================
   14. ARTICLE / POST PAGE
   ============================================================ */
.text {
  max-width: var(--content-max);
}

/* Hero image on post page */
.text__hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.text__cover {
  margin: 0;
}

.text__cover img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.text__hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4) var(--space-6);
  background: var(--gradient-hero-sm);
}

.text__hero-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.text__hero-cat {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.text__hero-cat:hover {
  background-color: var(--color-primary-dark);
}

/* Post header */
.text__header {
  margin-bottom: var(--space-6);
}

.text__title {
  font-family: var(--font-ui);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .text__title {
    font-size: var(--text-4xl);
  }
}

.text__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.text__meta-sep {
  color: var(--color-border);
}

.text__author-inline a {
  color: var(--color-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.text__author-inline a:hover {
  text-decoration: underline;
}

/* Post body */
.text__body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.text__body p {
  margin-bottom: var(--space-5);
}

.text__body h2 {
  font-family: var(--font-ui);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
  border-left: 4px solid var(--color-primary);
  line-height: var(--leading-snug);
}

.text__body h3 {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.text__body h4 {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.text__body ul,
.text__body ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}

.text__body ul {
  list-style: disc;
}

.text__body ol {
  list-style: decimal;
}

.text__body li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

.text__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: rgba(0,102,255,0.3);
  transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}

.text__body a:hover {
  color: var(--color-primary-dark);
  text-decoration-color: var(--color-primary-dark);
}

.text__body strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.text__body em {
  font-style: italic;
}

.text__body blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-bg-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.text__body blockquote p {
  margin-bottom: 0;
}

.text__body figure {
  margin: var(--space-8) 0;
}

.text__body figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.text__body figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

.text__body img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.text__body iframe {
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
}

/* Data tables */
.text__body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-8) 0;
  font-size: var(--text-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.text__body table thead {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.text__body table thead th {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  text-align: left;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
}

.text__body table thead th:last-child,
.text__body table tbody td:last-child {
  text-align: right;
}

.text__body table tbody tr {
  border-bottom: var(--border-width) solid var(--color-border-light);
  transition: background-color var(--transition-fast);
}

.text__body table tbody tr:nth-child(even) {
  background-color: var(--color-bg-soft);
}

.text__body table tbody tr:hover {
  background-color: var(--color-primary-light);
}

.text__body table tbody td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  border: none;
}

/* Responsive table wrapper */
.text__body .table-wrapper,
.text__body table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  max-width: 100%;
}

.text__body table {
  min-width: 480px;
}

/* Table of contents */
.table-of-content {
  background-color: var(--color-bg-soft);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
}

.table-of-content > span {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}

.table-of-content ol,
.table-of-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
}

.table-of-content li {
  counter-increment: toc-counter;
  margin-bottom: var(--space-2);
}

.table-of-content li::before {
  content: counter(toc-counter) ". ";
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  font-family: var(--font-ui);
}

.table-of-content a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-family: var(--font-ui);
  transition: color var(--transition-fast);
}

.table-of-content a:hover {
  color: var(--color-primary);
}

/* Post info footer */
.text__info {
  background-color: var(--color-bg-soft);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
}

.text__date {
  margin: 0;
}

.text__category {
  margin: 0;
}

.text__category a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

.text__category a:hover {
  text-decoration: underline;
}

.text__author {
  margin: 0;
}

.text__author a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

.text__author a:hover {
  text-decoration: underline;
}

.text__tags {
  margin: 0;
}

.text__tags a {
  color: var(--color-primary);
  text-decoration: none;
}

.text__tags a:hover {
  text-decoration: underline;
}

/* ============================================================
   15. AUTHOR PAGE
   ============================================================ */
.author-profile {
  max-width: var(--content-max);
}

.author-profile .author {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  float: left;
  margin: 0 var(--space-6) var(--space-4) 0;
  box-shadow: var(--shadow-md);
  border: 3px solid var(--color-primary-light);
}

/* ============================================================
   16. SEARCH FORM
   ============================================================ */
.search-form {
  margin-bottom: var(--space-8);
}

.search-form form {
  display: flex;
  gap: var(--space-3);
  max-width: 560px;
}

.search-form input[type="text"] {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-form input[type="text"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,102,255,0.12);
}

.search-form input[type="text"]::placeholder {
  color: var(--color-text-muted);
}

.search-form input[type="submit"] {
  padding: var(--space-3) var(--space-6);
  background: var(--gradient-accent);
  color: var(--color-text-inverse);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.search-form input[type="submit"]:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ============================================================
   17. PAGINATION
   ============================================================ */
.pagination {
  margin-top: var(--space-10);
}

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

.pagination ul li {
  display: flex;
}

.pagination ul li a,
.pagination ul li.pagination__active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pagination ul li a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.pagination ul li.pagination__active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-sm);
}

.pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
}

/* ============================================================
   18. PREFOOTER / SIDEBAR BOTTOM
   ============================================================ */
.prefooter {
  background-color: var(--color-bg-soft);
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-10) 0;
}

.prefooter__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-grid);
}

@media (min-width: 640px) {
  .prefooter__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .prefooter__inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

.prefooter .sidebar__block {
  background-color: var(--color-surface);
}

/* Prefooter nav */
.prefooter .nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.prefooter .nav ul li a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.prefooter .nav ul li a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.prefooter .nav ul li a svg {
  stroke: var(--color-primary);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Prefooter tags */
.prefooter .tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.prefooter .tags li a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background-color: var(--color-tag-bg);
  color: var(--color-tag-text);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.prefooter .tags li a:hover {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.prefooter .tags li a svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

/* Prefooter authors */
.prefooter .authors {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prefooter .authors li a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.prefooter .authors li a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.prefooter .authors li a svg {
  stroke: var(--color-primary);
  flex-shrink: 0;
}

/* Prefooter promo */
.prefooter .promo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.prefooter .promo li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.prefooter .promo li svg {
  stroke: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
}

/* Prefooter article (sidebar style) */
.prefooter .article--sidebar {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border-light);
  background: transparent;
}

.prefooter .article--sidebar:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.prefooter .article--sidebar .article__image {
  flex-shrink: 0;
  width: 72px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.prefooter .article--sidebar .article__image img {
  width: 72px;
  height: 54px;
  object-fit: cover;
}

.prefooter .article--sidebar .article__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* ============================================================
   19. FOOTER
   ============================================================ */
.footer {
  background-color: var(--color-footer-bg);
  padding: var(--space-10) 0;
  margin-top: auto;
}

.footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__logo-text {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.footer__logo-main {
  color: var(--color-footer-text-inv);
}

.footer__logo-accent {
  color: var(--color-primary);
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-footer-text);
  margin: 0;
}

.footer__publisher {
  font-size: var(--text-sm);
  color: var(--color-footer-text);
  margin: 0;
}

/* ============================================================
   20. POPUP
   ============================================================ */
.popup {
  display: none;
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  max-width: 400px;
  width: calc(100% - var(--space-8));
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
  z-index: var(--z-popup);
}

.popup #close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  line-height: 1;
}

.popup #close:hover {
  background-color: var(--color-bg-soft);
  color: var(--color-text);
}

/* ============================================================
   21. LOGO WORDMARK (header text fallback)
   ============================================================ */
.header__logo a {
  /* Wordmark: VĚDA slate, .cz blue */
  color: var(--color-text);
}

/* ============================================================
   22. MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .header__toggle {
    display: flex;
  }

  .header .nav {
    display: none;
  }

  .tray__inner ul {
    grid-template-columns: repeat(3, 1fr);
  }

  .tray__inner ul li:first-child {
    border-left: var(--border-width) solid var(--color-border);
  }

  .tray__inner ul li:nth-child(3n+1) {
    border-left: var(--border-width) solid var(--color-border);
  }

  .text__title {
    font-size: var(--text-2xl);
  }

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

@media (max-width: 479px) {
  .tray__inner ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .tray__inner ul li:nth-child(2n+1) {
    border-left: var(--border-width) solid var(--color-border);
  }

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

  .search-form form {
    flex-direction: column;
  }

  .pagination ul li a,
  .pagination ul li.pagination__active {
    min-width: 36px;
    height: 36px;
    font-size: var(--text-xs);
  }
}

/* ============================================================
   23. DESKTOP TRAY (large screens — 15 items in 2 rows: 8+7)
   ============================================================ */
@media (min-width: 768px) {
  .tray__inner ul {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* ============================================================
   24. 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-width: 0;
}

/* Clearfix */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* ============================================================
   25. SIMILAR BLOCK
   ============================================================ */
.similar {
  background-color: var(--color-bg-soft);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* ============================================================
   26. SKLIK AD CONTAINERS
   ============================================================ */
#sklik_top_id,
#sklik_bottom_id,
#sklik_sidebar_id,
#sklik_article_1_id,
#sklik_article_2_id {
  display: block;
  margin: var(--space-6) auto;
}