/* =========================================================================
   Matrix Insight Core — styles for everything the plugin renders and for
   the block patterns. Loads after the theme stylesheet and reuses its
   colour variables, so Customizer changes apply here too.
   ========================================================================= */

/* ---- Compact hero used by inner pages ---- */
.mi-hero-compact .mi-hero-copy{padding:60px 0 50px;max-width:820px}
.mi-hero-compact h1{font-size:clamp(30px,4.2vw,50px);line-height:1.06;margin:0 0 16px;font-weight:800}
.mi-hero-compact p{font-size:clamp(16px,1.6vw,19px);color:#4c6587;margin:0 0 20px}

/* ---- Pattern column grids ---------------------------------------------
   Block patterns use core Columns. These rules give the cards equal height
   and the right gap without fighting the editor.
   ---------------------------------------------------------------------- */
.mi-grid-cols.wp-block-columns,
.mi-two-col.wp-block-columns,
.mi-contact-cols.wp-block-columns{gap:18px;margin-bottom:18px}
.mi-grid-cols.wp-block-columns:last-child{margin-bottom:0}
.mi-grid-cols > .wp-block-column{display:flex;flex-direction:column}
.mi-grid-cols > .wp-block-column > *{flex:1}

.mi-two-col.wp-block-columns{gap:44px;align-items:center}
.mi-contact-cols.wp-block-columns{gap:28px;align-items:start}
.mi-contact-cols .mi-side-card{margin-bottom:18px}

.mi-rounded img{border-radius:var(--mi-radius)}

/* Cards built from blocks --------------------------------------------- */
.mi-feature-card > p.mi-feature-icon{
  width:50px;height:50px;border-radius:12px;background:#e9f3ff;color:var(--mi-blue);
  display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;
  margin:0 0 14px
}
.mi-feature-card > h3{margin:0 0 8px;font-size:19px}
.mi-feature-card > p:not(.mi-feature-icon){margin:0;color:var(--mi-muted);font-size:15px}

.mi-step-card > p.mi-step-number{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:var(--mi-blue);color:#fff;font-weight:800;margin:0 0 14px
}
.mi-step-card > h3{margin:0 0 6px;font-size:18px}
.mi-step-card > p:not(.mi-step-number){margin:0;color:var(--mi-muted);font-size:15px}

.mi-stat > p:first-child{margin:0 0 6px}
.mi-stat > p:first-child strong{display:block;font-size:26px;color:var(--mi-navy);line-height:1.15;font-weight:800}
.mi-stat > p:last-child{margin:0;color:var(--mi-muted);font-size:14px}

/* Section pieces built from blocks ------------------------------------- */
.mi-cta .mi-cta-copy h2,.mi-cta .mi-cta-copy p{color:#fff}
.mi-cta .mi-cta-copy{margin:0}
.mi-cta .wp-block-buttons .wp-block-button__link{background:#fff;color:var(--mi-blue);border-color:#fff}
.mi-newsletter .mi-newsletter-copy{margin:0}
.mi-insights-col{min-width:0}

/* ---- Project metrics -------------------------------------------------- */
.mi-project-metrics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin:0 0 16px;padding:14px 0 0;border-top:1px solid var(--mi-line)
}
.mi-project-metrics div{text-align:left}
.mi-project-metrics strong{
  display:block;font-size:18px;color:var(--mi-blue);font-weight:800;line-height:1.1
}
.mi-project-metrics span{display:block;font-size:11px;color:var(--mi-muted);margin-top:3px;line-height:1.25}

/* ---- Projects toolbar ------------------------------------------------- */
.mi-projects-toolbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:26px
}
.mi-projects-toolbar .mi-insight-filters{flex:1 1 420px}
.mi-projects-toolbar .mi-insight-search{flex:0 0 280px;width:auto}
.mi-insight-filters a span{opacity:.6;font-weight:600}

/* ---- Sidebar topic pills with counts ---------------------------------- */
.mi-topic-links a{display:inline-flex;align-items:center;gap:7px}
.mi-topic-links a b{
  background:#dce9fa;color:var(--mi-blue);border-radius:999px;
  padding:1px 7px;font-size:11px;font-weight:800
}
.mi-topic-links a:hover b{background:rgba(255,255,255,.28);color:#fff}

/* ---- Popular insights inner wrapper ----------------------------------- */
.mi-popular-insight > span{display:block;min-width:0}

/* ---- Contact form ----------------------------------------------------- */
.mi-contact-form{
  background:#fff;border:1px solid var(--mi-line);border-radius:var(--mi-radius);
  padding:26px;box-shadow:var(--mi-shadow-sm)
}
.mi-contact-form label{display:block;margin:0 0 16px}
.mi-contact-form label > span{
  display:block;font-size:13px;font-weight:700;color:var(--mi-navy);margin-bottom:6px
}
.mi-contact-form input,.mi-contact-form select,.mi-contact-form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--mi-line);border-radius:9px;
  font:inherit;background:#fff;color:var(--mi-text)
}
.mi-contact-form input:focus,.mi-contact-form select:focus,.mi-contact-form textarea:focus{
  outline:none;border-color:var(--mi-blue);box-shadow:0 0 0 3px rgba(18,104,232,.14)
}
.mi-contact-form textarea{resize:vertical}
.mi-contact-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mi-contact-form button[type="submit"]{width:100%;margin-top:4px}
.mi-form-note{font-size:12px;color:var(--mi-muted);text-align:center;margin:12px 0 0}
.mi-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}

.mi-contact-alert{border-radius:10px;padding:14px 16px;margin-bottom:18px;font-size:15px}
.mi-contact-alert strong{display:block;margin-bottom:3px}
.mi-contact-alert.is-success{background:#e4f6ea;border:1px solid #bfe4cc;color:#22633a}
.mi-contact-alert.is-error{background:#fdecec;border:1px solid #f5c2c2;color:#a32626}

/* ---- Newsletter form (rendered as raw HTML inside a pattern) ---------- */
.mi-newsletter-form input{min-width:0}

/* ---- Empty states ----------------------------------------------------- */
.mi-empty h3{margin:0 0 6px;font-size:20px}

/* ---- Responsive ------------------------------------------------------- */
@media(max-width:781px){
  /* Core stacks columns here; keep the spacing tidy. */
  .mi-grid-cols.wp-block-columns,
  .mi-two-col.wp-block-columns,
  .mi-contact-cols.wp-block-columns{gap:14px}
  .mi-two-col.wp-block-columns{gap:26px}
}
@media(max-width:640px){
  .mi-hero-compact .mi-hero-copy{padding:40px 0 32px}
  .mi-contact-row{grid-template-columns:1fr}
  .mi-projects-toolbar{flex-direction:column}
  .mi-projects-toolbar .mi-insight-search{flex:1 1 auto;width:100%}
  .mi-project-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .mi-project-metrics strong{font-size:16px}
  .mi-contact-form{padding:20px}
}

/* =========================================================================
   Side-by-side layouts: cancel WordPress's automatic block gap.

   WordPress adds a top margin to every block inside a group except the
   first one. That is right for blocks stacked vertically, but in a row of
   cards it pushes cards 2, 3, 4… down while card 1 stays up, so the first
   card looks bigger. These rows use their own CSS `gap`, so the children
   need no margin at all. !important is used because WordPress prints its
   rule separately and its position in the page can vary.
   ========================================================================= */
.mi-hero-inner > *,
.mi-cta-inner > *,
.mi-newsletter-inner > *,
.mi-insights-layout > *,
.mi-buttons > *,
.mi-founder-hero-grid > *,
.mi-founder-actions > *,
.mi-founder-about > *,
.mi-founder-head > *,
.mi-stats-panel > *,
.mi-cards > *,
.mi-think > *,
.mi-flow > *,
.mi-flow-item > *,
.mi-tools > *,
.mi-tool > *,
.mi-founder-history > *,
.mi-tl-item > *,
.mi-edu-item > *,
.mi-lang-list > *,
.mi-cert-track > *,
.mi-cert > *,
.mi-founder-cta > *{
  margin-block-start:0!important;
  margin-top:0!important
}