/* ===========================================================================
   Hydropath Insights — front-end styles
   Scoped under .hins-* classes so nothing bleeds into the rest of the theme.
   Colours match the case-study / prototype palette.
   =========================================================================== */

: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);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.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
   =========================================================================== */
.hins-archive{max-width:1180px;margin:0 auto}
.hins-archive-title{font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--hins-ink);margin:0 0 24px}

/* filter bar: pills on the left, search pushed to the right */
.hins-filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 34px;padding:0 0 20px;border-bottom:1px solid var(--hins-line)}
.hins-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.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)}

/* search */
.hins-search-wrap{position:relative;margin-left:auto;min-width:240px}
.hins-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--hins-muted);pointer-events:none}
.hins-search{width:100%;font-family:inherit;font-size:13px;font-weight:500;color:var(--hins-ink);background:#fff;border:1px solid var(--hins-line);border-radius:100px;padding:9px 34px 9px 38px;transition:border-color .15s,box-shadow .15s;line-height:1.3}
.hins-search::placeholder{color:var(--hins-muted)}
.hins-search:hover{border-color:var(--hins-light)}
.hins-search:focus{outline:none;border-color:var(--hins-blue);box-shadow:0 0 0 3px rgba(0,114,206,.12)}
.hins-search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.hins-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:0;font-size:18px;line-height:1;color:var(--hins-muted);cursor:pointer;padding:2px 7px;border-radius:50%;transition:.15s}
.hins-search-clear:hover{color:var(--hins-ink);background:var(--hins-bg)}
.hins-search-clear[hidden]{display:none}

/* featured */
.hins-featured{display:grid;grid-template-columns:1.4fr 1fr;border-radius:16px;overflow:hidden;box-shadow:var(--hins-shadow);background:#fff;border:1px solid var(--hins-line);margin:0 0 38px;text-decoration:none;color:inherit;transition:.18s}
.hins-featured:hover{box-shadow:var(--hins-shadow-h);border-color:transparent}
.hins-featured-image{position:relative;min-height:320px;overflow:hidden;background:linear-gradient(135deg,#0a2540,var(--hins-blue))}
.hins-featured-image--placeholder{background:linear-gradient(135deg,#0a2540,var(--hins-blue) 60%,var(--hins-teal))}
.hins-featured-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hins-featured:hover .hins-featured-img{transform:scale(1.04)}
.hins-featured-image::after{content:"FEATURED";position:absolute;top:18px;left:18px;background:rgba(255,255,255,.94);color:var(--hins-navy);font-size:11px;font-weight:800;letter-spacing:.12em;padding:6px 12px;border-radius:100px;z-index:2}
.hins-featured-body{padding:34px;display:flex;flex-direction:column}
.hins-featured-meta{display:flex;flex-wrap:wrap;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}

/* grid */
.hins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:8px 0 40px}
.hins-card{background:#fff;border:1px solid var(--hins-line);border-radius:16px;overflow:hidden;box-shadow:var(--hins-shadow);transition:.25s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;text-decoration:none;color:inherit}
.hins-card:hover{transform:translateY(-6px);box-shadow:var(--hins-shadow-h);border-color:transparent}

/* card image (real featured photo, soft fallback) + topic chip */
.hins-card-image{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#eaf3fb,#cfe6fa)}
.hins-card-image--placeholder{background:linear-gradient(135deg,#eaf3fb,#bfe0fa 60%,#d4eef5)}
.hins-card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hins-card:hover .hins-card-img{transform:scale(1.05)}
/* Fallback for browsers without aspect-ratio (Safari < 15): use a padding box. */
@supports not (aspect-ratio: 1 / 1){
  .hins-card-image{height:0;padding-bottom:62.5%}
  .hins-card-image .hins-card-img{position:absolute;inset:0}
}
.hins-card-chip{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--hins-blue);padding:5px 11px;border-radius:100px;box-shadow:0 4px 12px rgba(0,114,206,.35);max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:2}

.hins-card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.hins-card-readtime{display:block;font-size:12px;font-weight:600;color:var(--hins-muted);margin-bottom:8px}
.hins-card-title{display:block;font-size:20px;line-height:1.3;font-weight:700;margin-bottom:10px;letter-spacing:-.015em;color:var(--hins-navy)}
.hins-card:hover .hins-card-title{color:var(--hins-blue)}
.hins-card-excerpt{display:block;font-size:14.5px;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,.hins-stats>p{grid-column:1/-1;margin:0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hins-muted)}
.hins-stat{min-width:0}
.hins-stat-num{font-size:26px;font-weight:800;color:var(--hins-blue);letter-spacing:-.02em;line-height:1.15;overflow-wrap:break-word}
.hins-stat-desc{font-size:14px;color:var(--hins-muted);margin-top:4px;line-height:1.45}

/* 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:17px;margin-bottom:3px;color:var(--hins-ink)}
.hins-li-body span{font-size:15px;color:var(--hins-muted);line-height:1.55}
.hins-li-solo{font-size:17px !important;color:var(--hins-body) !important}
/* per-style marker colours */
.hins-list--cross .hins-mark{background:#b04a4a}      /* drawback — muted red */
.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 — TOC + 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}
/* Defensive: these shortcodes (grid, related, toc, cta, body blocks) are often
   placed in Divi *Code* modules, whose contents inherit Courier New +
   white-space:pre. That monospaces the text, stops titles/excerpts wrapping,
   and renders the template's indentation as visible gaps (e.g. a blue band
   above card images). Force the theme font + normal whitespace on every
   Insights front-end block so it renders correctly in Code OR Text modules. */
.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 elements from wrapping */
.hins-card-chip,.hins-tag,.hins-pill,.hins-read,.hins-card-readtime,.hins-date{white-space:nowrap}
.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 heading spacing handled by Divi; grid reuses card styles */
.hins-grid--related{margin-top:0}

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

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:980px){
  .hins-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .hins-featured{grid-template-columns:1fr}
  .hins-featured-image{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}
  .hins-search-wrap{margin-left:0;min-width:0;width:100%}
}