/* ─────────────────────────────────────────
   Over ons — page-specific sections.
   Shared pieces (buttons, .credential*, .section-contact, header, footer)
   come from base.css / sections.css.
───────────────────────────────────────── */

/* Mark the current page in the shared header/footer nav */
body.page-over .nav-links a[href="/over-ons.html"],
body.page-over .footer-nav a[href="/over-ons.html"] { color: var(--c-orange); }


/* ─────────────────────────────────────────
   Hero
───────────────────────────────────────── */
.ov-hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 84px var(--section-pad-h) 88px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: flex-start;
}

.ov-hero-text { max-width: 580px; }

.ov-label {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-orange);
  margin-bottom: 22px;
}

.ov-hero h1 {
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1.12;
  color: var(--c-green-deep);
  margin-bottom: 26px;
  text-wrap: pretty;
}

.ov-hero-lead {
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 1.45;
  color: var(--c-green-mid);
  margin-bottom: 26px;
  text-wrap: pretty;
}

.ov-hero-body {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--c-text-dark);
  text-wrap: pretty;
}

.ov-hero-image { 
  position: relative;
  }

.ov-hero-circle {
  position: absolute;
  inset: -26px auto auto -30px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--c-warm);
  z-index: 0;
}

.ov-hero-frame {
  position: relative;
  z-index: 1;
  border-radius: 240px 28px 240px 240px;
  overflow: hidden;
  aspect-ratio: 6/5;
}
.ov-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}


/* ─────────────────────────────────────────
   Mijn naam is Lieke Hakkens
───────────────────────────────────────── */
.ov-lieke { background: var(--c-green-light); }

.ov-lieke-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 96px var(--section-pad-h);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 76px;
}

.ov-lieke h2 {
  font-weight: 800;
  font-size: 38px;
  line-height: 1.2;
  color: var(--c-green-deep);
  text-wrap: pretty;
}

.ov-lieke-image { position: relative; margin-top: 32px; }

.ov-lieke-circle {
  position: absolute;
  inset: auto -18px -18px auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--c-warm);
  z-index: 0;
}

.ov-lieke-frame {
  position: relative;
  z-index: 1;
  border-radius: 28px 200px 200px 200px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.ov-lieke-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
}

.ov-lieke-text { display: flex; flex-direction: column; gap: 18px; }
.ov-lieke-text p { font-size: 17.5px; line-height: 1.75; color: var(--c-text-dark); text-wrap: pretty; }
.ov-lieke-text p:first-child { font-size: 18px; color: var(--c-text-mid); }


/* ─────────────────────────────────────────
   Anders kijken / weg naar Vuurbloei (two text columns)
───────────────────────────────────────── */
.ov-weg {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 100px var(--section-pad-h) 90px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.ov-weg h2 {
  font-weight: 800;
  font-size: 36px;
  line-height: 1.2;
  color: var(--c-green-deep);
  margin-bottom: 24px;
  text-wrap: pretty;
}

.ov-prose { display: flex; flex-direction: column; gap: 16px; }
.ov-prose p { font-size: 17.5px; line-height: 1.72; color: var(--c-text-dark); text-wrap: pretty; }


/* ─────────────────────────────────────────
   Waarom Vuurbloei bestaat
───────────────────────────────────────── */
.ov-waarom { background: var(--c-green-deep); color: #E7F1EB; }

.ov-waarom-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 96px var(--section-pad-h);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 76px;
  align-items: center;
}

.ov-waarom h2 {
  font-weight: 800;
  font-size: 38px;
  line-height: 1.2;
  color: var(--c-cream);
  margin-bottom: 26px;
  text-wrap: pretty;
}

.ov-waarom-text { display: flex; flex-direction: column; gap: 20px; }
.ov-waarom-text p { font-size: 18px; line-height: 1.75; color: var(--c-text-on-dark); text-wrap: pretty; }

.ov-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.45;
  color: var(--c-cream);
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--c-orange);
  text-wrap: pretty;
}

.ov-waarom-frame {
  border-radius: 28px 240px 28px 240px;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.ov-waarom-frame img { width: 100%; height: 100%; object-fit: cover; }


/* ─────────────────────────────────────────
   Wat is een vuurkind?
───────────────────────────────────────── */
.ov-vuurkind {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 100px var(--section-pad-h);
}

.ov-vuurkind-intro { max-width: 760px; margin-bottom: 52px; }

.ov-vuurkind-intro h2 {
  font-weight: 800;
  font-size: 38px;
  line-height: 1.2;
  color: var(--c-green-deep);
  margin-bottom: 20px;
  text-wrap: pretty;
}
.ov-vuurkind-intro p {
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 1.45;
  color: var(--c-green-mid);
  text-wrap: pretty;
}

.ov-vuurkind-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: start;
}

.ov-herken-card {
  background: var(--c-warm);
  border-radius: 28px;
  padding: 40px 40px 12px 36px;
}

.ov-herken-card h3 {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--c-green-deep);
  margin-bottom: 22px;
  text-wrap: pretty;
}

.ov-herken-list { display: flex; flex-direction: column; gap: 2px; }

.ov-herken-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(178, 61, 0, 0.18);
}

.ov-herken-item:last-child {
  border-bottom: transparent
}

.ov-herken-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-orange);
  margin-top: 9px;
}
.ov-herken-item p { font-size: 15px; line-height: 1.6; color: #4A4038; }


/* ─────────────────────────────────────────
   Drie kolommen: kind / ouder / verbinding
───────────────────────────────────────── */
.ov-drie { background: var(--c-green-light); }

.ov-drie-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 96px var(--section-pad-h);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}

.ov-drie h2 {
  font-weight: 800;
  font-size: 29px;
  line-height: 1.25;
  color: var(--c-green-deep);
  margin-bottom: 20px;
  text-wrap: pretty;
}

.ov-drie-prose { display: flex; flex-direction: column; gap: 14px; }
.ov-drie-prose p { font-size: 17px; line-height: 1.7; color: var(--c-text-dark); text-wrap: pretty; }

.ov-drie-deco { position: relative; height: 150px; margin-top: 34px; }
.ov-drie-deco-1 { position: absolute; left: 0; top: 40px; width: 74px; height: 74px; border-radius: 50%; background: var(--c-cream); }
.ov-drie-deco-2 { position: absolute; left: 62px; top: 6px; width: 132px; height: 132px; border-radius: 50%; background: var(--c-warm); }


/* ─────────────────────────────────────────
   Opleiding en deskundigheid
───────────────────────────────────────── */
.ov-opleiding {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 100px var(--section-pad-h);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 76px;
}

.ov-opleiding-left { display: flex; flex-direction: column; }

.ov-opleiding h2 {
  font-weight: 800;
  font-size: 38px;
  line-height: 1.2;
  color: var(--c-green-deep);
  margin-bottom: 22px;
  text-wrap: pretty;
}
.ov-opleiding-left p {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--c-text-dark);
  max-width: 380px;
  margin-bottom: 16px;
  text-wrap: pretty;
}

.ov-opleiding-deco { position: relative; flex: 1; min-height: 150px; margin-top: 28px; }
.ov-opleiding-deco-1 { position: absolute; left: 14px; top: 8px; width: 146px; height: 146px; border-radius: 50%; background: var(--c-warm); }
.ov-opleiding-deco-2 { position: absolute; left: 144px; top: 58px; width: 88px; height: 88px; border-radius: 50%; background: var(--c-green-light); }

.ov-opleiding .credential-list { align-content: start; }


/* ─────────────────────────────────────────
   Je hoeft het niet alleen te doen
───────────────────────────────────────── */
.ov-samen { background: var(--c-warm); }

.ov-samen-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 96px var(--section-pad-h);
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 76px;
  align-items: center;
}

.ov-samen h2 {
  font-weight: 800;
  font-size: 38px;
  line-height: 1.2;
  color: var(--c-green-deep);
  margin-bottom: 24px;
  text-wrap: pretty;
}

.ov-samen-text { display: flex; flex-direction: column; gap: 16px; }
.ov-samen-text p { font-size: 17.5px; line-height: 1.72; color: #5A5047; text-wrap: pretty; }
.ov-samen-text p:first-child { font-size: 18px; color: #4A4038; }

.ov-samen-frame {
  border-radius: 240px 240px 28px 240px;
  overflow: hidden;
  aspect-ratio: 4/5;
}
.ov-samen-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 12% center;
}


/* ─────────────────────────────────────────
   Contact CTA
   Reuses .section-contact from sections.css, which has no top padding
   because on the homepage the preceding section supplies it. Here the
   preceding band is coloured and ends flush, so add it back.
───────────────────────────────────────── */
body.page-over .section-contact { padding-top: var(--section-pad-v); }

/* --c-green-light instead of the homepage CTA's --c-green-mid, which
   read as too bright/active as a section background. Reuses the same
   pale green already used for .ov-lieke and .ov-drie rather than
   introducing a one-off color; the quote needs a dark color override
   below since it was styled for a dark box background. */
.ov-contact-box { background: var(--c-green-light); }

/* Wraps the box (rather than sitting inside it) so the flame can bleed
   past the box's rounded edge instead of being clipped by its
   overflow: hidden. */
.ov-contact-wrap { position: relative; max-width: var(--max-w); margin: 0 auto; }

.ov-contact-flame {
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: 460px;
  background-image: url("../assets/logo/original/Vlam%20vuurbloei.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
  pointer-events: none;
}

/* This CTA carries a single line of copy where the homepage has a heading
   plus a paragraph, so it needs a wider measure and a larger size to fill
   the box rather than float in it. */
body.page-over .contact-content { max-width: 800px; }

/* Scoped under .contact-content so it outranks `.contact-content p` in
   sections.css, which would otherwise force this back to 18.5px. */
.contact-content .ov-contact-quote {
  font-family: var(--font-serif);
  font-size: 46px;
  line-height: 1.3;
  color: var(--c-green-deep);
  margin-bottom: 38px;
  text-wrap: balance;
}


/* ─────────────────────────────────────────
   Responsive
───────────────────────────────────────── */
@media (max-width: 900px) {
  .ov-hero,
  .ov-lieke-inner,
  .ov-weg,
  .ov-waarom-inner,
  .ov-vuurkind-grid,
  .ov-drie-inner,
  .ov-opleiding,
  .ov-samen-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .ov-hero        { padding-top: 56px; padding-bottom: 64px; }
  .ov-hero h1     { font-size: 40px; }
  .ov-hero-circle { display: none; }

  .ov-weg,
  .ov-vuurkind,
  .ov-opleiding   { padding-top: 72px; padding-bottom: 72px; }

  .ov-drie-deco,
  .ov-opleiding-deco,
  .ov-contact-flame { display: none; }

  .ov-quote           { font-size: 22px; }
  .contact-content .ov-contact-quote { font-size: 32px; }
}

@media (max-width: 600px) {
  .ov-hero h1,
  .ov-lieke h2,
  .ov-weg h2,
  .ov-waarom h2,
  .ov-vuurkind-intro h2,
  .ov-drie h2,
  .ov-opleiding h2,
  .ov-samen h2        { font-size: 28px; }

  .ov-hero-lead,
  .ov-vuurkind-intro p { font-size: 21px; }

  .contact-content .ov-contact-quote { font-size: 25px; }

  .ov-herken-card      { padding: 32px 26px; }
}