/* CICP homepage section styles — builds on cicp-design.css tokens. */

/* hero — brand blue #0C79B5 with a light #a9dcf5 glow + faint white CICP-icon watermark */
.cicp-hero{position:relative;background:radial-gradient(125% 95% at 100% 0%,#a9dcf5 0%,rgba(169,220,245,0) 52%),linear-gradient(155deg,#0C79B5 0%,#0a5f92 100%);color:#fff;overflow:hidden}
.cicp-hero::before{content:"";position:absolute;inset:0;background:url("../../../uploads/2025/02/CICP-icon.svg") no-repeat center;background-size:920px auto;opacity:.1;pointer-events:none;z-index:0}
.cicp-hero__in{display:grid;grid-template-columns:1fr 340px;gap:50px;align-items:center;padding:70px 30px 84px;position:relative;z-index:1}
.cicp-hero h1{color:#fff;font-size:56px;font-weight:800;letter-spacing:-.5px;line-height:1.1;font-family:var(--font-head)}
.cicp-hero p{color:#eaf1ff;font-size:20px;max-width:40ch;margin:20px 0 30px}
/* hero featured carousel — fixed-width card column (scaled ~30% down from ~478px) */
.cicp-hero__in>div:last-child{width:100%;min-width:0}
.cicp-hcar{position:relative;background:#FAFAFA;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px rgba(0,10,60,.35);min-width:0}
.cicp-htrack{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.cicp-hcard{flex:0 0 100%;min-width:100%;display:block;background:#FAFAFA}
.cicp-hcard .ph{aspect-ratio:16/11;background:linear-gradient(140deg,#194787,#0C79B5);background-size:cover;background-position:center}
.cicp-hcard .c{padding:18px 22px 22px}
.cicp-hcard .c p{color:var(--cicp-ink);font-size:15px;font-weight:600;margin:8px 0 12px;line-height:1.45;font-family:var(--font-head)}
.cicp-hdots{display:flex;gap:7px;margin-top:16px}
.cicp-hdots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:width .2s,background .2s}
.cicp-hdots i.on{background:#FAFAFA;width:22px;border-radius:5px}

/* initiatives full-bleed */
.cicp-initfull{background:#FAFAFA;border-bottom:1px solid var(--cicp-line)}
.cicp-itabs{display:flex;padding:0 24px;background:#FAFAFA;border-bottom:1px solid var(--cicp-line);box-shadow:0 6px 20px rgba(0,20,90,.05)}
.cicp-itabs button{flex:1;font-family:var(--font-head);font-weight:600;font-size:15px;color:#8a93a8;background:none;border:0;padding:22px 10px;cursor:pointer;position:relative;transition:color .18s}
.cicp-itabs button:hover{background:none;color:var(--cicp-navy)}
.cicp-itabs button.on{color:var(--cicp-blue)}
.cicp-itabs button.on::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:3px;background:var(--cicp-blue);border-radius:3px}
.cicp-initband{position:relative;min-height:472px;overflow:hidden;background:linear-gradient(125deg,#194787 12%,#0C79B5 100%)}
.cicp-initbg{position:absolute;inset:0;background-size:cover;background-position:center right;z-index:0}
.cicp-initband::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#FAFAFA 0%,#FAFAFA 24%,rgba(250,250,250,.92) 38%,rgba(250,250,250,0) 60%)}
.cicp-initband .inner{max-width:var(--cicp-max);margin:0 auto;padding:74px 30px;position:relative;z-index:2}
.cicp-itxt{max-width:46%}
.cicp-itxt h2{font-size:34px;font-weight:700;margin-bottom:16px;font-family:var(--font-head);color:var(--cicp-navy)}
.cicp-itxt p{font-size:16px;margin-bottom:26px;color:var(--cicp-body)}
.cicp-initnav{position:absolute;top:22px;right:26px;display:flex;gap:9px;z-index:3}
.cicp-initnav span{font-family:var(--font-label);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);padding:7px 13px;border-radius:4px;cursor:pointer}
.cicp-iphoto{position:absolute;left:56%;bottom:22px;font-family:var(--font-label);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);z-index:2}
.cicp-iimg-m{display:none}

/* stats + discover */
.cicp-impact{background:var(--cicp-mist);border-bottom:1px solid var(--cicp-line)}
.cicp-impact__in{display:grid;grid-template-columns:2.2fr 1fr;gap:40px;align-items:center;padding-top:44px;padding-bottom:44px}
.cicp-statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cicp-discover h3{font-size:24px;font-weight:700;font-family:var(--font-head);color:var(--cicp-navy)}
.cicp-discover p{font-size:15px;margin:8px 0 16px}
.cicp-discover .b{display:flex;gap:10px}

/* IN AI banner */
.cicp-inai{background:linear-gradient(100deg,#194787,#194787);color:#fff;display:flex;align-items:center;gap:30px;padding:34px 40px;margin:40px 0;border-radius:18px}
.cicp-inai .mk{font-family:var(--font-head);font-weight:800;font-size:40px;letter-spacing:1px}
.cicp-inai .mk em{color:#0C79B5;font-style:normal}
.cicp-inai .t{flex:1}
.cicp-inai .t b{font-family:var(--font-head);font-weight:700;font-size:19px;display:block}
.cicp-inai .t span{color:#bcd0ff;font-size:14px}

/* carousels */
.cicp-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*20px)/4);gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
	/* overflow-x:auto forces the vertical axis to clip as well, which was cutting off
	   the cards' hover shadow (0 20px 44px) and their -4px lift. Pad the scroll box and
	   pull it back with matching negative margins so page rhythm is unchanged. */
	/* Negative margins cancel the padding, so the content box — and therefore the
	   card widths and their alignment with the section heading — is unchanged.
	   Side padding is capped at the 20px column gap on purpose: at that width the
	   next card lands exactly on the scrollport edge, so no sliver of it peeks in,
	   while the edge cards still get room for their hover shadow. */
	padding:12px 20px 52px;margin:-12px -20px -52px;scroll-padding-inline:20px}
.cicp-rail::-webkit-scrollbar{display:none}
.cicp-rail .cicp-card{scroll-snap-align:start}
.cicp-rail .ph{aspect-ratio:4/3;background:linear-gradient(140deg,#194787,#0C79B5);background-size:cover;background-position:center}
.cicp-rail .ph.tall{aspect-ratio:3/4}
.cicp-card h3{font-size:16px;font-weight:600;margin-top:8px;line-height:1.35;color:var(--cicp-ink);font-family:var(--font-head)}

/* projects (dark tabbed) */
.cicp-projects{background:linear-gradient(120deg,#194787,#194787 60%,#0C79B5);color:#fff;position:relative;overflow:hidden}
.cicp-projects::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(90,150,255,.18),transparent 55%);pointer-events:none}
.cicp-ptabs{display:flex;position:relative;z-index:1}
.cicp-ptabs button{flex:1;font-family:var(--font-head);font-weight:600;font-size:15px;color:rgba(255,255,255,.6);background:none;border:0;padding:22px 10px;cursor:pointer;position:relative}
.cicp-ptabs button:hover,.cicp-ptabs button:focus{background:none;color:#fff}
.cicp-ptabs button.on{color:#fff}
.cicp-ptabs button.on::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:3px;background:#FAFAFA;border-radius:3px}
.cicp-ppanel{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:56px;padding-bottom:64px;position:relative;z-index:1}
.cicp-ppanel h2{color:#fff;font-size:30px;font-weight:700;margin-bottom:16px;font-family:var(--font-head)}
.cicp-ppanel p{color:#c9d6ff;font-size:15.5px;max-width:48ch;margin-bottom:24px}
.cicp-pimg{border-radius:var(--cicp-radius-card);min-height:280px;background-color:#194787;background-size:cover;background-position:center}

/* indiana in the news */
.cicp-press{background:linear-gradient(120deg,#194787,#194787 60%,#0C79B5);color:#fff;position:relative;overflow:hidden}
.cicp-press::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(90,150,255,.18),transparent 55%);pointer-events:none}
.cicp-press .cicp-wrap{position:relative;z-index:1}
.cicp-press h2{color:#fff}
.cicp-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cicp-pcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--cicp-radius-card);padding:22px 20px;transition:.2s}
.cicp-pcard:hover{background:rgba(255,255,255,.11);transform:translateY(-3px)}
.cicp-pcard .d{font-family:var(--font-label);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;color:#8fb4ff}
.cicp-pcard h3{color:#fff;font-size:15px;font-weight:600;margin-top:9px;line-height:1.4;font-family:var(--font-head)}

/* white text on dark sections — win over the active theme's global heading color */
.cicp-hero h1{color:#fff!important}
.cicp-hero p{color:#eaf1ff!important}
/* …but the white featured card is on white — keep its text dark and readable */
.cicp-hero .cicp-hcard .c p{color:var(--cicp-ink)!important}
.cicp-projects h2,.cicp-projects h3{color:#fff!important}
.cicp-projects p{color:#c9d6ff!important}
.cicp-press h2,.cicp-pcard h3{color:#fff!important}
.cicp-inai .t b{color:#fff!important}

@media(max-width:920px){
  .cicp-hero__in,.cicp-impact__in,.cicp-ppanel{grid-template-columns:1fr}
  .cicp-hero__in>div:last-child{width:100%;justify-self:stretch}
  .cicp-hero h1{font-size:38px}
  .cicp-itabs,.cicp-ptabs{
    overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;
    padding-left:16px;padding-right:16px;scroll-padding-inline:16px}
  .cicp-itabs::-webkit-scrollbar,.cicp-ptabs::-webkit-scrollbar{display:none}
  .cicp-itabs button,.cicp-ptabs button{flex:0 0 auto;padding:16px 18px;font-size:14px}

  /* Fade the edge that has more tabs beyond it, so the strip reads as scrollable.
     The mask is on the scroll container, so it stays put while the tabs move.
     Classes are set by the script in home-sections.php (both ends, start, end). */
  .cicp-tabscroll--both{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
                                mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
  .cicp-tabscroll--end{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
                               mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%)}
  .cicp-tabscroll--start{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px);
                                 mask-image:linear-gradient(to right,transparent 0,#000 28px)}
  .cicp-initband{min-height:auto;background:#FAFAFA}.cicp-initband .inner{padding:34px 24px}.cicp-itxt{max-width:100%}
  .cicp-initbg{position:relative;inset:auto;height:180px;order:-1}.cicp-initband::after{display:none}
  .cicp-statrow{grid-template-columns:1fr}
  .cicp-rail{grid-auto-columns:80%}
  .cicp-pgrid{grid-template-columns:1fr 1fr}
  .cicp-inai{flex-direction:column;text-align:center}
}

/* anchor target for the hero's "Our Impact" button (clears the sticky header) */
.cicp-impact{scroll-margin-top:88px}

/* "View More" now sits centred beneath the News and Studies/Reports rails, on every
   breakpoint. The rail carries a -52px bottom margin (it reserves that space inside
   its scroll box for the cards' hover shadow), so this margin-top measures from the
   bottom of the cards, not the bottom of the padded scroll box. */
.cicp-rail-more{display:flex;justify-content:center;margin-top:28px}