.article {
    padding: 32px 0 96px;
}

.article__header {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    margin-bottom:  28px;
}

.article__meta {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         8px 16px;
}

.article__category {
    padding:         6px 14px;
    border-radius:   var(--radius-pill);
    font-size:       14px;
    line-height:     1.4;
    font-weight:     600;
    color:           var(--blue-500);
    background:      var(--blue-50);
    text-decoration: none;
    transition:      background var(--transition);
}

.article__category:hover {
    background: var(--sky-100, var(--blue-50));
}

.article__date {
    font-size:   15px;
    line-height: 1.4;
    font-weight: 500;
    color:       var(--neutral-500);
}

.article__title {
    max-width:      1040px;
    font-size:      48px;
    line-height:    1.2;
    font-weight:    700;
    letter-spacing: 0;
}

.article__hero {
    margin:        0 0 4px;
    border-radius: 24px;
    overflow:      hidden;
    background:    var(--neutral-100);
}

.article__hero-image {
    display:      block;
    width:        100%;
    height:       auto;
    aspect-ratio: 1432 / 640;
    object-fit:   cover;
}

.article__row {
    display:     flex;
    align-items: flex-start;
    gap:         96px;
    padding-top: 24px;
}

.article__content {
    flex:      1 1 0;
    min-width: 0;
}

.article__aside {
    position:       sticky;
    top:            24px;
    display:        flex;
    flex-direction: column;
    flex-shrink:    0;
    gap:            24px;
    width:          400px;
}

/* Типографіка статті */
.article__content > * + * {
    margin-top: 16px;
}

.article__content > :first-child {
    font-size:   22px;
    line-height: 1.6;
    color:       var(--neutral-900);
}

.article__content p,
.article__content li {
    font-size:   18px;
    line-height: 1.7;
    color:       var(--neutral-700);
}

.article__content > p:first-child {
    font-size:   22px;
    line-height: 1.6;
    color:       var(--neutral-900);
}

.article__content h2,
.article__content h3 {
    font-weight:  700;
    line-height:  1.3;
    color:        var(--neutral-900);
    scroll-margin-top: 120px;
}

.article__content h2 {
    margin-top: 48px;
    font-size:  30px;
}

.article__content h3 {
    margin-top: 32px;
    font-size:  24px;
}

.article__content h2 + *,
.article__content h3 + * {
    margin-top: 16px;
}

.article__content ul {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    padding:        0;
    list-style:     none;
}

.article__content ul li {
    position:     relative;
    padding-left: 22px;
}

.article__content ul li::before {
    content:       '';
    position:      absolute;
    top:           .7em;
    left:          0;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--orange-500);
}

.article__content ol {
    list-style: decimal;
}

.article__content blockquote {
    margin-top:    24px;
    padding:       24px 28px;
    border-left:   4px solid var(--blue-500);
    border-radius: 16px;
    background:    var(--blue-50);
}

.article__content blockquote p {
    font-size:   19px;
    line-height: 1.6;
    font-weight: 500;
    color:       var(--neutral-900);
}

.article__content a {
    color:                 var(--blue-500);
    text-decoration:       underline;
    text-underline-offset: 3px;
}

.article__content img,
.article__content figure {
    max-width:     100%;
    height:        auto;
    border-radius: 16px;
}

.article__content figcaption {
    margin-top: 8px;
    font-size:  14px;
    color:      var(--neutral-500);
}

/* Зміст */
.article-toc {
    padding:       24px 28px;
    border:        1px solid var(--neutral-200);
    border-radius: 20px;
}

.article-toc__title {
    margin-bottom:  8px;
    font-size:      13px;
    line-height:    1.4;
    font-weight:    600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color:          var(--neutral-500);
}

.article-toc__item {
    border-bottom: 1px solid var(--neutral-100);
}

.article-toc__item:last-child {
    border-bottom: 0;
}

.article-toc__link {
    display:         block;
    padding:         12px 0;
    font-size:       16px;
    line-height:     1.4;
    font-weight:     500;
    color:           var(--neutral-900);
    text-decoration: none;
    transition:      color var(--transition);
}

.article-toc__link:hover {
    color: var(--blue-500);
}

/* CTA (тексти — Theme options) */
.article-cta {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            16px;
    padding:        28px;
    border-radius:  20px;
    color:          var(--text-inverse);
    background:     var(--blue-500);
}

.article-cta__title {
    font-size:   22px;
    line-height: 1.3;
    font-weight: 700;
}

.article-cta__text {
    font-size:   16px;
    line-height: 1.5;
    opacity:     .85;
}

/* Інші статті */
.related-posts {
    padding:    60px 0 80px;
    background: var(--neutral-50);
}

.related-posts .section-head {
    margin-bottom: 32px;
}

.related-posts__controls {
    display:     flex;
    gap:         24px;
    align-items: center;
}

.related-posts__slider {
    --slides: 4;
    --gap:    24px;
}

.related-posts__slider .slick-slide {
    padding-bottom: 0;
}

@media (max-width: 1279px) {
    .related-posts__slider { --slides: 3; }
    .article__row { gap: 48px; }
    .article__aside { width: 340px; }
}

@media (max-width: 1023px) {
    .related-posts__slider { --slides: 2; }
    .article { padding-bottom: 64px; }
    .article__title { font-size: 38px; }
    .article__hero-image { aspect-ratio: 16 / 9; }
    .article__row { flex-direction: column; gap: 40px; }
    .article__aside { position: static; width: 100%; }
    .related-posts { padding: 48px 0 64px; }
}

@media (max-width: 767px) {
    .related-posts__slider { --slides: 1; --gap: 16px; }
    .article { padding: 20px 0 48px; }
    .article__header { gap: 14px; margin-bottom: 20px; }
    .article__title { font-size: 28px; }
    .article__hero { border-radius: 16px; }
    .article__hero-image { aspect-ratio: 4 / 3; }
    .article__row { padding-top: 16px; }
    .article__content > p:first-child { font-size: 19px; }
    .article__content p, .article__content li { font-size: 17px; }
    .article__content h2 { margin-top: 36px; font-size: 24px; }
    .article__content h3 { font-size: 20px; }
    .article-toc, .article-cta { padding: 20px; }
}