/* ==========================================================================
   Vini Saudade – basis stylesheet
   Design tokens bovenaan; pas hier kleuren/fonts/maten aan.
   ========================================================================== */

@font-face {
  font-family: "Perpetua";
  src: url("../fonts/Perpetua-Bold.woff2") format("woff2"),
       url("../fonts/Perpetua-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* kleuren */
  --cream: #f5eddf;
  --brown-dark: #4d362b;   /* titels */
  --brown: #5b4033;        /* knoppen */
  --text: #5b4a40;         /* lopende tekst */
  --taupe: #bdb0a2;        /* grote quotes */
  --bronze: #8c6953;       /* lijnen / vignet */

  /* fonts */
  --font-body: "Montserrat", system-ui, sans-serif;
  --font-serif: "Perpetua", Georgia, serif;

  /* maten */
  --container: 1360px;
  --gutter: clamp(20px, 6vw, 120px);
  --section-pad: clamp(64px, 8vw, 150px);
  --fs-body: clamp(16px, 1.45vw, 25px);
  --fs-title: clamp(17px, 1.55vw, 29px);
  --fs-quote: clamp(30px, 3.1vw, 60px);
  --fs-tagline: clamp(19px, 1.9vw, 36px);
}

/* reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  --logo-w: min(40vw, 760px);
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: #3a2a20;
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__video {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
  animation: fade-in .6s ease;
}
@keyframes fade-in { from { opacity: 0; } }
.hero__play {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(32px, 7vh, 80px);
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .8em;
  padding: .7em 1.4em .7em 1em;
  border: 1px solid rgba(255,255,255,.85);
  background: rgba(40,28,20,.35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff;
  font: 400 clamp(14px, 1vw, 18px)/1 var(--font-body);
  letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s;
}
.hero__play:hover { background: rgba(40,28,20,.6); }
.hero__play-icon { /* driehoekje in cirkel */
  width: 2.2em; height: 2.2em; border: 1px solid currentColor; border-radius: 50%;
  display: grid; place-items: center;
}
.hero__play-icon::before {
  content: ""; margin-left: .2em;
  border-style: solid; border-width: .45em 0 .45em .75em;
  border-color: transparent transparent transparent currentColor;
}
.hero__close {
  position: absolute; z-index: 4; top: 16px; right: 16px;
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,.7); border-radius: 50%;
  background: rgba(0,0,0,.35); color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer;
}
.hero.is-playing .hero__play,
.hero.is-playing .hero__brand { visibility: hidden; }
.hero::after { /* leesbaarheid logo */
  content: ""; position: absolute; inset: 0 0 auto; height: 45%;
  background: linear-gradient(rgba(0,0,0,.35), transparent);
  pointer-events: none;
}
.hero__brand {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: clamp(16px, 3vw, 60px);
  padding: clamp(40px, 7vw, 130px) var(--gutter) 0;
}
.hero__logo { margin: 0; flex: 0 0 var(--logo-w); }
.hero__logo img { width: 100%; }
.hero__line {
  flex: 1;
  height: 1px;
  margin-top: calc(var(--logo-w) * .052); /* uitlijnen op midden woordmerk */
  background: rgba(255,255,255,.85);
}

/* --------------------------------------------------------------------------
   Intro + divider
   -------------------------------------------------------------------------- */
.intro {
  padding: var(--section-pad) var(--gutter) calc(var(--section-pad) * .6);
  text-align: center;
}
.intro__tagline {
  word-spacing: .05em; /* T/W-overhang maakt Perpetua-spaties optisch smal */
  margin: 0 auto calc(var(--section-pad) * .6);
  font-family: var(--font-serif);
  font-size: var(--fs-tagline);
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--brown);
  letter-spacing: .01em;
}
.divider {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 32px);
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--bronze); }
.divider img { width: clamp(56px, 4.5vw, 84px); }
main > .divider { padding-block: var(--section-pad); }

/* --------------------------------------------------------------------------
   Afbeeldingen
   -------------------------------------------------------------------------- */
.image { position: relative; z-index: 1; } /* ligt over de watermerken */
.image img { width: 100%; max-height: 100vh; object-fit: cover; }
.image--contained {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: content-box;
}

/* --------------------------------------------------------------------------
   Story: tekst + quote (herbruikbaar blok, --reverse spiegelt)
   -------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 1.25fr 1fr; /* tekstkolom breder, zoals in design */
  gap: clamp(40px, 6vw, 110px);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
  box-sizing: content-box;
}
.story__text p { margin: 0 0 1.4em; text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; text-wrap: pretty; }
.story__text p:last-child { margin-bottom: 0; }
.story__title {
  word-spacing: .05em; /* T/W-overhang maakt Perpetua-spaties optisch smal */
  margin: 0 0 1.4em;
  font-family: var(--font-serif);
  font-size: var(--fs-title);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--brown-dark);
  letter-spacing: .01em;
  text-wrap: balance;
}
.story__aside {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.quote {
  word-spacing: .05em; /* T/W-overhang maakt Perpetua-spaties optisch smal */
  font-family: var(--font-serif);
  font-size: var(--fs-quote);
  line-height: .95;
  text-wrap: balance;
  text-transform: uppercase;
  text-align: center;
  color: var(--taupe);
  max-width: 11em;
}
.story--reverse { grid-template-columns: 1fr 1.25fr; }
.story--reverse .story__text { order: 2; }

/* groot vignet-watermerk, half verscholen onder de foto erna/ervoor */
.watermark {
  position: absolute; left: 50%;
  width: clamp(200px, 27vw, 520px);
  transform: translateX(-50%);
  opacity: .55;
  pointer-events: none;
}
.watermark--bottom { bottom: calc(-1 * var(--section-pad) - clamp(100px, 13vw, 250px)); }
.watermark--top    { top:    calc(-1 * var(--section-pad) - clamp(100px, 13vw, 250px)); }

/* --------------------------------------------------------------------------
   Feature: plattegrond-kaart + zwembadfoto tot rand
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-top: calc(var(--section-pad) * .5);
}
.feature__card {
  width: min(26vw, 480px);
  justify-self: center;
  text-align: center;
}
.feature__caption {
  margin: 1em 0 .9em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 20px);
  color: var(--brown-dark);
}
.feature__image img { width: 100%; }

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: .55em 1.2em;
  background: var(--brown);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 24px);
  letter-spacing: .02em;
  transition: background .2s;
}
.btn:hover { background: var(--brown-dark); text-decoration: none; }
.btn--small { font-size: clamp(12px, .8vw, 14px); padding: .7em 1.1em; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter) calc(var(--section-pad) * .7);
  box-sizing: content-box;
  text-align: center;
}
.contact .story__title { margin-bottom: 1.2em; }
.contact p { margin: 0 0 1.4em; }
.contact__details { font-style: normal; margin-bottom: 1.6em; line-height: 1.8; }
.contact__details a:last-child { font-weight: 400; }
.contact__signoff {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 32px);
  line-height: 1.8;
  color: var(--brown);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  padding: clamp(56px, 6vw, 110px) var(--gutter);
  background: var(--cream) url("../img/pattern.jpg") center / 900px auto repeat;
}
.footer img { width: min(42vw, 680px); margin: 0 auto; }

/* --------------------------------------------------------------------------
   Tablet & mobiel
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { --logo-w: 64vw; height: 85svh; }

  .story { grid-template-columns: 1fr; gap: 40px; }
  .story__aside { order: -1; }
  .story--reverse .story__text { order: 0; }
  .story__text p { text-align: left; }
  .quote { font-size: clamp(28px, 7vw, 44px); }
  .watermark { width: 55vw; }
  .watermark--bottom, .watermark--top { display: none; } /* bespaart rommelige overlap op smal scherm */

  .feature { grid-template-columns: 1fr; gap: 48px; }
  .feature__card { width: min(80vw, 420px); }
  .feature__caption { font-size: 16px; }
  .btn--small { font-size: 14px; }

  .footer img { width: min(80vw, 480px); }
  .footer { background-size: 600px auto; }
}

@media (max-width: 480px) {
  .hero { --logo-w: 76vw; }
  .hero__brand { gap: 12px; padding-inline: 16px; }
}