/* Стилі сторінки «Стаття» */

/* ===== Секція ===== */
.article__leaf-1 { position: absolute; top: 90px; left: -26px; width: 120px; opacity: 0.5; transform: rotate(-18deg); pointer-events: none; z-index: 0; }

/* ===== Секція ===== */
.article__leaf-2 { position: absolute; top: 40px; right: 46px; width: 78px; opacity: 0.5; transform: rotate(24deg); pointer-events: none; z-index: 0; }

/* ===== Секція ===== */
.article__leaf-3 { position: absolute; top: 520px; right: -30px; width: 140px; opacity: 0.5; transform: rotate(12deg); pointer-events: none; z-index: 0; }

/* ===== Секція ===== */
.article__leaf-4 { position: absolute; top: 760px; left: 24px; width: 64px; opacity: 0.5; transform: rotate(-30deg); pointer-events: none; z-index: 0; }

/* ===== Секція ===== */
.article__leaf-5 { position: absolute; bottom: 120px; right: 60px; width: 96px; opacity: 0.5; transform: rotate(-10deg); pointer-events: none; z-index: 0; }

/* ===== «Пульпа, пелаті чи пасата: коли що використ» ===== */
.article__body { position: relative; z-index: 1; }
.article__head { max-width: 820px; margin: 0px auto; padding: 46px 28px 20px; }
.article__crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: rgb(154, 148, 134); margin-bottom: 26px; }
.article__crumb { cursor: pointer; }
.article__crumb:hover { color: var(--green); }
.article__crumb-current { color: var(--accent,#C53A2B); }
.article__badge { display: inline-block; background: var(--accent,#C53A2B); color: rgb(255, 255, 255); font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.article__title { font-family: Montserrat, system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 42px; line-height: 1.1; color: var(--green-dark,#1C4A2A); margin: 0px 0px 20px; text-wrap: balance; }
.article__meta { display: flex; gap: 14px; align-items: center; font-size: 14px; font-weight: 600; color: var(--muted); padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.article__meta-sep { color: var(--line); }
.article__hero { max-width: 980px; margin: 0px auto; padding: 0px 28px; }
.article__hero-media { aspect-ratio: 1 / 0.46; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); margin: 30px 0px; background: rgb(236, 231, 214); }
.article__hero-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.article__content { max-width: 720px; margin: 0px auto; padding: 14px 28px 20px; font-size: 17.5px; line-height: 1.75; color: rgb(58, 58, 48); }
.article__paragraph { margin: 0px 0px 22px; }
.article__subtitle { font-family: Montserrat, system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 27px; line-height: 1.2; color: var(--green-dark,#1C4A2A); margin: 38px 0px 14px; }
.article__quote { margin: 32px 0px; padding: 22px 28px; border-left: 4px solid var(--accent,#C53A2B); background: rgb(255, 255, 255); border-radius: 0px 14px 14px 0px; font-family: Montserrat, system-ui, -apple-system, sans-serif; font-size: 21px; font-style: italic; line-height: 1.5; color: var(--green-dark,#1C4A2A); }
.article__points { display: flex; flex-direction: column; gap: 12px; margin: 0px 0px 24px; }
/* .article__point { display: flex; gap: 12px; } */
.article__point-bullet { color: var(--accent,#C53A2B); font-weight: 800; }
.article__cta-wrap { max-width: 720px; margin: 0px auto; padding: 18px 28px 16px; }
.article__cta-box { background: var(--green-dark,#1C4A2A); border-radius: 20px; padding: 32px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.article__cta-title { font-family: Montserrat, system-ui, -apple-system, sans-serif; font-size: 23px; font-weight: 600; color: rgb(255, 255, 255); margin: 0px 0px 6px; }
.article__cta-text { font-size: 14.5px; color: rgb(201, 201, 188); margin: 0px; }
.article__cta-btn { padding: 14px 26px; border-radius: 999px; background: var(--accent,#C53A2B); color: rgb(255, 255, 255); font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.article__cta-btn:hover { background: var(--accent-dark,#A82E22); }
.article__related { max-width: 1240px; margin: 0px auto; padding: 48px 28px 72px; }
.article__related-title { font-family: Montserrat, system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 30px; color: var(--green-dark,#1C4A2A); margin: 0px 0px 26px; }
.article__related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.article__related-card { cursor: pointer; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }
.article__related-card:hover { transform: translateY(-4px); box-shadow: rgba(28, 74, 42, 0.45) 0px 22px 42px -26px; }
.article__related-media { position: relative; aspect-ratio: 1 / 0.62; overflow: hidden; background: rgb(236, 231, 214); }
.article__related-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
.article__related-image:hover { transform: scale(1.05); }
.article__related-badge { position: absolute; top: 12px; left: 12px; background: var(--accent,#C53A2B); color: rgb(255, 255, 255); font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.article__related-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 0%; }
.article__related-card-title { font-family: Montserrat, system-ui, -apple-system, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.22; color: var(--green-dark,#1C4A2A); margin: 0px; }
.article__related-meta { margin-top: auto; padding-top: 6px; display: flex; gap: 12px; font-size: 12.5px; font-weight: 600; color: rgb(154, 148, 134); }

/* Обгортка сторінки (винесено з інлайн-стилю <main>) */
.article__page { position: relative; overflow: hidden; }

/* =====================  АДАПТИВНІСТЬ  ===================== */
@media (max-width: 980px) {
  .article__title { font-size: 36px; }
  .article__related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .article__leaf-1, .article__leaf-2, .article__leaf-3, .article__leaf-4, .article__leaf-5 { display: none; }
  .article__head { padding: 40px 18px 18px; }
  .article__hero, .article__content, .article__cta-wrap { padding-left: 18px; padding-right: 18px; }
  .article__related { padding: 40px 18px 56px; }
  .article__title { font-size: 29px; }
  .article__content { font-size: 16.5px; }
  .article__subtitle { font-size: 23px; }
  .article__quote { font-size: 18px; padding: 18px 22px; }
  .article__cta-box { padding: 26px 24px; }
  .article__related-grid { grid-template-columns: 1fr; }
}

/* Картки та кнопки тепер <a> */
.article__related-card { text-decoration: none; color: inherit; }
.article__cta-btn { text-decoration: none; }