/* =========================================================
   Blog – výpis článkov a detail článku
   Stavia na premenných z tokens.css a tlačidlách z web.css.
   Pozor: web.css štýluje holé <header> a <nav> (na mobile ich
   skrýva), preto tu stoja <div> s rolou, nie tieto značky.
   ========================================================= */

/* ---------- Úvod blogu ---------- */
.blog-hero {
  padding-block: var(--space-2xl) var(--space-xl);
  background: linear-gradient(115deg, #171b21, #343e49);
  color: white;
  --focus-ring: #ffffff;
}

.blog-hero .wrap {
  max-width: 880px;
  text-align: center;
}

.blog-hero h1 {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

.blog-hero p {
  max-width: 62ch;
  margin: 0 auto;
  color: #d7dce3;
  font-size: var(--fs-md);
}

/* rovnaký tmavý úvod ako newsletter a semináre */
.blog-hero .eyebrow {
  color: #ff8d96;
}

/* ---------- Výpis ---------- */
.blog-list {
  padding-block: var(--space-xl) var(--section-y);
  background: var(--surface-alt);
}

.blog-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.blog-filter a {
  padding: 0.55em 1.1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease,
    background-color var(--dur-fast) ease;
}

.blog-filter a:hover {
  border-color: var(--red);
  color: var(--red-text);
}

.blog-filter a.is-active {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.blog-empty {
  max-width: 60ch;
  margin: 0 auto;
  padding: var(--space-xl);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
}

/* ---------- Kartička článku ---------- */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) ease;
}

.post-card:hover,
.post-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--red);
  box-shadow: var(--shadow-lg);
}

.post-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  background: var(--red-soft);
}

.post-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.post-card:hover .post-card__media img {
  transform: scale(1.04);
}

.post-card__placeholder {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-lg);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.9em;
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-xs);
}

.post-card__category {
  color: var(--red-text);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-card__title {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.post-card__title a {
  color: var(--ink);
  text-decoration: none;
}

/* Celá kartička je klikateľná cez odkaz v nadpise */
.post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post-card__title a:focus-visible {
  outline: none;
}

.post-card:has(.post-card__title a:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.post-card__perex {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-sm);
}

.post-card__more {
  margin-top: auto;
  color: var(--red-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.post-card:hover .btn-arrow {
  transform: translateX(4px);
}

/* ---------- Stránkovanie ---------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}

.pager__page,
.pager__arrow {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: none;
}

a.pager__page:hover,
a.pager__arrow:hover {
  border-color: var(--red);
  color: var(--red-text);
}

.pager__page.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.pager__arrow.is-disabled {
  opacity: 0.4;
}

.pager__gap {
  color: var(--muted);
}

/* ---------- Detail článku: úvod ---------- */
.post-hero {
  padding-block: var(--space-2xl) var(--space-xl);
  background: linear-gradient(115deg, #171b21, #343e49);
  color: white;
  --focus-ring: #ffffff;
}

.post-hero__inner {
  max-width: 880px;
}

.post-hero h1 {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

.post-hero__perex {
  margin: 0 0 var(--space-md);
  color: #d7dce3;
  font-size: var(--fs-md);
}

.post-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.post-breadcrumb a {
  color: #ff8d96;
  text-decoration: none;
}

.post-breadcrumb a:hover {
  text-decoration: underline;
}

.post-hero .post-breadcrumb {
  color: #aab3bf;
}

.post-hero .post-meta {
  color: #d7dce3;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.7em;
  margin: 0;
  font-size: var(--fs-sm);
}

.post-cover {
  max-width: 1040px;
  margin: calc(-1 * var(--space-lg)) auto 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.post-cover img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Detail článku: obsah a kapitoly ---------- */
.post {
  background: var(--surface);
}

.post-layout {
  max-width: 880px;
  padding-block: var(--space-xl) var(--section-y);
}

.post-layout.has-toc {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-2xl);
  max-width: 1180px;
}

.post-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}

.post-toc__title {
  margin: 0 0 var(--space-xs);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.post-toc ol {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--fs-sm);
}

.post-toc li::marker {
  color: var(--red);
  font-weight: 700;
}

.post-toc a {
  color: var(--ink-soft);
  text-decoration: none;
}

.post-toc a:hover {
  color: var(--red-text);
}

.post-content {
  max-width: 72ch;
}

.post-content p {
  color: var(--ink-soft);
}

.post-content a {
  color: var(--red-text);
  text-underline-offset: 3px;
}

.post-content strong {
  color: var(--ink);
}

.post-byline {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}

/* ---------- Bloky obsahu ---------- */
.block-section + .block-section,
.post-content > * + .block-section {
  margin-top: var(--space-xl);
}

.block-section {
  scroll-margin-top: 96px;
}

.block-section__title {
  margin-bottom: var(--space-md);
  font-size: var(--fs-xl);
}

.block-heading--3 {
  margin-top: var(--space-lg);
  font-size: var(--fs-lg);
}

.block-heading--4 {
  margin: var(--space-md) 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 700;
}

.block-paragraph {
  margin: 0 0 var(--space-md);
}

.block-paragraph--lead {
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 500;
}

.block-label {
  margin: 0 0 var(--space-xs);
  color: var(--ink);
  font-weight: 600;
}

.block-list {
  display: grid;
  gap: var(--space-xs);
  margin: 0 0 var(--space-md);
  padding-left: 1.4em;
  color: var(--ink-soft);
}

.block-list li::marker {
  color: var(--red);
  font-weight: 700;
}

.block-list strong {
  margin-right: 0.3em;
}

/* Zoznam s fajkou – rovnaká ikonka ako v zozname tém newslettera */
.block-list--check {
  padding-left: 0;
  list-style: none;
}

.block-list--check li {
  position: relative;
  padding-left: 2em;
}

.block-list--check li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1.3em;
  height: 1.3em;
  background: var(--icon-check-circle) center / contain no-repeat;
}

.block-table {
  margin: 0 0 var(--space-lg);
}

.block-table__title {
  margin: 0 0 var(--space-xs);
  color: var(--ink);
  font-weight: 700;
}

.block-table__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.block-table th,
.block-table td {
  padding: 0.8em 1em;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.block-table th {
  background: var(--surface-alt);
  color: var(--ink);
  font-weight: 700;
}

.block-table tr:last-child td {
  border-bottom: 0;
}

.block-image {
  margin: 0 0 var(--space-lg);
}

.block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.block-image__caption {
  margin-top: var(--space-xs);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.block-divider {
  margin: var(--space-xl) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.block-card {
  margin: 0 0 var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
}

.block-card > :last-child {
  margin-bottom: 0;
}

.block-card > :first-child {
  margin-top: 0;
}

.block-card--grey {
  background: var(--surface-alt);
  border: 1px solid var(--line);
}

.block-card--red {
  background: var(--red-soft);
  border-left: 4px solid var(--red);
}

.block-card--dark {
  --focus-ring: #ffffff;
  background: var(--dark);
  color: var(--dark-text);
}

.block-card--dark h3,
.block-card--dark h4,
.block-card--dark strong,
.block-card--dark .block-label {
  color: #fff;
}

.block-card--dark p,
.block-card--dark .block-list {
  color: var(--dark-text);
}

.block-card--dark a {
  color: #fff;
}

.t-muted {
  color: var(--muted);
}

/* ---------- FAQ pod článkom (vzhľad z web.css) ---------- */
.post-faq details p {
  color: var(--ink-soft);
}

/* ---------- Výzva na spoluprácu ---------- */
.blog-cta {
  padding-block: var(--section-y) 0;
  background: var(--surface-alt);
}

.post-faq + .blog-cta {
  padding-top: 0;
}

.blog-cta__panel {
  --focus-ring: #ffffff;
  display: grid;
  grid-template-columns: 1.2fr auto;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-2xl) clamp(24px, 4vw, 56px);
  border-radius: var(--radius-lg);
  background: var(--dark);
  color: #fff;
}

.blog-cta__panel h2 {
  color: #fff;
}

.blog-cta__panel p {
  margin: 0;
  color: var(--dark-text);
}

.blog-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ---------- Ďalšie články ---------- */
.blog-related {
  padding-block: var(--section-y) 0;
  background: var(--surface-alt);
}

.blog-related h2 {
  margin-bottom: var(--space-lg);
  text-align: center;
}

/* ---------- Newsletter ---------- */
.blog-newsletter {
  padding-block: var(--section-y);
  background: var(--surface-alt);
}

.blog-list + .blog-newsletter {
  padding-top: 0;
}

.blog-newsletter__panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-xl) clamp(24px, 4vw, 56px);
  border-radius: var(--radius-lg);
  background: linear-gradient(115deg, #fff4f4, #f8e3e5);
}

.blog-newsletter__panel h2 {
  font-size: var(--fs-xl);
}

.blog-newsletter__panel p {
  margin: 0;
}

/* ---------- Menšie obrazovky ---------- */
@media (max-width: 1100px) {
  .post-layout.has-toc {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    max-width: 880px;
  }

  .post-toc {
    position: static;
  }
}

@media (max-width: 950px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-cta__panel,
  .blog-newsletter__panel {
    grid-template-columns: 1fr;
  }

  .post-cover {
    margin-top: 0;
    border-radius: var(--radius-md);
  }
}

@media (max-width: 560px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-filter {
    justify-content: flex-start;
  }

  .blog-cta__actions .btn,
  .blog-newsletter__panel .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-card,
  .post-card__media img {
    transition: none;
  }

  .post-card:hover,
  .post-card:focus-within {
    transform: none;
  }
}