/* LocalX — cards 
   Onderdeel van de ForwardX Eleventy-structuur. Alle waarden via var(--naam). */

/* ---------- Uitleg: 01 / 02 / 03 ---------- */

.explain .section-head { max-width: 708px; }

.explain h2,
.section-head h2 {
  font-size: var(--fs-section-h);
  line-height: 1.1em;
  letter-spacing: normal;
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  padding: var(--gutter);
  background-color: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 25px;
}

.info-card p.info-card__num {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: 50px;
  font-weight: 900;
  line-height: 1.1em;
}

.info-card h3 {
  font-size: var(--fs-card-h);
  line-height: 1.1em;
  letter-spacing: normal;
}

.info-card p {
  margin: 0 0 0.8em;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
}

/* Zelfde lege slotalinea als bij de statistieken: ruimte overgenomen als CSS. */
.info-card--spaced > p:last-child { margin-bottom: var(--empty-p); }

.info-card strong { font-weight: 700; }
.info-card em { font-style: italic; }

/* ------------------------------------------------------------
   Kaart met icoon erboven (Elementor icon-box, view "stacked").
   Het origineel zet het icoon in een oranje cirkel van 59px met
   15px padding; de svg is 29px. De wrapper heeft 15px tussenruimte
   en de kop een eigen marge van 8px boven en 16px onder.
   ------------------------------------------------------------ */

.info-card--icon { gap: 15px; }

.step-icon {
  display: inline-block;
  width: 59px;
  height: 59px;
  padding: 15px;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--bg-page);
}
.step-icon svg { display: block; width: 29px; height: 29px; fill: currentColor; }

.info-card--icon h3 { margin: 8px 0 16px; }
.info-card--icon p  { margin: 0; }

@media (max-width: 1024px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .stats__grid { grid-template-columns: 1fr; }
  .branches { gap: 10px; padding: 24px var(--section-x); }
}


/* ---------- Centraal beheer ---------- */

.manage__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
}

.manage__col { flex: 1 1 585px; max-width: 585px; }

/* Lege kolom uit het origineel: reserveert de rechterhelft. */
.manage__visual { flex: 1 1 585px; max-width: 585px; }
.manage__visual img { width: 100%; height: 577px; object-fit: cover; border-radius: 25px; }

.manage__intro {
  /* Slotruimte uit het origineel (lege alinea in de bron). */
  margin: 0 0 var(--empty-p);
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
}

.manage__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;   /* beide rijen even hoog, zoals in het origineel */
  gap: var(--gutter);
}

.icon-box { display: flex; flex-direction: column; }

/* Het bolletje staat inline vóór de kop, niet erboven: in het origineel is
   dit een icon-box met positie "inline-start", 12px icoon en 10px tussenruimte. */
.icon-box__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 5px;
  font-size: var(--fs-card-s);
  font-weight: 900;
  line-height: 1.2em;
  letter-spacing: normal;
}

.icon-box__icon {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  color: var(--accent);
}
.icon-box__icon svg { display: block; width: 12px; height: 12px; fill: currentColor; }

.icon-box__desc {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
}

/* Alleen de eerste box heeft in het origineel een lege slotalinea. */
.icon-box--spaced .icon-box__desc { margin-bottom: var(--empty-p); }

@media (max-width: 1024px) {
  .manage__inner { flex-direction: column; }
  .manage__col, .manage__spacer { max-width: 100%; }
  .manage__spacer { display: none; }
}

@media (max-width: 767px) {
  .manage__grid { grid-template-columns: 1fr; }
}


/* ---------- Kaart-icoon (potentie scan e.d.) ---------- */

.card-icon {
  display: block;
  height: 48px;
  color: var(--accent);
  line-height: 0;
}
.card-icon svg { width: 40px; height: 40px; fill: currentColor; }