.article-page { background: var(--pale); padding-bottom: 70px; }
.article-breadcrumb { min-height: 80px; display: flex; flex-wrap: wrap; gap: 10px; padding-block: 20px; overflow-wrap: anywhere; }
.article-breadcrumb > span:last-child { min-width: 0; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1046px) minmax(0, 527px); gap: 27px; align-items: start; }
.article-content { background: white; padding: 34px 34px 60px; min-width: 0; }
.article-content h1 { font-size: 30px; line-height: 45px; font-weight: 600; overflow-wrap: anywhere; }
.article-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 18px; line-height: 28px; margin-top: 32px; padding-bottom: 38px; border-bottom: 1px solid #d9d9d9; }
.article-cover { width: 699px; max-width: 100%; height: auto; aspect-ratio: 699 / 475; object-fit: cover; margin: 38px auto 56px; display: block; }
.article-body { font-size: 18px; line-height: 30px; overflow-wrap: anywhere; }
.article-body p, .article-body blockquote, .article-body ul, .article-body ol, .article-body pre, .article-body table { margin-bottom: 24px; }
.article-body ul, .article-body ol { padding-left: 30px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body h2 { font-size: 25px; line-height: 36px; margin-block: 32px 16px; }
.article-body h3 { font-size: 22px; line-height: 32px; margin-block: 24px 14px; }
.article-body h4 { font-size: 20px; line-height: 30px; margin-block: 20px 12px; }
.article-body img { max-width: 100%; height: auto; display: block; margin: 24px auto; }
.article-body pre { white-space: pre-wrap; }
.article-body table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.article-body td, .article-body th { border: 1px solid #d9d9d9; padding: 10px; }
.article-body a { color: var(--blue); text-decoration: underline; }
.article-body blockquote { border-left: 3px solid var(--blue); padding-left: 18px; }
.article-body .ql-align-center { text-align: center; }
.article-body .ql-align-right { text-align: right; }
.article-body .ql-align-justify { text-align: justify; }
.article-body .ql-size-small { font-size: 14px; }
.article-body .ql-size-large { font-size: 22px; }
.article-body .ql-size-huge { font-size: 28px; }
.article-body .ql-indent-1 { margin-left: min(2em, 40%); }
.article-body .ql-indent-2 { margin-left: min(4em, 40%); }
.article-body .ql-indent-3 { margin-left: min(6em, 40%); }
.article-body .ql-indent-4 { margin-left: min(8em, 40%); }
.article-body .ql-indent-5 { margin-left: min(10em, 40%); }
.article-body .ql-indent-6 { margin-left: min(12em, 40%); }
.article-body .ql-indent-7 { margin-left: min(14em, 40%); }
.article-body .ql-indent-8 { margin-left: min(16em, 40%); }
.article-back { color: var(--blue); text-decoration: underline; display: inline-block; margin-top: 32px; }
.article-neighbours, .article-products { background: white; padding: 20px 24px; }
.article-sidebar h2 { font-size: 20px; line-height: 30px; font-weight: 600; border-left: 3px solid var(--orange); padding-left: 16px; margin-bottom: 16px; }
.article-neighbour + .article-neighbour { margin-top: 30px; padding-top: 26px; border-top: 1px solid #d9d9d9; }
.article-neighbour > a { font-size: 20px; line-height: 30px; display: block; overflow-wrap: anywhere; }
.article-neighbour time { font-size: 16px; display: block; color: var(--blue); margin-top: 20px; }
.article-no-neighbour { color: #69737b; font-size: 16px; }
.article-products { margin-top: 20px; padding-top: 32px; }
.article-products > a { display: grid; grid-template-columns: minmax(0, 155px) minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 22px; font-size: 20px; line-height: 28px; overflow-wrap: anywhere; }
.article-products img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 1250px) {
    .article-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
    .article-content { padding: 28px; }
    .article-products > a { grid-template-columns: minmax(0, 90px) minmax(0, 1fr); font-size: 16px; gap: 12px; }
}
@media (max-width: 760px) {
    .article-page { padding-bottom: 40px; }
    .article-layout { grid-template-columns: minmax(0, 1fr); }
    .article-content { padding: 24px 18px 32px; }
    .article-content h1 { font-size: 24px; line-height: 34px; }
    .article-meta { font-size: 14px; line-height: 24px; margin-top: 20px; padding-bottom: 20px; }
    .article-cover { margin-block: 24px 30px; }
    .article-body { font-size: 16px; line-height: 28px; }
    .article-neighbour > a { font-size: 18px; line-height: 28px; }
    .article-products > a { grid-template-columns: 100px minmax(0, 1fr); }
}