/* ==========================================================================
   BIG LEDUP STORYTELLING-SEKTION
   Page-spezifische Layouts fuer products/big_ledup.php.
   Generische Caption-/Reveal-Klassen liegen in mkpi-design.css.
   Alle Werte sind ausschliesslich auf bestehende Tokens (--mkpi-*, --space-*)
   gemappt – keine erfundenen Hex-, Spacing- oder Schrift-Werte.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block B – Skalierungs-Visualisierung
   Vier vertikal gestapelte Reihen, jede repraesentiert eine BIG LEDUP Variante.
   Alle Reihen teilen die gleiche Hoehe; die Breite skaliert proportional zur
   echten Produktbreite (880 mm bis 10000 mm) ueber die Inline-Custom-Property
   --w. Reveal-Animation ist eine sanfte Slide-In-Sequenz von links, gesteuert
   ueber --i pro Reihe.

   Jede Reihe ist baulich ein .mkpi-media-placeholder, sodass spaeter ein echtes
   Produktfoto exakt an dieser Stelle eingesetzt werden kann, ohne Layout-Shift.
   -------------------------------------------------------------------------- */

.mkpi-scalability {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
  width: 100%;
  max-width: var(--mkpi-content-wide);
  margin-inline: auto;
  overflow: hidden;
}

.mkpi-scalability__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mkpi-space-3);
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity 700ms ease-out,
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 180ms);
}

.mkpi-scalability.is-visible .mkpi-scalability__row {
  opacity: 1;
  transform: translateX(0);
}

.mkpi-scalability__label {
  margin: 0;
  font-size: var(--mkpi-text-small);
  font-weight: var(--mkpi-weight-semibold);
  color: var(--mkpi-text-secondary-dark);
  line-height: 1.3;
}

.section-light .mkpi-scalability__label,
.section-gray .mkpi-scalability__label {
  color: var(--mkpi-text-secondary);
}

.mkpi-scalability__placeholder {
  width: 100%;
  height: clamp(80px, 11vw, 140px);
  aspect-ratio: auto;
  padding: var(--space-m);
}

.mkpi-scalability__img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--mkpi-radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  .mkpi-scalability__row {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 575.98px) {
  .mkpi-scalability__placeholder {
    height: clamp(64px, 16vw, 100px);
  }
}

/* --------------------------------------------------------------------------
   Block F – Verpackungs-Grid (asymmetrisch)
   Hero-Card spannt links ueber zwei Reihen; vier weitere Cards rechts in 2x2.
   Auf Mobile/Tablet stapelt das Grid einspaltig.
   -------------------------------------------------------------------------- */

.mkpi-packaging-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-l);
  width: 100%;
  max-width: var(--mkpi-content-wide);
  margin-inline: auto;
}

.mkpi-packaging-grid__hero {
  grid-row: 1 / span 2;
}

@media (max-width: 991.98px) {
  .mkpi-packaging-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .mkpi-packaging-grid__hero {
    grid-row: auto;
  }
}

/* --------------------------------------------------------------------------
   Bild-/Video-Platzhalter
   Universelle Komponente fuer Asset-Stellen. Modifier setzen Aspect-Ratio
   sowie Light/Dark-Variante. Hinweistext und Icon werden als Children
   uebergeben (siehe HTML in products/big_ledup.php).
   -------------------------------------------------------------------------- */

.mkpi-media-placeholder {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mkpi-space-3);
  padding: var(--space-xl);
  text-align: center;
  font-size: var(--mkpi-text-small);
  color: var(--mkpi-text-tertiary);
  background: var(--mkpi-bg-secondary);
  border-radius: var(--mkpi-radius-lg);
  overflow: hidden;
}

.mkpi-media-placeholder--ratio-4x5  { aspect-ratio: 4 / 5; }
.mkpi-media-placeholder--ratio-16x9 { aspect-ratio: 16 / 9; }
.mkpi-media-placeholder--ratio-4x3  { aspect-ratio: 4 / 3; }
.mkpi-media-placeholder--ratio-1x1  { aspect-ratio: 1 / 1; }

.mkpi-media-placeholder--dark {
  background: var(--mkpi-bg-darker);
  color: var(--mkpi-text-secondary-dark);
}

/* Auf section-gray teilen Placeholder und Hintergrund denselben Farbwert
   (--mkpi-bg-secondary). Weisser Hintergrund stellt Sichtbarkeit sicher –
   analog zu .section-gray .card { background: var(--mkpi-bg-primary) }. */
.section-gray .mkpi-media-placeholder:not(.mkpi-media-placeholder--dark) {
  background: var(--mkpi-bg-primary);
}

/* Video innerhalb Media-Placeholder: fuellt den Container vollstaendig */
.mkpi-media-placeholder video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.mkpi-media-placeholder__caption {
  max-width: 28ch;
  margin: 0;
  line-height: 1.4;
}

.mkpi-media-placeholder__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--mkpi-icon-size-xl);
  height: var(--mkpi-icon-size-xl);
  border-radius: var(--mkpi-radius-pill);
  background: rgba(255, 255, 255, 0.95);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mkpi-media-placeholder__play .icon {
  background-color: var(--mkpi-text-primary) !important;
}

/* Stat-Cards in Storytelling-Sektionen: Zahl optisch mittig zwischen Prefix
   und Label positionieren.

   Problem: Inter reserviert in der Line-Box Platz fuer Descender, den
   Ziffern nicht nutzen. Das erzeugt unterhalb der Zahl ~0.22 em mehr
   sichtbare Luft als oberhalb – unabhaengig von line-height oder padding.

   Loesung: Negativer margin-bottom in em kompensiert den Descender-Raum
   proportional zur Schriftgroesse (bei 4 rem ≈ 14 px, bei 2.75 rem ≈ 10 px).
   Skaliert mit clamp() der .stat-card h3 font-size. */
.stat-card--balanced h3 {
  padding-top: var(--mkpi-space-2);
  padding-bottom: var(--mkpi-space-2);
  margin-bottom: -0.22em !important;
}

/* Card-Stil im Verpackungs-Grid: Platzhalter belegt nur den Bild-Bereich oben,
   der Card-Body bringt Headline + Beschreibung. Keine eigenen Card-Styles –
   wir nutzen das vorhandene .card / .card-body System. */
.mkpi-packaging-grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mkpi-packaging-grid .card .mkpi-media-placeholder {
  border-radius: 0;
  border-bottom: 1px solid var(--mkpi-border-light);
}

.mkpi-packaging-grid__hero .mkpi-media-placeholder {
  aspect-ratio: 4 / 5;
}

/* Block D – Bilder-Diashow (reiner CSS-Crossfade, 3 Slides)
   Zyklus: 9 s gesamt (3 Bilder × 3 s). Jedes Bild ist 2 s sichtbar,
   1 s Fade-Übergang zum nächsten. */
.mkpi-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--mkpi-radius-lg);
  overflow: hidden;
}

.mkpi-slideshow__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: mkpiSlideshow 9s ease-in-out infinite;
}

.mkpi-slideshow__slide:nth-child(1) { animation-delay: 0s; }
.mkpi-slideshow__slide:nth-child(2) { animation-delay: 3s; }
.mkpi-slideshow__slide:nth-child(3) { animation-delay: 6s; }

@keyframes mkpiSlideshow {
  0%      { opacity: 0; }
  11%     { opacity: 1; }
  33.33%  { opacity: 1; }
  44.33%  { opacity: 0; }
  100%    { opacity: 0; }
}

/* Slideshow-Indikatoren: Pill-Dots am unteren Rand */
.mkpi-slideshow__indicators {
  position: absolute;
  bottom: var(--space-l);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}

.mkpi-slideshow__dot {
  display: block;
  height: 8px;
  width: 8px;
  border-radius: var(--mkpi-radius-pill);
  background: rgba(0, 180, 160, 0.55);
  transition: none;
  animation: mkpiDotIdle 9s ease-in-out infinite;
}

.mkpi-slideshow__dot:nth-child(1) { animation-delay: 0s; }
.mkpi-slideshow__dot:nth-child(2) { animation-delay: 3s; }
.mkpi-slideshow__dot:nth-child(3) { animation-delay: 6s; }

@keyframes mkpiDotIdle {
  0%      { width: 8px;  background: rgba(0, 180, 160, 0.55); }
  11%     { width: 24px; background: var(--mkpi-icon-color); }
  33.33%  { width: 24px; background: var(--mkpi-icon-color); }
  44.33%  { width: 8px;  background: rgba(0, 180, 160, 0.55); }
  100%    { width: 8px;  background: rgba(0, 180, 160, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .mkpi-slideshow__slide {
    animation: none;
  }
  .mkpi-slideshow__slide:first-child {
    opacity: 1;
  }
  .mkpi-slideshow__dot {
    animation: none;
  }
  .mkpi-slideshow__dot:first-child {
    width: 24px;
    background: var(--mkpi-icon-color);
  }
}