/* Blog hub and Blog Post template. Prefix bl-. Builds on cases.css (cp-*) and audience.css (au-case). */
.bl-topic { font-family: var(--cs-font-label); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-green); }
.bl-card .bl-topic { margin-top: 0; }
.bl-card .cp-card-title { margin-top: 10px; }
.bl-sum { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-meta { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 700; color: var(--cs-text-faint); }
.bl-sum + .bl-meta, .cp-card-title + .bl-meta { margin-top: auto; }
.bl-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--cs-dark3); flex: none; }
.bl-avatar--big { width: 44px; height: 44px; }
.au-case-body .bl-meta { margin-top: 20px; padding-top: 0; }
.au-case-body .bl-topic { margin-bottom: 14px; }

/* placeholder for posts with no image */
.bl-ph { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 50% 120%, rgba(59, 214, 43, .22), transparent 60%), var(--cs-dark3); }
.bl-ph-mark { width: 54px; height: 54px; border-radius: 12px; opacity: .9; }

/* hub */
.bl-feature { padding-top: 0; }
.bl-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; }
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--cs-dark4); background: transparent; color: var(--cs-text-soft); font: 800 14px/1 var(--cs-font); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.bl-chip i { font-style: normal; font-weight: 700; font-size: 12px; color: var(--cs-text-faint); }
.bl-chip:hover { border-color: var(--cs-green); color: var(--cs-text); }
.bl-chip.is-on { background: var(--cs-green-bright); border-color: var(--cs-green-bright); color: var(--cs-dark1); }
.bl-chip.is-on i { color: var(--cs-dark1); opacity: .65; }
.bl-more { justify-content: center; margin-top: clamp(32px, 4vw, 56px); }
@media (max-width: 991px) { .bl-grid.cp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .bl-grid.cp-grid { grid-template-columns: 1fr; } }

/* post header */
.bl-top .bl-topic { display: inline-flex; margin-bottom: 18px; padding: 7px 14px; border-radius: 999px; background: var(--cs-green-bright); color: var(--cs-dark1); transform: rotate(-2deg); box-shadow: 0 0 28px rgba(37, 242, 26, .3); }
.bl-top .cp-title { max-width: 20ch; }
.bl-byline { justify-self: end; }
.bl-by-row { display: flex; align-items: center; gap: 14px; }
.bl-by-row b { display: block; font-size: 18px; color: var(--cs-text); }
.bl-by-row em { display: block; margin-top: 2px; font-style: normal; font-size: 15px; font-weight: 700; color: var(--cs-text-faint); }
@media (max-width: 991px) { .bl-byline { justify-self: start; } }

/* rail */
.bl-rail-author { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 17px; font-weight: 700; color: var(--cs-text); }
.bl-rail-bio { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--cs-text-faint); }
.cp-fact-text a { color: var(--cs-text); }
.cp-fact-text a:hover { color: var(--cs-green-bright); }

/* body: CMS images are screenshots and GIFs, so show them whole */
.bl-prose img { max-height: none; height: auto; object-fit: contain; }
.bl-prose figure { margin: 1.8em 0; }
.bl-prose figure.w-richtext-align-center { text-align: left; }
.bl-prose figure.w-richtext-align-center img { width: auto; max-width: 100%; }
.bl-prose figure[style] { max-width: 100% !important; }
.bl-prose figcaption { font-style: italic; }
.bl-prose p > a, .bl-prose li > a { word-break: break-word; }
.bl-prose h2 strong { font-weight: inherit; }
.bl-prose iframe { width: 100%; aspect-ratio: 16 / 9; max-height: none; border: 0; border-radius: 18px; }
.bl-prose .w-richtext-figure-type-video { position: relative; padding: 0; }
.bl-prose .w-richtext-figure-type-video > div { padding-bottom: 0 !important; height: auto !important; }

/* post header v2: one column, byline under the title */
.bl-top { max-width: 1100px; }
.bl-top .cp-title { max-width: 22ch; font-size: clamp(38px, 5vw, 84px); }
.bl-top .cp-sub { max-width: 62ch; }
.bl-byline { justify-self: auto; margin-top: clamp(24px, 3vw, 36px); }

/* long portrait images: capped height, centred on a panel, click for full size */
.bl-prose figure.bl-tall { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: clamp(16px, 2.4vw, 28px); border-radius: 22px; border: 1.5px solid var(--cs-dark4); background: var(--cs-grad-panel); }
.bl-prose .bl-tall a { display: block; max-width: 100%; cursor: zoom-in; }
.bl-prose .bl-tall img { width: auto; max-width: 100%; max-height: min(72vh, 640px); margin: 0 auto; }
.bl-prose .bl-tall figcaption { text-align: center; }

/* cool ads: the hero is a row of images (the board-type gallery pattern: a wide one, then narrower ones, one shared height), from this ad and its article.
   One image: the blog's banner (cases.css .cp-coverband .cp-cover), cropped to fit. Click any image for the whole thing. The caption sits under the hero. */
.cd-fg-link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.cd-gallery { display: grid; gap: 16px; height: clamp(220px, 27vw, 440px); }
.cd-gallery[hidden] { display: none; }
.cd-gallery--3 { grid-template-columns: 2fr 1fr 1fr; }
.cd-gallery--2 { grid-template-columns: 3fr 2fr; }
.cd-gallery li { list-style: none; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--cs-dark3); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.cd-shot { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.cd-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--cs-spring); }
.cd-shot:hover img { transform: scale(1.04); }
.cd-cap { margin-top: 14px; font-size: 14px; font-style: italic; color: var(--cs-text-faint); }
@media (max-width: 767px) {
  .cd-gallery { height: auto; grid-template-columns: 1fr 1fr; }
  .cd-gallery li { aspect-ratio: 4 / 3; }
  .cd-gallery li:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .cd-gallery--2 { grid-template-columns: 1fr; }
  .cd-gallery--2 li { aspect-ratio: 16 / 9; }
}
.bl-topic[hidden] { display: none; }

/* Webflow nests images inside a div; it must shrink with the figure's grid track. */
.bl-prose .w-richtext-figure-type-image { min-width: 0; max-width: 100%; }
.bl-prose .w-richtext-figure-type-image > div { min-width: 0; max-width: 100%; }
.bl-prose .w-richtext-figure-type-image img { max-width: 100%; }