/*
 * Lyra Journal: the article design for blog posts (builds on lyra.css).
 * Styles the post's ordinary WordPress blocks inside .lx-post .prose, and quietly
 * overrides the colours, sizes and spacing that older posts set block by block.
 */

/* ---------- article header ---------- */
/* the site header floats over the page, so start below it */
.lx .post-head { padding-top: calc(var(--lyra-header, 110px) + clamp(48px, 6vw, 88px)); }
.lx .post-head > .wrap { max-width: 900px; text-align: center; }
.lx .crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font: 500 11px/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); }
.lx .crumbs a { color: var(--gold-ink); text-decoration: none; transition: opacity .3s; }
.lx .crumbs a:hover { opacity: .6; }
.lx .crumbs span { color: var(--mute); }
.lx .post-head h1 { margin-top: 26px; color: var(--teal); font-size: clamp(32px, 4vw, 54px); line-height: 1.14; }
.lx .standfirst { max-width: 700px; margin: 26px auto 0; font: 400 clamp(19px, 1.7vw, 23px)/1.55 var(--serif); color: var(--ink); }
.lx .post-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; margin-top: 28px; font-size: 13px; letter-spacing: .02em; color: var(--mute); }
.lx .post-cover { margin-top: clamp(40px, 5vw, 64px); }
.lx .post-cover .media { aspect-ratio: 12 / 5; }
.lx .post-cover figcaption { text-align: center; }

/* ---------- layout: contents left, reading column right ---------- */
.lx .post-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-block: clamp(56px, 6vw, 88px) clamp(64px, 7vw, 104px); }
.lx .toc { grid-column: 1 / span 3; }
.lx .toc-box { position: sticky; top: calc(var(--lyra-header, 0px) + 32px); }
.lx .toc summary { list-style: none; padding-bottom: 16px; border-bottom: 1px solid var(--line); cursor: default; pointer-events: none; }
.lx .toc summary::-webkit-details-marker { display: none; }
.lx .toc ol { counter-reset: toc; max-height: calc(100vh - var(--lyra-header, 0px) - 140px); overflow-y: auto; }
.lx .toc li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.lx .toc a { display: grid; grid-template-columns: 30px 1fr; padding: 11px 0; text-decoration: none; font-size: 14px; line-height: 1.45; color: var(--mute); transition: color .3s; }
.lx .toc a::before { content: counter(toc, decimal-leading-zero); font-size: 11px; letter-spacing: .1em; line-height: 2; color: var(--mute); }
.lx .toc a:hover { color: var(--ink); }
.lx .toc a.is-on { color: var(--teal); }
.lx .toc a.is-on::before { color: var(--gold-ink); }

.lx .prose { grid-column: 5 / span 8; min-width: 0; max-width: 760px; font-size: 16.5px; line-height: 1.85; counter-reset: chapter; }
.lx .post-grid.no-toc .prose { grid-column: 3 / span 8; }

/* ---------- the post's own blocks ---------- */
/* wrappers used by older posts */
.lx .prose .container, .lx .prose .wp-block-group { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: none !important; }
.lx .prose .wp-block-spacer, .lx-post #ez-toc-container, .lx-post .ez-toc-v2_0_17, .lx-post .ez-toc-container { display: none !important; }

.lx .prose p:not(.prose .lx *), .lx .prose li:not(.prose .lx *) { font-size: inherit; line-height: inherit; color: var(--body) !important; font-family: var(--sans) !important; }
.lx .prose p:not(.prose .lx *) { margin: 18px 0 0 !important; }
.lx .prose > p:first-child, .lx .prose > .container > p:first-child, .lx .prose h2 + p, .lx .prose h3 + p, .lx .prose h4 + p { margin-top: 0 !important; }
.lx .prose strong:not(.prose .lx *), .lx .prose b:not(.prose .lx *) { font-weight: 600; color: var(--ink); }
.lx .prose a:not(.prose .lx *):not(.link):not(.dur):not(.btn):not(.wp-block-button__link) { color: var(--teal) !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* chapter titles: gold number, uppercase teal serif */
.lx .prose h2:not(.prose .lx *), .lx .prose .lx .sec-head h2 {
  counter-increment: chapter; margin: clamp(64px, 7vw, 96px) 0 26px !important; padding: 0 !important;
  font: 400 clamp(26px, 2.6vw, 34px)/1.15 var(--serif) !important; letter-spacing: normal; text-transform: uppercase; text-align: left !important;
  color: var(--teal) !important; background: none !important; scroll-margin-top: calc(var(--lyra-header, 0px) + 24px);
}
.lx .prose h2:not(.prose .lx *)::before, .lx .prose .lx .sec-head h2::before { content: counter(chapter, decimal-leading-zero); display: block; margin-bottom: 12px; font: 500 11px/1.5 var(--sans); letter-spacing: .24em; color: var(--gold-ink); }
.lx .prose h2:not(.prose .lx *) * { font: inherit !important; color: inherit !important; text-transform: inherit !important; }
.lx .prose > h2:first-child, .lx .prose > .container:first-child > h2:first-child { margin-top: 0 !important; }
.lx .prose h3:not(.prose .lx *) { margin: 44px 0 14px !important; padding: 0 !important; font: 400 clamp(22px, 2vw, 26px)/1.3 var(--serif) !important; letter-spacing: .003em; text-transform: none !important; text-align: left !important; color: var(--ink) !important; }
.lx .prose h2 + h3 { margin-top: 0 !important; }
.lx .prose h4:not(.prose .lx *) { margin: 32px 0 10px !important; font: 400 20px/1.3 var(--serif) !important; text-transform: none !important; color: var(--ink) !important; }
.lx .prose h3:not(.prose .lx *) *, .lx .prose h4:not(.prose .lx *) * { font: inherit !important; color: inherit !important; text-transform: none !important; }

/* lists */
.lx .prose ul:not(.prose .lx *), .lx .prose ol:not(.prose .lx *) { margin: 18px 0 0 !important; padding: 0 !important; }
.lx .prose ul:not(.prose .lx *) > li { position: relative; padding: 4px 0 4px 22px; list-style: none; }
.lx .prose ul:not(.prose .lx *) > li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-ink); }
.lx .prose ol:not(.prose .lx *) { counter-reset: item; }
.lx .prose ol:not(.prose .lx *) > li { position: relative; padding: 4px 0 4px 30px; list-style: none; counter-increment: item; }
.lx .prose ol:not(.prose .lx *) > li::before { content: counter(item) "."; position: absolute; left: 0; top: 4px; font-family: var(--serif); color: var(--gold-ink); }

/* images and captions */
.lx .prose .wp-block-image, .lx .prose figure.wp-block-image, .lx .prose .wp-block-gallery { margin: 36px 0 !important; }
.lx .prose .wp-block-image figure { margin: 0 !important; }
.lx .prose .wp-block-image img, .lx .prose figure:not(.prose .lx *) img { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: auto !important; max-height: min(78vh, 620px) !important; object-fit: cover; object-position: center; }
/* tall (portrait) photos are trimmed to a comfortable height instead of filling the whole screen */
.lx .prose figcaption:not(.prose .lx *), .lx .prose .wp-element-caption { margin: 12px 0 0 !important; font: 400 13px/1.6 var(--sans) !important; font-style: normal !important; text-align: center !important; color: var(--mute) !important; }
.lx .prose figcaption em { font-style: normal; }
.lx .prose .wp-block-gallery { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 20px !important; }
.lx .prose .wp-block-gallery figure { width: auto !important; margin: 0 !important; }
.lx .prose .wp-block-gallery figure.wp-block-image { display: block !important; flex-direction: column; }
.lx .prose .wp-block-gallery figure.wp-block-image::before { display: none !important; }
.lx .prose .wp-block-gallery figure.wp-block-image img { aspect-ratio: 3 / 2 !important; height: auto !important; }
.lx .prose .wp-block-gallery figure.wp-block-image figcaption { position: static !important; max-height: none !important; overflow: visible !important; padding: 0 !important; background: none !important; text-shadow: none !important; }

/* tables */
.lx .prose .wp-block-table { margin: 28px 0 !important; overflow-x: auto; }
.lx .prose .wp-block-table table { width: 100%; border-collapse: collapse; border: 0 !important; font-size: 14.5px; line-height: 1.5; }
.lx .prose .wp-block-table th, .lx .prose .wp-block-table td { padding: 12px 12px 12px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; background: none !important; text-align: left; vertical-align: top; font-weight: 400; color: var(--ink) !important; }
.lx .prose .wp-block-table thead th, .lx .prose .wp-block-table tr:first-child td { font: 400 17px/1.3 var(--serif) !important; border-bottom-color: rgba(40, 40, 41, .35) !important; }
.lx .prose .wp-block-table td:empty { display: none; }

/* columns (older posts use them for cards) */
.lx .prose .wp-block-columns { gap: 28px !important; margin: 28px 0 !important; }
.lx .prose .wp-block-column { padding: 0 !important; background: none !important; border: 0 !important; }
.lx .prose .wp-block-column > :first-child { margin-top: 0 !important; }

/* quotes, rules, buttons */
.lx .prose blockquote { margin: 36px 0 !important; padding: 0 0 0 24px !important; border-left: 1px solid var(--gold-ink) !important; }
.lx .prose blockquote p { font: 400 22px/1.5 var(--serif) !important; color: var(--ink) !important; }
.lx .prose hr { margin: 48px 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; }
.lx .prose .wp-block-buttons { margin: 28px 0 0 !important; }
.lx .prose .wp-block-button__link { display: inline-flex; align-items: center; min-height: 50px; padding: 0 38px !important; border-radius: 0 !important; background: var(--ink) !important; color: #fff !important; font: 500 14px/1 var(--sans) !important; letter-spacing: .06em; text-decoration: none !important; }
.lx .prose .wp-block-button__link:hover { background: var(--teal-deep) !important; }

/* ---------- Lyra blocks placed inside a post ---------- */
.lx .prose .lx { background: none; color: inherit; font: inherit; }
.lx .prose .lx .wrap { width: auto; }
.lx .prose .lx.lx-part { padding-block: 0; margin-top: 28px; }
.lx .prose .lx section { padding: 0 !important; margin: 0 !important; background: none; }
.lx .prose .lx .sec-head { display: block; margin: 0; }
.lx .prose .lx .sec-head .label { display: none; }
.lx .prose .lx .sec-head + .faq-list { margin-top: 0; }
.lx .prose .lx .faq .ans-in p { padding-bottom: 22px; font-size: 15.5px; }

/* ---------- tablets and phones ---------- */
@media (max-width: 1000px) {
  .lx .toc, .lx .prose, .lx .post-grid.no-toc .prose { grid-column: 1 / -1; }
  .lx .prose { max-width: none; }
  .lx .toc-box { position: static; padding: 0 20px; border: 1px solid var(--line); }
  .lx .toc summary { display: flex; justify-content: space-between; padding: 18px 0; border: 0; cursor: pointer; pointer-events: auto; }
  .lx .toc summary::after { content: ""; width: 7px; height: 7px; margin: 3px 4px 0 0; border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: rotate(45deg); transition: transform .4s var(--ease); }
  .lx .toc details[open] summary::after { transform: rotate(225deg); }
  .lx .toc ol { max-height: none; padding-bottom: 8px; border-top: 1px solid var(--line); }
  .lx .toc li:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .lx .post-head > .wrap { text-align: left; }
  .lx .crumbs, .lx .post-meta { justify-content: flex-start; }
  .lx .standfirst { margin-inline: 0; }
  .lx .post-meta { flex-direction: column; gap: 2px; }
  .lx .post-cover { width: 100%; }
  .lx .post-cover .media { aspect-ratio: 4 / 3; }
  .lx .post-cover figcaption { padding-inline: var(--gutter); }
  .lx .prose { font-size: 16px; }
  .lx .prose .wp-block-gallery { grid-template-columns: 1fr; }
  .lx .prose .wp-block-table table { font-size: 13px; }
  .lx .prose .lx .aside-box { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
}