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

  Same self-contained approach as content_block.css: every color/font value
  is a --pb-* token on .pb itself, so this renders identically wherever it's
  dropped. Shares the same "Academic Excellence System" palette as
  content_block.css (--cb-*) for visual consistency when both appear on one
  page, just under its own prefix/tokens so the two components stay
  independently portable.
*/

.pb{
  --pb-primary:#0e1b30;          /* headings, featured-card background */
  --pb-secondary:#0f6e8c;        /* accent — icons, checkmarks */
  --pb-body:#5b6472;             /* body text */
  --pb-section-bg:#f9f9ff;
  --pb-card-bg:#ffffff;
  --pb-icon-badge-bg:#dbe7fb;
  --pb-border:rgba(194,199,207,.35);
  --pb-shadow:0 6px 24px rgba(15,30,60,.07);
  --pb-heading-font:'Jost','Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --pb-body-font:'Open Sans','Inter',ui-sans-serif,system-ui,sans-serif;
  --pb-max:1200px;

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

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

.pb .pb-head{text-align:center; max-width:640px; margin:0 auto 48px;}
.pb .pb-heading{font-size:30px; line-height:1.25; letter-spacing:-0.01em; margin-bottom:14px;}
@media (max-width:640px){ .pb .pb-heading{font-size:24px;} }
.pb .pb-intro{font-size:17px; line-height:1.6; color:var(--pb-body);}

/* ── Pillar cards — any count, not fixed to exactly 3 ─────────────────── */
.pb .pb-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:28px;}

.pb .pb-card{
  background:var(--pb-card-bg); border:1px solid var(--pb-border); border-radius:28px;
  padding:32px; box-shadow:var(--pb-shadow); transition:box-shadow .2s ease, border-color .2s ease;
}
.pb .pb-card:hover{border-color:rgba(15,110,140,.3); box-shadow:0 12px 32px rgba(15,30,60,.12);}

.pb .pb-icon-box{
  width:56px; height:56px; border-radius:16px; background:var(--pb-icon-badge-bg);
  display:flex; align-items:center; justify-content:center; margin-bottom:28px;
}
.pb .pb-icon-box i{color:var(--pb-secondary); font-size:24px; line-height:1;}
.pb .pb-card h3{font-size:20px; margin-bottom:12px;}
.pb .pb-desc{font-size:15px; line-height:1.6; color:var(--pb-body); margin-bottom:24px;}

.pb .pb-points{display:flex; flex-direction:column; gap:16px;}
.pb .pb-point{display:flex; align-items:flex-start; gap:12px;}
.pb .pb-point-check{
  width:20px; height:20px; border-radius:50%; background:rgba(15,110,140,.1);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.pb .pb-point-check i{color:var(--pb-secondary); font-size:11px;}
.pb .pb-point-title{
  display:block; font-family:var(--pb-body-font); font-weight:600; font-size:14px; color:var(--pb-primary);
}
.pb .pb-point-desc{font-size:12.5px; line-height:1.5; color:var(--pb-body); margin-top:2px;}

/* ── Featured pillar — dark accent card, admin-picked per pillar ───────── */
.pb .pb-card-featured{
  background:var(--pb-primary); border-color:var(--pb-primary); color:#fff;
  position:relative; overflow:hidden;
}
.pb .pb-card-featured::after{
  content:""; position:absolute; width:180px; height:180px; border-radius:50%;
  background:rgba(15,110,140,.35); filter:blur(40px); bottom:-70px; right:-70px; pointer-events:none;
}
.pb .pb-card-featured h3{color:#fff; position:relative; z-index:1;}
.pb .pb-card-featured .pb-desc{color:rgba(255,255,255,.8); position:relative; z-index:1;}
.pb .pb-card-featured .pb-icon-box{background:rgba(255,255,255,.1); position:relative; z-index:1;}
.pb .pb-card-featured .pb-icon-box i{color:#7dd0ff;}
.pb .pb-card-featured .pb-points{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:16px;
  padding:20px; position:relative; z-index:1;
}
.pb .pb-card-featured .pb-point-check{background:rgba(255,255,255,.12);}
.pb .pb-card-featured .pb-point-check i{color:#7dd0ff;}
.pb .pb-card-featured .pb-point-title{color:#fff;}
.pb .pb-card-featured .pb-point-desc{color:rgba(255,255,255,.7);}