/*
  content_block.css — styles for content_blocks/templates/components/content_block.html

  Fully self-contained: every color/font/spacing value here is a --cb-*
  token defined on .cb itself, never read from a surrounding page's theme
  variables. That's deliberate — this component renders identically no
  matter which page (old Bootstrap page, new minimalist/split theme page)
  it's dropped onto, per the "layout must remain exactly the same" spec.

  Heading/body fonts prefer Jost/Open Sans — already loaded by every base
  template this component is wired into (base_marketing_node.html,
  base_marketing_split_node.html, subject_minimalist.html, subject_split.html)
  — falling back to system sans-serif anywhere else, so no new font request
  is required for the current integration points.
*/

.cb{
  --cb-primary:#0e1b30;         /* headings */
  --cb-secondary:#0f6e8c;       /* accent — stat values, quote rule, icon color */
  --cb-body:#5b6472;            /* body text */
  --cb-section-bg:#eef1fc;      /* section background */
  --cb-card-bg:#ffffff;
  --cb-icon-badge-bg:#dbe7fb;
  --cb-stat-grad-from:#e4e9f7;  /* stat card gradient start — feature cards stay flat white */
  --cb-shadow:0 6px 24px rgba(15,30,60,.07);
  --cb-heading-font:'Jost','Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --cb-body-font:'Open Sans','Inter',ui-sans-serif,system-ui,sans-serif;
  --cb-max:1200px;

  background:var(--cb-section-bg);
  font-family:var(--cb-body-font);
  color:var(--cb-body);
}
.cb *{box-sizing:border-box;}
.cb h2,.cb h3,.cb .cb-stat-value{font-family:var(--cb-heading-font); color:var(--cb-primary); margin:0; font-weight:700;}
.cb p{margin:0;}

.cb .cb-wrap{max-width:var(--cb-max); margin:0 auto; padding:64px 56px;}
@media (max-width:640px){ .cb .cb-wrap{padding:40px 24px;} }

.cb .cb-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
@media (max-width:900px){ .cb .cb-grid{grid-template-columns:1fr; gap:40px;} }

.cb .cb-left{display:flex; flex-direction:column; gap:28px;}
.cb .cb-heading{font-size:30px; line-height:1.25; letter-spacing:-0.01em;}
@media (max-width:640px){ .cb .cb-heading{font-size:24px;} }

.cb .cb-intro{font-size:17px; line-height:1.6; color:var(--cb-body); margin-top:20px;}
.cb .cb-intro p{margin:0 0 10px;}
.cb .cb-intro p:last-child{margin-bottom:0;}

/* ── Feature cards ─────────────────────────────────────────────────────── */
.cb .cb-feature-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:20px;}
.cb .cb-feature-card{
  display:flex; flex-direction:column; gap:12px; padding:24px;
  background:var(--cb-card-bg); border-radius:18px; box-shadow:0 2px 10px rgba(15,30,60,.05);
}
.cb .cb-feature-top{display:flex; align-items:center; gap:12px;}
.cb .cb-feature-icon-badge{
  width:38px; height:38px; border-radius:10px; background:var(--cb-icon-badge-bg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cb .cb-feature-icon-badge i{color:var(--cb-secondary); font-size:18px; line-height:1;}
.cb .cb-feature-card h3{font-size:16.5px;}
.cb .cb-feature-card p{font-size:13.5px; line-height:1.5; color:var(--cb-body);}

/* ── Quote ─────────────────────────────────────────────────────────────── */
.cb .cb-quote{border-left:3px solid var(--cb-secondary); padding-left:20px; margin:0;}
.cb .cb-quote p{font-size:15px; font-style:italic; color:var(--cb-body); line-height:1.6;}
.cb .cb-quote cite{display:block; font-size:13px; font-style:normal; font-weight:600; color:var(--cb-primary); margin-top:8px;}

/* ── Statistics — two balanced columns (see ContentBlock.stats_columns()),
     left column offset down for the staggered "waterfall" rhythm, right
     column flush to the top. Works for any count, not just 4. ──────────── */
.cb .cb-stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:640px){ .cb .cb-stats-grid{grid-template-columns:1fr;} }

.cb .cb-stats-col{display:flex; flex-direction:column; gap:16px;}
.cb .cb-stats-col.cb-stats-col-offset{padding-top:48px;}
@media (max-width:640px){ .cb .cb-stats-col.cb-stats-col-offset{padding-top:0;} }

.cb .cb-stat-card{
  background:linear-gradient(135deg, var(--cb-stat-grad-from) 0%, var(--cb-card-bg) 100%);
  border-radius:22px; box-shadow:var(--cb-shadow); padding:28px 20px; text-align:center;
}
.cb .cb-stat-value{font-size:34px; font-weight:800; letter-spacing:-0.02em; line-height:1;}
.cb .cb-stat-label{
  font-family:var(--cb-body-font); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  font-weight:600; color:var(--cb-body); margin-top:10px;
}