/* 	=========================================================
	PAGINA 2 - HET VERHAAL ACHTER MIRACLE LIQUORS 
	========================================================= */

.mlv-story 
.mlv-value { 
	padding: 28px; 
	border: 1px solid rgba(255,255,255,.16); 
	border-radius: var(--ml-radius-md); 
	background: rgba(255,255,255,.06); 
}

.mlv-story 
.mlv-value h3 { 
	color: var(--ml-color-gold-soft); 
}

.mlv-story 
.ml-info-box h2 { 
	font-size: clamp(1.45rem,3vw,2.2rem); 
}

/* =========================================================
   MIRACLE LIQUORS – HET VERHAAL
   Alleen kleine paginaspecifieke aanvullingen
   ========================================================= */

.mlv-verhaal .mlv-verhaal__hero {
  min-height: 520px;
}

.mlv-verhaal .mlv-verhaal__opening {
  padding-bottom: clamp(50px, 7vw, 90px);
}

.mlv-verhaal .mlv-verhaal__quote {
  max-width: 850px;
  margin: 0 auto clamp(32px, 5vw, 56px);
  padding: 0;
  border: 0;
  text-align: center;
}

.mlv-verhaal .mlv-verhaal__quote p {
  margin: 0;
  color: var(--ml-color-green-900);
  font-family: var(--ml-font-heading);
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1.45;
}

.mlv-verhaal .mlv-verhaal__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--ml-radius-large);
  box-shadow: var(--ml-shadow-medium);
}

.mlv-verhaal .mlv-verhaal__image--landscape img {
  aspect-ratio: 4 / 3;
}

.mlv-verhaal .mlv-verhaal__highlight {
  margin-top: 28px;
  padding-left: 20px;
  border-left: 3px solid var(--ml-color-gold);
  color: var(--ml-color-green-900);
  font-family: var(--ml-font-heading);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
}

.mlv-verhaal .mlv-verhaal__values {
  align-items: stretch;
}

.mlv-verhaal .mlv-verhaal__values .ml-card {
  height: 100%;
}

.mlv-verhaal .mlv-verhaal__signature {
  margin-top: 30px;
  color: var(--ml-color-green-900);
  font-family: var(--ml-font-heading);
  font-size: 1.15rem;
  line-height: 1.5;
}

.mlv-verhaal .mlv-verhaal__signature span {
  color: var(--ml-muted);
  font-family: var(--ml-font-body);
  font-size: 0.9rem;
}

@media (max-width: 980px) {
  .mlv-verhaal .mlv-verhaal__values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .mlv-verhaal .mlv-verhaal__hero {
    min-height: 430px;
  }

  .mlv-verhaal .mlv-verhaal__reverse-mobile .mlv-verhaal__image {
    order: -1;
  }

  .mlv-verhaal .mlv-verhaal__values {
    grid-template-columns: 1fr;
  }

  .mlv-verhaal .mlv-verhaal__quote {
    text-align: left;
  }
}

@media (min-width: 901px) { 
	.mlv-story 
	.ml-grid--3 
	.mlv-value:last-child { 
		grid-column: 2; 
	} 
}

/* =========================================================
   MIRACLE LIQUORS – HET VERHAAL
   Paginaspecifieke aanvullingen
   Wrapper: .mlo-story
   ========================================================= */


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

.mlo-story .mlo-story__hero {
  min-height: clamp(460px, 62vh, 680px);
}


/* ---------------------------------------------------------
   INTRODUCTIE
   --------------------------------------------------------- */

.mlo-story .mlo-story__intro {
  padding-block: clamp(56px, 8vw, 96px);
}

.mlo-story .mlo-story__intro .ml-content {
  max-width: 850px;
  margin-inline: auto;
}


/* ---------------------------------------------------------
   AFBEELDINGEN
   --------------------------------------------------------- */

.mlo-story .mlo-story__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--ml-radius-lg, 18px);
  box-shadow: var(--ml-shadow-md, 0 18px 50px rgba(24, 54, 44, 0.12));
}

.mlo-story .mlo-story__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.mlo-story .mlo-story__media--landscape img {
  aspect-ratio: 4 / 3;
}


/* ---------------------------------------------------------
   VERHAALOPBOUW
   --------------------------------------------------------- */

.mlo-story .mlo-story__second-row {
  margin-top: clamp(56px, 9vw, 110px);
}

.mlo-story .mlo-story__quote {
  position: relative;
  margin: clamp(28px, 4vw, 42px) 0;
  padding: 0 0 0 clamp(22px, 4vw, 34px);
  border: 0;
  border-left: 3px solid var(--ml-color-gold, #ffc857);
}

.mlo-story .mlo-story__quote p {
  margin: 0;
  color: var(--ml-color-green-900, #29483e);
  font-family: var(--ml-font-heading, "Cinzel Decorative", serif);
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  line-height: 1.5;
}

.mlo-story .mlo-story__emphasis {
  margin-top: 28px;
  color: var(--ml-color-green-900, #29483e);
  font-family: var(--ml-font-heading, "Cinzel Decorative", serif);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.5;
}


/* ---------------------------------------------------------
   PERSOONLIJKE SECTIE
   --------------------------------------------------------- */

.mlo-story .mlo-story__personal {
  margin-top: clamp(56px, 8vw, 96px);
}

.mlo-story .mlo-story__choice {
  max-width: 650px;
  margin: clamp(30px, 5vw, 44px) auto 0;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--ml-border, rgba(55, 82, 72, 0.18));
  border-radius: var(--ml-radius-md, 14px);
  background: var(--ml-color-cream, #f8f5f0);
}

.mlo-story .mlo-story__choice p {
  margin: 0;
}

.mlo-story .mlo-story__choice p + p {
  margin-top: 8px;
}

.mlo-story .mlo-story__choice strong {
  color: var(--ml-color-green-900, #29483e);
}


/* ---------------------------------------------------------
   VISIE EN KERNPUNTEN
   --------------------------------------------------------- */

.mlo-story .mlo-story__pillars {
  margin-top: clamp(48px, 7vw, 80px);
  align-items: stretch;
}

.mlo-story .mlo-story__pillars .ml-card {
  height: 100%;
}

.mlo-story .mlo-story__vision {
  margin-top: clamp(50px, 8vw, 90px);
}

.mlo-story .mlo-story__closing-line {
  margin-top: 30px;
  color: inherit;
  font-family: var(--ml-font-heading, "Cinzel Decorative", serif);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.55;
}


/* ---------------------------------------------------------
   AFSLUITING
   --------------------------------------------------------- */

.mlo-story .mlo-story__signoff {
  margin-top: 24px;
}

.mlo-story .mlo-story__signature {
  margin: 24px 0 0;
  line-height: 1.5;
}

.mlo-story .mlo-story__signature strong {
  font-family: var(--ml-font-heading, "Cinzel Decorative", serif);
  font-size: 1.05rem;
}

.mlo-story .mlo-story__signature span {
  font-size: 0.9rem;
  opacity: 0.8;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 980px) {

  .mlo-story .mlo-story__pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mlo-story .mlo-story__pillars .ml-card:last-child {
    grid-column: 1 / -1;
    max-width: 600px;
    width: 100%;
    margin-inline: auto;
  }

}


/* ---------------------------------------------------------
   MOBIEL
   --------------------------------------------------------- */

@media (max-width: 767px) {

  .mlo-story .mlo-story__hero {
    min-height: 430px;
  }

  .mlo-story .mlo-story__second-row {
    margin-top: 64px;
  }

  .mlo-story .mlo-story__second-row .mlo-story__media {
    order: -1;
  }

  .mlo-story .mlo-story__media img,
  .mlo-story .mlo-story__media--landscape img {
    aspect-ratio: 4 / 3;
  }

  .mlo-story .mlo-story__pillars {
    grid-template-columns: 1fr;
  }

  .mlo-story .mlo-story__pillars .ml-card:last-child {
    grid-column: auto;
    max-width: none;
  }

  .mlo-story .mlo-story__quote {
    padding-left: 20px;
  }

  .mlo-story .mlo-story__choice {
    text-align: left;
  }

}