/* Studio Damon, revisie homepage 3486 (30-10-2026).
   Alleen geladen door: home, portretten, kinderen, bruiloften, portfolio, over-damon en presentatie.
   Alles hangt onder body.rv, zodat andere pagina's die studio.css delen niets merken. */

/* ---------- Menu: acht keuzes passen ook op 1040-1199 px ---------- */

@media (min-width: 1040px) {
  .rv .rv-nav-mob { display: none; }
}
@media (min-width: 1040px) and (max-width: 1199px) {
  .rv .nav ul { gap: .55rem; }
  .rv .nav a { font-size: .88rem; }
  .rv .nav li:has(.nav__cta) { margin-left: .2rem; }
  .rv .nav__cta { padding: 0 .7rem; }
}

/* ---------- Opening (home) ---------- */

.rv-hero { position: relative; background: var(--black); color: var(--white); }

.rv-hero__media {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 62svh;
  width: 100%;
  overflow: hidden;
}
.rv-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* gezicht en hand rechts in het origineel: uitsnede houdt 22-89 % van de breedte in beeld */
  object-position: 66% 30%;
}
.rv-hero__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
  pointer-events: none;
}

.rv-hero__text { padding: 1.4rem var(--pad) 2.25rem; }
.rv-hero h1 {
  margin: 0 0 .9rem;
  font-size: clamp(1.85rem, 8.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: .03em;
}
.rv-hero__wat {
  margin: 0 0 .6rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  max-width: 30ch;
}
.rv-hero__sfeer {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
  max-width: 34ch;
}
.rv-hero .actions { margin-top: 1.5rem; }

@media (min-width: 640px) and (max-width: 1039px) {
  .rv-hero__media { aspect-ratio: 3 / 2; max-height: none; }
  .rv-hero__media img { object-position: 50% 30%; }
}

@media (min-width: 1040px) {
  .rv-hero {
    display: flex;
    align-items: center;
    /* nooit hoger dan het beeld op schermbreedte: geen extra vergroting door cover */
    min-height: clamp(600px, min(100svh, 66.66vw), 980px);
  }
  .rv-hero__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    max-height: none;
  }
  .rv-hero__media img { object-position: 60% 32%; }
  /* Alleen een lichte schaduw links, zodat het gezicht rechts helder blijft */
  .rv-hero__media::after {
    inset: 0;
    height: auto;
    background: linear-gradient(to right, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 32%, rgba(0, 0, 0, 0) 52%);
  }
  .rv-hero__text {
    position: relative;
    width: 100%;
    max-width: calc(var(--max) + 2 * var(--pad));
    margin: 0 auto;
    padding: 6.5rem var(--pad) 3.5rem;
  }
  .rv-hero__text > * { max-width: min(34rem, 40vw); }
  .rv-hero h1 { font-size: clamp(2.5rem, 3.7vw, 3.7rem); margin-bottom: 1.25rem; }
  .rv-hero__wat { font-size: 1.15rem; }
  .rv-hero__sfeer { font-size: 1.1rem; }
  .rv-hero .actions { margin-top: 2.25rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .rv-hero__media img { animation: rv-in 1.4s ease-out both; }
}
@keyframes rv-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Vertrouwensstrook ---------- */

.rv-trust { background: var(--paper); border-bottom: 1px solid var(--rule); }
.rv-trust ul {
  list-style: none;
  margin: 0 auto;
  padding: 1.5rem var(--pad);
  max-width: calc(var(--max) + 2 * var(--pad));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
}
.rv-trust li { min-width: 0; padding-left: .85rem; border-left: 1px solid var(--gold); }
.rv-trust strong { display: block; font-weight: 600; font-size: .95rem; line-height: 1.4; color: var(--ink); }
.rv-trust span, .rv-trust a { font-size: .875rem; line-height: 1.5; color: var(--muted); }
.rv-trust a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; }
@media (min-width: 960px) {
  .rv-trust ul { grid-template-columns: repeat(4, 1fr); padding-block: 1.75rem; gap: 2rem; }
}

/* ---------- Dienstenkeuze: vier fotokaarten als een wand ---------- */

.rv-diensten { scroll-margin-top: 1rem; }
.rv-diensten__kop { margin-bottom: 2.25rem; }
.rv-diensten__kop p { color: var(--muted); }
.rv-diensten ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1rem;
}
.rv-dienst { min-width: 0; }
.rv-dienst a { display: block; text-decoration: none; color: inherit; }
.rv-dienst__beeld { position: relative; margin: 0 0 .9rem; overflow: hidden; background: #1c1c1c; aspect-ratio: 4 / 5; }
.rv-dienst__beeld img { width: 100%; height: 100%; object-fit: cover; }
.rv-dienst__beeld::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(162, 144, 97, .7);
  pointer-events: none;
}
.rv-dienst h3 { margin: 0 0 .35rem; font-size: clamp(1.05rem, 4.2vw, 1.35rem); line-height: 1.25; }
.rv-dienst p { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.55; color: var(--muted); }
.rv-dienst__meer {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: .3em;
}
.rv-dienst a:hover h3 { color: #6F6140; }
.rv-dienst a:hover .rv-dienst__meer { text-decoration-thickness: 2px; }
.rv-dienst a:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }

.rv-pos-atelier { object-position: 10% 62%; }
.rv-pos-vrouw { object-position: 64% 30%; }
.rv-pos-blouse { object-position: 74% 38%; }
.rv-pos-kind { object-position: 50% 32%; }
.rv-pos-strand { object-position: 57% 50%; }
/* Liggend beeld in een staand kader: rug en afgewend hoofd in beeld, geen gezicht */
.rv-pos-boudoir { object-position: 76% 55%; }

@media (min-width: 960px) {
  .rv-diensten ul { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; align-items: start; }
  /* De wand hangt niet strak: tweede en vierde kaart iets lager, zoals de prints in het atelier */
  .rv-diensten li:nth-child(even) { margin-top: 2.5rem; }
  .rv-dienst p { font-size: .95rem; }
}

/* ---------- Ervaringen ---------- */

.rv-ervaringen h2 { margin-bottom: 2rem; }
.rv-ervaringen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.rv-ervaringen figure { margin: 0; padding-left: 1.1rem; border-left: 2px solid var(--gold); }
.rv-ervaringen blockquote { margin: 0; }
.rv-ervaringen blockquote p { margin: 0; font-size: 1.1rem; line-height: 1.65; color: var(--ink); max-width: 34ch; }
.rv-ervaringen figcaption { margin-top: .5rem; font-size: .9rem; color: var(--muted); }
.rv-ervaringen .actions { margin-top: 2rem; align-items: center; }
@media (min-width: 760px) {
  .rv-ervaringen ul { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

/* ---------- Mozaïek met werk (home) ---------- */

.rv-mozaiek { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.rv-mozaiek li { min-width: 0; overflow: hidden; background: #1c1c1c; }
.rv-mozaiek img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.rv-mozaiek li:first-child { grid-column: 1 / -1; }
.rv-mozaiek li:first-child img { aspect-ratio: 3 / 2; }
@media (min-width: 760px) {
  .rv-mozaiek { grid-template-columns: repeat(12, 1fr); gap: 1rem; }
  .rv-mozaiek li { grid-column: span 4; }
  .rv-mozaiek li:first-child { grid-column: 1 / 8; }
  .rv-mozaiek li:nth-child(2) { grid-column: 8 / 13; }
  .rv-mozaiek li img { aspect-ratio: 4 / 3; }
  .rv-mozaiek li:first-child img { aspect-ratio: 3 / 2; }
  .rv-mozaiek li:nth-child(2) img { aspect-ratio: auto; height: 100%; }
}

/* ---------- Galerijwand (portfolio, kinderen, bruiloften) ---------- */

.rv-wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row dense;
  gap: 1.25rem .75rem;
}
.rv-wall > li { min-width: 0; }
.rv-wall > li[hidden] { display: none; }
.rv-wall > .rv-wall--breed { grid-column: 1 / -1; }
.rv-wall .frame img { aspect-ratio: 4 / 5; height: auto; outline-offset: -10px; }
.rv-wall .rv-wall--breed .frame img { aspect-ratio: 3 / 2; }
.rv-wall figcaption { margin-top: .5rem; font-size: .85rem; line-height: 1.45; }
.rv-wall .galerij__cat { font-size: .88rem; }
@media (min-width: 760px) {
  .rv-wall { grid-template-columns: repeat(3, 1fr); gap: 2.25rem 1.5rem; }
  .rv-wall > .rv-wall--breed { grid-column: span 2; }
  .rv-wall .frame img { outline-offset: -14px; }
  .rv-wall figcaption { font-size: .88rem; }
}

/* Vier beelden, gelijke uitsnede (kinderen) */
.rv-wall.rv-wall--vier { grid-template-columns: 1fr; }
.rv-wall--vier .frame img { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .rv-wall.rv-wall--vier { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }

/* Trouwgalerij: alles 3:2, eerste beeld groot */
.rv-wall--trouw .frame img { aspect-ratio: 3 / 2; }
.rv-wall--trouw > :first-child { grid-column: 1 / -1; }
.rv-wall--trouw > .rv-wall--los { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .rv-wall--trouw > :first-child { grid-column: span 2; grid-row: span 2; align-self: center; }
  .rv-wall--trouw > .rv-wall--los { grid-column: auto; }
}
@media (min-width: 760px) {
  /* Smalle en brede beelden in een rij even hoog: smal 3:4 naast breed 3:2 */
  .rv-wall:not(.rv-wall--vier):not(.rv-wall--trouw) .frame img { aspect-ratio: 3 / 4; }
  .rv-wall:not(.rv-wall--vier):not(.rv-wall--trouw) .rv-wall--breed .frame img { aspect-ratio: 3 / 2; }
}

/* Portfolio "Per onderwerp": dienstpagina en galerijfilter onder elkaar */
.rv .soorten .more__list a { display: flex; width: fit-content; }

/* Sobere lijst met bestemmingen, ook naar studiodamon.nl */
.rv-verder { margin-top: 3rem; max-width: 46rem; }
.rv-verder h3 { margin-bottom: .25rem; }
.rv-verder > p { color: var(--muted); margin-bottom: 0; }
.rv-verder .links a { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: .6rem; }
.rv-verder .ext { display: inline; margin: 0; }

/* Portfolio: boudoir apart, op papier, met heldere link */
.rv-apart {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.75rem, 5vw, 3rem);
  background: var(--paper);
  border-top: 2px solid var(--gold);
}
.rv-apart h2 { margin-bottom: .5rem; }
.rv-apart p { color: var(--muted); }
.rv-apart .actions { margin-top: 1rem; }
@media (min-width: 960px) {
  .rv-apart { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: center; }
}

/* ---------- Dienstpagina's ---------- */

.rv-herken { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .25rem; }
.rv-herken li { padding: .7rem 0 .7rem 1.4rem; border-top: 1px solid var(--rule); position: relative; }
.rv-herken li:last-child { border-bottom: 1px solid var(--rule); }
.rv-herken li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.45rem;
  width: .6rem; height: 1px;
  background: var(--gold);
}

.rv-kernzin {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  line-height: 1.3;
  letter-spacing: .03em;
  color: var(--gold);
  max-width: 22ch;
  margin: 0 0 1.25rem;
}

.rv-feiten { margin: 2rem 0 0; display: grid; gap: 1rem; }
.rv-feiten div { padding-top: 1rem; border-top: 1px solid var(--rule); }
.rv-feiten dt { font-weight: 600; }
.rv-feiten dd { margin: .2rem 0 0; color: var(--muted); }
@media (min-width: 760px) { .rv-feiten { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }

.rv-citaat { margin: 0; padding-left: 1.25rem; border-left: 2px solid var(--gold); max-width: 40rem; }
.rv-citaat p { font-size: 1.15rem; line-height: 1.65; color: var(--ink); margin-bottom: .5rem; }
.rv-citaat figcaption { font-size: .9rem; color: var(--muted); }

/* Reportages: drie fotokaarten naar de volledige albums */
.rv-reportages { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.rv-reportages a { display: block; text-decoration: none; }
.rv-reportages figure { margin: 0 0 .8rem; overflow: hidden; background: #1c1c1c; }
.rv-reportages img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.rv-reportages h3 { margin: 0 0 .2rem; }
.rv-reportages span { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .3em; }
.dark .rv-reportages a { color: var(--white); }
.rv-reportages a:hover h3 { color: var(--gold); }
@media (min-width: 760px) { .rv-reportages { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }

/* Trouwfilm: eerst een beeld, de speler laadt pas na een klik */
.rv-film { position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.rv-film img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.rv-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rv-film__knop {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.25rem;
  padding: .75rem 1.4rem;
  background: var(--gold);
  color: var(--black);
  border: 0;
  font: 600 .98rem var(--sans);
  cursor: pointer;
  white-space: nowrap;
}
.rv-film__knop svg { width: 14px; height: 16px; }
.rv-film__knop:hover { background: #B5A273; }
.rv-film__knop:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
html:not(.js) .rv-film__knop { display: none; }
.rv-film__noot { margin-top: .75rem; font-size: .9rem; color: rgba(255, 255, 255, .78); }
.rv-film__noot a { color: var(--white); }

/* Twee kolommen met links (blog op home) */
@media (min-width: 760px) {
  .rv-cols { columns: 2; column-gap: 3rem; }
  .rv-cols li { break-inside: avoid; }
  .rv-cols li:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
}

/* Presentatie: voor/na naast elkaar */
.rv-voorna { display: grid; gap: 2rem; }
.rv-voorna h3 { margin-bottom: .75rem; }
@media (min-width: 960px) { .rv-voorna { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.rv-tabel { width: 100%; border-collapse: collapse; font-size: .95rem; }
.rv-tabel th, .rv-tabel td { text-align: left; vertical-align: top; padding: .8rem .75rem .8rem 0; border-top: 1px solid var(--rule); }
.rv-tabel th { font-weight: 600; width: 38%; }
.rv-tabel td { color: var(--muted); }
@media (max-width: 639px) {
  .rv-tabel, .rv-tabel tbody, .rv-tabel tr, .rv-tabel th, .rv-tabel td { display: block; width: auto; }
  .rv-tabel td { border-top: 0; padding-top: 0; }
}