/* Ronde Tafel 110 — eigen pagina's.
   De blokken die je in het beheer zelf samenstelt: tekst, foto, stappen,
   kaarten, quote, knop en streep. Bouwt voort op site.css en gebruikt
   dezelfde kleuren en rondingen; stappen leunen op .stappen/.stap daar. */

/* ------------------------------------------------------------ concept */

/* Alleen voor wie is ingelogd: deze pagina ziet een bezoeker nog niet. */
.conceptbalk {
  background: var(--geel);
  color: var(--inkt);
  border-block: 1px solid #EBCB80;
}
.conceptbalk-in {
  width: min(var(--breed), 100% - 3rem);
  margin: 0 auto;
  padding-block: 0.7rem;
  font-size: 0.97rem;
}
.conceptbalk a {
  color: var(--inkt);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.conceptbalk a:hover { color: var(--blauw-diep); }

/* ------------------------------------------------------------- blokken */

.eigen-blokken {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

/* Tekst: een leesbare kolom, links uitgelijnd met de kop erboven. */
.eigen-tekst { max-width: 44rem; }
.eigen-tekst h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin-bottom: 0.6rem;
}
.eigen-tekst p { color: var(--gedempt); }

/* Foto: in zijn eigen verhouding, nooit hoger dan het scherm. */
.eigen-foto { margin: 0; }
.eigen-foto img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(80vh, 720px);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}
.eigen-foto-link {
  display: inline-block;
  border-radius: var(--rond);
}
.eigen-foto-link:focus-visible { border-radius: var(--rond); outline-offset: 4px; }
.eigen-foto-link img { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.eigen-foto-link:hover img { transform: translateY(-2px); box-shadow: var(--schaduw-diep); }
.eigen-foto figcaption {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  color: var(--gedempt);
}

/* Stappen: het witte blok met genummerde stappen van de contactpagina. */
.eigen-stappen .stappen-kop { margin-bottom: 1.25rem; }

/* Kaarten: witte kaarten met eventueel een foto erboven. */
.eigen-kaartenblok h2 { margin-bottom: 1.25rem; }

.eigen-kaarten {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.eigen-kaart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--wit);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}
.eigen-kaart-foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.eigen-kaart-tekst { padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem); }
.eigen-kaart-tekst h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.eigen-kaart-tekst p { color: var(--gedempt); font-size: 0.97rem; margin-bottom: 0.5rem; }
.eigen-kaart-tekst p:last-child { margin-bottom: 0; }

/* Quote: zoals de blauwe quotebalk op de voorpagina, maar binnen de kolom. */
.eigen-quote {
  margin: 0;
  padding: clamp(1.75rem, 1rem + 2.5vw, 3rem) clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  border-radius: var(--rond);
  background: var(--blauw-zacht);
  text-align: center;
}
.eigen-quote blockquote {
  max-width: 46rem;
  margin: 0 auto;
}
.eigen-quote p {
  margin: 0;
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.25;
  overflow-wrap: break-word;
}
.eigen-quote figcaption {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--blauw-diep);
}

/* Knop: de gewone blauwe knop van de site. */
.eigen-knop { margin: 0; }
.eigen-knop .knop { max-width: 100%; overflow-wrap: break-word; }

/* Streep: een rustige lijn tussen twee blokken. */
.eigen-streep {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 2px solid var(--lijn);
}

/* Een pagina zonder blokken; alleen wie is ingelogd ziet dit. */
.eigen-leeg {
  margin: 0;
  padding: 1.25rem 1.5rem;
  border: 1px dashed #CFC6B6;
  border-radius: 18px;
  color: var(--gedempt);
}

@media (max-width: 720px) {
  .conceptbalk-in { width: min(var(--breed), 100% - 2rem); font-size: 0.93rem; }
}

@media (prefers-reduced-motion: reduce) {
  .eigen-foto-link img { transition: none; }
  .eigen-foto-link:hover img { transform: none; }
}