/* Blog index and articles generated by design/blog/build.py. Sits on pages.css and blog.css; only what those files lack. */

/* Photo covers: the article's own illustration fills the blog.css cover frame */
.bl-cover.is-photo { background: var(--surface-2); }
.bl-cover.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bl-card:hover .bl-cover.is-photo img { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .bl-cover.is-photo img { transition: none; } }
.pg-cover .bl-cover.is-photo { height: auto; aspect-ratio: 2 / 1; }
@media (max-width: 760px) { .pg-cover .bl-cover.is-photo { aspect-ratio: 16 / 9; } }
.bl-card .bl-by { margin-top: 0; }

/* Byline: a consultant's photo is round, the Plannix mark stays square */
.pg-by img.is-person { border-radius: var(--r-round); object-fit: cover; }

/* Prose pieces the Framer articles carry beyond the template */
.pg-prose strong { font-weight: 600; }
.pg-prose h4 { margin-top: 32px; font: 600 var(--t-16)/1.4 var(--sans); text-wrap: balance; }
.pg-prose > h4 + * { margin-top: 8px; }
.pg-prose li > p + p { margin-top: 0.5em; }
.pg-prose blockquote { padding-left: 24px; border-left: 2px solid var(--line-2); font-family: var(--serif); font-style: italic; font-size: var(--t-20, 20px); line-height: 1.45; color: var(--fg); }
.pg-prose blockquote p + p { margin-top: 0.6em; }
.pg-prose > :is(.pg-fig, .pg-video, blockquote) { margin-top: 32px; }
.pg-prose > :is(.pg-fig, .pg-video, blockquote) + * { margin-top: 32px; }
.pg-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-card); background: var(--surface-2); }
.pg-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: var(--surface-2); }
.pg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .pg-prose blockquote { padding-left: 16px; font-size: var(--t-18); } }

/* Index: «Più letti», then every article with a theme filter (the filter is JS-only; without JS the grid shows everything) */
.bl-top { margin-bottom: clamp(56px, 7vw, 88px); padding-top: 24px; border-top: 1px solid var(--line-2); }
.bl-top-h { margin: 0; font: 500 var(--t-18)/1.3 var(--sans); color: var(--fg); }
.bl-top-list { counter-reset: top; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 16px 0 0; padding: 0; list-style: none; }
.bl-top-list a { counter-increment: top; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.bl-top-list a::before { content: counter(top); grid-row: span 2; font: 400 var(--t-18)/1.35 var(--serif); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bl-top-cat { font-size: var(--t-13); color: var(--ink-2); }
.bl-top-t { margin-top: 2px; font: 400 var(--t-18)/1.35 var(--serif); color: var(--fg); text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) { .bl-top-list a:hover .bl-top-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } }
.bl-top-list a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 760px) { .bl-top-list { grid-template-columns: minmax(0, 1fr); } }

.bl-all-head { display: grid; gap: 16px; margin-bottom: var(--sp-head-content, 40px); }
.bl-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-filter[hidden] { display: none; }
.bl-chip { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-round); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font: 500 var(--t-14)/1 var(--sans); cursor: pointer; transition: background-color var(--dur-1, 120ms) ease, color var(--dur-1, 120ms) ease; }
.bl-chip[aria-pressed="true"] { background: var(--fg); box-shadow: none; color: var(--bg); }
.bl-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .bl-chip[aria-pressed="false"]:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--ink-3); } }
@media (max-width: 760px) { .bl-chip { min-height: 40px; } }
.pg-blog-grid > li[hidden] { display: none; }
.bl-more-wrap { display: flex; justify-content: center; margin-top: 48px; }
.bl-more-wrap[hidden] { display: none; }
.bl-show { min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--r-btn, 8px); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg); font: 500 var(--t-14)/1 var(--sans); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .bl-show:hover { box-shadow: inset 0 0 0 1px var(--ink-3); } }