/* =========================================================================
   27 Moments, /partners/ de partnergids en de partnerpagina's

   Zelfstandige publieke pagina, volledig in de huisstijl: de tokens komen
   uit /ds/m27.css, de knoppen zijn m27-btn. De opbouw met kop, hero, golf
   en voet is dezelfde als /start/, /barometer/ en /beurs/; elke pagina
   draagt haar eigen kopie omdat ze los van elkaar moeten kunnen leven.

   Twee schermen in één bestand, want het is één pagina: de gids (een raster
   met filters) en de partnerpagina (verhaal, beelden, contactformulier).
   Alles wat foto is, is afgerond. Dat is huisstijl, geen smaak.
   ========================================================================= */

/* Het hidden-attribuut wint altijd van de display-regels hieronder. */
[hidden] { display: none !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--m27-creme);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* --------------------------- Kop en hero -------------------------------- */

.kop {
  background: var(--m27-lichtgroen);
  padding: 18px 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kop__logo { display: inline-block; line-height: 0; }
.kop__logo img { height: 30px; width: auto; }

.kop__terug {
  font-size: 13px;
  color: var(--m27-paars);
  text-decoration: none;
  border-bottom: 1px solid rgba(131, 95, 165, .35);
  padding-bottom: 2px;
}
.kop__terug:hover { border-bottom-color: var(--m27-paars); }

.hero {
  background: var(--m27-lichtgroen);
  text-align: center;
  padding: 26px 20px 30px;
}

.hero__label {
  font-size: 12px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-paars);
  margin-bottom: 6px;
}

.hero h1 {
  font-family: var(--m27-font-titel);
  font-weight: 400;
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.12;
  letter-spacing: var(--m27-ls-titel);
  color: var(--m27-donkergroen);
  margin-bottom: 10px;
}

.hero__intro {
  max-width: 56ch;
  margin: 0 auto;
  font-size: 15px;
  color: var(--m27-tekst);
}

/* Het logo van de partner in de hero van zijn eigen pagina. */
.hero__logo {
  width: 92px;
  height: 92px;
  margin: 0 auto 14px;
  border-radius: var(--m27-radius-pill);
  background: var(--m27-wit);
  border: 1px solid #d5ddb9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__logo img { max-width: 74%; max-height: 74%; object-fit: contain; }

.golf { line-height: 0; background: var(--m27-creme); }
.golf svg { display: block; width: 100%; height: 40px; fill: var(--m27-lichtgroen); }

/* ------------------------------ Inhoud ---------------------------------- */

.omslag { max-width: 860px; width: 100%; margin: 0 auto; padding: 8px 16px 36px; flex: 1; }

.laadregel { text-align: center; color: #7c776f; font-size: 13.5px; padding: 28px 10px; }
.laadregel a { color: var(--m27-paars); }

.kaart {
  background: var(--m27-wit);
  border: 1px solid #e2ded4;
  border-radius: var(--m27-radius-kaart);
  padding: 20px 22px;
  margin: 14px 0;
  box-shadow: 0 2px 10px rgba(90, 104, 80, .05);
}

.kaart h2 {
  font-family: var(--m27-font-titel);
  font-weight: 400;
  letter-spacing: .5px;
  font-size: 21px;
  color: var(--m27-donkergroen);
  margin-bottom: 6px;
}

.kaart--groen { background: var(--m27-lichtgroen); border-color: #d5ddb9; }

.uitleg { color: #7c776f; font-size: 13.5px; }

/* ------------------------------ Filters --------------------------------- */
/* Boven de vouw hoort de inhoud, niet de uitleg: de filterbalk is daarom
   één compacte strook en geen kaart met een titel erboven. */

.filters {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--m27-creme);
  padding: 12px 0 10px;
  margin-bottom: 4px;
}

.filters__zoek {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--m27-wit);
  border: 1px solid #e2ded4;
  border-radius: var(--m27-radius-pill);
  padding: 4px 6px 4px 16px;
}

.filters__zoek input {
  flex: 1;
  border: 0;
  background: transparent;
  /* 16px, kleiner laat iOS inzoomen zodra je in het veld tikt. */
  font-size: 16px;
  font-family: var(--m27-font-tekst);
  color: var(--m27-tekst);
  padding: 10px 0;
}
.filters__zoek input:focus { outline: none; }
.filters__zoek input::placeholder { color: #a8a49c; }

.filters__wis {
  border: 0;
  background: var(--m27-lichtgroen);
  color: var(--m27-donkergroen);
  border-radius: var(--m27-radius-pill);
  padding: 8px 14px;
  font-family: var(--m27-font-tekst);
  font-size: 12.5px;
  cursor: pointer;
  /* Meerekken met de zoekbalk in plaats van een eigen min-height: zo is het
     tikdoel even hoog als het veld ernaast zonder de balk te laten groeien. */
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}

/* De chiprijen scrollen liggend op telefoon in plaats van te wikkelen:
   twee regels chips duwen de partners van het scherm. */
.chiprij {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 2px 2px;
  scrollbar-width: none;
  /* Een rij die over de rand loopt zag er gewoon afgesneden uit, dus schoof
     niemand. De zachte rand rechts zegt "hier is meer" zonder een
     scrollbalk op telefoon te tonen. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}
.chiprij::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  border: 1px solid #ded9cd;
  background: var(--m27-wit);
  color: var(--m27-tekst);
  border-radius: var(--m27-radius-pill);
  padding: 7px 14px;
  font-family: var(--m27-font-tekst);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  /* Tikdoel van 48px, zoals de standaard vraagt. Juist op een rij die zelf
     liggend schuift, wordt een te kleine chip een veeg in plaats van een tik. */
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
.chip em { font-style: normal; color: #a8a49c; margin-left: 5px; }
.chip[aria-pressed="true"] {
  background: var(--m27-donkergroen);
  border-color: var(--m27-donkergroen);
  color: var(--m27-wit);
}
.chip[aria-pressed="true"] em { color: rgba(255, 255, 255, .7); }

.filters__stand {
  font-size: 12.5px;
  color: #7c776f;
  padding: 8px 4px 0;
}

/* ------------------------------- De gids -------------------------------- */

.groep { margin: 22px 0 6px; }

.groep__kop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 4px 10px;
}

.groep__kop h2 {
  font-family: var(--m27-font-titel);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: var(--m27-ls-titel);
  color: var(--m27-donkergroen);
}

.groep__telling { font-size: 12.5px; color: #7c776f; }

.rooster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.pkaart {
  display: flex;
  gap: 14px;
  /* stretch en niet flex-start: de kaarten in een rij zijn even hoog, dus
     hoort de voetregel met Gescreend en het tarief ook op dezelfde hoogte
     te eindigen. Zie .pkaart__inhoud en .pkaart__voet. */
  align-items: stretch;
  background: var(--m27-wit);
  border: 1px solid #e2ded4;
  border-radius: var(--m27-radius-kaart);
  padding: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(90, 104, 80, .05);
  transition: transform var(--m27-dur-1, 160ms) ease, box-shadow var(--m27-dur-1, 160ms) ease;
}
.pkaart:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(90, 104, 80, .12); }
.pkaart:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }

.pkaart__logo {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--m27-lichtgroen);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--m27-font-titel);
  font-size: 20px;
  color: var(--m27-donkergroen);
}
.pkaart__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.pkaart__inhoud { min-width: 0; display: flex; flex-direction: column; }

/* De onderdelen van een kaartje zijn spans, want ze zitten in een <a> en
   daar hoort geen blokelement in te staan. Een span is van zichzelf inline,
   dus zonder deze regel lopen de naam, de categorie en de omschrijving als
   lopende tekst in elkaar over en doen hun marges niets. */
.pkaart__naam,
.pkaart__meta,
.pkaart__regel,
.pkaart__tarief { display: block; }

.pkaart__naam {
  font-family: var(--m27-font-titel);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  color: var(--m27-donkergroen);
  margin-bottom: 3px;
}

.pkaart__meta {
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--m27-paars);
  margin-bottom: 6px;
}

.pkaart__regel {
  font-size: 13.5px;
  color: #6f6a62;
  /* Eén regel op de kaart: het hele verhaal staat op de partnerpagina. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* margin-top: auto duwt de voetregel naar de onderkant van de kaart: de
   omschrijving erboven is één of twee regels lang, en zonder dit hing het
   label bij elke kaart in de rij op een andere hoogte. */
.pkaart__voet {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 9px;
}
.pkaart__tarief { font-size: 12.5px; color: var(--m27-donkergroen); }

/* ---------------------------- De partnerpagina -------------------------- */

.detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.verhaal p { font-size: 15px; color: var(--m27-tekst); margin-bottom: 12px; }
.verhaal p:last-child { margin-bottom: 0; }

.feiten { display: grid; gap: 2px; margin-top: 4px; }
.feiten__rij {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #efece4;
  font-size: 14px;
}
.feiten__rij:last-child { border-bottom: 0; }
.feiten__rij span { color: #7c776f; }
.feiten__rij strong { font-weight: 500; text-align: right; }
.feiten__rij a { color: var(--m27-paars); }

/* Foto's altijd afgerond, ook in de reeks. */
.beelden {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.beelden img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  background: var(--m27-lichtgroen);
  display: block;
}

/* ------------------------------ Formulier ------------------------------- */

.veld { margin-bottom: 12px; }
.veld label {
  display: block;
  font-size: 12px;
  letter-spacing: var(--m27-ls-label);
  text-transform: uppercase;
  color: var(--m27-paars);
  margin-bottom: 5px;
}
.veld input,
.veld textarea {
  width: 100%;
  border: 1px solid #ded9cd;
  border-radius: 14px;
  background: var(--m27-wit);
  padding: 11px 13px;
  font-family: var(--m27-font-tekst);
  font-size: 16px;
  color: var(--m27-tekst);
}
.veld textarea { min-height: 96px; resize: vertical; }
.veld input:focus,
.veld textarea:focus { outline: 2px solid var(--m27-lila); outline-offset: 1px; }

.veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Het honeypotveld: onzichtbaar voor mensen, aantrekkelijk voor bots. */
.niet-invullen {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.eerlijk {
  background: var(--m27-lichtgroen);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--m27-donkergroen);
  margin-bottom: 14px;
}

.knoprij { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.knoprij .m27-btn { border: 1.5px solid transparent; cursor: pointer; }

/* Tikdoel van 48px, zoals de standaard vraagt: m27-btn komt uit /ds/m27.css
   op ongeveer 39px uit. Dezelfde regel staat in sessies.css, barometer.css en
   zalen.css; hij hoort op termijn in /ds/m27.css zelf, dan mogen deze vier
   kopieën weg. */
.m27-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bevestiging {
  background: var(--m27-lichtgroen);
  border-radius: 18px;
  padding: 18px 20px;
}
.bevestiging strong {
  display: block;
  font-family: var(--m27-font-titel);
  font-weight: 400;
  font-size: 20px;
  color: var(--m27-donkergroen);
  margin-bottom: 6px;
}

/* ------------------------------- Leeg ----------------------------------- */

.leeg {
  text-align: center;
  padding: 30px 20px;
  background: var(--m27-wit);
  border: 1px dashed #ded9cd;
  border-radius: var(--m27-radius-kaart);
  margin: 16px 0;
}
.leeg h2 {
  font-family: var(--m27-font-titel);
  font-weight: 400;
  font-size: 21px;
  color: var(--m27-donkergroen);
  margin-bottom: 6px;
}
.leeg p { font-size: 13.5px; color: #7c776f; max-width: 46ch; margin: 0 auto; }

/* ------------------------------- Voet ----------------------------------- */

.voet {
  background: var(--m27-lichtgroen);
  text-align: center;
  padding: 26px 20px calc(26px + env(safe-area-inset-bottom));
  font-size: 13.5px;
  color: var(--m27-donkergroen);
}
.voet__klein { font-size: 12.5px; color: #6f7a63; margin-top: 5px; }
.voet a { color: var(--m27-paars); }

/* ------------------------------ Toosten --------------------------------- */

.toosten {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: min(92vw, 460px);
}
.toost {
  background: var(--m27-donkergroen);
  color: var(--m27-wit);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(44, 44, 43, .2);
}
.toost--fout { background: #8a4b4b; }

/* ------------------------------ Smal ------------------------------------ */

@media (max-width: 560px) {
  .rooster { grid-template-columns: 1fr; }
  .veldrij { grid-template-columns: 1fr; }
  .omslag { padding-left: 12px; padding-right: 12px; }
  /* Vastgeplakt kostte de zoekpil, twee chiprijen en de standregel samen
     bijna een derde van een telefoonscherm, permanent. Op klein scherm
     schuift de balk daarom gewoon mee met de lijst. */
  .filters { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .pkaart { transition: none; }
  .pkaart:hover { transform: none; }
}