/* =============================================================================
   Hydropath Insights v2 — front-end styles
   All rules scoped under .hins-* so nothing leaks into the rest of the theme.
   Palette intentionally matches the case-study plugin / prototype.
   ============================================================================= */

:root{
  --hins-navy:#0a2540;
  --hins-navy2:#0e3a63;
  --hins-blue:#0072ce;
  --hins-blue-d:#005bb0;
  --hins-teal:#00a3a3;
  --hins-ink:#1c2733;
  --hins-body:#33424f;
  --hins-muted:#5b6b7b;
  --hins-line:#e3e8ee;
  --hins-bg:#f5f8fb;
  --hins-light:#7ec5ff;
  --hins-radius:10px;
  --hins-shadow:0 2px 4px rgba(10,37,64,.04),0 8px 24px rgba(10,37,64,.06);
  --hins-shadow-h:0 4px 8px rgba(10,37,64,.06),0 16px 40px rgba(10,37,64,.12);
}

/* ---------- shared atoms ---------- */
.hins-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hins-blue);background:rgba(0,114,206,.08);padding:5px 10px;border-radius:100px;border:1px solid rgba(0,114,206,.15)}
.hins-date{font-size:12px;color:var(--hins-muted)}
.hins-read{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--hins-blue);text-decoration:none}
.hins-read::after{content:"→";transition:transform .15s}
.hins-card:hover .hins-read::after,.hins-featured:hover .hins-read::after{transform:translateX(4px)}

/* =============================================================================
   ARCHIVE — [insights_grid]
   ============================================================================= */
.hins-archive{max-width:1180px;margin:0 auto}

.hins-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px}
.hins-pill{font-size:13px;font-weight:600;padding:8px 16px;border-radius:100px;border:1px solid var(--hins-line);color:var(--hins-muted);background:#fff;cursor:pointer;transition:.15s;font-family:inherit}
.hins-pill:hover{border-color:var(--hins-blue);color:var(--hins-blue)}
.hins-pill.is-active{background:var(--hins-blue);color:#fff;border-color:var(--hins-blue)}

/* featured card */
.hins-featured{display:grid;grid-template-columns:1.4fr 1fr;border-radius:var(--hins-radius);overflow:hidden;box-shadow:var(--hins-shadow);background:#fff;margin:0 0 38px;text-decoration:none;color:inherit;transition:.18s}
.hins-featured:hover{box-shadow:var(--hins-shadow-h)}
.hins-featured-img{display:block;min-height:300px;position:relative;background:linear-gradient(135deg,var(--hins-blue),var(--hins-teal))}
.hins-featured-img::after{content:"FEATURED";position:absolute;top:18px;left:18px;background:rgba(255,255,255,.92);color:var(--hins-navy);font-size:11px;font-weight:800;letter-spacing:.12em;padding:6px 12px;border-radius:100px}
.hins-featured-body{padding:34px;display:flex;flex-direction:column}
.hins-featured-meta{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.hins-featured-title{display:block;font-size:27px;line-height:1.2;font-weight:800;letter-spacing:-.01em;margin-bottom:12px;color:var(--hins-ink)}
.hins-featured-excerpt{display:block;color:var(--hins-muted);margin-bottom:20px;font-size:15px;line-height:1.6}

/* card grid */
.hins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:8px 0 36px}
.hins-card{background:#fff;border:1px solid var(--hins-line);border-radius:var(--hins-radius);overflow:hidden;box-shadow:var(--hins-shadow);transition:.18s;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.hins-card:hover{transform:translateY(-4px);box-shadow:var(--hins-shadow-h);border-color:transparent}
.hins-card-thumb{display:block;height:160px;background:linear-gradient(135deg,#103a63,var(--hins-blue))}
.hins-card-body{padding:20px;display:flex;flex-direction:column;flex:1}
.hins-card-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.hins-card-title{display:block;font-size:17px;line-height:1.3;font-weight:700;margin-bottom:9px;letter-spacing:-.01em;color:var(--hins-ink)}
.hins-card-excerpt{display:block;font-size:14px;color:var(--hins-muted);margin-bottom:16px;flex:1;line-height:1.55}
.hins-card .hins-read{margin-top:auto}

.hins-loadmore-wrap{text-align:center;margin:8px 0 40px}
.hins-loadmore{font-size:14px;font-weight:700;color:#fff;background:var(--hins-blue);border:none;border-radius:8px;padding:12px 28px;cursor:pointer;transition:.15s;font-family:inherit}
.hins-loadmore:hover{background:var(--hins-navy)}
.hins-loadmore[hidden]{display:none}
.hins-empty{color:var(--hins-muted);grid-column:1/-1;padding:30px 0}

/* =============================================================================
   BODY BLOCKS (inside post content)
   ============================================================================= */

/* lead */
.hins-lead{font-size:20px !important;line-height:1.6 !important;color:var(--hins-ink) !important;font-weight:500 !important;margin-bottom:22px !important}

/* stats strip */
.hins-stats{background:var(--hins-bg);border:1px solid var(--hins-line);border-left:4px solid var(--hins-blue);border-radius:var(--hins-radius);padding:22px 26px;margin:26px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hins-stat-label{grid-column:1/-1;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hins-muted)}
.hins-stat-num{font-size:28px;font-weight:800;color:var(--hins-blue);letter-spacing:-.02em;line-height:1.1}
.hins-stat-desc{font-size:13px;color:var(--hins-muted);margin-top:4px;line-height:1.4}

/* marker lists */
.hins-list{list-style:none !important;margin:22px 0 !important;padding:0 !important}
.hins-list li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--hins-line);margin:0 !important}
.hins-list li:last-child{border-bottom:none}
.hins-mark{flex:none;width:26px;height:26px;border-radius:50%;background:var(--hins-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-top:2px;line-height:1}
.hins-li-body strong{display:block;font-size:16px;margin-bottom:2px;color:var(--hins-ink)}
.hins-li-body span{font-size:14px;color:var(--hins-muted);line-height:1.5}
.hins-li-solo{font-size:16px !important;color:var(--hins-body) !important}
/* per-style marker colour overrides */
.hins-list--cross .hins-mark{background:#b04a4a}
.hins-list--dash  .hins-mark{background:var(--hins-muted)}
.hins-list--star  .hins-mark{background:var(--hins-teal)}

/* pull quote */
.hins-quote{border-left:4px solid var(--hins-teal) !important;background:rgba(0,163,163,.04) !important;padding:16px 22px !important;margin:24px 0 !important;font-size:18px !important;font-style:italic;color:#2a3742 !important;border-radius:0 var(--hins-radius) var(--hins-radius) 0 !important}
.hins-cite{display:block;margin-top:10px;font-size:13px;font-style:normal;font-weight:700;color:var(--hins-muted)}

/* =============================================================================
   SIDEBAR — [insight_toc] + [insight_cta]
   ============================================================================= */
.hins-toc{background:#fff;border:1px solid var(--hins-line);border-radius:var(--hins-radius);padding:20px;box-shadow:var(--hins-shadow);margin-bottom:20px}
.hins-toc h4{font-size:12px !important;letter-spacing:.12em;text-transform:uppercase;color:var(--hins-muted);margin:0 0 12px !important;font-weight:800}
.hins-toc nav{display:flex;flex-direction:column}
.hins-toc a{font-size:14px;color:var(--hins-muted);text-decoration:none;padding:7px 0 7px 14px;border-left:2px solid var(--hins-line);transition:.12s}
.hins-toc a:hover{color:var(--hins-blue)}
.hins-toc a.is-active{color:var(--hins-blue);border-left-color:var(--hins-blue);font-weight:600}

.hins-cta{background:linear-gradient(160deg,var(--hins-navy),var(--hins-navy2));border-radius:var(--hins-radius);padding:22px;box-shadow:var(--hins-shadow);color:#fff}
.hins-cta-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hins-light);margin-bottom:8px}
.hins-cta-title{display:block;font-size:16px;line-height:1.3;margin-bottom:8px;color:#fff}
.hins-cta-sub{font-size:13px;color:#c3d4e6;margin:0 0 16px}
.hins-cta-btn{display:inline-block;background:var(--hins-blue);color:#fff;font-size:14px;font-weight:700;text-decoration:none;padding:11px 20px;border-radius:8px;transition:.15s}
.hins-cta-btn:hover{background:#fff;color:var(--hins-navy)}

/* related grid reuses card styles */
.hins-grid--related{margin-top:0}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width:980px){
  .hins-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .hins-featured{grid-template-columns:1fr}
  .hins-featured-img{min-height:200px}
  .hins-stats{grid-template-columns:1fr}
  .hins-featured-title{font-size:23px}
}
@media (max-width:560px){
  .hins-grid{grid-template-columns:1fr}
}

/* ===========================================================================
   FIXES — Divi Code-module rendering + stats-strip row alignment
   (Code modules make their contents inherit Courier New + white-space:pre,
   which monospaces the card text, stops titles/excerpts wrapping, and breaks
   the stats label. Force the theme font + normal wrapping on the plugin's
   blocks, and make the stats label span the full width.)
   =========================================================================== */
.hins-archive,.hins-archive *,
.hins-featured,.hins-featured *,
.hins-grid,.hins-grid *,
.hins-cta,.hins-cta *,
.hins-toc,.hins-toc *,
.hins-stats,.hins-stats *,
.hins-list,.hins-list *,
.hins-quote,.hins-quote *,
.hins-lead{
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  white-space:normal;
}
/* keep genuinely single-line bits on one line */
.hins-card-chip,.hins-tag,.hins-pill,.hins-read,.hins-card-readtime,.hins-date{white-space:nowrap}
/* WordPress wraps the stats label in a <p>; make it span all columns so the
   three stats line up instead of becoming a stray cell. */
.hins-stats>p,.hins-stat-label{grid-column:1/-1;margin:0}
.hins-stat{min-width:0}
.hins-stat-num{overflow-wrap:break-word}

/* ---------- Sticky sidebar (desktop only) ----------
   insights.js adds .hins-sticky-col to the Divi column holding the TOC + CTA.
   Pin it below the header at desktop widths; it scrolls normally on <=980px. */
@media (min-width:981px){
  .et_pb_column.hins-sticky-col{
    position:-webkit-sticky;position:sticky;top:90px;
    align-self:flex-start;height:auto !important;
  }
}