/* ===== TripTea — Blog ======================================================
   /blog          → list.twig  (.tt-blog__*)
   /blog/<slug>   → post.twig  (.tt-article__* + shared .tt-blog__card/tag/meta)

   Category badge colors are fixed (Figma Tag component):
     red    (Заварювання) — bg #F9F0EF, text #B56357
     yellow (Посуд)       — bg #FCF6EC, text #E3B153
     blue   (Культура)    — bg #F0F4F7, text #6C8299
     green  (Вибір чаю)   — bg #F1F5F1, text #798B75 (var(--color-matcha-green))
============================================================================ */

.tt-blog,
.tt-article {
  display: block;
  max-width: 1704px;
  margin: 0 auto;
  padding: 32px 16px 80px;
  font-family: 'DM Sans', sans-serif;
  color: var(--color-dark-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Desktop (1201+): max-width:1704px alone only produces a real gutter once
   the viewport clears ~1736px — below that the box fills 100% and the 16px
   padding above is the only gutter. Flatten to exactly 108px across the
   whole desktop range, and cancel the 16px padding (it's on top of that
   108px, so visible content sat at 124px, not lined up with the header's
   flush 108px) — it's the only gutter tablet/mobile have, so it must stay
   there. Tablet/mobile untouched. */
@media (min-width: 1201px) {
  .tt-blog,
  .tt-article {
    max-width: min(1704px, calc(100vw - 216px));
    padding-left: 0;
    padding-right: 0;
  }
}

.tt-blog *, .tt-blog *::before, .tt-blog *::after,
.tt-article *, .tt-article *::before, .tt-article *::after { box-sizing: border-box; }

/* ===== Breadcrumbs (same visual language AND single-line/ellipsis behavior
   as .tt-product__crumb*, product_page.css/catalog_page.css) — one row, no
   wrap; whatever doesn't fit is truncated with "…" on the last (current
   page) crumb instead of spilling to a second line. */
.tt-blog__breadcrumbs,
.tt-article__breadcrumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0 0 21px;
  font-size: 14px;
  line-height: 150%;
}
.tt-blog__breadcrumbs a,
.tt-article__breadcrumbs a {
  flex: 0 0 auto;
  color: var(--color-tea-brown);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.tt-blog__breadcrumbs a:hover,
.tt-article__breadcrumbs a:hover { text-decoration: underline; }
/* Last crumb (the article/list title) takes the remaining space and
   truncates with "…" instead of wrapping or overflowing. */
.tt-blog__breadcrumbs a:last-of-type,
.tt-article__breadcrumbs a:last-of-type {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-medium-gray);
  text-decoration: none;
  pointer-events: none;
}
.tt-blog__breadcrumbs span,
.tt-article__breadcrumbs span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-warm-sand);
}

/* ===== Category tag badge (hero / card / article meta) =================== */
.tt-blog__tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 4px 8px;
  border-radius: var(--border-radius-md);
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  white-space: nowrap;
}
.tt-blog__tag--red    { background: #F9F0EF; color: #B56357; }
.tt-blog__tag--yellow { background: #FCF6EC; color: #E3B153; }
.tt-blog__tag--blue   { background: #F0F4F7; color: #6C8299; }
.tt-blog__tag--green  { background: #F1F5F1; color: var(--color-matcha-green); }

/* ===== Meta row (clock icon + date • reading time [• author]) =========== */
.tt-blog__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-medium-gray);
  font-size: 12px;
  line-height: 150%;
}
.tt-blog__meta svg { flex: 0 0 16px; }

/* ===== Page title ========================================================= */
.tt-blog__title {
  margin: 0 0 40px;
  font-size: 48px;
  font-weight: 800;
  line-height: 120%;
  color: var(--color-dark-tea);
}

/* ===== Hero (featured post) =============================================== */
.tt-blog__hero {
  position: relative;
  display: flex;
  min-height: 600px;
  margin: 0 0 40px;
  padding: 40px 40px 40px 48px;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
}
.tt-blog__hero picture,
.tt-blog__hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.tt-blog__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

/* Grid areas let the tag sit at the top and meta/title/excerpt/CTA pin to
   the bottom (CTA to the right of the text column) without needing to
   restructure the twig markup — all five are direct children already. */
.tt-blog__hero-meta {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto auto auto;
  column-gap: 40px;
  grid-template-areas:
    "tag     tag"
    ".       ."
    "meta    meta"
    "title   cta"
    "excerpt cta";
}
.tt-blog__hero-meta > .tt-blog__tag { grid-area: tag; justify-self: start; }
.tt-blog__hero-meta > .tt-blog__meta {
  grid-area: meta;
  margin-bottom: 19px;
  color: var(--color-white);
  font-size: 14px;
}
/* Hero's own date/reading-time icon reads bigger (24px) than the 16px one
   shared by cards. */
.tt-blog__hero-meta > .tt-blog__meta svg { width: 24px; height: 24px; flex: 0 0 24px; }
.tt-blog__hero-meta > h2 {
  grid-area: title;
  margin: 0 0 16px;
  /* The sitewide `h1..h6 { color: var(--color-dark-tea) }` rule sets color
     directly on this element, so it wins over the inherited white from
     .tt-blog__hero — inheritance only applies when nothing else targets
     the element itself, regardless of that other rule's specificity. */
  color: var(--color-white);
  font-size: 36px;
  font-weight: 800;
  line-height: 120%;
}
.tt-blog__hero-meta > p {
  grid-area: excerpt;
  margin: 0;
  font-size: 16px;
  line-height: 150%;
  color: rgba(255, 255, 255, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-blog__hero-meta > .tt-blog__more {
  grid-area: cta;
  align-self: end;
  color: var(--color-white);
}
/* ===== "Читати далі" ghost link/button (hero, card, related) ============= */
.tt-blog__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--color-tea-brown);
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}
.tt-blog__more svg { flex: 0 0 24px; }
.tt-blog__hero-meta > .tt-blog__more:hover { background: rgba(255, 255, 255, 0.14); }

/* ===== Filters row (category chips + count) =============================== */
.tt-blog__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 32px;
}
.tt-blog__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.tt-blog__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 8px 12px;
  outline: 1px solid var(--color-tea-brown);
  outline-offset: -1px;
  border-radius: var(--border-radius-input);
  color: var(--color-tea-brown);
  font-size: 18px;
  font-weight: 700;
  line-height: 130%;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.tt-blog__chip:hover { background: var(--color-soft-cream); color: var(--color-tea-brown); text-decoration: none; }
.tt-blog__chip.is-active { background: var(--color-tea-brown); color: var(--color-white); }

.tt-blog__count {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-tea-brown);
  font-size: 16px;
  white-space: nowrap;
}
.tt-blog__count strong { color: var(--color-dark-tea); font-size: 22px; font-weight: 700; }

/* ===== Grid + card (also reused by post.twig's "Схожі статті") =========== */
.tt-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  margin: 0 0 48px;
}
.tt-blog__card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease;
}
.tt-blog__card:hover {
  box-shadow: 0 4px 24px rgba(74, 52, 38, 0.16);
  color: inherit;
  text-decoration: none;
}

.tt-blog__card-media {
  position: relative;
  flex: 0 0 319px;
  height: 319px;
  display: flex;
  align-items: flex-start;
  padding: 16px;
  background: var(--color-dark-tea);
  border-bottom: 1px solid var(--color-light-gray);
  overflow: hidden;
  text-decoration: none;
}
.tt-blog__card-media picture,
.tt-blog__card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.tt-blog__card-media .tt-blog__tag { position: relative; z-index: 1; }
.tt-blog__card:hover .tt-blog__card-media img { transform: scale(1.05); }

.tt-blog__card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.tt-blog__card-body h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 130%; }
.tt-blog__card-body h3 a {
  color: var(--color-dark-tea);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-blog__card:hover h3 a { color: var(--color-tea-brown); }
.tt-blog__card-body p {
  margin: 0;
  color: var(--color-medium-gray);
  font-size: 14px;
  line-height: 150%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Pins the CTA to the card's bottom regardless of title/excerpt length —
   same margin-top: auto technique used on the product-card price row. */
.tt-blog__card-body > .tt-blog__more {
  margin-top: auto;
  align-self: flex-start;
  padding-left: 0;
  padding-right: 0;
}

.tt-blog__empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  text-align: center;
  color: var(--color-medium-gray);
  font-size: 16px;
}

/* ===== Pagination (desktop numbered pills) ================================ */
.tt-blog__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tt-blog__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  outline: 1px solid var(--color-dark-tea);
  outline-offset: -1px;
  border-radius: var(--border-radius-lg);
  color: var(--color-dark-tea);
  font-size: 16px;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.tt-blog__page:hover { background: var(--color-soft-cream); color: var(--color-dark-tea); text-decoration: none; }
.tt-blog__page.is-active { background: var(--color-warm-sand); }

.tt-blog__page--arrow.is-disabled {
  outline-color: var(--color-light-gray);
  color: var(--color-warm-sand);
  cursor: not-allowed;
}

.tt-blog__page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-medium-gray);
  letter-spacing: 1px;
}

/* ===== "Показати ще" (mobile append-mode button) — hidden on desktop,
   numbered pagination takes over instead. ============================== */
.tt-blog__load-more {
  display: none;
}

/* ===== Responsive ========================================================= */
@media (max-width: 1200px) {
  .tt-blog__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .tt-blog__hero-meta > h2 { font-size: 30px; }
}

@media (max-width: 768px) {
  .tt-blog { padding: 16px 16px 40px; }
  .tt-blog__title { margin-bottom: 40px; font-size: 28px; font-weight: 700; line-height: 120%; }

  /* Figma mobile frame (390) — hero is a fixed 490 tall card; tag pinned to
     the top, everything else (meta/title/excerpt/CTA) pinned to the bottom
     as one block via margin-top: auto on the first of that group, same
     technique as the desktop grid areas above. */
  .tt-blog__hero {
    height: 490px;
    min-height: 0;
    margin-bottom: 40px;
    padding: 24px 16px;
  }
  .tt-blog__hero-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    gap: 16px;
  }
  .tt-blog__hero-meta > .tt-blog__meta {
    margin-top: auto;
    font-size: 12px;
    line-height: 150%;
  }
  .tt-blog__hero-meta > .tt-blog__meta svg { width: 16px; height: 16px; flex: 0 0 16px; }
  .tt-blog__hero-meta > h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 130%;
  }
  .tt-blog__hero-meta > p {
    font-size: 14px;
    line-height: 150%;
    -webkit-line-clamp: 3;
  }
  /* Reset the desktop grid's align-self: end (it pushes the CTA to the
     right edge in this column layout) and nudge it in by the same 16px
     the text above sits at, so it reads a little to the right of the
     text rather than flush with the tag above it. */
  /* 28px from the photo's edge — the hero already has 16px of its own
     padding, so this only needs to add the remaining 12px. */
  .tt-blog__hero-meta > .tt-blog__more {
    align-self: flex-start;
    margin-top: 8px;
    margin-left: 12px;
  }

  /* Filter chips keep their desktop size and simply wrap onto more lines
     (per Figma) instead of shrinking or scrolling horizontally. */
  .tt-blog__filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 8px;
  }

  /* Cards keep their desktop proportions (528 tall, 319 image) — mobile
     just stacks them one per row instead of three. */
  .tt-blog__grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }

  /* Mobile shows "Показати ще" instead of numbered pagination. */
  .tt-blog__pagination { display: none; }
  .tt-blog__load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 8px 24px;
    margin: 16px 0;
    outline: 1px solid var(--color-tea-brown);
    outline-offset: -1px;
    border: none;
    border-radius: var(--border-radius-lg);
    background: transparent;
    color: var(--color-tea-brown);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }
  .tt-blog__load-more:hover { background: var(--color-soft-cream); }
}

/* ============================================================================
   Article page (.tt-article__*) — matches the article Figma frame (desktop
   1920). Breadcrumb stays "Головна · Блог · <title>" per the actual data
   contract — the Figma frame's own breadcrumb (Головна · Чай · Пуер · ...)
   is a leftover from copy-pasting the product-page layout, not the intended
   article crumb (confirmed against the mobile frame + backend contract).
============================================================================ */

.tt-article__breadcrumbs { margin-bottom: 21px; }

.tt-article__title {
  margin: 0 0 21px;
  font-size: 48px;
  font-weight: 800;
  line-height: 120%;
  color: var(--color-dark-tea);
}

.tt-article__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 21px;
  margin: 0 0 32px;
}
/* Grid (not flex-row) so the twig's flat [avatar, name, role] children
   place name+role stacked in one column next to the avatar, without
   needing a wrapper div around the text pair. */
.tt-article__author {
  display: inline-grid;
  grid-template-columns: 40px auto;
  column-gap: 12px;
  align-items: center;
}
.tt-article__avatar {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-light-beige);
  border: 1px solid var(--color-warm-sand);
  object-fit: cover;
}
.tt-article__author-name { grid-column: 2; grid-row: 1; font-weight: 700; color: var(--color-dark-tea); }
.tt-article__author-role { grid-column: 2; grid-row: 2; color: var(--color-medium-gray); font-size: 12px; }
.tt-article__author-name,
.tt-article__author-role { line-height: 140%; }
/* This top meta row reads 14px gray — the shared .tt-blog__meta default
   (12px, used on card/hero) doesn't apply here. */
.tt-article__meta-row .tt-blog__meta { font-size: 14px; color: var(--color-medium-gray); }

/* Wrapper spans the full content width (align-self: stretch in the design)
   but the image itself caps at 1416px and centers within it — it doesn't
   stretch edge-to-edge like the list page's hero/card images do. */
.tt-article__hero {
  display: flex;
  justify-content: center;
  margin: 0 0 40px;
}
.tt-article__hero img {
  display: block;
  width: 100%;
  max-width: 1416px;
  height: 600px;
  border-radius: var(--border-radius-xl);
  object-fit: cover;
}

/* Desktop (1201+): max-width:1416px alone only produces the extra 144px
   inset (108 article gutter + 144 = 252 total, per design) once the
   content column naturally exceeds 1416px (viewport ≳1632px) — below that
   the image just fills the full content width with no extra inset at all.
   Flatten to exactly 144px extra across the whole desktop range instead.
   Tablet/mobile untouched. */
@media (min-width: 1201px) {
  .tt-article__hero img {
    max-width: min(1416px, calc(100% - 288px));
  }
}

.tt-article__layout {
  display: grid;
  grid-template-columns: 1fr 408px;
  align-items: start;
  gap: 32px;
  margin: 0 0 64px;
}

.tt-article__body { min-width: 0; font-size: 16px; line-height: 150%; color: var(--color-dark-text); }
/* Blocks render as a flat sequence (lede, heading, paragraph, list, ...) —
   a uniform top margin keeps spacing consistent between any pair of block
   types, headings get a bit more room since they open a new section, and
   the very first block never floats down from the hero/lede above it. */
.tt-article__body > * { margin-top: 24px; }
.tt-article__body > *:first-child { margin-top: 0; }
.tt-article__body > .tt-article__h3 { margin-top: 40px; }

.tt-article__lede {
  padding: 0 16px;
  border-left: 2px solid var(--color-tea-brown);
  font-size: 18px;
  line-height: 150%;
  color: var(--color-tea-brown);
}

.tt-article__h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 120%;
  color: var(--color-dark-tea);
  scroll-margin-top: 24px;
}

.tt-article__p { color: var(--color-medium-gray); }

.tt-article__list {
  padding: 0;
  list-style: none;
  counter-reset: tt-article-list;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tt-article__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  counter-increment: tt-article-list;
  color: var(--color-medium-gray);
  font-size: 16px;
  line-height: 150%;
}
.tt-article__list li::before {
  content: counter(tt-article-list);
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-warm-sand);
  color: var(--color-tea-brown);
  font-size: 16px;
  font-weight: 700;
}

.tt-article__callout {
  padding: 16px;
  border-radius: var(--border-radius-lg);
  background: var(--color-soft-cream);
  outline: 1px solid var(--color-light-beige);
  outline-offset: -1px;
}
.tt-article__callout h5 {
  margin: 0 0 16px;
  color: var(--color-dark-tea);
  font-size: 18px;
  font-weight: 700;
}
.tt-article__callout p { margin: 0; color: var(--color-tea-brown); font-size: 14px; line-height: 150%; }

.tt-article__steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Grid (not flex) so the twig's flat [badge, h6, p] children can place the
   title+description in one column, next to the badge, without needing a
   wrapper div around them. */
.tt-article__step {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 16px;
  row-gap: 4px;
}
.tt-article__step-num {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-md);
  background: var(--color-light-beige);
  color: var(--color-tea-brown);
  font-size: 16px;
  font-weight: 700;
}
.tt-article__step h6 { grid-column: 2; grid-row: 1; margin: 0; color: var(--color-dark-tea); font-size: 16px; font-weight: 700; }
.tt-article__step p { grid-column: 2; grid-row: 2; margin: 0; color: var(--color-medium-gray); font-size: 12px; line-height: 150%; }

.tt-article__figure picture,
.tt-article__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-xl);
}
.tt-article__figure figcaption {
  margin-top: 8px;
  color: var(--color-medium-gray);
  font-size: 12px;
  text-align: center;
}

.tt-article__quote {
  padding: 0 16px;
  border-left: 2px solid var(--color-tea-brown);
}
.tt-article__quote p {
  margin: 0 0 8px;
  color: var(--color-dark-tea);
  font-size: 22px;
  font-style: italic;
  line-height: 130%;
}
.tt-article__quote cite { font-size: 14px; font-style: normal; color: var(--color-tea-brown); }

.tt-article__share {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-light-gray);
}
.tt-article__share-title {
  margin: 0 0 16px;
  color: var(--color-dark-tea);
  font-size: 18px;
  font-weight: 700;
}
.tt-article__share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.tt-article__share-buttons a,
.tt-article__share-buttons button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 8px 24px;
  outline: 1px solid var(--color-tea-brown);
  outline-offset: -1px;
  border: none;
  border-radius: var(--border-radius-lg);
  background: transparent;
  color: var(--color-tea-brown);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.tt-article__share-buttons a:hover,
.tt-article__share-buttons button:hover { background: var(--color-soft-cream); }

/* ----- Sidebar ----- */
.tt-article__sidebar {
  position: sticky;
  /* #main-header is itself position:sticky;top:0 with a higher z-index, so
     a plain top:24px sticks this sidebar 24px from the viewport top — well
     inside the header's own height, which puts the header on top of (and
     visually clips) the sidebar's upper portion once you scroll past it.
     Clear the header's real height (80px at the ≤1200 burger-menu layout,
     100px at 1201+) plus the original 24px breathing room. */
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1201px) {
  .tt-article__sidebar {
    top: 124px;
  }
}
.tt-article__author-card {
  padding: 16px;
  border-radius: var(--border-radius-lg);
  background: var(--color-white);
  outline: 1px solid var(--color-warm-sand);
  outline-offset: -1px;
}
.tt-article__toc {
  padding: 16px;
  border-radius: var(--border-radius-lg);
  background: var(--color-soft-cream);
  outline: 1px solid var(--color-light-beige);
  outline-offset: -1px;
}
.tt-article__author-card h4,
.tt-article__toc h4 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-dark-tea);
}
/* Avatar + name/role as a real flex row (was: inline img + inline-block
   name + a block-level role pushed onto its own line via margin-left) —
   that made the avatar vertically center against the name line alone,
   since the role sat outside the avatar's inline formatting context
   entirely. Centering it against the whole two-line group instead needs an
   actual row, not inline/block positioning tricks. */
.tt-article__author-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.tt-article__author-card img {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-light-beige);
  border: 1px solid var(--color-warm-sand);
  object-fit: cover;
}
.tt-article__author-meta {
  min-width: 0;
}
.tt-article__author-card .tt-article__author-name { display: block; margin-bottom: 2px; }
.tt-article__author-card .tt-article__author-role { display: block; }
.tt-article__author-card p { margin: 0; color: var(--color-medium-gray); font-size: 14px; line-height: 150%; }

.tt-article__toc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tt-article__toc a {
  color: var(--color-tea-brown);
  text-decoration: none;
  font-size: 14px;
  line-height: 150%;
}
.tt-article__toc a:hover { text-decoration: underline; }

.tt-article__all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-dark-tea);
  font-size: 14px;
  text-decoration: underline;
}
.tt-article__all-link svg { flex: 0 0 24px; }
.tt-article__all-link:hover { color: var(--color-tea-brown); }

/* ----- Related ----- */
.tt-article__related { margin-top: 24px; }
.tt-article__related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 32px;
}
.tt-article__related-head h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 800;
  color: var(--color-dark-tea);
}
.tt-blog__all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  outline: 1px solid var(--color-tea-brown);
  outline-offset: -1px;
  border-radius: var(--border-radius-lg);
  color: var(--color-tea-brown);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.tt-blog__all-btn:hover { background: var(--color-soft-cream); color: var(--color-tea-brown); text-decoration: none; }

@media (max-width: 1024px) {
  .tt-article__layout { grid-template-columns: 1fr; }
  .tt-article__sidebar { position: static; }
}

.tt-article__related-bottom { display: none; }

@media (max-width: 768px) {
  .tt-article { padding: 16px; }
  .tt-article__breadcrumbs { margin-bottom: 16px; }
  .tt-article__title { margin-bottom: 16px; font-size: 28px; }

  /* Meta row splits into two lines on mobile: author alone on its own row,
     then tag + date together on the row below — done by giving the author
     group flex-basis: 100% so it forces a wrap, no markup change needed. */
  .tt-article__meta-row { margin-bottom: 16px; row-gap: 21px; column-gap: 10px; }
  .tt-article__author { flex-basis: 100%; }

  .tt-article__hero { margin-bottom: 16px; }
  .tt-article__hero img { height: 185px; border-radius: var(--border-radius-lg); }

  .tt-article__layout { gap: 32px; margin-bottom: 40px; }

  .tt-article__quote { padding-right: 0; }
  .tt-article__quote p { font-size: 15px; line-height: 130%; }

  /* Sidebar (author card / TOC / all-posts link) isn't part of the mobile
     frame — phones get body + share only, then straight into Related. */
  .tt-article__sidebar { display: none; }

  .tt-article__related-head { margin-bottom: 24px; }
  .tt-article__related-head h2 { font-size: 28px; }
  /* "Всі статті" moves out of the header and into the bottom bar on mobile. */
  .tt-article__related-head .tt-blog__all-btn { display: none; }

  /* Cards become a horizontally-scrolling peek strip (same pattern as the
     homepage "Корисні статті" widget) instead of the list page's stacked
     single column — related is capped at 3 posts, so there's always
     something to scroll to here. */
  .tt-article__related .tt-blog__grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    padding-bottom: 4px;
    scrollbar-width: none;
    margin-bottom: 0;
  }
  .tt-article__related .tt-blog__grid::-webkit-scrollbar { display: none; }
  .tt-article__related .tt-blog__card {
    flex: 0 0 320px;
    width: 320px;
    height: 512px;
    scroll-snap-align: start;
  }
  .tt-article__related .tt-blog__card-media { flex-basis: 270px; height: 270px; }

  .tt-article__related-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
  }
  .tt-article__related-nav { display: flex; align-items: center; gap: 16px; }
  .tt-article__related-nav-btn {
    width: 48px;
    height: 48px;
    border: 1px solid var(--color-dark-tea);
    border-radius: var(--border-radius-lg);
    background: transparent;
    color: var(--color-dark-tea);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--transition-fast);
  }
  .tt-article__related-nav-btn:disabled {
    border-color: var(--color-light-beige);
    color: var(--color-warm-sand);
    opacity: 0.6;
    cursor: not-allowed;
  }
}