/* Single article */

/* ---------- Head: title, excerpt, meta, author card, cover ---------- */
.od-article__head { padding-top: clamp(160px, 145px + 3.8vw, 200px); background: var(--od-bg); }
.od-article__head-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(160px, 108px + 6.35vw, 200px); gap: clamp(60px, 9.5vw - 17px, 120px); align-items: start; }
.od-article__intro { display: flex; flex-direction: column; gap: 32px; max-width: 880px; min-width: 0; }
.od-article__intro > * { margin: 0; }
.od-article__title { font-size: var(--od-fs-h2); line-height: 1.2; font-weight: 600; color: var(--od-grey-900); text-wrap: balance; overflow-wrap: break-word; }
.od-article__excerpt { margin-top: -20px; max-width: 500px; font-size: var(--od-fs-h6); line-height: 1.4; font-weight: 500; color: var(--od-grey-600); text-wrap: balance; }
.od-article__ticks {
	--ticks: 90;
	width: 100%; max-width: 850px; height: 40px;
	background:
		linear-gradient(var(--od-grey-200), var(--od-grey-200)) right / 1px 100% no-repeat,
		repeating-linear-gradient(90deg, var(--od-grey-200) 0 1px, transparent 1px calc((100% - 1px) / (var(--ticks) - 1)));
}
.od-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: var(--od-fs-b4); line-height: 1.6; font-weight: 500; color: var(--od-grey-500); }
.od-article__meta .od-tag { margin-right: 8px; border-width: 1.5px; line-height: 1.6; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.od-article__meta .od-tag:hover, .od-article__meta .od-tag:focus-visible { background: var(--od-brand); color: var(--od-white); }
.od-article__meta span { padding-left: 12px; border-left: 1px solid currentColor; line-height: 1.1; }

.od-article__author { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.od-article__portrait {
	display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; overflow: hidden;
	background: var(--od-black); color: var(--od-white); font-size: var(--od-fs-h2); font-weight: 700; letter-spacing: var(--od-track-display);
}
.od-article__portrait img, .od-article__avatar img { width: 100%; height: 100%; object-fit: cover; }
.od-article__author-info { min-width: 0; }
.od-article__by { margin: 0; font-size: var(--od-fs-b5); line-height: 1.6; font-weight: 500; color: var(--od-grey-500); }
.od-article__author .od-article__by { padding-bottom: 8px; border-bottom: 1px solid var(--od-grey-50); }
.od-article__name { display: block; margin: 0; font-size: var(--od-fs-b3); line-height: 1.6; font-weight: 500; color: var(--od-grey-800); }
.od-article__author .od-article__name { margin-top: 8px; }
.od-article__role { display: block; margin: 0; font-size: var(--od-fs-b4); line-height: 1.6; font-weight: 500; color: var(--od-grey-500); }
.od-article__author .od-article__role { margin-top: 2px; }

.od-article__cover { margin: 80px 0 0; aspect-ratio: 8 / 5; overflow: hidden; background: var(--od-grey-40); }
.od-article__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Body: aside + content ---------- */
.od-article__body { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 720px); justify-content: space-between; gap: 40px; padding-top: 120px; padding-bottom: 200px; }
.od-article__aside { min-width: 0; }
.od-article__aside-in { position: sticky; top: calc(var(--od-header-h) + 24px); display: flex; flex-direction: column; gap: 32px; }
.od-article__aside-title { margin: 0; font-size: var(--od-fs-h6); line-height: 1.4; font-weight: 600; color: var(--od-grey-800); text-wrap: balance; }
.od-article__aside .od-article__by { font-size: var(--od-fs-b4); }
.od-article__aside-author .od-article__by { padding-bottom: 12px; border-bottom: 1px solid var(--od-grey-50); }
.od-article__person { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.od-article__person p { margin: 0; min-width: 0; }
.od-article__avatar {
	flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; overflow: hidden; border-radius: 50%;
	background: var(--od-black); color: var(--od-white); font-size: 20px; font-weight: 700;
}
.od-article__portrait--initials, .od-article__avatar--initials { background: var(--od-brand); }
.od-article__person .od-article__name { font-size: var(--od-fs-b2); }
.od-article__person .od-article__role { font-weight: 400; }
.od-article__share ul { display: flex; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.od-article__share a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--od-grey-40); transition: background-color 0.2s; }
.od-article__share a:hover, .od-article__share a:focus-visible { background: var(--od-grey-50); }
.od-article__share a:focus-visible { outline: 2px solid var(--od-brand); outline-offset: 2px; }
.od-article__share img { width: 20px; height: 20px; }

/* ---------- Content written in the editor ---------- */
.od-article__content { min-width: 0; font-size: var(--od-fs-b2); line-height: 1.6; color: var(--od-grey-700); overflow-wrap: break-word; }
.od-article__content > * { margin-block: 0; }
.od-article__content > * + * { margin-top: 12px; }
.od-article__content > p.od-lead, .od-article__content > p:first-child { font-size: var(--od-fs-h5); line-height: 1.4; font-weight: 500; text-indent: 3.6em; }
.od-article__content > p:first-child + * { margin-top: 36px; }
.od-article__content h2 { margin-top: 36px; font-size: var(--od-fs-h5); line-height: 1.4; font-weight: 600; color: var(--od-grey-900); text-wrap: balance; }
.od-article__content h3 { margin-top: 28px; font-size: var(--od-fs-b1); line-height: 1.4; font-weight: 600; color: var(--od-grey-900); }
.od-article__content h4 { margin-top: 24px; font-size: var(--od-fs-b2); font-weight: 600; color: var(--od-grey-900); }
.od-article__content h2 + *, .od-article__content h3 + *, .od-article__content h4 + * { margin-top: 12px; }
.od-article__content strong { font-weight: 600; color: var(--od-grey-900); }
.od-article__content a { color: var(--od-black); text-decoration: underline; text-decoration-color: var(--od-brand); text-underline-offset: 0.2em; transition: color 0.2s; }
.od-article__content a:hover { color: var(--od-brand); }
.od-article__content ul, .od-article__content ol { padding-left: 30px; }
.od-article__content ul { list-style: disc; }
.od-article__content ol { list-style: decimal; }
.od-article__content li + li { margin-top: 4px; }
.od-article__content li::marker { color: var(--od-grey-600); }
.od-article__content blockquote { margin-inline: 0; padding: 0 0 0 32px; border-left: 1px solid var(--od-grey-200); font-style: italic; color: var(--od-grey-500); }
.od-article__content blockquote > * { margin: 0; }
.od-article__content blockquote cite { display: block; margin-top: 8px; font-size: var(--od-fs-b4); font-style: normal; }
.od-article__content figure, .od-article__content > img { margin: 36px 0 0; }
.od-article__content figure + *, .od-article__content > img + * { margin-top: 36px; }
.od-article__content img { display: block; width: 100%; height: auto; }
.od-article__content figure:not(.wp-block-table) > img, .od-article__content figure > a > img { aspect-ratio: 8 / 5; object-fit: cover; }
.od-article__content figcaption { margin-top: 10px; font-size: var(--od-fs-b5); color: var(--od-grey-500); }
.od-article__content hr { margin-block: 36px; border: 0; border-top: 1px solid var(--od-grey-50); }
.od-article__content table { width: 100%; border-collapse: collapse; font-size: var(--od-fs-b3); }
.od-article__content .wp-block-table { overflow-x: auto; }
.od-article__content th, .od-article__content td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--od-grey-50); }
.od-article__content th { font-weight: 600; color: var(--od-grey-900); }
.od-article__content code { padding: 2px 6px; font-size: 0.9em; background: var(--od-grey-40); }
.od-article__content pre { padding: 20px; overflow-x: auto; font-size: var(--od-fs-b4); background: var(--od-grey-40); }
.od-article__content pre code { padding: 0; background: none; }

/* Frequently asked questions */
.od-article__content .rank-math-block, .od-article__content .wp-block-rank-math-faq-block { margin-top: 20px; border-bottom: 1px solid var(--od-grey-200); }
.od-article__content .rank-math-list-item, .od-article__content .rank-math-faq-item { border-top: 1px solid var(--od-grey-200); }
.od-article__content div.rank-math-list-item, .od-article__content .rank-math-faq-item { padding-block: 24px; }
.od-article__content .rank-math-question { margin: 0; font-size: var(--od-fs-b1); line-height: 1.4; font-weight: 500; color: var(--od-grey-900); transition: color 0.2s; }
.od-article__content .rank-math-answer { margin-top: 10px; }
.od-article__content .rank-math-answer > * { margin-block: 0; }
.od-article__content .rank-math-answer > * + * { margin-top: 12px; }
.od-article__content .rank-math-block + *, .od-article__content .wp-block-rank-math-faq-block + * { margin-top: 36px; }
.od-article-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; }
.od-article-faq__q::-webkit-details-marker { display: none; }
.od-article-faq__q:hover .rank-math-question { color: var(--od-brand); }
.od-article-faq__q:focus-visible { outline: 2px solid var(--od-brand); outline-offset: 4px; }
.od-article-faq__icon { position: relative; flex: none; width: 24px; height: 24px; transition: transform 0.3s var(--od-ease); }
.od-article-faq__icon::before, .od-article-faq__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -0.75px; background: var(--od-brand); }
.od-article-faq__icon::after { transform: rotate(90deg); }
.od-article-faq__item[open]:not(.is-closing) .od-article-faq__icon { transform: rotate(45deg); }
.od-article__content .od-article-faq__item .rank-math-answer { margin-top: 0; padding: 0 48px 24px 0; }

/* ---------- More articles ---------- */
.od-article-more { padding-top: 100px; padding-bottom: 200px; }
.od-article-more .od-stack { gap: clamp(56px, 4.4vw, 64px); }
.od-article-more__head { display: flex; flex-direction: column; gap: 12px; }
.od-article-more__row { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.od-article-more__row p { margin: 0; font-weight: 500; }
.od-article-more .od-posts--grid { align-items: start; }
.od-article-more .od-post-card { min-width: 0; }
.od-article-more .od-post-card__media { aspect-ratio: 1.16; }
.od-article-more .od-post-card:nth-child(3n + 2) .od-post-card__media { aspect-ratio: 1.66; }
.od-article-more .od-post-card:nth-child(3n) .od-post-card__media { aspect-ratio: 1.01; }
.od-article-more .od-media__placeholder { min-height: 0; }
.od-article-more .od-post-card__body { padding-top: 24px; }
.od-article-more .od-post-card__body > p:empty { display: none; }
.od-article-more .od-tag { border-width: 1.5px; line-height: 1.6; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.od-article__ticks { --ticks: 60; max-width: 450px; height: 30px; }
	.od-article__excerpt { max-width: 400px; }
	.od-article__cover { aspect-ratio: 746 / 550; }
	.od-article__body { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 40px; }
	.od-article__aside-in { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: end; }
	.od-article__aside-title { grid-column: 1 / -1; }
	.od-article__content figure:not(.wp-block-table) > img, .od-article__content figure > a > img { aspect-ratio: 746 / 450; }
	.od-article-more .od-posts--grid { row-gap: 60px; }
	.od-article-more .od-post-card__media { aspect-ratio: 1.35; }
	.od-article-more .od-post-card:nth-child(3n + 2) .od-post-card__media { aspect-ratio: 1.75; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.od-article__head-grid { grid-template-columns: minmax(0, 1fr); gap: 60px; }
	.od-article__intro { gap: 20px; }
	.od-article__excerpt { margin-top: -8px; max-width: none; }
	.od-article__ticks { --ticks: 40; max-width: none; height: 20px; }
	.od-article__meta .od-tag { margin-right: 4px; }
	.od-article__author { flex-direction: row; align-items: flex-start; gap: 20px; }
	.od-article__portrait { flex: none; width: 100px; font-size: var(--od-fs-h3); }
	.od-article__author-info { flex: 1; }
	.od-article__cover { aspect-ratio: 350 / 380; }
	.od-article__body { padding-bottom: 140px; }
	.od-article__aside-in { gap: 20px; }
	.od-article__avatar { width: 48px; height: 48px; }
	.od-article__share ul { gap: 6px; }
	.od-article__share a { width: 32px; height: 32px; }
	.od-article__share img { width: 16px; height: 16px; }
	.od-article__content > p.od-lead, .od-article__content > p:first-child { text-indent: 2.4em; }
	.od-article__content ul, .od-article__content ol { padding-left: 24px; }
	.od-article__content blockquote { padding-left: 24px; }
	.od-article__content figure:not(.wp-block-table) > img, .od-article__content figure > a > img { aspect-ratio: 350 / 400; }
	.od-article__content .od-article-faq__item .rank-math-answer { padding-right: 0; }
	.od-article-more { padding-top: 80px; padding-bottom: 120px; }
	.od-article-more__row { flex-direction: column; align-items: flex-start; gap: 24px; }
	.od-article-more .od-post-card__media, .od-article-more .od-post-card:nth-child(n) .od-post-card__media { aspect-ratio: 350 / 320; }
}