/* ============================================================
   Feature Navigator — content-feature
   Foundation26 / atelier26
   Ratio + Radius classes come from foundation26-utilities.css
   ============================================================ */

.content-feature {
  --fn-gap: calc(var(--bs-gutter-x) * 1);
  --fn-item-min-width: 200px;
  --fn-duration: 0.2s;
  --fn-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fn-border-color: hsl(from var(--bs-border-color) h s l / var(--bs-border-opacity));
  --fn-border-width: 1px;
  position: relative;
  container-type: inline-size;
}

/* Header (spans full width above body) */
.content-feature .feature-header {
  margin-bottom: var(--fn-gap);
}

/* Body */
.content-feature .feature-body {
  display: flex;
  flex-direction: column;
  gap: var(--fn-gap);
}

/* Mobile: preview above nav list (Framer-style) */
.content-feature .feature-preview { order: 1; }
.content-feature .feature-nav-col { order: 2; }

/* Nav column: list only (header is outside the body) */
.content-feature .feature-nav-col {
  display: flex;
  flex-direction: column;
  gap: var(--fn-gap);
}

/* ----------------------------------------------------------
   NAV LIST + ITEMS
   ---------------------------------------------------------- */
.content-feature .feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
  scrollbar-width: none;
}
.content-feature .feature-list::-webkit-scrollbar { display: none; }

/* Suppress all transitions during JS init */
.content-feature.fn-init * { transition: none !important; }

.content-feature .feature-item {
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 45%;
  max-width: 45%;
  margin-right: var(--fn-gap);
  padding-bottom: calc(var(--bs-gutter-y) * .5);
  border-bottom: var(--fn-border-width) solid var(--fn-border-color);
  transition: border-color .12s ease-in-out, color .12s ease-in-out;
  opacity: .6;
}

.content-feature .feature-item:hover,
.content-feature .feature-item.is-active {
  border-bottom-color: hsl(from currentColor h s l / 0.5); ;
  opacity: 1;
}
.content-feature .feature-item.is-active {
  opacity: 1;
  border-bottom-color: var(--bs-primary-base);
}

/* Progress bar */
.content-feature .feature-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--fn-border-width);
  width: 0%;
  background-color: var(--bs-primary-base);
  transition: width linear;
  pointer-events: none;
}
.content-feature .feature-item.is-playing .feature-progress { width: 100%; }

/* ----------------------------------------------------------
   PREVIEW — panels + transitions
   ---------------------------------------------------------- */
.content-feature .feature-preview {
  position: relative;
  overflow: hidden;
}

.content-feature .feature-panel { width: 100%; }

.content-feature h4 {
  margin-bottom: 0;
}

/* Fade */
.content-feature.feature-transition-0 .feature-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fn-duration) var(--fn-ease);
}
.content-feature.feature-transition-0 .feature-panel.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* Slide */
.content-feature.feature-transition-1 .feature-panel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform var(--fn-duration) var(--fn-ease);
}
.content-feature.feature-transition-1 .feature-panel.is-active {
  position: relative;
  pointer-events: auto;
  transform: translateX(0);
}
.content-feature.feature-transition-1 .feature-panel.fn-slide-out-left  { transform: translateX(-100%); }
.content-feature.feature-transition-1 .feature-panel.fn-slide-out-right { transform: translateX(100%); }
.content-feature.feature-transition-1 .feature-panel.fn-slide-in-right  { transform: translateX(100%); }
.content-feature.feature-transition-1 .feature-panel.fn-slide-in-left   { transform: translateX(-100%); }

/* None */
.content-feature.feature-transition-2 .feature-panel         { display: none; }
.content-feature.feature-transition-2 .feature-panel.is-active { display: block; }

/* Media — inactive panels dimmed, active full opacity */
.content-feature .feature-panel .feature-media-wrap {
  opacity: .5;
  transition: opacity .5s cubic-bezier(0.4, 0, 0.2, 1);
}
.content-feature .feature-panel.is-active .feature-media-wrap {
  opacity: 1;
}

/* Media — default flow (no ratio set) */
.content-feature .feature-media-wrap img,
.content-feature .feature-media-wrap video,
.content-feature .feature-media-wrap dotlottie-player {
  width: 100%;
  height: auto;
  display: block;
}


/* ----------------------------------------------------------
   DESKTOP layout via Container Query
   ---------------------------------------------------------- */
@container (min-width: 1024px) {

  .content-feature .feature-body {
    flex-direction: row;
  }

  /* Reset mobile order — desktop uses layout-0/layout-1 directional flow */
  .content-feature .feature-preview,
  .content-feature .feature-nav-col { order: 0; }

  /* Nav column sticky on desktop — top offset + internal scroll wenn Nav > Viewport */
  /* md/lg: 5 von 12 Spalten */
  .content-feature .feature-nav-col {
    flex: 0 0 calc(5 / 12 * 100%);
    position: sticky;
    top: calc(var(--bs-gutter-y) * 6);
    align-self: start;
    max-height: calc(100svh - var(--bs-gutter-y) * 8);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .content-feature .feature-list {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .content-feature .feature-preview {
    flex: 1 1 auto;
    position: sticky;
    top: 2rem;
    align-self: start;
    min-height: 200px;
  }

  .content-feature .feature-item {
    flex: none;
    min-width: auto;
    max-width: none;
    width: 100%;
    scroll-snap-align: none;
    border-radius: 0;
    padding: calc(var(--bs-gutter-y) * .5) 0 calc(var(--bs-gutter-y) * .5) 0;
  }

}



@container (min-width: 1024px) {
  .content-feature .feature-nav-col {
    flex: 0 0 auto;
    width: calc(41.33333333% - calc(var(--bs-gutter-x) * .5));
  }
  /* Layout 0 (Nav links): leere Spalte rechts der Nav */
  .content-feature.feature-layout-0 .feature-nav-col {
    margin-right: 8.33333333%;

  }
  /* Layout 1 (Nav rechts): leere Spalte links der Nav */
  .content-feature.feature-layout-1 .feature-nav-col {
    margin-left: 8.33333333%;
  }
}


@container (min-width: 1024px) {
  .content-feature .feature-nav-col {
    flex: 0 0 auto;
    width: calc(33.33333333% - calc(var(--bs-gutter-x) * .5));
  }
  /* Layout 0 (Nav links): leere Spalte rechts der Nav */
  .content-feature.feature-layout-0 .feature-nav-col {
    margin-right: 8.33333333%;
  }
  /* Layout 1 (Nav rechts): leere Spalte links der Nav */
  .content-feature.feature-layout-1 .feature-nav-col {
    margin-left: 8.33333333%;
  }
}


@container (min-width: 1200px) {
  .content-feature .feature-nav-col {
    flex: 0 0 auto;
    width: calc(33.33333333% - calc(var(--bs-gutter-x) * .5));
  }
  /* Layout 0 (Nav links): leere Spalte rechts der Nav */
  .content-feature.feature-layout-0 .feature-nav-col {
    margin-right: 8.33333333%;

  }
  /* Layout 1 (Nav rechts): leere Spalte links der Nav */
  .content-feature.feature-layout-1 .feature-nav-col {
    margin-left: 8.33333333%;

  }
}





/* Layout 1: Nav right */
@container (min-width: 1024px) {
  .content-feature.feature-layout-1 .feature-body { flex-direction: row-reverse; }
}

/* Header: gleiche Breite + Seite wie .feature-nav-col (Desktop) */
@container (min-width: 1024px) {
  .content-feature .feature-header {
    width: calc(33.33333333% - calc(var(--bs-gutter-x) * .5));
  }
  /* Layout 0 (Nav links): Header links */
  .content-feature.feature-layout-0 .feature-header {
    margin-right: auto;
  }
  /* Layout 1 (Nav rechts): Header rechts */
  .content-feature.feature-layout-1 .feature-header {
    margin-left: auto;
  }
}

/* ----------------------------------------------------------
   SCROLL TRIGGER mode  (.fn-scroll-mode, data-autoplay="-1", ≥1024px only)
   Desktop: panels stacked in normal flow, nav-col sticky + vertikal zentriert,
            IntersectionObserver setzt is-active (Framer-Style).
   Unterhalb 1024px fällt JS in Tab-Mode zurück — keine .fn-scroll-mode-Klasse.
   ---------------------------------------------------------- */
@container (min-width: 1024px) {
  /* Scroll-Mode: gleiche Sticky-Logik wie Tab-Mode — konsistente Position */
  /* (erbt top / max-height / overflow-y aus allgemeiner Desktop-Regel) */

  .content-feature.fn-scroll-mode .feature-preview {
    display: flex;
    flex-direction: column;
    gap: calc(var(--bs-gutter-y) * 4);
    overflow: visible;
    position: static;
  }

  .content-feature.fn-scroll-mode .feature-panel {
    position: relative;
    inset: auto;
    flex: none;
    width: 100%;
    height: auto;
    opacity: .9;
    pointer-events: auto;
    transform: none;
    transition: opacity .4s ease, transform .5s cubic-bezier(.4, 0, .2, 1);
  }
  .content-feature.fn-scroll-mode .feature-panel.is-active { opacity: 1; }

  /* Slide-Variante: Layout 0 (Nav links, Media rechts) → von rechts rein */
  .content-feature.fn-scroll-mode.feature-transition-1.feature-layout-0 .feature-panel {
    transform: translateX(calc(var(--bs-gutter-x) * 2));
  }
  /* Slide-Variante: Layout 1 (Nav rechts, Media links) → von links rein */
  .content-feature.fn-scroll-mode.feature-transition-1.feature-layout-1 .feature-panel {
    transform: translateX(calc(var(--bs-gutter-x) * -2));
  }
  .content-feature.fn-scroll-mode.feature-transition-1 .feature-panel.is-active {
    transform: translateX(0);
  }
}


/* ----------------------------------------------------------
   MEDIA HEIGHT — automatic, always-on
   Mobile:  cap at 70svh so nav stays visible below/above
   Desktop: cap at 90svh; sticky keeps image in viewport
   Portrait images (9:16, 4:5) are clipped at max-height.
   Landscape images (16:9, 8:5) are unaffected in practice.
   ---------------------------------------------------------- */
.content-feature .feature-media-wrap {
  max-height: 70svh;
  overflow: hidden;
}
  .feature-layout-0 .feature-media-wrap,
  .feature-layout-1 .feature-media-wrap {
    margin: 0 auto;
  }

@container (min-width: 768px) {
  .content-feature .feature-media-wrap {
    max-height: 90svh;
  }
  .feature-layout-0 .feature-media-wrap {
    margin: 0 0 0 auto;
  }
  .feature-layout-1 .feature-media-wrap {
    margin: 0 auto 0 0;
  }
}