:root {
  --color-primary: #111827;
  --color-secondary: #059669;
  --color-accent: #e5e7eb;
  --color-text: #212427;
  --color-white: #FFFFFF;
  --color-hover_text: #B1B1B1;
  --color-background: #fafaf8;
}

/* ========== CSS RESET ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Typography */
html {
  /* 62.5% of 16px = 10px */
  font-size: 62.5%;
  height: 100%;
}

body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-weight: 400;
}

h1, h2, h3 {
  color: var(--color-text);
  margin-bottom: 1rem;
  font-weight: 700;
}

h1 { font-size: 3.6rem; }
h2 { font-size: 2.8rem; }
h3 { font-size: 2rem; }

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

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

a:hover {
  color: var(--color-hover_text);
}

@media screen and (min-width: 1024px) {
  body { font-size: 1.8rem; }
  h1 { font-size: 4.8rem; }
  h2 { font-size: 3.6rem; }
  h3 { font-size: 2.4rem; }
}

/* Navbar */
.navbar {
  background-color: var(--color-background);
  padding: 1.5rem 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  width: 100%;
}

.navbar-container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.navbar-logo {
  color: var(--color-primary);
  font-size: 2.4rem;
  font-weight: 700;
  text-decoration: none;
}

.navbar-logo:hover {
  color: var(--color-secondary);
}

.navbar-container a {
  color: var(--color-text);
  font-size: 1.6rem;
  text-decoration: none;
}

.navbar-container a:hover {
  color: var(--color-secondary);
}

/* Main content wrapper */
.main-content {
  flex: 1;
  width: 100%;
  padding: 4rem 0;
}

.content-container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
}

/* Footer */
.footer {
  background-color: var(--color-text);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
  padding: 2rem 0;
  margin-top: auto;
  width: 100%;
}

.footer-container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.footer p {
  color: var(--color-accent);
  font-size: 1.4rem;
  margin: 0;
}

/* Empty state */
.empty-state {
  text-align: center;
  color: #666;
  font-size: 1.8rem;
  padding: 4rem 0;
}

/* Story card */
.cluster-card {
  border: 1px solid var(--color-accent);
  padding: 2rem;
  margin-bottom: 2rem;
  background: var(--color-white);
  border-radius: 0.8rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cluster-title {
  display: inline-block;
  background-color: var(--color-text);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  font-size: 1.6rem;
  font-weight: 600;
  border-radius: 0.4rem;
  margin: 0 0 1rem 0;
}

.cluster-bullets {
  margin: 0 0 1.5rem 0;
  padding-left: 2rem;
  color: var(--color-text);
  font-size: 1.6rem;
  list-style-type: disc;
}

.cluster-bullets li {
  margin-bottom: 0.4rem;
}

/* Content area: two columns. Left = bullets + source links (they share one
   column so the links sit directly under the bullets at normal spacing). Right =
   image, top-aligned so it rides up next to the bullets. Columns never overlap,
   so the source dividers can't collide with the image, and the left column fills
   its own height so there's no gap below the bullets. */
.cluster-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.cluster-article {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-accent);
}

.cluster-article:last-child {
  border-bottom: none;
}

.cluster-article a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 1.3rem;
}

.cluster-article a:hover {
  color: var(--color-secondary);
}

/* Outlet badges */
.article-medium {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 0.3rem;
  font-size: 1.1rem;
  font-weight: 600;
  margin-right: 0.8rem;
  text-transform: uppercase;
  background-color: #6b7280; /* fallback for outlets without a specific color */
  color: white;
}

.medium-sme        { background-color: #1a56db; }
.medium-aktuality  { background-color: #dc2626; }
.medium-dennik_n   { background-color: #059669; }
.medium-teraz_sk   { background-color: #7c3aed; }
.medium-sita       { background-color: #ea580c; }
.medium-24_hodin   { background-color: #0891b2; }
.medium-euractiv   { background-color: #ca8a04; }

.cluster-image {
  width: 180px;               /* right grid column; column gap handles the spacing */
  height: 180px;
  overflow: hidden;
  border-radius: 0.4rem;
}

.cluster-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cluster-meta {
  display: flex;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-accent);
  font-size: 1.3rem;
  color: #666;
}

/* Responsive */
@media screen and (max-width: 768px) {
  /* Fix mobile horizontal overflow: the navbar's fixed 3rem gaps across four
     nowrap items exceed a phone's width. Let it wrap and tighten the gap. */
  .navbar-container {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  /* Narrow screens: one column, image full-width on top. */
  .cluster-body {
    grid-template-columns: 1fr;
  }

  .cluster-image {
    order: -1;
    width: 100%;
    height: 200px;
  }
}