/* LocalX — feitenpagina: filterbare kaarten met categorie-tabs.
   Alle maten en kleuren zijn overgenomen uit de originele pagina. */

.facts-hero { background-color: var(--bg-surface); }

.facts-hero__title {
  margin: 0;
  color: var(--bg-dark);
  font-size: var(--fs-h1);
  line-height: 1em;
  letter-spacing: normal;
}

.facts-hero__lead {
  margin: 0 0 14.4px;
  color: var(--text-main);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

.facts-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gutter); }

/* De feitensectie sluit direct aan op de hero: geen ruimte aan de bovenkant. */
.facts { padding-top: 0; }

/* ---------- Tabs ---------- */

.fact-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.fact-tab {
  padding: 10px 25px;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 99px;
  color: var(--text-main);
  font-family: var(--ff-text);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.5em;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
/* Een rustige hover: de pil licht op in wit met een oranje rand en tekst.
   Geen vulkleur, want dan verspringt hij te veel ten opzichte van de actieve pil. */
.fact-tab:hover {
  background-color: var(--bg-page);
  border-color: var(--accent);
  color: var(--accent);
}
.fact-tab[aria-pressed="true"] {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--bg-surface);
}

/* ---------- Kaarten ---------- */

.facts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--gutter);
}

.fact {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--gutter);
  padding: var(--gutter);
  background-color: var(--bg-dark);
  border: 1px solid var(--bg-dark);
  border-radius: 25px;
  transition: transform .3s ease, border-color .3s ease;
}
.fact:hover { transform: translateY(-6px); border-color: var(--accent); }
.fact.is-hidden { display: none; }

.fact__cat {
  margin: 0;
  color: var(--text-mute);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
}

.fact__num {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-display);
  font-size: var(--fs-fact);
  font-weight: 900;
  line-height: 1em;
}

/* De meeste feitenteksten sluiten in het origineel af met een lege regel. */
.fact__txt {
  margin: 0 0 28px;
  color: var(--text-mute);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

/* ---------- Wat betekent dit ---------- */

.facts-meaning .split__text   { flex: 1 1 585px; max-width: 585px; }
.facts-meaning .split__visual { flex: 0 0 585px; max-width: 585px; }
.facts-meaning__visual img {
  width: 585px;
  height: 500px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.facts-meaning__text p {
  margin: 0 0 15px;
  color: var(--text-sub);
  font-size: var(--fs-lead);
  font-weight: 500;
  word-spacing: var(--ws-lead);
}

@media (max-width: 1024px) {
  .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .facts-meaning .split__text,
  .facts-meaning .split__visual { flex: 1 1 auto; max-width: 100%; }
  .facts-meaning__visual img { width: 100%; }
}
@media (max-width: 767px) {
  .facts__grid { grid-template-columns: 1fr; }
  .facts-hero__actions { flex-direction: column; }
  /* De lege slotregel onder het feit valt op mobiel weg. */
  .fact__txt { margin-bottom: 0; }
}