/* ============================================================
   CCSPP ELEMENTS — component styles for the custom builder elements.
   Consumes design tokens from the yootheme_child foundation
   (--cc-*). Fallback values are inlined so the elements still render
   if the foundation is loaded some other way.
   ============================================================ */

.ccspp-el{
  --_azure-950:var(--cc-azure-950,#0B2534);
  --_azure-900:var(--cc-azure-900,#0E2E40);
  --_azure-800:var(--cc-azure-800,#15425B);
  --_azure-700:var(--cc-azure-700,#1B5474);
  --_azure-600:var(--cc-azure-600,#21688F);
  --_azure-500:var(--cc-azure-500,#2E7FAD);
  --_azure-50:var(--cc-azure-50,#EEF5FA);
  --_gold:var(--cc-gold-500,#E3A63C);
  --_ink:var(--cc-ink-900,#1E2A32);
  --_ink-600:var(--cc-ink-600,#4A5A64);
  --_line:var(--cc-line,#E3EAEF);
  --_mist:var(--cc-mist,#F5F8FA);
  --_paper:var(--cc-paper,#fff);
  --_radius:var(--cc-radius,12px);
  --_shadow:var(--cc-shadow-card,0 2px 6px rgba(14,46,64,.06), 0 10px 28px rgba(14,46,64,.10));
  --_shadow-hover:var(--cc-shadow-card-hover,0 4px 10px rgba(14,46,64,.08), 0 18px 44px rgba(14,46,64,.16));
  color:var(--_ink);
}
.ccspp-el *{ box-sizing:border-box; }

/* ============================================================
   1 · HORIZONTAL LIST CARDS
   ============================================================ */
.cc-list-cards{ display:flex; flex-direction:column; gap:1rem; }
.cc-list-card{
  display:flex; align-items:center; gap:1.25rem; text-decoration:none;
  background:var(--_paper); border-radius:var(--_radius); box-shadow:var(--_shadow);
  padding:1.1rem 1.35rem; transition:transform .2s ease, box-shadow .2s ease;
}
a.cc-list-card:hover,
a.cc-list-card:focus{ transform:translateX(4px); box-shadow:var(--_shadow-hover); }
.cc-list-card:focus-visible{ outline:3px solid var(--_azure-500); outline-offset:3px; }
.cc-list-card .cc-thumb{ width:76px; height:76px; flex:none; border-radius:10px; overflow:hidden; background:var(--_mist); }
.cc-list-card .cc-thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.2); display:block; }
.cc-list-card .cc-body{ min-width:0; }
.cc-list-card .cc-title{ color:var(--_azure-800); font-size:1.05rem; font-weight:700; display:block; line-height:1.3; }
.cc-list-card .cc-sub{ font-size:.875rem; color:var(--_ink-600); display:block; margin-top:.15rem; }
.cc-list-card .cc-arrow{ margin-left:auto; color:var(--_gold); font-weight:800; font-size:1.25rem; flex:none; }

/* ============================================================
   2 · STAT CALLOUT
   ============================================================ */
.cc-stat-callout{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.75rem;
  background:linear-gradient(120deg, var(--_azure-900), var(--_azure-800)); color:#fff;
  border-radius:var(--_radius); box-shadow:var(--_shadow);
  padding:clamp(1.75rem,4vw,2.75rem); border-left:6px solid var(--_gold);
}
.cc-stat-callout .cc-big{ font-size:clamp(3rem, 2.4rem + 2.6vw, 4.5rem); line-height:1; color:var(--_gold); }
.cc-stat-callout .cc-txt b{ display:block; font-size:1.25rem; margin-bottom:.3rem; }
.cc-stat-callout .cc-txt span{ color:rgba(255,255,255,.82); font-size:.9375rem; max-width:40em; display:block; }

/* ============================================================
   3 · CRISIS BAND
   ============================================================ */
.cc-crisis-band{
  background:var(--_azure-950); color:#fff; border-radius:var(--_radius); box-shadow:var(--_shadow);
  padding:.9rem 1.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.25rem;
}
.cc-crisis-band .cc-msg{ font-weight:600; font-size:.9375rem; }
.cc-crisis-band .cc-msg span{ display:block; font-weight:400; color:rgba(255,255,255,.7); font-size:.8125rem; }
/* actions grouped and pushed right; the 988 logo sits at the far right end after them */
.cc-crisis-band .cc-crisis-actions{ margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; }
.cc-crisis-band .cc-crisis-actions .uk-button{ padding:.55rem 1.05rem !important; font-size:.875rem !important; }
.cc-crisis-band .cc-crisis-logo{ flex:none; display:inline-flex; align-items:center; }
.cc-crisis-band .cc-crisis-logo img{ height:34px; width:auto; }
/* Docked state: once the sticky band pins to the top, expand it to a full-width
   Azure Night bar (overriding uk-sticky's inline width). Content stays centered
   to ~1200px via padding, so the bar spans edge-to-edge but the text/buttons
   don't drift on very wide screens. */
.cc-crisis-band.uk-sticky-fixed{
  width:100% !important;
  max-width:none !important;
  left:0 !important;
  right:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  padding-left:max(1.5rem, calc((100% - 1200px) / 2)) !important;
  padding-right:max(1.5rem, calc((100% - 1200px) / 2)) !important;
}

/* Tablet & mobile: full-width, square corners, message on its own line. */
@media (max-width:820px){
  .cc-crisis-band{ border-radius:0; }
  .cc-crisis-band .cc-msg{ width:100%; }
  .cc-crisis-band .cc-crisis-actions{ margin-left:0; }
}
/* Phones: keep the three action buttons on ONE line so the bar stays short,
   and trim the side padding (the desktop 40px min would crowd the buttons). */
@media (max-width:640px){
  .cc-crisis-band{ padding-left:1.25rem !important; padding-right:1.25rem !important; }
  .cc-crisis-band .cc-crisis-actions{ margin-left:0; flex-wrap:nowrap; gap:.35rem; width:100%; }
  .cc-crisis-band .cc-crisis-actions .uk-button{ padding:.38rem .5rem !important; font-size:.7rem !important; flex:0 1 auto; white-space:nowrap; }
  .cc-crisis-band .cc-crisis-logo{ display:none; }  /* keep the bar short on phones */
}

/* ============================================================
   4 · GET HELP / HUMAN NEEDS CARDS
   ============================================================ */
.cc-needs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.cc-needs-lockup{ margin-bottom:1.25rem; }
.cc-needs-lockup img{ max-height:64px; width:auto; }
.cc-needs-frame > p.cc-needs-intro{ font-size:1.05rem; color:var(--_ink-600); margin:0 0 1.25rem; }
.cc-needs-card{
  background:var(--_paper); border-radius:var(--_radius); box-shadow:var(--_shadow);
  padding:1.75rem; position:relative; min-height:250px; display:flex; flex-direction:column;
}
.cc-needs-card .cc-num{ font-size:2rem; color:var(--_azure-800); line-height:1; font-weight:700; }
.cc-needs-card .cc-what{ font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--_ink-600); margin-top:.2rem; }
.cc-needs-card ul{ margin:1rem 0 3rem 1.1rem; padding:0; font-size:.9375rem; color:var(--_ink-600); }
.cc-needs-card ul li{ margin:.35rem 0; }
.cc-needs-card .cc-logo-corner{ position:absolute; right:1.25rem; bottom:1.1rem; }
.cc-needs-card .cc-logo-corner img{ height:44px; width:auto; }

/* ============================================================
   5 · SPLIT CALLOUT (event + spotlight variants)
   Photo panel stays 100% untouched; text lives on solid azure.
   ============================================================ */
.cc-split{
  display:grid; grid-template-columns:minmax(260px,2fr) 3fr;
  border-radius:var(--_radius); overflow:hidden; box-shadow:var(--_shadow);
  color:#fff;
}
.cc-split.cc-split--photo-right{ direction:rtl; }
.cc-split.cc-split--photo-right > *{ direction:ltr; }
.cc-split .cc-photo{ position:relative; min-height:280px; }
.cc-split .cc-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cc-split .cc-content{
  background:linear-gradient(135deg, var(--_azure-900), var(--_azure-800));
  padding:clamp(1.75rem,4vw,2.5rem); border-left:6px solid var(--_gold);
  display:flex; flex-direction:column; justify-content:center;   /* center content in the panel */
}
.cc-split.cc-split--photo-right .cc-content{ border-left:0; border-right:6px solid var(--_gold); }
.cc-split .cc-kicker{ font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--_gold); margin-bottom:.4rem; }
.cc-split .cc-title{ font-size:clamp(1.5rem, 1.3rem + 1vw, 2rem); display:block; margin-bottom:.5rem; line-height:1.15; }
/* Fill the content panel so the body aligns with the title's right edge
   (the panel width is already bounded by the 3fr grid column, so no extra
   measure cap is needed — a 40em cap left an uneven left-clustered gap). */
.cc-split .cc-text{ color:rgba(255,255,255,.85); font-size:.9375rem; max-width:none; }
.cc-split .cc-text p{ margin:0 0 .5rem; }
.cc-split .cc-cta-row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1.5rem; }

/* countdown — always a single horizontal row (never stacked) */
.cc-count{ display:flex; gap:.6rem; margin:1.35rem 0 .25rem; flex-wrap:nowrap; overflow-x:auto; }
.cc-count .cc-count-values{ display:contents; }
.cc-count .cc-unit{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:.6rem .8rem; text-align:center; min-width:56px; flex:0 0 auto; }
.cc-count .cc-unit b{ font-size:1.35rem; display:block; color:var(--_gold); font-variant-numeric:tabular-nums; line-height:1.1; }
.cc-count .cc-unit span{ font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.cc-count.cc-count--ended{ overflow:visible; }
.cc-count.cc-count--ended b{ font-size:1rem; }

/* highlight box (info callout inside the content panel) */
.cc-highlight{ display:inline-block; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:.7rem 1.1rem; margin:1.25rem 0 .25rem; }
.cc-highlight b{ display:block; font-size:.9375rem; color:#fff; }
.cc-highlight span{ font-size:.8125rem; color:rgba(255,255,255,.72); }

@media (max-width:700px){
  .cc-split{ grid-template-columns:1fr; }
  .cc-split.cc-split--photo-right{ direction:ltr; }
  .cc-split .cc-photo{ min-height:220px; }
}

@media (prefers-reduced-motion: reduce){
  .cc-list-card{ transition:none; }
}