/* Ronde Tafel 110 — nieuws: het overzicht op /nieuws, één bericht op
   /nieuws/<naam> en het blok "Laatste nieuws" op de voorpagina.
   Bouwt voort op site.css: dezelfde kleuren, .sectie, .bovenschrift, .lood
   en .tekstlink. Alles hier begint met "nieuws", zodat het nergens botst. */

/* ------------------------------------------------------------- kaartjes */

.nieuwsraster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

/* Het hele kaartje is klikbaar: de link in de titel spant eroverheen. Zo is
   er per bericht maar één link om langs te tabben. */
.nieuwskaart {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--wit);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nieuwskaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-diep); }

.nieuwskaart-foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--rond) var(--rond) 0 0;
  background: var(--blauw-zacht);
}

/* Zonder foto: een lichtblauw kaartje met een zachte boog in de hoek, zodat
   het naast kaartjes met foto niet leeg oogt. */
.nieuwskaart-zonderfoto { background: var(--blauw-zacht); }
.nieuwskaart-zonderfoto::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 9rem;
  height: 9rem;
  border-radius: 9rem 0 var(--rond) 0;
  background: rgba(18, 113, 159, 0.08);
}
.nieuwskaart-zonderfoto .nieuwskaart-titel { font-size: 1.5rem; }

.nieuwskaart-tekst {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: clamp(1.2rem, 0.9rem + 0.9vw, 1.6rem) clamp(1.25rem, 0.95rem + 1vw, 1.75rem) clamp(1.3rem, 1rem + 1vw, 1.75rem);
}

/* De datum: klein en blauw, zoals de bovenschriften elders op de site. */
.nieuwskaart .bovenschrift,
.nieuwsbericht-kop .bovenschrift { letter-spacing: 0.14em; }

.nieuwskaart-titel {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
}
.nieuwskaart-titel a { color: inherit; text-decoration: none; }
.nieuwskaart-titel a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--rond);
}
.nieuwskaart:hover .nieuwskaart-titel a { color: var(--blauw); }

/* De focusrand om het hele kaartje, niet alleen om de titel. */
.nieuwskaart-titel a:focus-visible { outline: none; }
.nieuwskaart-titel a:focus-visible::after { outline: 3px solid var(--blauw); outline-offset: 3px; }

.nieuwskaart-tekst p {
  margin: 0;
  color: var(--gedempt);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* "Lees verder" onderaan; het kaartje zelf is de link. */
.nieuwskaart-verder {
  margin-top: auto;
  padding-top: 0.35rem;
  color: var(--blauw);
}
.nieuwskaart:hover .nieuwskaart-verder .pijl { transform: translateX(4px); }

/* Het nieuwste bericht in het overzicht: breed, met de foto ernaast. */
@media (min-width: 900px) {
  .nieuwskaart-groot {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .nieuwskaart-groot .nieuwskaart-foto {
    height: 100%;
    min-height: 20rem;
    aspect-ratio: auto;
    border-radius: var(--rond) 0 0 var(--rond);
  }
  .nieuwskaart-groot .nieuwskaart-tekst {
    justify-content: center;
    gap: 0.7rem;
    padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  }
  .nieuwskaart-groot .nieuwskaart-titel {
    font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.2rem);
    font-weight: 800;
    line-height: 1.08;
  }
  .nieuwskaart-groot .nieuwskaart-tekst p { font-size: 1.05rem; }
  .nieuwskaart-groot .nieuwskaart-verder { margin-top: 0.5rem; }
}

/* Op de voorpagina iets compacter. */
.nieuwsraster-compact .nieuwskaart-tekst { gap: 0.35rem; padding: 1.1rem 1.35rem 1.35rem; }
.nieuwsraster-compact .nieuwskaart-titel { font-size: 1.18rem; }
.nieuwsraster-compact .nieuwskaart-zonderfoto .nieuwskaart-titel { font-size: 1.35rem; }
.nieuwsraster-compact .nieuwskaart-tekst p { font-size: 0.94rem; }

/* Kop boven een rij kaartjes, met rechts een link naar alles. */
.nieuws-sectiekop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: 1.5rem;
}

/* Nog niets online: een rustig vlak met de tekst van de nieuwspagina. */
.nieuws-leeg {
  max-width: 44rem;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--wit);
  color: var(--gedempt);
}

/* ---------------------------------------------------------- één bericht */

/* Een concept krijgt dezelfde gele balk als een eigen pagina: .conceptbalk
   in eigen.css. */
.nieuwsbericht {
  width: min(60rem, 100% - 3rem);
  margin-inline: auto;
  padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}

.nieuwsbericht-kop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.nieuwsbericht-kop h1 {
  max-width: 22ch;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem);
}
.nieuwsbericht-kop .bovenschrift { margin-top: 0.35rem; }

.nieuwsbericht-lood {
  max-width: 38em;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

/* Terug naar het overzicht: het pijltje wijst de andere kant op. */
.nieuws-terug {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.97rem;
}
.nieuws-terug .pijl { margin-left: 0; transform: scaleX(-1); }
.nieuws-terug:hover .pijl { transform: scaleX(-1) translateX(4px); }

.nieuwsbericht-foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--rond);
  background: var(--blauw-zacht);
  box-shadow: var(--schaduw);
}

/* De tekst zelf: een prettige regellengte om te lezen. */
.nieuwsbericht-tekst {
  max-width: 68ch;
  font-size: 1.06rem;
  line-height: 1.75;
}
.nieuwsbericht-tekst p { margin: 0 0 1.15em; }
.nieuwsbericht-tekst p:last-child { margin-bottom: 0; }
.nieuwsbericht-tekst a { text-decoration: underline; text-underline-offset: 0.15em; }

/* Meer nieuws: even breed als het bericht erboven. */
.nieuws-meer {
  width: min(60rem, 100% - 3rem);
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* --------------------------------------------------------------- mobiel */

@media (max-width: 720px) {
  .nieuwsbericht,
  .nieuws-meer { width: min(60rem, 100% - 2rem); }

  .nieuwsraster { gap: 1rem; }
  .nieuwsbericht-foto { aspect-ratio: 4 / 3; border-radius: 18px; }
}

/* Hoog contrast (Windows): de kaartjes krijgen een echte rand. */
@media (forced-colors: active) {
  .nieuwskaart { border: 1px solid CanvasText; }
}