/*
 * Pivotly — blog.css
 * Blog archive, blog single post, and post-card styles.
 * Split from components.css 2026-07-23 (5.0b).
 */

/* ============================================================
   3. BLOG POST CARDS (archive)
   ============================================================ */


.post-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.post-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.post-card:hover .post-card__image {
  transform: scale(1.015);
}


.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.post-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}


.post-card:hover .post-card__title {
  color: var(--color-accent);
}


@media (min-width: 768px) {
  }

@media (min-width: 768px) {
    .post-card--featured .post-card__image-wrap {
    width: 50%;
    flex-shrink: 0;
  }

  .post-card--featured .post-card__title {
    font-size: var(--text-2xl);
  }
}


/* ============================================================
   4. BLOG SINGLE POST ā€” ARTICLE TYPOGRAPHY
   Applied to .post-content wrapper around WordPress content.
   ============================================================ */


/* 2026-07-23 (5.0a conflict resolution): h1/h2/h3 used to share one group
   rule here, each then also had its own solo block immediately below AND
   a third, later, more complete block further down the file (duplicated
   from an earlier redesign pass) — h2/h3 were silently getting their
   margin/color/font values from the later blocks already; this consolidates
   all three sources into one rule per heading with nothing lost. h1 has no
   later override, so it keeps exactly what the old group rule gave it. h4
   has its own complete block below (uppercase eyebrow-style, not a heading
   weight) and was never part of this. */
.post-content h1 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}

.post-content h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.post-content h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.3;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-2xs);
}


.post-content ul,
.post-content ol {
  margin-bottom: var(--space-6);
  max-width: var(--reading-width);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.post-content li {
  margin: 0;
}

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


/* Post header ā€” above article content */

.post-header__author-avatar {
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-accent-light);
}


.post-header__author-title {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.post-header__date-read {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

.post-header__date-read span + span::before {
  content: 'Ā·';
  margin-right: var(--space-3);
}


@media (min-width: 768px) {
  .post-header__title {
    font-size: var(--text-5xl);
  }
}

.post-header__hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-xl);
  margin-top: var(--space-8);
}

/* Post footer ā€” tags + related posts */
.post-footer {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

/* Sticky sidebar CTA ā€” desktop only */
.post-sidebar {
  display: none;
}

@media (min-width: 1280px) {
  .post-sidebar {
    display: block;
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
  }
}

.post-sidebar__card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.post-sidebar__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.post-sidebar__heading {
  font-size: var(--text-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
}

.post-sidebar__coach {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.post-sidebar__coach-avatar {
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  border-radius: var(--radius-full);
  object-fit: cover;
}

.post-sidebar__coach-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.post-sidebar__coach-title {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}


/* ============================================================
   20. BLOG FEED + POST CARDS
   1 col mobile ā†’ 3 col ā‰1024px
   ============================================================ */

.blog-feed__heading {
  text-align: center;
  margin-bottom: var(--space-10);
}

.blog-feed__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

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

.blog-feed__footer {
  text-align: center;
  margin-top: var(--space-10);
}

/* Post card ā€” shared by blog-feed and blog-archive */
.post-card {
  display: block;
  flex-direction: column;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-out);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--card-shadow);
  cursor: pointer;
}

.post-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__image {
  background-color: var(--color-border);
  background-image: linear-gradient(
    100deg,
    var(--color-border) 30%,
    var(--color-bg-alt) 50%,
    var(--color-border) 70%
  );
  background-size: 200% 100%;
  animation: pv-img-shimmer 1.6s ease-in-out infinite;
}

.post-card__image:has(img.is-loaded) {
  animation: none;
  background-image: none;
}

@keyframes pv-img-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .post-card__image {
    animation: none;
  }
}

.post-card__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-border);
}

.post-card__body {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-3);
  flex: 1;
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  max-width: none;
}

.post-card__category {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  background-color: var(--color-accent-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
}

.post-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.post-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  transition: color var(--duration-fast) var(--ease-default);
  margin-bottom: var(--space-3);
}

.post-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: none;
  margin-bottom: var(--space-4);
  flex: 1;
}

.post-card__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  margin-top: auto;
}

.post-card__link:hover {
  color: var(--color-accent-hover);
}

.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-primary);
  border: var(--border-width-thick) solid var(--color-accent);
  font-weight: var(--weight-semibold);
}

.btn-accent:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-primary);
}

.btn-accent:active {
  opacity: 0.9;
}


/* ============================================================
   24. BLOG SINGLE ā€” post-header, post-body, post-author,
       post-related, breadcrumb
   ============================================================ */

/* ā”€ā”€ Breadcrumb ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.breadcrumb a:hover {
  color: var(--color-accent);
}

/* ā”€ā”€ Post header ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */

@media (min-width: 768px) {
  .post-header__title {
    font-size: var(--text-5xl);
  }
}


.post-header__date {
  color: var(--color-text-muted);
}

.post-header__coach-link {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.post-header__coach-link:hover {
  color: var(--color-accent-hover);
}


.post-header__image img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

/* ā”€ā”€ Post body ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */
.post-body {
  padding-top: var(--space-10);
}

.post-body .post-content {
  max-width: 720px;
  font-size: var(--text-md);
  line-height: var(--leading-loose);
}

.post-body .post-content p {
  margin-bottom: var(--space-6);
  max-width: none;
}

.post-body .post-content h2 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.post-body .post-content h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.post-body .post-content ul,
.post-body .post-content ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

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

/* ā”€ā”€ Post author ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */
.post-author {
  background-color: var(--color-bg-alt);
}


.post-author__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.post-author__bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
  max-width: none;
}


/* ā”€ā”€ Post related ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ */
.post-related__heading {
  margin-bottom: var(--space-8);
}


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


/* ============================================================
   33. BLOG FEED ā€” CAROUSEL
   ============================================================ */

.blog-feed__carousel {
  position: relative;
  overflow: hidden;
}

.blog-feed__track {
  display: flex;
  flex-direction: row;
  gap: var(--space-6);
  transition: transform var(--duration-base) var(--ease-default);
  will-change: transform;
}

/* Mobile/tablet: 1 card fills the full carousel width */
.blog-feed__track .post-card {
  flex: 0 0 100%;
  min-width: 0;
}

/* Arrows ā€” desktop only (mobile/tablet show one stacked card, no need to page) */
.blog-feed__prev,
.blog-feed__next {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-card);
  color: var(--color-primary);
  font-size: var(--text-2xl);
  cursor: pointer;
  z-index: 2;
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.blog-feed__prev:hover,
.blog-feed__next:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* Desktop: 3 cards visible at once */
@media (min-width: 1024px) {
  .blog-feed__track .post-card {
    flex: 0 0 calc((100% - 2 * var(--space-6)) / 3);
  }

  /* Carve horizontal gutters so arrows sit beside the track, not over it */
  .blog-feed__carousel {
    padding-inline: var(--space-12);
  }

  .blog-feed__prev {
    left: 0;
    display: flex;
  }

  .blog-feed__next {
    right: 0;
    display: flex;
  }
}

/* Hide arrows on desktop when ≤3 posts all fit without scrolling */
@media (min-width: 1024px) {
  .blog-feed__carousel--few .blog-feed__prev,
  .blog-feed__carousel--few .blog-feed__next {
    display: none;
  }
}

/* Dots — mobile/tablet only, where the carousel is single-card and arrows are hidden */
.blog-feed__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-6);
}

.blog-feed__dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), width var(--transition-fast);
}

/* 2026-07-22: the dot is the only mobile pagination control (arrows are
   desktop-only) but rendered at 6px — well under any reasonable touch-target
   minimum. Expand the hit area via an invisible pseudo-element without
   changing the visible dot size. Capped at -6px (not the usual ~44px target)
   because dots sit only 12px apart (--space-xs gap on a 6px dot = 18px
   center-to-center) — anything more generous starts overlapping neighboring
   dots' hit areas, trading a mis-tap-because-too-small problem for a
   mis-tap-the-wrong-dot one. */
.blog-feed__dot::before {
  content: "";
  position: absolute;
  inset: -6px;
}

.blog-feed__dot--active {
  background: var(--color-accent);
  width: 20px;
  border-radius: 3px;
}

@media (min-width: 1024px) {
  .blog-feed__dots {
    display: none;
  }
}


/* ============================================================
   35. BLOG SINGLE POST
   ============================================================ */

/* Section 28a ā€” Progress Bar */
.post-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--color-accent);
  z-index: var(--z-sticky);
  transition: width 0.1s linear;
}

/* Section 28b ā€” Post Header */
.post-header {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: center;
}

.post-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  justify-content: center;
}

.post-header__category {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.post-header__category:hover {
  color: var(--color-primary);
}

.post-header__date {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.post-header__meta-sep {
  color: var(--color-border);
  font-size: var(--text-sm);
}

.post-header__title {
  font-size: var(--text-4xl);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  margin-bottom: var(--space-md);
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-weight: 700;
}

.post-header__lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: var(--space-md);
}

.post-header__author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.post-header__author-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.post-header__author-photo-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
}

.post-header__author-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.2;
  font-family: var(--font-body);
}

.post-header__author-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.post-header__author-link:hover {
  color: var(--color-accent);
}

.post-header__read-time {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.post-header__image {
  width: 100%;
  max-height: 480px;
  overflow: hidden;
  border-radius: var(--card-radius);
  margin-top: var(--space-lg);
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: top;
  display: block;
}

@media (max-width: 640px) {
  .post-header {
    text-align: left;
  }
  .post-header__meta,
  .post-header__author {
    justify-content: flex-start;
  }
  .post-header__lead {
    margin-inline: 0;
  }
  .post-header__title {
    font-size: var(--text-3xl);
  }
  .post-header__image {
    aspect-ratio: 3 / 2;
    border-radius: 0;
  }
}

/* Section 28c ā€” Body Layout */
.post-layout {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  align-items: start;
}

@media (min-width: 1024px) {
  .post-layout {
    grid-template-columns: 220px 1fr;
    gap: var(--space-2xl);
  }
}

.post-toc {
  display: none;
}

@media (min-width: 1024px) {
  .post-toc {
    display: block;
    position: sticky;
    top: calc(var(--space-xl) + 6px);
    padding-top: var(--space-sm);
  }
}

.post-toc__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}

.post-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.post-toc__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  line-height: 1.4;
  display: block;
  padding: var(--space-3xs) var(--space-xs);
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.post-toc__link:hover,
.post-toc__link--active {
  color: var(--color-primary);
  border-left-color: var(--color-accent);
}

.post-body {
  min-width: 0;
  max-width: 720px;
}

@media (min-width: 1280px) {
  .post-body {
    max-width: 680px;
  }
}

/* Section 28d ā€” Article Typography */
.post-content {
  font-size: var(--text-md);
  line-height: var(--leading-prose);
  color: var(--color-text);
  font-family: var(--font-body);
}

.post-content p {
  margin-bottom: var(--space-sm);
  max-width: var(--reading-width);
}

/* .post-content h2/h3 merged up into the "5.0a conflict resolution" block
   near the top of the .post-content rules — this duplicate removed
   2026-07-23, see that comment for the full history. */

.post-content h4 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-3xs);
}

.post-content blockquote {
  border-left: 3px solid var(--color-accent);
  margin: var(--space-lg) 0;
  padding: var(--space-xs) var(--space-md);
}

.post-content blockquote p {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1.5;
  margin-bottom: 0;
}

.post-content ul,
.post-content ol {
  margin: var(--space-sm) 0 var(--space-sm) var(--space-md);
  padding: 0;
}

.post-content li {
  line-height: var(--leading-prose);
  margin-bottom: var(--space-3xs);
}

.post-content ul li { list-style-type: disc; }
.post-content ol li { list-style-type: decimal; }

.post-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.post-content a:hover {
  color: var(--color-accent);
}

.post-content code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
  background: var(--color-border);
  color: var(--color-primary);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.post-content img {
  border-radius: var(--card-radius);
  margin-block: var(--space-8);
  width: 100%;
  height: auto;
  margin: var(--space-lg) 0;
}

@media (max-width: 640px) {
  .post-content blockquote {
    padding: var(--space-xs) var(--space-sm);
    margin: var(--space-md) 0;
  }
  .post-content blockquote p {
    font-size: var(--text-lg);
  }
}

/* Section 28e ā€” Author Card (bottom) */
.post-author {
  max-width: 720px;
  margin-inline: auto;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.post-author__card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding-block: var(--space-8);
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
}

.post-author__photo {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
}

.post-author__photo-placeholder {
  width: 60px;
  height: 60px;
  background-color: var(--color-border);
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
}

.post-author__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.post-author__name {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0;
  max-width: none;
}

.post-author__role {
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: 0;
  max-width: none;
  font-family: var(--font-body);
}

.post-author__bio {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.post-author__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  align-self: flex-start;
  font-family: var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
}

.post-author__link:hover {
  color: var(--color-accent);
}

@media (max-width: 640px) {
  .post-author__card {
    flex-direction: column;
  }
}

/* Section 28f ā€” Related Posts */
.post-related {
  margin-top: var(--space-2xl);
  padding: var(--space-2xl) var(--container-padding);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.post-related__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.post-related__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.post-related__heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
}

.post-related__all {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-related__all:hover {
  color: var(--color-primary);
}

.post-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

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


/* ============================================================
   36. BLOG ARCHIVE
   ============================================================ */

/* Section 29a ā€” Archive Header + Filter Tabs */
.blog-archive-header {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.blog-archive-heading {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

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

.blog-filter {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-3xs);
}

.blog-filter::-webkit-scrollbar {
  display: none;
}

.blog-filter__btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3xs) var(--space-2xs);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.blog-filter__btn:hover {
  color: var(--color-primary);
}

.blog-filter__btn--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

/* Section 29b ā€” Hero Post */
.blog-hero {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 768px) {
  .blog-hero {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
  }
}

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

.blog-hero__category {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.blog-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--transition-fast);
}

@media (min-width: 768px) {
  .blog-hero__title {
    font-size: var(--text-3xl);
  }
}

.blog-hero:hover .blog-hero__title {
  color: var(--color-accent);
}

.blog-hero__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.blog-hero__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
}

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

.blog-hero__image-wrap {
  order: -1;
}

@media (min-width: 768px) {
  .blog-hero__image-wrap {
    order: 1;
  }
}

.blog-hero__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--card-radius);
  display: block;
}

.blog-hero__image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-border);
  border-radius: var(--card-radius);
}

/* Section 29c ā€” Post List Rows */
.blog-list {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.blog-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.blog-list__row:hover {
  opacity: 0.75;
}

.blog-list__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

.blog-list__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
  transition: color var(--transition-fast);
}

.blog-list__row:hover .blog-list__title {
  color: var(--color-accent);
}

.blog-list__meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

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

.blog-list__image {
  width: 100px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--card-radius);
  flex-shrink: 0;
  display: block;
}

.blog-list__image-placeholder {
  width: 100px;
  height: 72px;
  background: var(--color-border);
  border-radius: var(--card-radius);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .blog-list__image,
  .blog-list__image-placeholder {
    width: 72px;
    height: 52px;
  }
  .blog-list__title {
    font-size: var(--text-lg);
  }
}

/* 3.6 (2026-07-22) — Load-more skeleton rows. The one genuinely async load
   on the site (blog "Laadi rohkem"), so a real loading skeleton is
   appropriate here — unlike the branded static texture used sitewide for
   permanent "no image" states (see the BRANDED IMAGE FALLBACK block). */
.blog-list__row--skeleton {
  pointer-events: none;
}

.blog-list__skeleton-bar {
  display: block;
  height: 1em;
  border-radius: var(--radius-sm);
}

.blog-list__skeleton-bar--title {
  width: 70%;
  height: 1.3em;
}

.blog-list__skeleton-bar--meta {
  width: 40%;
  margin-top: var(--space-2xs);
}

.blog-list__skeleton-bar,
.blog-list__row--skeleton .blog-list__image-placeholder {
  background: linear-gradient(
    90deg,
    var(--color-border) 25%,
    var(--color-bg-alt) 50%,
    var(--color-border) 75%
  );
  background-size: 200% 100%;
  animation: pivotly-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes pivotly-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-list__skeleton-bar,
  .blog-list__row--skeleton .blog-list__image-placeholder {
    animation: none;
    background: var(--color-border);
  }
}

/* Section 29d — Load More */
.blog-load-more {
  text-align: center;
  padding: var(--space-xl) var(--container-padding);
}

.blog-load-more__btn {
  /* extends existing .btn and .btn-ghost */
  min-width: 180px;
}

.blog-load-more__btn[data-done="true"] {
  display: none;
}

/* ============================================================
   48 - Blog Archive Hero Section
   ============================================================ */

.blog-archive-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

.blog-archive-hero-inner--no-image {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  padding-block: var(--section-padding-y);
}

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

.blog-archive-hero-heading {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-primary);
  line-height: var(--leading-tight);
  margin: 0;
}

.blog-archive-hero-lead {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 60ch;
  margin: 0;
}

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

/* Image variant — the image bleeds past the centered container to the
   viewport edge; the left-edge (mobile: bottom-edge) mask fades it into
   the page background so the content column can sit on top of it. */
.blog-archive-hero-inner:not(.blog-archive-hero-inner--no-image) {
  position: relative;
}

.blog-archive-hero-inner:not(.blog-archive-hero-inner--no-image) .blog-archive-hero-content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding-block: var(--space-2xl);
  padding-right: var(--container-padding);
  /* Same left inset the rest of the page's centered containers use, so
     this full-bleed section's text still lines up with the grid below it. */
  padding-left: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
}

.blog-archive-hero-image-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .blog-archive-hero-inner:not(.blog-archive-hero-inner--no-image) {
    min-height: clamp(360px, 32vw, 480px);
  }

  .blog-archive-hero-image-wrap {
    position: absolute;
    inset: 0;
    left: 38%;
    aspect-ratio: auto;
  }

  .blog-archive-hero-inner:not(.blog-archive-hero-inner--no-image) .blog-archive-hero-content {
    padding-block: var(--space-3xl);
  }
}

.blog-archive-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

@media (min-width: 768px) {
  .blog-archive-hero-image {
    mask-image: linear-gradient(to right, transparent 0%, black 22%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%);
  }
}


/* ============================================================
   49 - Blog Archive Topics Grid
   ============================================================ */

.blog-archive-topics {
  background: var(--color-bg-alt);
  padding-block: var(--section-padding-y);
}

.blog-archive-topics-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.blog-archive-topics-heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-primary);
  margin: 0;
}

.blog-archive-topics-row {
  display: flex;
  flex-direction: column;
}

.blog-archive-topics-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  text-decoration: none;
}

.blog-archive-topics-item:last-child {
  border-bottom: none;
}

.blog-archive-topics-item-icon {
  width: 28px;
  height: 28px;
  color: var(--color-accent);
  margin-bottom: var(--space-3xs);
}

.blog-archive-topics-item-name {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  transition: color var(--duration-base) var(--ease-out);
}

.blog-archive-topics-item:hover .blog-archive-topics-item-name {
  color: var(--color-accent);
}

.blog-archive-topics-item-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .blog-archive-topics-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .blog-archive-topics-item {
    flex: 1 1 0;
    min-width: 160px;
    padding-inline: var(--space-4);
    border-bottom: none;
    border-left: var(--border-width) solid var(--color-border);
  }

  .blog-archive-topics-item:first-child {
    border-left: none;
    padding-left: 0;
  }
}