/* EPK-pagina — bouwt verder op style.css */
.epk-kop {
  padding: clamp(48px, 8vw, 96px) 0 clamp(36px, 5vw, 56px); color: var(--cream);
  background: linear-gradient(rgba(21,22,58,.86), rgba(21,22,58,.86)), var(--hemd) 0 0 / 220px, var(--navy);
  border-bottom: 6px solid var(--orange);
}
.epk-kop h1 { font-size: clamp(3.2rem, 10vw, 7rem); line-height: .9; margin: .2em 0 .25em; color: var(--yellow); text-shadow: 6px 6px 0 var(--pink); }
.epk-kop p { max-width: 62ch; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.epk-kop .knoppen { margin-top: 1.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 2rem 0 0; padding: 0; }
.chips a { display: inline-block; text-decoration: none; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em;
  padding: .45em 1em; border: 2px solid var(--cream); border-radius: 999px; color: var(--cream); }
.chips a:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }

.epk-blok { padding: clamp(48px, 7vw, 88px) 0; scroll-margin-top: 80px; }
.epk-blok:nth-of-type(even) { background: #fff; }
.epk-blok h2 { margin-bottom: .3em; }
.epk-blok .intro { max-width: 62ch; margin-bottom: 2rem; }

.cijfers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.cijfer { background: var(--cream); border: var(--rand); border-radius: 18px; box-shadow: var(--schaduw); padding: 18px 20px; }
.cijfer b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.55rem; line-height: 1.05; color: var(--orange); margin-bottom: .35em; }
.cijfer span { font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
.cijfer p { margin: .4em 0 0; font-size: .92rem; }

.dl-rij { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.dl-kaart { background: #fff; border: var(--rand); border-radius: 18px; box-shadow: var(--schaduw); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.epk-blok:nth-of-type(even) .dl-kaart { background: var(--cream); }
.dl-kaart h3 { font-size: 1.3rem; margin: 0; }
.dl-kaart p { margin: 0; font-size: .95rem; }
.dl-kaart .meta { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.dl-kaart .knop { margin-top: auto; align-self: flex-start; font-size: .9rem; }
.logo-voorbeeld { height: 150px; border-radius: 12px; border: var(--rand); display: grid; place-items: center; padding: 16px; }
.logo-voorbeeld img { max-height: 100%; width: auto; }
.logo-voorbeeld.donker { background: var(--navy); }
.logo-voorbeeld.licht { background: var(--cream); }
.logo-voorbeeld.patroon { background: linear-gradient(rgba(21,22,58,.7), rgba(21,22,58,.7)), url(../img/hemd-zonnebloem.svg) 0 0 / 120px, var(--navy); }

.bio { background: #fff; border: var(--rand); border-radius: 18px; box-shadow: var(--schaduw); padding: 22px 24px; margin-bottom: 22px; }
.epk-blok:nth-of-type(even) .bio { background: var(--cream); }
.bio h3 { font-size: 1.2rem; margin: 0 0 .6em; }
.bio p { max-width: 75ch; }
.kopieer { font: 700 .85rem var(--tekst); text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
  background: var(--yellow); color: var(--navy); border: var(--rand); border-radius: 999px; padding: .5em 1.1em; box-shadow: 3px 3px 0 var(--navy); }
.kopieer.ok { background: var(--teal); color: #fff; }

.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.foto { position: relative; display: block; border: var(--rand); border-radius: 14px; overflow: hidden; box-shadow: 4px 4px 0 var(--navy); aspect-ratio: 3 / 4; background: var(--navy); }
.foto.breed { grid-column: span 2; aspect-ratio: 3 / 2; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.foto:hover img { transform: scale(1.04); }
.foto span { position: absolute; left: 8px; bottom: 8px; background: var(--yellow); color: var(--navy); font-weight: 700; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .05em; padding: .3em .7em; border-radius: 999px; border: 2px solid var(--navy); }
.onder-knop { margin-top: 1.8rem; }

.kleuren { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.kleur { border: var(--rand); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 4px 4px 0 var(--navy); text-align: left; cursor: pointer; padding: 0; font: inherit; color: var(--navy); }
.kleur i { display: block; height: 80px; border-bottom: var(--rand); }
.kleur b { display: block; padding: 10px 12px 0; font-family: var(--display); font-weight: 400; }
.kleur small { display: block; padding: 0 12px 12px; font-weight: 700; }

.regels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.goed, .fout { font-weight: 700; padding: .2em 0; }
.goed::before { content: "✓ "; color: var(--teal); }
.fout { text-decoration: line-through; opacity: .6; }
.fout::before { content: "✗ "; color: var(--orange); }

@media (max-width: 900px) {
  .epk-pagina .top nav { position: static; visibility: visible; opacity: 1; transform: none; background: none; border: 0; margin-left: auto; }
  .epk-pagina .top nav li:not(:last-child) { display: none; }
  .epk-pagina .top nav ul { display: flex; padding: 0; }
  .epk-pagina .top nav a.nav-cta { display: inline-block; font-size: .9rem; padding: .45em .9em; }
}
@media (max-width: 560px) {
  .foto.breed { grid-column: auto; aspect-ratio: 3 / 4; }
}