/* Hub polish, shared by the Blog hub and the Case Studies hub (prefix hb-). Loaded after cases.css, audience.css and blog.css. */

/* hero stays plain type: the fan of covers broke the rhythm and was removed */

/* featured: bigger headline, less wall of text */
.au-case-title { font-size: clamp(32px, 4vw, 64px); }
.au-case-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 52ch; }
.au-case-link { display: inline-flex; align-items: center; gap: 10px; }

/* cards: borderless, image first, a stamp on the image, an arrow disc that fills on hover */
.cp-card { border: 0; background: none; border-radius: 0; overflow: visible; }
.cp-card:hover, .cp-card:focus-visible { border: 0; box-shadow: none; transform: none; }
.cp-card-media { position: relative; border-radius: 22px; aspect-ratio: 3 / 2; border: 1.5px solid var(--cs-dark4); transition: border-color .2s, box-shadow .3s, transform .3s; }
.cp-card:hover .cp-card-media, .cp-card:focus-visible .cp-card-media { border-color: var(--cs-green-bright); box-shadow: var(--cs-shadow-glow); transform: translateY(-4px); }
.cp-card-media img { border-radius: inherit; }
.cp-card-body { padding: 22px 4px 0; }
.cp-card-title { font-size: clamp(24px, 2vw, 32px); line-height: 1.08; margin-top: 0; }
.hb-stamp { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 6px 12px; border-radius: 999px; background: var(--cs-green-bright); color: var(--cs-dark1); font-family: var(--cs-font-label); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.cp-card-link { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; font-size: 15px; }
.cp-card-link span[aria-hidden] { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--cs-dark4); color: var(--cs-pale); transition: background .2s, color .2s, border-color .2s, transform .2s; }
.cp-card:hover .cp-card-link span[aria-hidden] { background: var(--cs-green-bright); border-color: var(--cs-green-bright); color: var(--cs-dark1); transform: translateX(4px); }
.cp-card-stats { border-top: 0; padding-top: 0; margin-top: 16px; }
.bl-meta { padding-top: 14px; }

/* grid: one uniform card (same image ratio, title size and summary length), meta pinned to the bottom */
.cp-card-title { font-size: clamp(22px, 1.8vw, 28px); }
.bl-sum { -webkit-line-clamp: 2; }
.cp-card-media { aspect-ratio: 16 / 10; }

/* section title with a rule, so the grid reads as its own part of the page */
.bl-bar, .hb-bar { padding-bottom: 20px; border-bottom: 1px solid var(--cs-border-strong); }
.hb-bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; }
.cp-grid { margin-top: clamp(28px, 3vw, 44px); row-gap: clamp(36px, 4vw, 64px); }

/* hub hero: copy held to half the width, so it stacks taller and the page gets more room */
.hb-hero--text { display: block; }
.hb-hero--text .cs-display { max-width: 11ch; font-size: clamp(48px, 7vw, 120px); line-height: .98; }
.hb-hero--text .cs-lead { max-width: 30ch; margin-top: clamp(20px, 2.4vw, 32px); font-size: clamp(19px, 1.7vw, 26px); }
.cp-hero:has(.hb-hero--text) { padding-top: clamp(40px, 6vw, 96px); padding-bottom: clamp(36px, 5vw, 72px); }
@media (max-width: 599px) { .hb-hero--text .cs-display { max-width: none; } .hb-hero--text .cs-lead { max-width: none; } }

/* cards: a restrained surface (flat tint, hairline border, image inset), hover only lifts the border */
.cp-card { padding: 10px; border: 1px solid var(--cs-border-strong); border-radius: 24px; background: rgba(10, 32, 40, .55); transition: border-color .2s, background .2s; }
.cp-card:hover, .cp-card:focus-visible { border: 1px solid rgba(59, 214, 43, .55); background: rgba(10, 32, 40, .8); }
.cp-card-media { border: 0; border-radius: 16px; box-shadow: none; }
.cp-card:hover .cp-card-media, .cp-card:focus-visible .cp-card-media { border: 0; box-shadow: none; transform: none; }
.cp-card-body { padding: 18px 14px 12px; }
.cp-grid--compact .cp-card-body { padding: 14px 12px 8px; }

/* 404 */
.nf-hero { padding-top: clamp(56px, 9vw, 140px); padding-bottom: clamp(72px, 10vw, 160px); }
.nf-code { font-family: var(--cs-font-label); font-weight: 800; font-size: clamp(96px, 20vw, 320px); line-height: .85; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px rgba(59, 214, 43, .55); margin-bottom: clamp(16px, 2vw, 32px); }
.nf-hero .cs-display { max-width: 12ch; }
.nf-hero .cs-lead { max-width: 36ch; }
.nf-links { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: clamp(40px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--cs-border-strong); }
.nf-links li { list-style: none; }