/* ============================================================
   pages/org-detail.css — Organization detail page
   WP TEMPLATE: single-organisaties.php
   ============================================================ */

.org-detail__logo {
  width: auto;
  height: auto;
  min-height: 0;
  max-width: 160px;
  max-height: 50px;
  margin-bottom: 18px;
}

/* "Wie zijn wij?" intro and the employment-benefits grid keep a readable
   width but stay left-aligned with the rest of the page (no centred
   narrow container). */
.org-detail__intro { max-width: var(--max-w-content); }

/* Niveau row offered by the org */
.org-niveaus { display: grid; gap: var(--space-sm); }
.org-niveau-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}
.org-niveau-item__badge {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--teal-bg);
  color: var(--teal-dark);
  font-family: var(--serif);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.org-niveau-item__title { font-weight: 600; font-size: 15px; }
.org-niveau-item__text { font-size: 13px; color: var(--mid); }

/* Employment terms */
.voorwaarden-grid { display: grid; gap: var(--space-sm); max-width: var(--max-w-content); }
.voorwaarde {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.voorwaarde__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--teal-bg);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.voorwaarde__icon svg { width: 20px; height: 20px; }
.voorwaarde__text { font-size: 14px; color: var(--mid); padding-top: 8px; }

/* Work locations — a plain list (no map), shown only when an
   organisation has more than one location. */
.loc-list { display: grid; gap: var(--space-sm); }
.loc-item {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}
.loc-item__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--teal-bg);
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loc-item__icon svg { width: 20px; height: 20px; }
.loc-item__naam { font-weight: 600; font-size: 15px; }
.loc-item__adres { font-size: 13px; color: var(--mid); }

@media (min-width: 768px) {
  .org-niveaus { grid-template-columns: repeat(3, 1fr); }
  .voorwaarden-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) {
  .loc-list { grid-template-columns: repeat(2, 1fr); }
}

/* Cijfers en feiten — kerncijfers van de organisatie */
.cijfers-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(2, 1fr);
}
.cijfer {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
}
.cijfer__num {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  color: var(--teal-dark);
  margin-bottom: 6px;
}
.cijfer__label { font-size: 13px; color: var(--mid); }
@media (min-width: 768px) {
  .cijfers-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Verhaal-carrousel — horizontaal scrollbare video-cards */
.verhaal-carousel {
  display: grid;
  gap: var(--space-md);
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.verhaal-card { scroll-snap-align: start; }
.verhaal-card .video-placeholder { aspect-ratio: 4 / 3; margin-bottom: 10px; }
.verhaal-card__title { font-size: 14px; color: var(--mid); }
@media (min-width: 900px) {
  .verhaal-carousel { grid-auto-columns: minmax(300px, 1fr); }
}