/* --- Blog single (окрема стаття блогу) --- */

/* Банер: повноширинний у межах .container, скруглення в стилі .page-hero.
   Зображення керується контент-менеджером — тримаємо у <picture>, не в CSS. */
.blog-single__banner {
  border-radius: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem) 0
    clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem) 0;
  overflow: hidden;
  height: clamp(12.5rem, 9.25rem + 16.25vw, 28.75rem);
}

.blog-single__banner picture,
.blog-single__banner img {
  width: 100%;
  height: 100%;
}

.blog-single__banner img {
  aspect-ratio: 1920 / 520;
  object-fit: cover;
  object-position: center;
}

/* Хлібні крихти вже мають .breadcrumbs (margin-top через clamp) */

.blog-single__header {
  margin-top: clamp(1.875rem, -0.25rem + 10.625vw, 12.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 0.5rem + 1.25vw, 1.875rem);
}

.blog-single__title {
  font-family: var(--font-body-bolt);
  font-size: clamp(2.125rem, 1.55rem + 2.875vw, 5rem);
  line-height: 1.1;
  text-transform: none;
}

.blog-single__lead {
  max-width: 60ch;
  font-family: var(--font-body-regular);
  font-size: clamp(1rem, 0.7625rem + 1.1875vw, 2.1875rem);
  line-height: 140%;
  color: var(--color-primary);
}

.blog-single__date {
  font-family: var(--font-body-medium);
  font-size: clamp(0.8125rem, 0.6625rem + 0.75vw, 1.5625rem);
  line-height: clamp(1.125rem, 0.925rem + 1vw, 2.125rem);
  color: var(--color-primary);
}

.blog-single__date strong {
  font-family: var(--font-body-bold);
}

/* --- WYSIWYG-зона: чисті теги з редактора (Gutenberg / TinyMCE) --- */
.article {
  width: min(100%, 60rem);
  margin-inline: auto;
  margin-top: clamp(1.875rem, 1.625rem + 1.25vw, 3.125rem);
}

.article::after {
  content: "";
  display: block;
  clear: both;
}

.article > * + * {
  margin-top: clamp(1rem, 0.8rem + 1vw, 1.75rem);
}

.article h2 {
  margin-bottom: clamp(0.625rem, 0.375rem + 1.25vw, 1.875rem);
  font-family: var(--font-body-bold);
  font-size: clamp(1.5rem, 1.175rem + 1.625vw, 3.125rem);
  line-height: 120%;
  color: var(--color-primary);
  /* заголовок кожного блоку — на всю ширину, під попереднім зображенням */
  clear: both;
}

/* Обгортка "заголовок + зображення" одного блоку: на мобайлі зображення
   показується першим, заголовок — під ним; від 768px порядок повертається
   до звичного (заголовок на всю ширину, зображення обтікається текстом). */
.article__head {
  display: flex;
  flex-direction: column-reverse;
}

.article__head .alignleft,
.article__head .alignright {
  margin-block: 0;
}

@media (min-width: 768px) {
  .article__head {
    display: block;
  }
}

.article p {
  font-family: var(--font-body-regular);
  font-size: clamp(1.125rem, 0.9125rem + 1.0625vw, 2.1875rem);
  line-height: 145%;
}

.article a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article ul,
.article ol {
  padding-left: 1.25em;
}

.article li + li {
  margin-top: 0.5em;
}

.article li {
  font-size: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);
  line-height: 1.7;
}

.article img {
  border-radius: var(--radius-m);
}

.article figure {
  margin: 0;
}

.article figcaption {
  margin-top: var(--space-2xs);
  font-size: clamp(0.8125rem, 0.775rem + 0.25vw, 1rem);
  color: var(--color-primary-soft);
}

/* Мобайл: вирівнювання зображень скинуте — зображення на всю ширину колонки */
.article .alignleft,
.article .alignright,
.article .aligncenter,
.article .alignnone {
  display: block;
  width: 100%;
  height: auto;
  margin-block: 1.875rem 0.625rem;
}

/* зображення заповнює контейнер вирівнювання (picture / figure) */
.article .alignleft img,
.article .alignright img,
.article .aligncenter img,
.article .alignnone img {
  width: 100%;
  height: auto;
}

/* Планшет і ширше: контент-менеджер керує обтіканням через вирівнювання зображення */
@media (min-width: 768px) {
  .article .alignleft,
  .article .alignright {
    max-width: 50%;
    margin-top: 0;
  }

  .article .alignleft {
    width: clamp(17.5rem, 13.5rem + 20vw, 37.5rem);
    aspect-ratio: 3/2;
    float: left;
    margin-right: clamp(1.5rem, 1rem + 2.5vw, 3.75rem);
    margin-bottom: var(--space-s);
  }

  .article .alignright {
    width: clamp(17.5rem, 9.5rem + 40vw, 57.5rem);
    aspect-ratio: 3/2;
    float: right;
    margin-left: clamp(1.5rem, 1rem + 2.5vw, 3.75rem);
    margin-bottom: var(--space-s);
  }

  .article .aligncenter {
    margin-inline: auto;
  }
}

/* --- Поділитись статтею --- */
.blog-single__share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: clamp(2.5rem, 1.75rem + 3.75vw, 6.25rem);
}

.blog-single__share-title {
  font-family: var(--font-body-bold);
  font-size: clamp(1.125rem, 0.975rem + 0.75vw, 1.875rem);
  line-height: clamp(1.5625rem, 1.3625rem + 1vw, 2.5625rem);
  color: var(--color-primary);
}

.blog-single__share-list {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-single__share-link {
  transition: transform 0.3s ease;
}

.blog-single__share-link:hover,
.blog-single__share-link:focus-visible {
  transform: scale(1.08);
}

.blog-single__share-icon {
  display: block;
  width: auto;
  height: clamp(2.5rem, 2.25rem + 1.25vw, 3.75rem);
}

/* --- Рекомендовані статті --- */
.blog-single__related {
  padding-top: clamp(4.375rem, 3.125rem + 6.25vw, 9.375rem);
  padding-bottom: clamp(6.25rem, 5rem + 6.25vw, 12.5rem);
}