/*
 * Page-specific styles for over-ons.html.
 *
 * Keep every selector under .over-ons-page so future modifications remain
 * isolated from the other inner pages and the shared/global stylesheets.
 * This file is intentionally loaded after all shared page styles.
 */

.over-ons-page .product-zone {
  padding: 60px 0 60px;
  background: #ffffff;
  overflow: hidden;
}

/* Match the activiteiten-overzicht section actions on this page only. */
.over-ons-page .ons-cafe a.ons-cafe__link,
.over-ons-page .ovar-team a.ovar-team__contact,
.over-ons-page .product-zone a.section-link--arrangements-head,
.over-ons-page .product-zone a.section-link--arrangements-actions {
  color: #ffffff;
  background: #963a75;
  font-size: 14px;
  font-weight: 300;
  line-height: normal;
  text-decoration: none;
  border-radius: 100px;
  padding: 10px 20px;
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.over-ons-page .ons-cafe a.ons-cafe__link:hover,
.over-ons-page .ons-cafe a.ons-cafe__link:focus-visible,
.over-ons-page .ovar-team a.ovar-team__contact:hover,
.over-ons-page .ovar-team a.ovar-team__contact:focus-visible,
.over-ons-page .product-zone a.section-link--arrangements-head:hover,
.over-ons-page .product-zone a.section-link--arrangements-head:focus-visible,
.over-ons-page .product-zone a.section-link--arrangements-actions:hover,
.over-ons-page .product-zone a.section-link--arrangements-actions:focus-visible {
  color: #ffffff;
  background: #ff8359;
  transform: translateY(-1px);
}

/* Ons verhaal: tighten the selected lead paragraph by 5px on both sides. */
.over-ons-page .intro .intro__title {
  margin-bottom: 13px;
}

.over-ons-page .intro .intro__copy .be-copy:first-of-type + .be-copy {
  margin-top: 17px;
}

.over-ons-page .intro .intro__copy .be-copy:first-of-type,
.over-ons-page .intro .intro__copy .be-copy:first-of-type p {
  font-size: 18px;
}

/* Ons verhaal: reduced top padding for both selected mini-cards. */
.over-ons-page .intro .intro__cards .mini-card {
  padding-top: 10px;
}

.over-ons-page .intro .intro__cards .mini-card h3 {
  margin-top: 7px;
}

/*
 * The supplied Over Ons package carries a page-specific Intro stylesheet.
 * Restore those exact values here without changing the shared homepage Intro.
 */
.over-ons-page .intro {
  padding: 60px 0 10px;
}

.over-ons-page .intro .intro__media {
  padding-left: 0;
}

.over-ons-page .intro .media-zigzag--intro-top {
  left: 0;
}

.over-ons-page .intro .intro__cards .mini-card {
  padding-top: 12px !important;
}

/* ACF stores the two card icons as real images instead of CSS pseudo-elements. */
.over-ons-page .intro .mini-card__icon-background,
.over-ons-page .intro .mini-card__icon-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.over-ons-page .intro .mini-card__icon-background {
  width: 65px;
  height: 60px;
}

.over-ons-page .intro .mini-card__icon-symbol {
  width: 36px;
  height: 40px;
}

@media (max-width: 1024px) {
  .over-ons-page .intro {
    padding: 60px 0 72px;
  }
}

@media (max-width: 767px) {
  .over-ons-page .intro {
    padding: 60px 0 10px;
  }

  .over-ons-page .intro .intro__media {
    padding: 40px 10px 35px;
  }

  .over-ons-page .intro .media-zigzag--intro-top {
    left: -5px;
  }

  .over-ons-page .intro .intro__copy .be-copy:first-of-type,
  .over-ons-page .intro .intro__copy .be-copy:first-of-type p {
    font-size: 16px;
  }
}

/* Ons cafe: reduce the section's top spacing by 65px. */
.over-ons-page .ons-cafe {
  padding-top: 17px;
}

@media (max-width: 1024px) {
  .over-ons-page .ons-cafe {
    padding-top: 5px;
  }
}

@media (max-width: 640px) {
  .over-ons-page .ons-cafe {
    padding-top: 0;
  }
}

/* Team: move the section upward by 25px in total. */
.over-ons-page .ovar-team {
  margin-top: -1px;
  padding-top: 0;
  padding-bottom: 86px;
}

@media (max-width: 1200px) {
  .over-ons-page .ovar-team {
    padding-bottom: 70px;
  }
}

@media (max-width: 905px) {
  .over-ons-page .ovar-team {
    margin-top: -17px;
  }
}

@media (max-width: 640px) {
  .over-ons-page .ovar-team {
    padding-bottom: 54px;
  }
}

/* Team cards: remove the pale edge above the photos. */
.over-ons-page .ovar-team .ovar-team__card {
  border: 0;
}

.over-ons-page .ovar-team .ovar-team__photo {
  width: calc(100% + 2px);
  max-width: none;
  margin: -1px -1px 0;
}

@media (max-width: 767px) {
  .over-ons-page .ovar-team .ovar-team__card {
    background: transparent;
    box-shadow: none;
  }

  .over-ons-page .ovar-team .ovar-team__photo {
    width: 100%;
    margin: 0;
    border-radius: 22px 22px 0 0;
  }

  .over-ons-page .ovar-team .ovar-team__body {
    background: #ffffff;
  }
}

/* Team: match the container grid used by the Ons cafe section above. */
.over-ons-page .ovar-team > .be-container {
  width: calc(100% - 160px);
  max-width: 1300px;
  padding-inline: 0;
}

@media (max-width: 1200px) and (min-width: 1025px) {
  .over-ons-page .ovar-team > .be-container {
    width: calc(100% - 120px);
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .over-ons-page .ovar-team > .be-container {
    width: calc(100% - 80px);
  }
}

@media (max-width: 767px) {
  .over-ons-page .ovar-team > .be-container {
    width: calc(100% - 40px);
  }
}

/* Reviews: reduce the space below the section by 30px. */
.over-ons-page .reviews {
  padding-bottom: 40px;
  background: #ffffff;
}

/* Keep the Over Ons reviews at the exact width and card depth in its source design. */
.over-ons-page .reviews .be-container {
  width: min(calc(100% - 160px), 1300px);
}

.over-ons-page .reviews .review-card {
  box-shadow: 0 8px 10px rgb(80 31 58 / 11%);
}

@media (max-width: 1500px) and (min-width: 1201px) {
  .over-ons-page .reviews .be-container {
    width: min(calc(100% - 160px), 1300px);
  }
}

@media (max-width: 1200px) and (min-width: 1025px) {
  .over-ons-page .reviews .be-container {
    width: min(calc(100% - 120px), 1300px);
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .over-ons-page .reviews .be-container {
    width: min(calc(100% - 80px), 1300px);
  }
}

@media (max-width: 767px) {
  .over-ons-page .reviews .be-container {
    width: min(calc(100% - 40px), 1300px);
  }
}

/* Product cards: page-specific CTA color. */
.over-ons-page .product-zone .product-card .be-button {
  background-color: #f84b4c;
}

.over-ons-page .product-zone .product-card .be-button:hover,
.over-ons-page .product-zone .product-card .be-button:focus-visible {
  background-color: var(--be-plum-soft);
}

/* Over Ons story: keep both paragraphs at the same readable size. */
.over-ons-page #ons-verhaal .intro__copy .be-copy + .be-copy {
  font-size: 18px;
  line-height: 1.45;
}

.over-ons-page #ons-verhaal .intro__copy .be-copy + .be-copy p {
  font-size: inherit;
}

@media (max-width: 767px) {
  .over-ons-page #ons-verhaal .intro__copy .be-copy + .be-copy {
    font-size: 16px;
  }
}