/* =========================================================================
   /events — visueel afgestemd op de oude Ucraft-eventspagina
   (page-hero blijft ongemoeid; dat is de gedeelde .fpc-page-hero)
   ========================================================================= */

/* ---- 2. Categoriestrook: 5 iconen + labels --------------------------- */
.events-cats {
  background: #fff;
  padding-block: clamp(40px, 6vw, 72px);
}
.events-cats__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 3vw, 40px);
}
.events-cats__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  text-decoration: none;
}
/* Iconen: exact zoals Ucraft's .ModuleIcon .icon
   (rgb(1,77,139) = --fpc-blue; svg vult de box; svg * erft de fill zodat de
   inline fill="#000000" in het off-road-icoon overschreven wordt). */
.events-cats__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 4.6vw, 46px);
  height: clamp(38px, 4.6vw, 46px);
  color: rgb(1, 77, 139);
  fill: rgb(1, 77, 139);
  transition: color 0.2s ease, fill 0.2s ease;
}
.events-cats__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: inherit;
}
.events-cats__icon svg * {
  fill: inherit !important;
  stroke: transparent !important;
}
.events-cats__icon svg [fill="none"] {
  fill: none !important;
}
.events-cats__link:hover .events-cats__icon {
  color: var(--fpc-blue-light);
  fill: var(--fpc-blue-light);
}
/* Labels: zwart, bold, groter. */
.events-cats__label {
  font-family: "Ford F-1 Bold Custom", "Ford F-1", sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
  color: #000;
}

/* Categoriestrook is puur een desktop-navigatiehulp (ankers naar de
   detailblokken). Op mobiel niet tonen. */
@media (max-width: 767.98px) {
  .events-cats {
    display: none;
  }
}

/* ---- 3. Kalender: kop + divider + widget ---------------------------- */
/* decoratieve "Ford script"-achtergrond, 1-op-1 van de Ucraft-kalendersectie
   (opacity 0.45, object-position 59.756% 41.417%). Ligt achter de inhoud. */
.events-calendar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.events-calendar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("https://media.fordperformanceclub.eu/General/icons/original/3747-2923-r1687-ford-script-bg-33e5623f.svg");
  background-repeat: no-repeat;
  background-position: 59.756% 41.417%;
  background-size: cover;
  opacity: 0.45;
  pointer-events: none;
}
.events-calendar__head {
  text-align: center;
  margin-bottom: clamp(28px, 5vw, 48px);
}
.events-calendar__head h2 {
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: "Ford F-1 Bold Custom", "Ford F-1", sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}
.events-calendar__divider {
  display: block;
  width: 60px;
  height: 0;
  margin: 0 auto;
  border-bottom: 6px solid #bfbfbf;
}
.events-calendar__prev {
  margin-top: clamp(32px, 5vw, 56px);
  text-align: center;
}
.events-calendar__prev .fpc-btn {
  height: 38px;
  min-width: 0;
  padding-inline: 20px;
  font-size: 0.82rem;
}

/* ---- 5. Afwisselende detailblokken -------------------------------- */
.events-detail {
  background: #fff;
  padding-block: clamp(40px, 6vw, 80px);
  scroll-margin-top: calc(var(--fpc-header-h) + 24px);
}
.events-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.events-detail--reverse .events-detail__media {
  order: -1;
}
.events-detail__text {
  max-width: 44ch;
}
.events-detail__title {
  margin: 8px 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;
}
.events-detail__para {
  margin: 0;
  color: var(--fpc-text);
  line-height: 1.6;
}
.events-detail__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2%;
}

@media (max-width: 860px) {
  .events-detail__grid {
    grid-template-columns: 1fr;
  }
  .events-detail--reverse .events-detail__media {
    order: 0;
  }
  .events-detail__text {
    max-width: none;
  }
  .events-detail__media img {
    aspect-ratio: 16 / 10;
  }
  .events-detail {
    scroll-margin-top: calc(var(--fpc-header-h-mobile) + 16px);
  }
}
@media (max-width: 767.98px) {
  .events-detail__para {
    font-size: 0.82rem;
    line-height: 1.55;
  }
}