/* v2 Resource Library (content-hub) blog — clean hand-written components on the theme's design
   system (Ginto fonts + brand tokens from theme-shell), NO captured migration-recon.css. Faithful
   to the modern production content-hub design (full-bleed featured image, ~36px Ginto Plus title,
   author/date meta, shadow related cards, cream-on-green hero, tilted-panel newsletter).
   Deliberately .ch-prefixed so it never collides with blog-v2.css (the News/Resources design) —
   the two blog designs coexist, each on its own CSS system. Sizes decoded from the source module's
   Tailwind classes: text-4xl=36px, text-5xl=48px, text-3xl=30px; font-h2=variable weight 456,
   font-h5=480; tracking-tight=-0.025em; leading-none=1. */

:root {
  --ch-green: rgb(3, 104, 90);
  --ch-cream: #fff9f0;
  --ch-gray: #e5e3dc;
  --ch-purple: #9649cb;
  --ch-zinc: #f4f4f5;
  --ch-plus: "ABC Ginto Plus Variable", "ABC Ginto Normal Variable", system-ui, sans-serif;
  --ch-nord: "ABC Ginto Nord Variable", "ABC Ginto Plus Variable", system-ui, sans-serif;
  --ch-sans: "ABC Ginto Normal Variable", system-ui, sans-serif;
}

/* ============================ POST ============================ */
.ch-post {
  max-width: 672px;          /* max-w-2xl */
  margin: 0 auto;
  padding: 64px 24px 0;
  color: var(--ch-green);
}

/* full-bleed featured image: extends beyond the text column (source: -mx-6/-10/-20), aspect 2→3→4 */
.ch-featured {
  position: relative;
  margin: 2rem -1.5rem;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 6px;
}
.ch-featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (min-width: 768px) { .ch-featured { margin: 2rem -2.5rem; aspect-ratio: 3 / 1; } }
@media (min-width: 1280px) { .ch-featured { margin: 2rem -5rem; aspect-ratio: 4 / 1; } }

.ch-head { margin-top: 2rem; }       /* gap before body comes from .ch-prose margin */
.ch-title {
  font-family: var(--ch-plus);
  font-size: 36px;                   /* text-4xl */
  font-weight: 456;                  /* font-h2 */
  font-stretch: 75%;                 /* font-stretch utility (Ginto Plus condensed axis) */
  line-height: 1;                    /* leading-none */
  letter-spacing: -0.025em;          /* tracking-tight */
  margin: 0 0 2rem;
}
.ch-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-size: 12px;                   /* text-xs */
}
.ch-meta .author {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.ch-meta .author::after { content: "\25CF"; transform: scale(0.5); display: inline-block; margin: 0 0.15rem; }
.ch-meta .date { text-transform: uppercase; white-space: nowrap; }

/* editor-authored rich text (source: hs-richtext, max-w-2xl column). Body sized to match modern
   production exactly: 16px / 24px line-height (1.5) — verified via region-scoped fidelity diff. */
.ch-prose { font-family: var(--ch-sans); font-size: 16px; line-height: 1.5; margin-top: 2rem; }
.ch-prose > * + * { margin-top: 1.25rem; }
.ch-prose h2, .ch-prose h3, .ch-prose h4 { font-family: var(--ch-plus); font-weight: 456; line-height: 1.15; margin: 2.5rem 0 0; }
.ch-prose h2 { font-size: 28px; }
.ch-prose h3 { font-size: 22px; }
.ch-prose h4 { font-size: 19px; }
.ch-prose p { margin: 0; }
.ch-prose ul { list-style: disc; padding-left: 1.6rem; }
.ch-prose ol { list-style: decimal; padding-left: 1.6rem; }
.ch-prose li { margin: 0.35rem 0; }
.ch-prose a { color: var(--ch-purple); text-decoration: underline; text-underline-offset: 2px; }
.ch-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.ch-prose blockquote { border-left: 3px solid currentColor; padding-left: 1rem; font-style: italic; opacity: 0.9; }
.ch-prose strong, .ch-prose b { font-weight: 600; }
.ch-prose hr { border: 0; border-top: 1px solid currentColor; opacity: 0.2; }

/* ---- related posts (source: shadow-md rounded-lg cards, 3-up) ---- */
.ch-related { max-width: 1120px; margin: 5rem auto 0; padding: 0 24px; color: var(--ch-green); }
.ch-related-heading { font-family: var(--ch-nord); font-size: 22px; font-weight: 480; text-align: center; margin: 0 0 2.5rem; }
.ch-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.ch-related-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.ch-related-card > a.media { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.ch-related-card > a.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-related-card .body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1rem; padding: 2rem; }
.ch-related-card .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 12px; text-transform: uppercase; list-style: none; margin: 0; padding: 0; }
.ch-related-card .tags a { color: inherit; text-decoration: none; }
.ch-related-card .tags a:hover { color: var(--ch-purple); }
.ch-related-card h3 { font-family: var(--ch-plus); font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; margin: 0.5rem 0 0; }
.ch-related-card h3 a { color: inherit; text-decoration: none; }
.ch-related-card h3 a:hover { color: var(--ch-purple); }
.ch-related-card .summary { font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ch-related-card .foot { padding: 1rem 2rem; background: var(--ch-zinc); font-size: 13px; }
.ch-related-card .foot .author { font-weight: 700; text-transform: uppercase; display: block; }
.ch-related-card .foot .date { text-transform: uppercase; }

.ch-seeall { text-align: center; margin: 3rem 0; }
.ch-seeall a { display: inline-block; border: 1px solid var(--ch-green); border-radius: 999px; padding: 0.25rem 1rem; color: var(--ch-green); text-decoration: none; font-size: 15px; }
.ch-seeall a:hover { border-color: var(--ch-purple); color: var(--ch-purple); }

/* ============================ NEWSLETTER (tilted panel) ============================ */
.ch-newsletter { position: relative; max-width: 1120px; margin: 6rem auto; padding: 3rem 24px; }
.ch-newsletter::before { content: ""; position: absolute; inset: 0 -2rem; background: var(--ch-gray); opacity: 0.7; transform: rotate(-1deg); z-index: -1; }
.ch-newsletter-inner { display: flex; flex-direction: column; gap: 1rem; max-width: 880px; margin: 0 auto; padding: 2rem 1rem; }
.ch-newsletter .subtitle { font-family: var(--ch-nord); font-weight: 480; text-align: center; font-size: 20px; margin: 0; color: var(--ch-green); }
.ch-newsletter .title { font-family: var(--ch-plus); font-weight: 456; font-size: 30px; line-height: 1.1; text-align: center; margin: 0; color: var(--ch-green); }
.ch-newsletter .blurb { font-size: 18px; line-height: 1.5; text-align: center; color: var(--ch-green); margin: 0; }
/* visual facsimile of the HubSpot newsletter form (real GUID 8e200acb-202c-415e-8e65-e30c74a359da
   is intentionally NOT embedded — keeps the disposable sandbox from generating junk leads) */
.ch-newsletter-form { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.5rem; }
.ch-newsletter-form input { flex: 1 1 280px; max-width: 360px; padding: 0.85rem 1rem; border: 1px solid var(--ch-green); border-radius: 6px; font-size: 15px; background: #fff; color: var(--ch-green); }
.ch-newsletter-form button { padding: 0.85rem 1.75rem; border: 0; border-radius: 6px; background: var(--ch-green); color: var(--ch-cream); font-size: 15px; font-weight: 600; cursor: pointer; }
.ch-newsletter-form button:hover { background: var(--ch-purple); }

/* ============================ LISTING ============================ */
.ch-listing { color: var(--ch-green); }
/* hero on the page's cream background — eyebrow subtitle + big Ginto-Plus title + intro copy,
   mirroring production's general/header module (subtitle text-xs uppercase, title text-5xl). */
.ch-hero-inner { max-width: 1120px; margin: 0 auto; padding: 4rem 24px 0; display: flex; flex-direction: column; gap: 1rem; max-width: 720px; }
.ch-hero-eyebrow { font-family: var(--ch-nord); font-size: 12px; font-weight: 480; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ch-green); margin: 0; }
.ch-hero h1 { font-family: var(--ch-plus); font-size: 48px; font-weight: 456; font-stretch: 75%; line-height: 1; letter-spacing: -0.025em; margin: 0; color: var(--ch-green); }
.ch-hero .blurb { font-size: 18px; line-height: 1.5; margin: 0; max-width: 640px; color: var(--ch-green); }

/* ---- Featured Reports (report-cards): static, two fixed report cards ---- */
.ch-reports { max-width: 1120px; margin: 0 auto; padding: 3rem 24px; }
.ch-reports h2 { font-family: var(--ch-plus); font-size: 30px; font-weight: 700; letter-spacing: -0.025em; color: var(--ch-green); margin: 0 0 2rem; }
.ch-reports ul { display: flex; flex-direction: column; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.ch-report-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1); text-decoration: none; color: var(--ch-green); transition: box-shadow 0.2s ease; }
.ch-report-card:hover { box-shadow: 0 12px 24px rgba(0,0,0,0.14); }
.ch-report-card .thumb { flex-shrink: 0; width: 100%; aspect-ratio: 234/235; background: #dbf3ff; }
.ch-report-card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ch-report-card .rc-body { flex: 1; padding: 2rem; }
.ch-report-card .rc-body h3 { font-family: var(--ch-plus); font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 2.25rem; margin: 0; }
.ch-report-card .rc-body p { margin: 0.75rem 0 0; font-size: 16px; line-height: 1.5; }
.ch-report-card .badge { display: inline-flex; align-items: center; justify-content: center; height: 53px; padding: 0 1.5rem; background: var(--ch-green); color: var(--ch-cream); font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; }
.ch-report-card .badge span { text-decoration: underline; }
@media (min-width: 768px) {
  .ch-report-card { flex-direction: row; min-height: 235px; }
  .ch-report-card .thumb { width: 234px; }
  .ch-report-card .rc-body { padding: 4rem 240px 2rem 2rem; }
  .ch-report-card .badge { position: absolute; top: 0; right: 0; border-top-right-radius: 8px; }
}

/* ---- Featured Resources (featured-posts): colorful tilted mosaic ---- */
.ch-featured { /* (note: .ch-featured already used by post hero image; this block is scoped under .ch-fp) */ }
.ch-fp { position: relative; max-width: 1120px; margin: 3rem auto; padding: 2rem 24px; }
.ch-fp::before, .ch-fp::after { content: ""; position: absolute; inset: 0 -2rem; opacity: 0.7; z-index: -1; }
.ch-fp::before { background: #dbf3ff; transform: rotate(-1deg); }      /* brand-light-blue */
.ch-fp::after  { background: #d2eae0; transform: rotate(1deg); }       /* brand-light-green */
.ch-fp h2 { font-family: var(--ch-plus); font-size: 30px; font-weight: 456; letter-spacing: -0.025em; text-align: center; color: var(--ch-green); margin: 0 0 2rem; }
.ch-fp-grid { display: grid; grid-flow: row; gap: 2rem; }
.ch-fp-card { display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1); }
.ch-fp-card .media { position: relative; overflow: hidden; }
.ch-fp-card .media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ch-fp-card .inner { display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
.ch-fp-card .top { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; }
.ch-fp-card .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 12px; text-transform: uppercase; list-style: none; margin: 0; padding: 0; color: var(--ch-green); }
.ch-fp-card .tags a { color: inherit; text-decoration: none; }
.ch-fp-card .tags a:hover { color: var(--ch-purple); }
.ch-fp-card h3 { font-family: var(--ch-plus); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: 0; color: var(--ch-green); }
.ch-fp-card h3 a { color: inherit; text-decoration: none; }
.ch-fp-card h3 a:hover { color: var(--ch-purple); }
.ch-fp-card .summary { color: var(--ch-green); }
.ch-fp-card .foot { padding: 1rem 2rem; background: var(--ch-zinc); font-size: 13px; color: var(--ch-green); }
.ch-fp-card .foot .author { font-weight: 700; text-transform: uppercase; display: block; }
.ch-fp-card .foot .date { text-transform: uppercase; }
/* super-featured card: big title, 5-line clamp */
.ch-fp-super h3 { font-size: 30px; }
.ch-fp-super .summary { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* the 3 smaller featured cards: image left on wide, 2-line clamp */
.ch-fp-small h3 { font-size: 22px; }
.ch-fp-small .top { padding: 1rem; }
.ch-fp-small .summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 640px) {
  .ch-fp-small { flex-direction: row; }
  .ch-fp-small .media { flex: 0 0 14rem; }
}
@media (min-width: 1280px) {
  .ch-fp-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
  .ch-fp-super { grid-row: span 3; flex-direction: column; }
  .ch-fp-super .media { flex: 1; min-height: 220px; }
  .ch-fp-super .media img { position: absolute; inset: 0; }
}

.ch-listing-body { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.ch-listing-bar { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; margin: 4rem 0 2rem; }
@media (min-width: 768px) { .ch-listing-bar { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.ch-listing-bar h2 { font-family: var(--ch-plus); font-size: 44px; font-weight: 456; font-stretch: 75%; line-height: 1; letter-spacing: -0.025em; margin: 0; }

.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.ch-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); text-decoration: none; color: var(--ch-green); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.ch-card:hover { box-shadow: 0 14px 34px rgba(3,104,90,0.18); transform: translateY(-2px); }
.ch-card .media { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.ch-card .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-card .body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; }
.ch-card .tag { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
.ch-card h3 { font-family: var(--ch-plus); font-size: 22px; font-weight: 456; line-height: 1.15; letter-spacing: -0.025em; margin: 0; }
.ch-card .summary { font-size: 14px; line-height: 1.5; opacity: 0.85; flex: 1 1 auto; }
.ch-card .date { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin-top: 0.5rem; }

/* pagination (@hubspot/pagination) */
.ch-listing .pagination { display: flex; justify-content: center; gap: 0.5rem; margin: 3.5rem 0 0; list-style: none; padding: 0; }
.ch-listing .pagination a, .ch-listing .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(3,104,90,0.2); color: var(--ch-green); text-decoration: none; font-size: 14px; }
.ch-listing .pagination .active a, .ch-listing .pagination a[aria-current] { background: var(--ch-green); color: #fff; border-color: var(--ch-green); }

/* ── site search input in the listing bar (@hubspot/search_input) ─────────────
   base-content-hub-v2 loads ONLY this stylesheet, so the .blog-search rules that style the field on
   the v2 blog listings (blog-v2.css) never reach /resource-library — the field rendered completely
   unstyled: square 0-radius form with a grey #e2e8f0 border, a 10x42px button, and a 10x10 BLACK
   icon, against /news's 999px pill, 31x31 button and 18x18 green icon.

   Mirrors that pill treatment using this stylesheet's own tokens so all three listings read as one
   design. Icon size is pinned with min+max because the search module ships its own CSS that
   otherwise wins. This template passes include_search_button=true, so the button is a real element
   rather than the inline variant — it is styled as an inline icon button to match. */
.ch-listing-bar .hs-search-field { flex: 0 0 auto; }
.ch-listing-bar .hs-search-field__form,
.ch-listing-bar .hs-search-field form {
  display: flex; align-items: center; gap: 0.25rem;
  border: 1px solid rgba(3, 104, 90, 0.4); border-radius: 999px;
  background: transparent; padding: 0 0.5rem 0 1rem;
}
.ch-listing-bar .hs-search-field input[type="text"],
.ch-listing-bar .hs-search-field input[type="search"],
.ch-listing-bar .hs-search-field__input {
  border: 0; background: transparent; box-shadow: none; outline: none;
  padding: 0.55rem 0.25rem; font-family: var(--ch-sans); font-size: 14px; color: var(--ch-green);
}
.ch-listing-bar .hs-search-field input::placeholder { color: var(--ch-green); opacity: 0.7; }
.ch-listing-bar .hs-search-field button {
  background: transparent; border: 0; padding: 0.4rem; color: var(--ch-green);
  cursor: pointer; display: flex; align-items: center; border-radius: 999px;
}
.ch-listing-bar .hs-search-field button svg,
.ch-listing-bar .hs-search-field button img {
  width: 18px; height: 18px; min-width: 18px; min-height: 18px; max-width: 18px; max-height: 18px;
  fill: currentColor; color: var(--ch-green);
}