/* =========================================================
   MIRACLE LIQUORS – PROEVERIJENPAGINA
   custom-mlp.css

   Doel:
   Alleen pagina-specifieke styling voor de Proeverijenpagina.

   Algemene styling komt uit:
   /base/
   - variables.css
   - typography.css
   - buttons.css
   - spacing.css
   - accessibility.css

   /layout/
   - containers.css
   - grids.css
   - sections.css

   /components/
   - hero.css
   - section-header.css
   - feature.css
   - benefits.css
   - reviews.css
   - carousel.css
   - accordion.css
   - cta.css
   - icons.css

   Pagina-namespace:
   mlp- = alleen Proeverijenpagina
   ========================================================= */


/* =========================================================
   1. PAGINA
   ========================================================= */

/*
 * Gebruik deze class eventueel op een omvattend element:
 *
 * <main class="mlp-page">
 *
 * Hiermee kunnen pagina-specifieke correcties veilig worden
 * beperkt tot de Proeverijenpagina.
 */

.mlp-page {
  width: 100%;
  min-width: 0;
}


/* =========================================================
   2. HERO – PAGINA-SPECIFIEKE AANPASSINGEN
   ========================================================= */

/*
 * De basis van de hero komt uit components/hero.css.
 *
 * Voorbeeld:
 *
 * <section
 *   class="ml-hero mlp-hero"
 *   style="
 *     --ml-hero-image: url(...);
 *     --ml-hero-position: center 45%;
 *     --ml-hero-position-tablet: 58% center;
 *     --ml-hero-position-mobile: 62% center;
 *   "
 * >
 *
 * Alleen afwijkingen die specifiek zijn voor deze pagina
 * horen hieronder.
 */

.mlp-hero {
  --mlp-hero-content-width: 760px;
}

.mlp-hero .ml-hero__content {
  max-width: var(--mlp-hero-content-width);
}


/* =========================================================
   3. INTRODUCTIE
   Origineel groepsuitje in Leiden
   ========================================================= */

/*
 * HTML-basis:
 *
 * <section class="ml-section mlp-intro">
 *   <div class="ml-container ml-container-text">
 *     <header class="ml-section-header ...">
 *       ...
 *     </header>
 *   </div>
 * </section>
 */

.mlp-intro {
  position: relative;
}

.mlp-intro .ml-section-header {
  margin-inline: auto;
}

.mlp-intro .ml-section-header__intro {
  max-width: 720px;
}


/*
 * Optioneel tweede tekstblok.
 *
 * Gebruik:
 *
 * <p class="mlp-intro__location">
 *   De proeverij vindt plaats...
 * </p>
 */

.mlp-intro__location {
  max-width: 660px;
  margin: 18px auto 0;
  color: var(--ml-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  text-align: center;
}


/* =========================================================
   4. EXPERIENCE FEATURE
   Dit kun je verwachten
   ========================================================= */

/*
 * Basis komt uit components/feature.css.
 *
 * Gebruik:
 *
 * <article class="ml-feature ml-feature--reverse mlp-experience">
 */

.mlp-experience {
  width: 100%;
}


/* ---------- Tekst ---------- */

.mlp-experience .ml-feature__intro {
  max-width: 640px;
}


/*
 * Wanneer twee introductieparagrafen direct onder elkaar staan,
 * voorkomen we te veel witruimte.
 */

.mlp-experience .ml-feature__intro + .ml-feature__intro {
  margin-top: 14px;
}


/* =========================================================
   5. EXPERIENCE BENEFITS
   ========================================================= */

/*
 * De structuur en basisvormgeving komen uit benefits.css.
 *
 * Dit gedeelte bepaalt alleen hoe de compacte benefits
 * binnen de feature op deze pagina worden weergegeven.
 */

.mlp-experience .ml-benefits {
  margin-top: clamp(28px, 4vw, 38px);
}


/*
 * Wanneer de algemene benefits-component een grid gebruikt,
 * maken we binnen de feature een verticale variant.
 */

.mlp-experience .ml-benefits--compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}


/* ---------- Los benefit-item ---------- */

.mlp-experience .ml-benefit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
  padding-block: 18px;
  border-bottom: 1px solid var(--ml-border);
}

.mlp-experience .ml-benefit:first-child {
  border-top: 1px solid var(--ml-border);
}


/* ---------- Icoon ---------- */

.mlp-experience .ml-benefit__icon {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--ml-surface-soft);
  color: var(--ml-primary);
}

.mlp-experience .ml-benefit__icon svg {
  width: 22px;
  height: 22px;
}


/* ---------- Content ---------- */

.mlp-experience .ml-benefit__content {
  min-width: 0;
}

.mlp-experience .ml-benefit__title {
  margin: 0 0 5px;
  font-size: 1rem;
  line-height: 1.35;
}

.mlp-experience .ml-benefit__text {
  margin: 0;
  color: var(--ml-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}


/* =========================================================
   6. EXPERIENCE – PERSOONLIJKE NOOT
   ========================================================= */

/*
 * Afsluitende boodschap:
 *
 * <p class="ml-feature__note mlp-experience__note">
 *   Geen twee groepen zijn hetzelfde...
 * </p>
 */

.mlp-experience__note {
  position: relative;
  margin: 26px 0 0;
  padding: 18px 20px 18px 24px;
  border-left: 3px solid var(--ml-accent);
  background: var(--ml-surface-soft);
  color: var(--ml-primary);
  font-size: 0.93rem;
  line-height: 1.65;
}


/* =========================================================
   7. PRAKTISCHE INFORMATIE
   ========================================================= */

/*
 * Deze sectie is het belangrijkste pagina-specifieke component.
 *
 * Structuur:
 *
 * <section class="ml-section ml-section--soft mlp-practical">
 *
 *   <div class="ml-container">
 *
 *     <header class="ml-section-header ...">
 *       ...
 *     </header>
 *
 *     <div class="mlp-details">
 *
 *       <dl class="mlp-details__list">
 *
 *         <div class="mlp-details__item">
 *           <dt class="mlp-details__label">Duur</dt>
 *           <dd class="mlp-details__value">
 *             Ongeveer 1,5 tot 2 uur
 *           </dd>
 *         </div>
 *
 *       </dl>
 *
 *     </div>
 *
 *   </div>
 *
 * </section>
 */

.mlp-practical {
  position: relative;
}


/* ---------- Buitenste kaart ---------- */

.mlp-details {
  width: min(100%, 980px);
  margin-inline: auto;
}


/* ---------- Definitielijst ---------- */

.mlp-details__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-md);
  background: var(--ml-surface);
  box-shadow: var(--ml-shadow-sm);
}


/* ---------- Item ---------- */

.mlp-details__item {
  display: grid;
  grid-template-columns: minmax(105px, 0.7fr) minmax(0, 1.3fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
  padding: 23px 25px;
  border-bottom: 1px solid var(--ml-border);
}


/*
 * Scheidingslijn tussen linker- en rechterkolom.
 */

.mlp-details__item:nth-child(odd) {
  border-right: 1px solid var(--ml-border);
}


/*
 * Bij exact 8 praktische items zitten item 7 en 8
 * op de onderste rij.
 */

.mlp-details__item:nth-last-child(-n + 2) {
  border-bottom: 0;
}


/* ---------- Label ---------- */

.mlp-details__label {
  margin: 0;
  color: var(--ml-primary);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
}


/* ---------- Waarde ---------- */

.mlp-details__value {
  min-width: 0;
  margin: 0;
  color: var(--ml-text);
  font-size: 0.93rem;
  line-height: 1.65;
}


/*
 * Voorkom dat bijvoorbeeld adresregels of langere woorden
 * horizontale overflow veroorzaken.
 */

.mlp-details__value {
  overflow-wrap: anywhere;
}


/* =========================================================
   8. PRAKTISCHE INFO – HIGHLIGHTS
   ========================================================= */

/*
 * Optioneel kun je belangrijke waarden accentueren:
 *
 * <strong class="mlp-details__highlight">
 *   € 34,95 per persoon
 * </strong>
 */

.mlp-details__highlight {
  color: var(--ml-primary);
  font-weight: 600;
}


/* =========================================================
   9. PRAKTISCHE INFO – CTA
   ========================================================= */

.mlp-details__footer {
  display: grid;
  justify-items: center;
  gap: 20px;
  width: min(100%, 700px);
  margin: 34px auto 0;
  text-align: center;
}

.mlp-details__footer-text {
  margin: 0;
  color: var(--ml-muted);
  font-size: 0.97rem;
  line-height: 1.7;
}


/* =========================================================
   10. REVIEWS
   ========================================================= */

/*
 * De reviews zelf horen uit components/reviews.css en/of
 * components/carousel.css te komen.
 *
 * Hiermee kunnen we alleen pagina-specifieke afstand
 * bijstellen indien nodig.
 */

.mlp-reviews {
  position: relative;
}


/* =========================================================
   11. FAQ
   ========================================================= */

/*
 * De accordion komt volledig uit components/accordion.css.
 *
 * Alleen de maximale breedte is hier paginaspecifiek.
 */

.mlp-faq {
  position: relative;
}

.mlp-faq .ml-accordion {
  width: min(100%, 850px);
  margin-inline: auto;
}


/* =========================================================
   12. AFSLUITENDE CTA – OPTIONeel
   ========================================================= */

/*
 * Alleen gebruiken als je na de FAQ nog een CTA plaatst.
 *
 * De basis komt uit components/cta.css.
 */

.mlp-final-cta .ml-cta__content {
  max-width: 760px;
}


/* =========================================================
   13. DIVI RESET
   ========================================================= */

/*
 * Gebruik alleen op een Divi-sectie waarin je een volledig
 * custom HTML-component plaatst.
 *
 * CSS-class in Divi:
 * mlp-divi-reset
 *
 * Hiermee voorkomen we dat Divi eigen padding / max-width
 * rondom de custom componenten toevoegt.
 */

.mlp-divi-reset.et_pb_section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.mlp-divi-reset > .et_pb_row,
.mlp-divi-reset .et_pb_row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mlp-divi-reset .et_pb_column,
.mlp-divi-reset .et_pb_code,
.mlp-divi-reset .et_pb_code_inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}


/* =========================================================
   14. TABLET
   ========================================================= */

@media (max-width: 980px) {

  /* ---------------------------------------------------------
     HERO
     --------------------------------------------------------- */

  .mlp-hero {
    --mlp-hero-content-width: 680px;
  }


  /* ---------------------------------------------------------
     PRAKTISCHE INFORMATIE
     --------------------------------------------------------- */

  .mlp-details__list {
    grid-template-columns: 1fr;
  }

  .mlp-details__item {
    grid-template-columns: minmax(125px, 0.65fr) minmax(0, 1.35fr);
  }

  .mlp-details__item:nth-child(odd) {
    border-right: 0;
  }

  .mlp-details__item:nth-last-child(2) {
    border-bottom: 1px solid var(--ml-border);
  }

  .mlp-details__item:last-child {
    border-bottom: 0;
  }

}


/* =========================================================
   15. MOBIEL
   ========================================================= */

@media (max-width: 680px) {

  /* ---------------------------------------------------------
     INTRO
     --------------------------------------------------------- */

  .mlp-intro__location {
    margin-top: 14px;
    font-size: 0.9rem;
    line-height: 1.65;
  }


  /* ---------------------------------------------------------
     EXPERIENCE
     --------------------------------------------------------- */

  .mlp-experience .ml-feature__intro + .ml-feature__intro {
    margin-top: 12px;
  }

  .mlp-experience .ml-benefits {
    margin-top: 24px;
  }

  .mlp-experience .ml-benefit {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 13px;
    padding-block: 15px;
  }

  .mlp-experience .ml-benefit__icon {
    width: 40px;
    height: 40px;
  }

  .mlp-experience .ml-benefit__icon svg {
    width: 20px;
    height: 20px;
  }

  .mlp-experience .ml-benefit__title {
    margin-bottom: 3px;
    font-size: 0.96rem;
  }

  .mlp-experience .ml-benefit__text {
    font-size: 0.86rem;
    line-height: 1.55;
  }

  .mlp-experience__note {
    margin-top: 21px;
    padding: 15px 17px 15px 20px;
    font-size: 0.87rem;
    line-height: 1.6;
  }


  /* ---------------------------------------------------------
     PRAKTISCHE INFORMATIE
     --------------------------------------------------------- */

  .mlp-details__list {
    border-radius: var(--ml-radius-sm);
  }

  .mlp-details__item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 17px 19px;
  }

  .mlp-details__label {
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .mlp-details__value {
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .mlp-details__footer {
    gap: 17px;
    margin-top: 27px;
  }

  .mlp-details__footer-text {
    font-size: 0.9rem;
    line-height: 1.6;
  }

}


/* =========================================================
   16. ZEER SMALLE TELEFOONS
   ========================================================= */

@media (max-width: 420px) {

  .mlp-experience .ml-benefit {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
  }

  .mlp-experience .ml-benefit__icon {
    width: 36px;
    height: 36px;
  }

  .mlp-experience .ml-benefit__icon svg {
    width: 18px;
    height: 18px;
  }

  .mlp-details__item {
    padding: 16px;
  }

}


/* =========================================================
   17. TOEGANKELIJKHEID
   ========================================================= */

/*
 * De algemene reduced-motion-regels staan in
 * base/accessibility.css.
 *
 * Hieronder staan daarom alleen eventuele
 * pagina-specifieke aanvullingen.
 */

@media (prefers-reduced-motion: reduce) {

  .mlp-page *,
  .mlp-page *::before,
  .mlp-page *::after {
    scroll-behavior: auto;
  }

}