/* Ruimte tussen kolommen (werkt ook met oudere Bootstrap/Porto) */
.tiles-row .tiles-col { margin-bottom: 1.5rem; }

/* Link- en tegelbasis */
.tile-plain-link { text-decoration: none; display: block; }
.tile-plain {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--tile-border, #e8e8e8);
  border-radius: 16px; padding: 14px 14px 12px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 120px;
}
.tile-plain:hover {
  transform: translateY(-2px);
  border-color: var(--tile-accent, #0d6efd);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

/* “Bullet” cirkel met initialen (geen afbeeldingen) */
.tile-bullet {
  --size: 42px;
  flex: 0 0 var(--size);
  width: var(--size); height: var(--size);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
  background: var(--tile-accent-bg, #eef5ff);
  color: var(--tile-accent, #0d6efd);
  border: 1px solid rgba(0,0,0,.06);
}

/* Tekst */
.tile-body { flex: 1 1 auto; min-width: 0; }
.tile-title { margin: 0 0 .25rem 0; font-size: 1.05rem; line-height: 1.25; color: #1e1e1e; }
.tile-text { margin: 0 0 .4rem 0; color: #4a4a4a; }
.tile-cta { font-weight: 600; text-decoration: underline; }

/* Toegankelijkheid */
.tile-plain-link:focus .tile-plain { outline: 3px solid rgba(13,110,253,.35); outline-offset: 2px; }

/* Accentkleuren per tegel (eenvoudig te wijzigen) */
.tile-plain.is-tv            { --tile-accent:#0d6efd; --tile-accent-bg:#e8f0ff; }
.tile-plain.is-petgat        { --tile-accent:#6c757d; --tile-accent-bg:#eff1f3; }
.tile-plain.is-kerkheuvel    { --tile-accent:#198754; --tile-accent-bg:#e9f6ee; }
.tile-plain.is-karkien       { --tile-accent:#dc3545; --tile-accent-bg:#fdecef; }
.tile-plain.is-stoutenburght { --tile-accent:#8e44ad; --tile-accent-bg:#f2e9f7; }
.tile-plain.is-verblijven    { --tile-accent:#fd7e14; --tile-accent-bg:#fff3e8; }

/* Donkere modus (optioneel, mocht Porto die hebben) */
@media (prefers-color-scheme: dark) {
  .tile-plain { background: #1f1f1f; border-color: #2a2a2a; }
  .tile-title, .tile-text { color: #e9e9e9; }
  .tile-cta { color: #fff; }
}
<style>
/* Galerijstijl – lijkt op de sobere opzet van It-Petgat */
.kst-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.kst-item { 
  border: 1px solid #e9e9e9; border-radius: 12px; overflow: hidden; background: #fff;
}
.kst-item img {
  display: block; width: 100%; height: 220px; object-fit: cover;
}
.kst-cap {
  margin: 0; padding: 8px 10px; font-size: .9rem; color: #666; background: #fafafa;
}



/* ===== EasyDNN News – Clean Top Image (16:9) ===== */
.edn-list-clean .edn-item {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.65;
  color: #222;
}
.edn-list-clean .edn-item:hover {
  border-color: #265e2d; /* groenaccent */
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transform: translateY(-2px);
}

/* Hero image bovenaan - 16:9 */
.ratio-16x9 { aspect-ratio: 16 / 9; display: block; }
.edn-hero { background: #f4f4f4; margin: 0; }
.edn-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fallback voor oudere browsers zonder aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .ratio-16x9 { position: relative; padding-top: 56.25%; }
  .ratio-16x9 > .edn-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* Tekst */
.edn-body { padding: 14px 16px 16px; }
.edn-title { margin: 0 0 .4rem 0; font-weight: 700; font-size: 1.2rem; letter-spacing: .2px; color: #111; }
.edn-title a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.edn-title a:hover { border-bottom-color: #cfcfcf; }
.edn-summary { color: #333; margin-bottom: .5rem; }
.edn-more { margin: 0; }
.edn-more-link { font-weight: 700; text-decoration: none; border-bottom: 2px solid #265e2d; color: #265e2d; padding-bottom: 1px; }
.edn-more-link:hover { opacity: .85; }

/* Donkere modus (optioneel) */
@media (prefers-color-scheme: dark) {
  .edn-list-clean .edn-item { background: #1e1e1e; border-color: #2a2a2a; color: #e9e9e9; }
  .edn-summary { color: #d9d9d9; }
  .edn-title a { color: #fff; }
  .edn-more-link { color: #bde0c0; border-bottom-color: #bde0c0; }
}
.edn-list-clean article { display: flex; }
.edn-list-clean .edn-item { flex: 1 1 auto; display: flex; flex-direction: column; }
.edn-list-clean .edn-body { flex: 1 1 auto; }
.edn-list-clean .edn-more { margin-top: auto; }

/* Maak de kaart kolomsgewijs zodat de admin-balk echt onderaan komt */
.edn-list-clean .edn-item { display: flex; flex-direction: column; }

/* Onderste admin-balk */
.edn-admin-bottom{
  margin-top: auto;           /* duwt 'm naar de onderkant van de kaart */
  padding: 10px 16px;
  border-top: 1px dashed #e7e7e7;
  display: flex; gap: 10px; justify-content: flex-end;
  font-size: .9rem; opacity: .9;
}
.edn-admin-bottom a { text-decoration: none; }

/* EasyDNN News titels: niet in hoofdletters */
.edn-list-clean .edn-title,
.edn-list-clean .edn-title a,
.edn-list-clean h3.edn-title {
  text-transform: none !important;
  letter-spacing: .1px; /* optioneel: iets minder “tracking” dan bij uppercase */
}

/* Extra zeker: koppen binnen de kaart ook normaliseren */
.edn-list-clean h1,
.edn-list-clean h2,
.edn-list-clean h3,
.edn-list-clean h4 {
  text-transform: none !important;
}