/* Ray-Media: publieke website (Home, Diensten, Uitvaart & Livestream,
 * Tarieven & Pakketwijzer, Portfolio Contactblad, Projectdetail & Lightbox,
 * Over Rayn & Werkwijze, Contact & 4-staps Offerteaanvraag, Voorwaarden). */

.publiek {
  max-width: var(--breed);
  margin-inline: auto;
  padding: var(--r-6) var(--rand) var(--r-12);
  display: grid;
  gap: var(--r-12);
}

/* --- eerste viewport / hero (Persuade + Experience; CK-LND-01, CK-LND-03, CK-LND-08) --- */
.rm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: var(--r-8);
  align-items: stretch;
  padding-top: var(--r-2);
}

.rm-hero__links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--r-6);
  min-width: 0;
}

.rm-hero__kop {
  display: grid;
  gap: var(--r-4);
}

.rm-hero__kop h1 {
  font-family: var(--f-display);
  font-size: var(--t-reus);
  font-weight: 660;
  font-variation-settings: "wdth" 112;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.rm-hero__lead {
  font-size: var(--t-lees);
  color: var(--inkt-2);
  max-width: 58ch;
  line-height: 1.55;
}

.rm-hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rm-hero__doelgroepen {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-paneel);
}

.rm-hero__doelgroepen h2 {
  font-family: var(--f-display);
  font-size: var(--t-15);
  font-weight: 650;
}

.rm-doelgroep-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rm-doelgroep-knoppen a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--hoek);
  background: var(--vlak-2);
  color: var(--inkt);
  font-size: var(--t-13);
  font-weight: 600;
  text-decoration: none;
}

.rm-doelgroep-knoppen a:hover {
  background: var(--steun-zacht);
  color: var(--steun);
}

.rm-doelgroep-knoppen a.is-uitvaart {
  background: var(--leisteen-zacht);
  color: var(--leisteen);
}

/* Rechts in de hero: het asymmetrische contactblad binnen snijtekens */
.rm-contactblad {
  padding: 14px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-plaat);
  display: grid;
  gap: 12px;
  min-width: 0;
}

.rm-contactblad__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lijn);
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--inkt-2);
  font-variant-numeric: tabular-nums;
}

.rm-contactblad__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 10px;
}

.rm-contactblad__hoofd {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  background: var(--lichtbak);
  border-radius: var(--hoek-plaat);
  overflow: hidden;
  text-decoration: none;
  min-width: 0;
}

.rm-contactblad__hoofd img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  flex: 1;
}

.rm-contactblad__neven {
  display: flex;
  flex-direction: column;
  background: var(--lichtbak);
  border-radius: var(--hoek-plaat);
  overflow: hidden;
  text-decoration: none;
  min-width: 0;
}

.rm-contactblad__neven img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

@media (max-width: 60rem) {
  .rm-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 36rem) {
  .rm-contactblad__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rm-contactblad__hoofd {
    grid-row: auto;
  }
}

/* --- sectiekoppen (Hallmark Gate 52 & 54: altijd verticaal gestapeld, geen kicker) --- */
.sectie {
  display: grid;
  gap: var(--r-6);
}

.sectie__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: var(--r-4);
  border-bottom: 1px solid var(--lijn);
}

.sectie__koptekst {
  display: grid;
  gap: 6px;
  max-width: 48rem;
}

.sectie__koptekst h1,
.sectie__koptekst h2 {
  font-family: var(--f-display);
  font-size: var(--t-kop-2);
  font-weight: 650;
  font-variation-settings: "wdth" 110;
  line-height: 1.08;
}

.sectie__koptekst p {
  font-size: var(--t-16);
  color: var(--inkt-2);
}

/* --- dienstenstrook & discipline-blokken --- */
.diensten-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--r-5);
}

.dienst-blok {
  display: flex;
  flex-direction: column;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-paneel);
  overflow: hidden;
  min-width: 0;
}

.dienst-blok__beeld {
  aspect-ratio: 16 / 10;
  background: var(--lichtbak);
  overflow: hidden;
}

.dienst-blok__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dienst-blok__inhoud {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.dienst-blok__inhoud h3 {
  font-family: var(--f-display);
  font-size: var(--t-kop-3);
  font-weight: 650;
}

.dienst-blok__inhoud p {
  font-size: var(--t-14);
  color: var(--inkt-2);
}

.dienst-blok__punten {
  list-style: none;
  display: grid;
  gap: 5px;
  font-size: var(--t-13);
  margin-block: 4px;
}

.dienst-blok__punten li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dienst-blok__punten .ic {
  color: var(--steun);
}

.dienst-blok__voet {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--lijn);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dienst-blok__prijs {
  font-family: var(--f-display);
  font-size: var(--t-16);
  font-weight: 680;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 62rem) {
  .diensten-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .diensten-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- portfolio-raster en contactblad-modus --- */
.portfolio-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 12px 16px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-paneel);
}

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.portfolio-filters button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 5px 12px;
  border-radius: var(--hoek);
  border: 1px solid var(--lijn);
  background: var(--papier);
  color: var(--inkt-2);
  font-size: var(--t-13);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.portfolio-filters button[aria-pressed="true"] {
  background: var(--inkt);
  border-color: var(--inkt);
  color: var(--papier);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--r-5);
}

.portfolio-grid--contactvel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  background: var(--lichtbak);
  border-radius: var(--hoek-paneel);
}

.portfolio-grid--contactvel .plaat {
  background: var(--lichtbak-2);
  border-color: rgb(255 255 255 / 0.14);
  color: var(--lichtbak-tekst);
}

.portfolio-grid--contactvel .plaat__info {
  background: var(--lichtbak-2);
  color: var(--lichtbak-tekst);
}

.portfolio-grid--contactvel .plaat__sub {
  color: var(--lichtbak-gedempt);
}

.plaat__info {
  padding: 12px 14px 14px;
  display: grid;
  gap: 4px;
}

.plaat__titel {
  font-family: var(--f-display);
  font-size: var(--t-18);
  font-weight: 650;
  line-height: 1.2;
}

.plaat__sub {
  font-size: var(--t-13);
  color: var(--inkt-2);
}

@media (max-width: 62rem) {
  .portfolio-grid,
  .portfolio-grid--contactvel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36rem) {
  .portfolio-grid,
  .portfolio-grid--contactvel {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- projectdetail & lightbox --- */
.project-kop {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--r-6);
  align-items: start;
}

.project-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-paneel);
  font-size: var(--t-14);
}

.project-meta dt {
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--inkt-2);
}

.project-meta dd {
  font-weight: 600;
  margin-top: 2px;
}

.galerij-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--r-4);
}

.galerij-tegel {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-plaat);
  background: var(--vlak);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

.galerij-tegel img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

dialog.lightbox {
  width: min(72rem, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  padding: 0;
  border: 0;
  border-radius: var(--hoek-paneel);
  background: var(--lichtbak);
  color: var(--lichtbak-tekst);
  box-shadow: var(--schaduw-pop);
}

dialog.lightbox::backdrop {
  background: rgb(5 7 10 / 0.86);
}

.lightbox__binnen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 16px);
}

.lightbox__kop,
.lightbox__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 18px;
  background: var(--lichtbak-2);
}

.lightbox__beeld {
  padding: 16px;
  display: grid;
  place-items: center;
  overflow: auto;
  min-height: 240px;
}

.lightbox__beeld img {
  max-height: 68dvh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 2px;
}

@media (max-width: 52rem) {
  .project-kop {
    grid-template-columns: minmax(0, 1fr);
  }
  .galerij-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 32rem) {
  .galerij-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- werkwijze (6 stappen) & draaiboek-voorbeeld --- */
.stappen-rij {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}

.stap-tegel {
  padding: 14px 16px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-paneel);
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.stap-tegel__nr {
  font-family: var(--f-display);
  font-size: var(--t-13);
  font-weight: 700;
  color: var(--steun);
  font-variant-numeric: tabular-nums;
}

.stap-tegel h3 {
  font-family: var(--f-display);
  font-size: var(--t-16);
  font-weight: 650;
}

.stap-tegel p {
  font-size: var(--t-13);
  color: var(--inkt-2);
}

@media (max-width: 64rem) {
  .stappen-rij {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 38rem) {
  .stappen-rij {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 24rem) {
  .stappen-rij {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- tarieven, bronverantwoording & reviews --- */
.bron-kader {
  padding: 14px 18px;
  background: var(--vlak-2);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-paneel);
  font-size: var(--t-13);
  color: var(--inkt-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}

.tarieven-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--r-4);
}

.tarief-kaart {
  padding: 18px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-paneel);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.tarief-kaart--aanbevolen {
  border-color: var(--steun);
}

.tarief-kaart__kop {
  display: grid;
  gap: 4px;
}

.tarief-kaart__naam {
  font-family: var(--f-display);
  font-size: var(--t-18);
  font-weight: 650;
}

.tarief-kaart__bedrag {
  font-family: var(--f-display);
  font-size: var(--t-24);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tarief-kaart__lijst {
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: var(--t-13);
  color: var(--inkt-2);
  margin-bottom: auto;
}

.tarief-kaart__lijst li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

@media (max-width: 64rem) {
  .tarieven-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36rem) {
  .tarieven-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reviews (10 echte reviews van ray-media.nl) */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--r-4);
}

.review-tegel {
  padding: 16px 18px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-paneel);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.review-tegel blockquote {
  font-size: var(--t-14);
  color: var(--inkt);
  flex: 1;
}

.review-tegel footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--lijn);
  font-size: var(--t-12);
  color: var(--inkt-2);
}

@media (max-width: 58rem) {
  .reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36rem) {
  .reviews-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- meertraps offerte- en boekingsformulier (/contact) --- */
.aanvraag-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--r-6);
  align-items: start;
}

.stappenbalk {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin-bottom: var(--r-4);
}

.stappenbalk li {
  padding: 8px 10px;
  border-radius: var(--hoek);
  background: var(--vlak-2);
  color: var(--inkt-2);
  font-size: var(--t-12);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.stappenbalk li.is-actief {
  background: var(--steun);
  color: var(--op-kleur);
}

.stappenbalk li.is-klaar {
  background: var(--vlak);
  color: var(--inkt);
  border: 1px solid var(--lijn);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-grid .vol {
  grid-column: 1 / -1;
}

@media (max-width: 56rem) {
  .aanvraag-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 38rem) {
  .stappenbalk {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- verstilde uitvaart- & livestreamomgeving (/uitvaart) --- */
.uitvaart-banner {
  padding: var(--r-8);
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-paneel);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--r-6);
  align-items: center;
}

.uitvaart-waarborgen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--r-4);
}

@media (max-width: 54rem) {
  .uitvaart-banner,
  .uitvaart-waarborgen {
    grid-template-columns: minmax(0, 1fr);
  }
}