/* =========================================================================
   Homepage — visueel afgestemd op de oude Ucraft-startpagina
   ========================================================================= */

/* ---- 1. Hero -------------------------------------------------------- */
/* De homepage-hero-video-widget zet zichzelf op position:absolute;inset:0
   binnen deze wrapper en voegt .fpc-hero-video-row (min-height:560px) toe.
   Wij geven de wrapper alleen een expliciete hoogte + zwarte achtergrond;
   we mogen de positionering van het widget-element NIET overschrijven. */
.home-hero {
  position: relative;
  background: #000;
  min-height: 620px;
  /* GEEN overflow:hidden hier — de eventkaart mag onder de onderrand uitsteken.
     Het video-element (.fpc-hero-video) heeft zijn eigen overflow:hidden. */
}
/* het video-widget-element vult de hero; eigen overflow clipt de video */
.home-hero > [data-fpc-widget="homepage-hero-video"] {
  overflow: hidden;
}
.home-hero > [data-fpc-widget="homepage-hero-video"]:empty {
  min-height: 620px;
  display: block;
}

@media (max-width: 767.98px) {
  .home-hero,
  .home-hero > [data-fpc-widget="homepage-hero-video"]:empty {
    min-height: 380px;
  }
}

/* De widget voegt .fpc-hero-video-row (overflow:hidden) toe aan .home-hero.
   Dat mag niet: het zou de video wel clippen maar de eventkaart hoort er
   sowieso niet meer in (zie .home-next-event). We laten overflow toch op
   visible en clippen enkel het video-element zelf. */
.home-hero.fpc-hero-video-row {
  overflow: visible !important;
}

/* fijnafstemming van de widget-inhoud: titel + divider lager in de hero,
   met minder ruimte onder het streepje. */
.fpc-hero-video-content {
  padding-bottom: 15px !important;
  gap: 12px !important;
}
.fpc-hero-video-title {
  font-size: clamp(24px, 3.4vw, 40px) !important;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.fpc-hero-video-divider {
  border-bottom-width: 6px !important;
}
/* De <br class="fpc-hero-title-break"> uit lang.js alleen op mobiel tonen,
   zodat de titel daar altijd op 2 regels staat: ONE CLUB FOR / ALL FORD FANS. */
.fpc-hero-title-break {
  display: none;
}
@media (max-width: 767.98px) {
  .fpc-hero-video-content {
    padding-bottom: 52px !important;
  }
  .fpc-hero-title-break {
    display: inline;
  }
}

/* ---- 1a. Mobiele knoppenstrook onder de video (zwart) ---- */
/* Alleen op mobiel: meteen onder de video twee knoppen onder elkaar. */
.home-hero-cta {
  display: none;
}
@media (max-width: 767.98px) {
  /* De hero-video loopt tot tegen de bovenrand van het scherm; de vaste
     mobiele nav (position:fixed) ligt er (half-transparant) overheen. Body
     krijgt hier GEEN header-hoogte als padding-top (site.js zet de inline
     style op 0, dit is het CSS-vangnet). */
  body.fpc-page--home {
    padding-top: 0 !important;
  }
  .fpc-page--home .home-hero {
    margin-top: 0;
  }

  /* ---- header over de hero-video: zwarte gradient, geen balk ----------
     .fpc-header--hero-overlay wordt door site.js gezet zolang je bovenaan
     de startpagina staat; bij het naar beneden scrollen wordt het weer de
     gewone navy header. We laten de navy achtergrond + rand van de header
     zelf infaden en leggen de zwarte gradient in een ::before die uitfadet
     -> een vloeiende overgang in beide richtingen. */
  .fpc-page--home .fpc-header {
    transition:
      background-color 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }
  .fpc-page--home .fpc-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 220%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .fpc-page--home .fpc-header__inner {
    position: relative;
    z-index: 1;
  }
  .fpc-page--home .fpc-header.fpc-header--hero-overlay {
    background-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .fpc-page--home .fpc-header.fpc-header--hero-overlay::before {
    opacity: 1;
  }

  /* de video-wrapper mag hier wél clippen (de eventkaart is op mobiel verborgen)
     zodat er geen sub-pixel rand van de video onder de gradient uitsteekt */
  .home-hero,
  .home-hero.fpc-hero-video-row {
    overflow: hidden !important;
  }
  /* Onder de hero-video: enkel de "Lid worden"-knop, die met een negatieve
     marge half over de onderrand van de video valt (helft over de video,
     helft eronder). Geen zwarte strook, geen padding onder. */
  .home-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: transparent;
    padding: 0 clamp(18px, 6vw, 32px);
    /* halve knophoogte omhoog -> de knop straddelt de videorand */
    margin-top: -23px;
    position: relative;
    z-index: 2;
  }
  /* de "Onze kalender"-knop verdwijnt op mobiel */
  .home-hero-cta .fpc-btn--on-dark {
    display: none;
  }
  .home-hero-cta .fpc-btn {
    width: 100%;
    height: 46px;
  }
}

/* ---- 1b. Eerstvolgende-eventkaart: straddelt de onderrand van de video ---- */
/* De widget doet de straddle zelf: .fpc-homepage-next-event-card-wrap heeft
   min-height 165.6px met background linear-gradient(#000 50%, transparent 50%).
   De bovenste (zwarte) helft zet de video visueel door; de kaart (margin:40px
   auto in die wrap) valt precies op de zwart/transparant-grens.
   Wij zorgen alleen dat deze strook VLAK onder de hero komt (geen tussenruimte)
   en dat het wit eronder klopt. */
.home-next-event {
  position: relative;
  z-index: 3;
  margin-top: 0;
  /* Ruimte reserveren zodat de pagina eronder NIET verspringt wanneer de
     widget de kaart invult. 165.6px = de min-height die de widget-wrap zet;
     40px boven + onder = de kaartmarge in die wrap. */
  min-height: 165.6px;
  box-sizing: border-box;
  /* Meteen de zwart/transparant-strook tonen (widget zet dit ook op .-wrap,
     maar die klasse komt pas na de JS-run). Bovenste helft zet de video
     visueel door, onderste helft is wit. */
  background: linear-gradient(to bottom, #000 50%, #fff 50%);
}
.home-next-event > [data-fpc-widget="homepage-next-event-card"] {
  /* de widget-wrap erft de min-height al; hier enkel de fallback-strook
     onderdrukken zodat er geen dubbele gradient overheen ligt */
  background: transparent;
}
/* Zachte fade-in i.p.v. een harde pop; de gereserveerde hoogte hierboven
   zorgt dat dit de layout niet verspringt. De kaart zelf beweegt NIET bij
   hover (alleen de box-shadow verdiept, en het logo binnenin heft licht op —
   zie de widget-injectie). Deze selector is specifieker dan de widget, dus de
   volledige transition moet hier staan. */
.home-next-event .fpc-homepage-next-event-card {
  transition: box-shadow 0.35s ease, opacity 0.45s ease;
}
@media (prefers-reduced-motion: reduce) {
  .home-next-event .fpc-homepage-next-event-card {
    transition: opacity 0.3s ease;
  }
}

/* Mobiel: de eerstvolgende-eventkaart wordt volledig verborgen. */
@media (max-width: 600px) {
  .home-next-event {
    display: none !important;
  }
}

/* ---- 2. Intro ------------------------------------------------------- */
.home-intro {
  padding-block: clamp(48px, 7vw, 60px) clamp(12px, 2vw, 40px);
  background: #fff;
}
.home-intro .fpc-container--narrow {
  max-width: 720px;
}
.home-intro p.fpc-measure {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fpc-text);
  max-width: 60ch;
  margin-inline: auto;
}
@media (max-width: 767.98px) {
  .home-intro p.fpc-measure {
    font-size: 0.82rem;
    line-height: 1.55;
    max-width: 33ch;
  }
}
.home-intro .fpc-btn {
  margin-top: 8px;
}

/* Scroll-indicator (dunne pijl omlaag) — zoals de Ucraft ModuleIcon onder de knop */
.home-intro__scroll {
  margin-top: clamp(24px, 4vw, 40px);
  display: flex;
  justify-content: center;
}
.home-intro__scroll svg {
  width: 26px;
  height: 50px;
  fill: #e8e8e8; /* rgb(232,232,232), zoals Ucraft */
}

/* ---- 3a. Posterstrip: begrensd op 1200px (Ucraft-desktop) -------- */
.home-widgets {
  background: #fff;
  padding-block: clamp(24px, 4vw, 44px) clamp(40px, 6vw, 80px);
}
.home-widgets .fpc-container > [data-fpc-widget]:empty {
  display: none;
}
/* Mobiel: geen zij-padding op de container zodat de posterstrip tot de
   schermrand kan lopen (de widget regelt zelf de mobiele edge-marges). */
@media (max-width: 767.98px) {
  .home-widgets .fpc-container {
    padding-inline: 0;
  }
}

/* Posterstrip-rail: de JS-gestuurde touch-scroll van de widget is uitgeschakeld
   (patch in sync-ucraft.ps1). De browser doet nu de horizontale scroll zelf,
   met momentum. `touch-action: pan-x` = alleen horizontaal pannen op de rail,
   zodat de gesture soepel is; een verticale veeg gaat gewoon naar de pagina.
   `scroll-snap-type: x proximity` = zachte snap zonder jank. */
.fpc-homepage-poster-strip-rail {
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity !important;
  scroll-behavior: auto !important;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

/* ---- 3b. Spotlight-galerij: volledige paginabreedte -------------- */
/* De widget rendert zelf de zwarte sectie + geblurde achtergrond (::before)
   + donkere overlay (::after) en begrenst de inhoud op 1200px
   (.fpc-homepage-spotlight-gallery-inner). Wij zorgen alleen dat de wrapper
   full-bleed is en verbergen hem zolang de widget niets rendert. */
.home-spotlight {
  background: #000;
  margin-top: clamp(48px, 8vw, 104px);
}
.home-spotlight > [data-fpc-widget]:empty {
  display: none;
}
.home-spotlight .fpc-homepage-spotlight-gallery {
  padding-block: clamp(72px, 11vw, 128px) !important;
  padding-inline: clamp(24px, 6vw, 80px);
}

/* Basis-knopstijl voor .btn.btn1 die de spotlight-widget rendert
   (Ucraft's .btn-basis zit niet in onze CSS). Ford-blauwe pill; de tweede knop
   (register) wordt door de widget zelf naar ghost-wit omgezet — die krijgt hier
   alleen de layout. */
.home-spotlight .fpc-homepage-spotlight-gallery-actions .btn.btn1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 44px;
  padding: 0 26px;
  border: 2px solid var(--fpc-blue);
  border-radius: 999px;
  background: var(--fpc-blue);
  color: #fff;
  font-family: "Ford F-1 Semibold Custom", "Ford F-1", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}
.home-spotlight .fpc-homepage-spotlight-gallery-actions .btn.btn1:hover {
  background: var(--fpc-blue-light);
  border-color: var(--fpc-blue-light);
  color: #fff;
}
.home-spotlight .fpc-homepage-spotlight-gallery-actions .btn.btn1 .btn-text {
  color: inherit;
}
/* de register-knop: ghost-wit (widget zet kleuren via !important; layout hier) */
.home-spotlight .fpc-homepage-spotlight-gallery-btn-register {
  background: transparent;
  border-color: #fff;
}
@media (max-width: 767px) {
  /* knoppen onder elkaar; de inschrijvingsknop (2e .ModuleButton in de markup)
     komt bovenaan */
  .home-spotlight .fpc-homepage-spotlight-gallery-actions {
    flex-direction: column;
  }
  .home-spotlight .fpc-homepage-spotlight-gallery-actions .module.ModuleButton {
    width: 100%;
  }
  .home-spotlight .fpc-homepage-spotlight-gallery-actions .btn.btn1 {
    width: 100%;
  }
  .home-spotlight
    .fpc-homepage-spotlight-gallery-actions
    .module.ModuleButton:nth-child(2) {
    order: -1;
  }
}

/* ---- 4. Afwisselende contentblokken ------------------------------- */
.home-block {
  background: #fff;
  padding-block: clamp(40px, 6vw, 80px);
}
.home-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.home-block--reverse .home-block__media {
  order: -1;
}

.home-block__text {
  max-width: 42ch;
}
.home-block__eyebrow {
  margin: 0 0 10px;
  color: var(--fpc-blue);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.82rem;
  line-height: 1;
}
.home-block__title {
  margin: 0 0 16px;
  color: #000;
  font-weight: 700;
  line-height: 1.05;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.home-block__para {
  margin: 0;
  color: var(--fpc-text);
  line-height: 1.6;
}
.home-block__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2%;
}

@media (max-width: 860px) {
  .home-block__grid {
    grid-template-columns: 1fr;
  }
  .home-block--reverse .home-block__media {
    order: 0;
  }
  .home-block__text {
    max-width: none;
  }
  .home-block__media img {
    aspect-ratio: 16 / 10;
  }
}

/* ---- 5. Europa-strip -------------------------------------------- */
.home-europe {
  background: #fff;
  padding-block: clamp(80px, 12vw, 160px);
}
.home-europe__flags {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-bottom: 18px;
}
.home-europe__flags img {
  height: 28px;
  width: auto;
  border-radius: 3px;
}
.home-europe p.fpc-measure {
  max-width: 56ch;
  color: var(--fpc-text);
  margin-inline: auto;
}
@media (max-width: 767.98px) {
  .home-europe p.fpc-measure {
    max-width: 35ch;
  }
}