/* Griffith Consulting Group · case-study posts (blog/*.html, written by tools/posts.mjs)
   Loads after css/site.css, css/page.css and css/voxel.css. One reading column with the case card and
   a contents list beside it on wide screens. The article class is post-main, because .post is the
   small post chip in the content week grid. */

.post-wrap { padding: 40px 0 88px; }
.post-wrap > .eyebrow { margin-bottom: 8px; }
.post-grid { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 300px); gap: 72px; justify-content: space-between; align-items: start; }

/* ---------------------------------------------------------------- article */
.post-main { font-size: 1.06rem; line-height: 1.72; color: var(--ink); }
.post-main h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 600; line-height: 1.08; margin: 14px 0 16px; text-wrap: balance; }
.post-main h2 { font-size: clamp(1.45rem, 2.3vw, 1.85rem); font-weight: 600; line-height: 1.2; margin: 60px 0 16px; text-wrap: balance; }
.post-main h3 { font-size: 1.14rem; font-weight: 600; line-height: 1.3; margin: 32px 0 8px; }
.post-main p + p, .post-main p + ul, .post-main p + ol, .post-main ul + p, .post-main ol + p { margin-top: 1em; }
.post-main ul, .post-main ol { margin: 0; padding-left: 1.3em; }
.post-main li + li { margin-top: .45em; }
.post-main li::marker { color: var(--pc, var(--accent)); }
.post-main strong { font-weight: 650; }
.post-main a:not([class]) { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-main a:not([class]):hover { text-decoration-thickness: 2px; }

.post-dates { font-size: .8rem; color: var(--muted); }
.post-dates time { color: var(--ink); }

/* the capsule: the whole answer in the first paragraph */
.post-capsule {
  margin-top: 28px; padding-left: 20px; border-left: 3px solid var(--pc, var(--accent));
  font-size: 1.2rem; line-height: 1.6; color: var(--ink);
}

.tldr { margin: 32px 0 0; padding: 20px 24px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.tldr-h { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.post-main .tldr ul { margin-top: 10px; }
.tldr li { font-size: 1rem; }

/* images that sum up their section */
.post-fig { margin: 32px 0; }
.post-fig img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); }
.post-fig figcaption { margin-top: 10px; font-size: .8rem; line-height: 1.5; color: var(--muted); }
[data-theme="dark"] .post-fig img { filter: brightness(.92); }

/* tables hold sentences here, so cells wrap */
.post-main .tbl-wrap { margin: 28px 0; }
.post-main .tbl { font-size: .9rem; line-height: 1.5; }
.post-main .tbl th, .post-main .tbl td { white-space: normal; vertical-align: top; padding: 10px 14px; }
.post-main .tbl tbody tr { animation: none; }

.post-faq { margin-top: 8px; }
.post-faq h3 { margin-top: 26px; }
.post-faq p { color: var(--muted); }

/* the author bio closes the article, with the founder photo */
.author-bio {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 22px; align-items: start;
  margin-top: 64px; padding: 26px; border-radius: 18px; background: var(--bg-2); border: 1px dashed var(--line-2);
}
.author-bio > * { grid-column: 2; }
.author-photo { grid-column: 1 !important; grid-row: 1 / span 6; width: 96px; height: 120px; object-fit: cover; border-radius: 12px; }
.post-main .author-bio h2 { margin: 0 0 10px; font-size: 1.2rem; }
.author-bio p { font-size: .97rem; color: var(--muted); }

/* ---------------------------------------------------------------- beside the article */
.post-side { position: sticky; top: 100px; display: grid; gap: 28px; padding-top: 14px; }
.post-case { padding: 16px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow); }
.post-case .voxel-scene { margin-bottom: 14px; }
.post-case-h { margin: 12px 0 4px; font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.post-toc > p { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 10px; }
.post-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-2); }
.post-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: .9rem; line-height: 1.4; color: var(--muted); text-decoration: none; }
.post-toc a:hover { color: var(--ink); border-left-color: var(--pc, var(--accent)); }

/* ---------------------------------------------------------------- narrower screens: one column, the case card after the
   article, no contents list (the TL;DR does that job) */
@media (max-width: 1100px) {
  .post-grid { grid-template-columns: minmax(0, 720px); justify-content: center; gap: 48px; }
  .post-wrap > .crumbs, .post-wrap > .eyebrow { max-width: 720px; margin-inline: auto; }
  .post-side { position: static; padding-top: 0; }
  .post-toc { display: none; }
  .post-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; align-items: center; }
  .post-case .voxel-scene { grid-row: 1 / span 4; margin: 0; }
}
/* the menu row hangs below the top bar from 960px down, so the page starts lower, as the service pages do */
@media (max-width: 960px) {
  .post-wrap { padding-top: 64px; }
}
@media (max-width: 640px) {
  .post-wrap { padding-bottom: 64px; }
  .post-main { font-size: 1rem; }
  .post-capsule { font-size: 1.08rem; padding-left: 16px; }
  .tldr { padding: 16px 18px; }
  .post-main h2 { margin-top: 48px; }
  .author-bio { grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; padding: 20px 18px; }
  .author-photo { width: 72px; height: 90px; }
  .post-case { grid-template-columns: minmax(0, 1fr); }
  .post-case .voxel-scene { grid-row: auto; margin-bottom: 12px; }
}