/* Homepage. Opbouw: gedimd filmpje met de kop bovenaan, de twee kleuren, filmpjes (tekst links, rij rechts),
   band met het verhaal, fotobord uit de gym, drie voordelen, maatgids, vragen met contact.
   Kleuren en letters uit css/theme.css; dit bestand regelt alleen de indeling. */

:root { --rand-l: max(40px, calc((100vw - 1360px) / 2 + 40px)); }

/* Gedeelde sectiekop, gecentreerd */
.sectie-kop { text-align: center; margin: 0 auto 40px; max-width: 680px; }
.dragen-tekst .section-title, .vragen-intro .section-title { margin-bottom: 18px; }

/* ---------- Bovenaan: gedimd filmpje over de hele breedte, de kop erop ---------- */
.held { padding: 10px; height: min(86vh, 780px); min-height: 540px; }
.vak { position: relative; height: 100%; overflow: hidden; isolation: isolate; border-radius: 6px; background: var(--black3); }
.vak-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Gedimd, zodat het filmpje sfeer geeft en niet afleidt */
.vak-video { filter: brightness(.5) saturate(.8); }
.vak-tekst::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, .75) 0%, rgba(8, 8, 8, .3) 45%, rgba(8, 8, 8, 0) 70%),
    linear-gradient(180deg, rgba(8, 8, 8, 0) 45%, rgba(8, 8, 8, .85) 100%);
}
.vak-inhoud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 56px var(--rand-l); }
.held-kop {
  font-family: var(--font-d); font-weight: 400;
  font-size: clamp(56px, 5.4vw, 96px); line-height: .92; letter-spacing: 1px;
  color: #fff; margin-bottom: 18px;
}
.held-kop span { display: block; color: var(--red); }
.held-sub { font-size: 17px; line-height: 1.6; color: var(--white2); max-width: 36ch; margin-bottom: 26px; }
.held-knoppen { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.held-link { font-weight: 600; font-size: 15px; color: var(--white); border-bottom: 1px solid #666; padding-bottom: 2px; }
.held-link:hover { border-color: #fff; }
.held-prijs { margin-top: 20px; font-size: 13px; color: var(--white3); }

/* ---------- De twee kleuren ---------- */
.kleuren-sectie { padding: 96px 40px 40px; }
.kleuren-sectie .products-grid { max-width: 1120px; margin: 0 auto; }

/* ---------- Filmpjes: tekst links, rij rechts tot de rand ---------- */
.dragen {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2.2fr;
  gap: 40px;
  align-items: center;
  padding: 100px 0 100px var(--rand-l);
}
.dragen-tekst p { color: var(--white2); max-width: 38ch; margin: 0 0 28px; }
.dragen .tiktok-houder { margin: 0; }
.dragen .tiktok-rij { padding-right: 40px; }
.dragen .tiktok-houder > .tiktok-vorige { left: 12px; }
.dragen .tiktok-houder > .tiktok-volgende { right: 28px; }

/* ---------- Band met het verhaal ---------- */
.band { position: relative; height: min(70vh, 620px); min-height: 440px; overflow: hidden; background: var(--black); }
/* De foto rechts op zijn eigen verhouding (niet ingezoomd), links zacht weglopend in het zwart */
.band img {
  position: absolute; top: 0; right: 0;
  height: 100%; width: auto; max-width: 64%;
  object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.band-inhoud {
  position: absolute; z-index: 1; top: 50%; left: var(--rand-l);
  transform: translateY(-50%);
  max-width: min(460px, 44vw);
}
.band-inhoud h2 {
  font-family: var(--font-d); font-weight: 400;
  font-size: clamp(48px, 4.8vw, 76px); line-height: .95; letter-spacing: 1px;
  color: #fff; margin-bottom: 16px;
}
.band-inhoud h2 span { color: var(--red); }
.band-inhoud p { color: var(--white2); margin: 0 0 26px; }

/* ---------- Fotobord uit de gym ---------- */
.bord { padding: 100px 40px 110px; }
.bord-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
}
.pin { position: relative; margin: 0; border-radius: 6px; overflow: hidden; isolation: isolate; background: var(--black3); }
.pin img { width: 100%; height: auto; display: block; }
.pin figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 16px 12px;
  background: linear-gradient(180deg, rgba(8, 8, 8, 0), rgba(8, 8, 8, .7));
  font-family: var(--font-d); font-size: 26px; letter-spacing: 1px; line-height: 1;
  color: #fff;
  opacity: 0; transition: opacity .25s;
}
.pin:hover figcaption { opacity: 1; }
@media (hover: none) { .pin figcaption { opacity: 1; } }

/* ---------- Drie voordelen ---------- */
.waarom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 90px 40px;
  text-align: center;
  border-top: 1px solid var(--gray);
}
.waarom-icoon {
  display: grid; place-items: center;
  width: 58px; height: 58px; margin: 0 auto 18px;
  border: 1px solid var(--red); border-radius: 50%;
  color: var(--red);
}
.waarom-icoon .icoon { width: 24px; height: 24px; }
.waarom-item h3 { font-family: var(--font-d); font-weight: 400; font-size: 32px; letter-spacing: 1px; color: #fff; margin-bottom: 8px; }
.waarom-item p { margin: 0; color: var(--white3); }

/* ---------- Vragen met contact ---------- */
.vragen {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.35fr;
  gap: 72px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 100px 40px 110px;
  scroll-margin-top: 64px;
}
.vragen-intro { position: sticky; top: 100px; }
.vragen-intro > p { color: var(--white2); margin: 0; max-width: 40ch; }
.contact-blok { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--gray); }
.contact-blok p { color: var(--white2); margin: 0 0 18px; }
.contact-blok .contact-bedrijf { margin: 18px 0 0; font-size: 13px; color: var(--white3); }
.contact-blok .contact-bedrijf a { color: var(--white2); }
.vragen-lijst { border-bottom: 1px solid var(--gray); }
.vraag { border-top: 1px solid var(--gray); }
.vraag summary {
  list-style: none;
  position: relative;
  padding: 22px 48px 20px 0;
  font-weight: 600; font-size: 17px; line-height: 1.35;
  color: #fff;
  cursor: pointer;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: ""; position: absolute; right: 10px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--red); border-bottom: 1.5px solid var(--red);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s;
}
.vraag[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.vraag-antwoord { padding: 0 48px 22px 0; color: var(--white2); }
.vraag-antwoord p { margin: 0 0 10px; }
.vraag-antwoord a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  .dragen { grid-template-columns: 1fr; padding: 80px 0 80px 24px; }
  .dragen-tekst { padding-right: 24px; }
  .bord-raster { grid-template-columns: repeat(3, 1fr); }
  .vragen { grid-template-columns: 1fr; gap: 40px; max-width: 760px; }
  .vragen-intro { position: static; }
}

/* ---------- Telefoon ---------- */
@media (max-width: 720px) {
  /* filmpje schermvullend: van rand tot rand, van onder de menubalk (64px) tot onderaan het scherm */
  .held { height: calc(100vh - 64px); height: calc(100svh - 64px); min-height: 480px; padding: 0; }
  .held .vak { border-radius: 0; }
  .vak-tekst::after { background: linear-gradient(180deg, rgba(8, 8, 8, .1) 0%, rgba(8, 8, 8, .35) 45%, rgba(8, 8, 8, .92) 100%); }
  .vak-inhoud { padding: 26px 22px; }
  .held-kop { font-size: 56px; }
  .held-sub { font-size: 15px; margin-bottom: 20px; }

  .kleuren-sectie { padding: 64px 16px 24px; }
  .dragen { padding: 64px 0 64px 16px; }
  .dragen-tekst { padding-right: 16px; }
  .dragen .tiktok-rij { padding-right: 16px; }
  .dragen .tiktok-houder > .tiktok-volgende { right: 24px; }

  /* Telefoon: foto bovenin over de volle breedte, tekst eronder */
  .band { height: auto; min-height: 0; padding-bottom: 36px; }
  .band img {
    position: static; display: block; width: 100%; height: auto; max-width: none;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .band-inhoud { position: static; transform: none; max-width: none; margin: -24px 16px 0; }

  .bord { padding: 64px 16px 72px; }
  .bord-raster { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pin figcaption { font-size: 20px; padding: 28px 10px 8px; }

  .waarom { grid-template-columns: 1fr; gap: 36px; padding: 64px 16px; }
  .vragen { padding: 64px 16px 72px; }
}