/* ============================================================
   Carousel Component - Story & Jobs
   ============================================================
   Shared visual engine for the homepage story carousel and the jobs carousel.
   Runtime behavior lives in carousel-engine.js; this file owns layout, cards,
   image scrims, states, controls, and mobile tuning.

   SSOT knobs live in variables.css:
   --media-image-scrim, --glass-on-dark-*, --carousel-card-*,
   --carousel-ctrl-* and the shared motion/card tokens.
   ============================================================ */

/* Showcase Band */
.gallery-showcase {
  background: var(--carousel-showcase-bg);
}

.gallery-showcase-head {
  text-align: left;
  margin-bottom: var(--space-8);
}

.gallery-showcase-head .section-subtitle {
  margin: 0;
  max-width: 820px;
}

.gallery-showcase-link {
  display: inline-flex;
  margin-top: var(--space-5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-text);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--c-red-light) / 0.60);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.gallery-showcase-link:hover,
.gallery-showcase-link:focus-visible {
  color: var(--color-text-inverse);
  border-color: var(--on-dark-text-muted);
  transform: translateY(-1px);
}

.gallery-showcase-stage {
  display: block;
}

/* Shared Engine Defaults */
:is(.story-carousel, .jobs-carousel) {
  position: relative;
  --carousel-slide-width: min(90vw, 980px);
  --carousel-track-min-height: min(58vw, 560px);
  --carousel-mobile-track-min-height: min(116vw, 560px);
  --carousel-copy-padding: clamp(1rem, 2vw, 1.6rem);
  --carousel-mobile-copy-padding: var(--carousel-copy-padding);
}

.jobs-carousel {
  --carousel-slide-width: min(88vw, 980px);
  --carousel-mobile-track-min-height: min(126vw, 620px);
  --carousel-mobile-copy-padding: clamp(0.9rem, 4vw, 1.15rem);
}

:is(.story-viewport, .jobs-viewport) {
  position: relative;
  overflow: hidden;
  padding: var(--space-5) 0;
}

@media (min-width: 768px) {
  :is(.story-carousel, .jobs-carousel) {
    --carousel-slide-width: min(74vw, 1020px);
  }

  :is(.story-viewport, .jobs-viewport) {
    padding: var(--space-8) 0;
  }
}

@media (min-width: 1200px) {
  :is(.story-carousel, .jobs-carousel) {
    --carousel-slide-width: min(66vw, 1040px);
  }
}

:is(.story-track, .jobs-track) {
  position: relative;
  width: 100%;
  min-height: var(--carousel-track-min-height);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Only visible slides get will-change later; no global compositor bloat. */
:is(.story-slide, .jobs-slide) {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--carousel-slide-width);
  transform-origin: center center;
  transition: var(--carousel-slide-transition);
  backface-visibility: hidden;
  contain: layout style;
  isolation: isolate;
}

/* Shared Image Cards */
:is(.story-card, .jobs-carousel .job-card) {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border-radius: var(--carousel-card-radius);
  text-decoration: none;
  border: 1px solid var(--carousel-card-border);
  box-shadow: var(--carousel-card-shadow);
  transition: var(--carousel-card-transition);
  isolation: isolate;
}

:is(.story-card, .jobs-carousel .job-card)::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--glass-on-dark-sheen);
  pointer-events: none;
  z-index: 3;
  opacity: 0.7;
}

:is(.story-card, .jobs-carousel .job-card):is(:hover, :focus-visible),
.jobs-carousel .job-card:is(:hover, :focus-within) {
  transform: none;
  background: transparent;
  border-color: var(--carousel-card-border-hover);
  box-shadow: var(--carousel-card-shadow-hover);
}

.story-carousel.is-enhanced .story-slide.is-active .story-card:is(:hover, :focus-visible),
.jobs-carousel.is-enhanced .jobs-slide.is-active .job-card:is(:hover, :focus-within) {
  box-shadow: var(--carousel-card-shadow-active);
}

:is(.story-card-media, .jobs-carousel .job-card-media) {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgb(var(--c-scrim));
  line-height: 0;
}

.jobs-carousel .job-card-picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

:is(
  .story-card-media picture,
  .story-card-media img,
  .jobs-carousel .job-card-picture > img,
  .jobs-carousel .job-card-img
) {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
}

:is(.story-card-img, .jobs-carousel .job-card-img) {
  transform-origin: center center;
}

:is(.story-card-overlay, .jobs-carousel .job-card-overlay) {
  position: absolute;
  inset: 0;
  background: var(--media-image-scrim);
  z-index: 1;
}

:is(.story-card-copy, .jobs-carousel .job-card-copy) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  color: var(--color-text-inverse);
  padding: var(--carousel-copy-padding);
}

:is(.story-card-copy h3, .jobs-carousel .job-title) {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.9rem);
  line-height: var(--leading-tight);
  margin: var(--space-2) 0 var(--space-3);
  max-width: 36ch;
  color: var(--color-text-inverse);
}

:is(.story-card-badge, .jobs-carousel .job-card-type) {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-radius: var(--badge-radius);
  padding: 0.36rem 0.72rem;
  background: var(--glass-on-dark-bg);
  border: 1px solid var(--glass-on-dark-border);
  color: var(--color-text-inverse);
}

.jobs-carousel .job-meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.jobs-carousel .job-meta span {
  font-size: var(--text-sm);
  color: var(--on-dark-text-soft);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.jobs-carousel .job-desc {
  font-size: var(--text-sm);
  color: var(--on-dark-text-soft);
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

/* Controls & Counter */
:is(.story-controls, .jobs-controls) {
  margin-top: var(--space-3);
  /* Über den Slides stapeln: der Enhanced-Viewport hat overflow-y:visible und die
     aktive Slide trägt z-index:3 — ohne eigenen Stacking-Context würde die nach
     unten versetzte Karte über die (rechte) Next-Taste ragen und den Klick
     schlucken (elementFromPoint = jobs-track statt Button). Verifiziert per CDP. */
  position: relative;
  z-index: 5;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--carousel-ctrl-gap);
  padding: var(--carousel-ctrl-bar-padding);
  border-radius: var(--carousel-ctrl-bar-radius);
  background: var(--carousel-ctrl-bar-bg);
  border: 1px solid var(--carousel-ctrl-bar-border);
  box-shadow: var(--carousel-ctrl-bar-shadow);
  transition: box-shadow 0.35s var(--glow-ease), border-color 0.35s var(--glow-ease);
}

:is(.story-controls, .jobs-controls):hover,
:is(.story-controls, .jobs-controls):focus-within {
  border-color: var(--carousel-ctrl-bar-border-hover);
  box-shadow: var(--carousel-ctrl-bar-shadow-hover);
}

:is(.story-control-btn, .jobs-control-btn) {
  width: var(--carousel-ctrl-btn-size);
  height: var(--carousel-ctrl-btn-size);
  border-radius: var(--carousel-ctrl-btn-radius);
  border: 0;
  color: var(--on-dark-text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

:is(.story-control-btn, .jobs-control-btn) svg {
  width: 1rem;
  height: 1rem;
}

:is(.story-control-btn, .jobs-control-btn):hover,
:is(.story-control-btn, .jobs-control-btn):focus-visible {
  background: var(--carousel-ctrl-btn-hover-bg);
  color: var(--on-dark-text);
}

:is(.story-control-btn, .jobs-control-btn)[aria-disabled="true"] {
  opacity: 0.32;
  cursor: default;
}

:is(.story-control-btn, .jobs-control-btn)[aria-disabled="true"]:hover,
:is(.story-control-btn, .jobs-control-btn)[aria-disabled="true"]:focus-visible {
  background: transparent;
  color: var(--on-dark-text-soft);
}

:is(.story-counter, .jobs-counter) {
  margin: 0;
  min-width: var(--carousel-ctrl-counter-min);
  padding: 0 0.45rem;
  text-align: center;
  color: var(--on-dark-text-high);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

:is(.story-counter, .jobs-counter) span:nth-child(2) {
  margin: 0 0.18em;
  color: var(--on-dark-text-faint);
}

/* Enhanced State Geometry */
:is(.story-carousel.is-enhanced .story-viewport, .jobs-carousel.is-enhanced .jobs-viewport) {
  overflow-x: clip;
  overflow-y: visible;
  padding: var(--carousel-enhanced-padding);
}

:is(.story-carousel.is-enhanced .story-track, .jobs-carousel.is-enhanced .jobs-track) {
  transition: none;
}

:is(.story-carousel.is-enhanced .story-slide, .jobs-carousel.is-enhanced .jobs-slide) {
  opacity: 0;
  transform: translate3d(-50%, 0, 0) scale(0.84);
  pointer-events: none;
  will-change: auto;
}

:is(.story-carousel.is-enhanced .story-slide.is-hidden, .jobs-carousel.is-enhanced .jobs-slide.is-hidden) {
  opacity: 0;
  transform: translate3d(-50%, 0, 0) scale(0.82);
  pointer-events: none;
  will-change: auto;
}

:is(
  .story-carousel.is-enhanced .story-slide,
  .jobs-carousel.is-enhanced .jobs-slide
):is(.is-active, .is-prev, .is-next) {
  will-change: transform, opacity;
}

:is(
  .story-carousel.is-enhanced .story-slide,
  .jobs-carousel.is-enhanced .jobs-slide
):is(.is-prev, .is-next) {
  opacity: 0.52;
  pointer-events: auto;
}

:is(.story-carousel.is-enhanced .story-slide.is-prev, .jobs-carousel.is-enhanced .jobs-slide.is-prev) {
  transform: translate3d(calc(-50% - 44%), 14px, 0) scale(0.92);
}

:is(.story-carousel.is-enhanced .story-slide.is-next, .jobs-carousel.is-enhanced .jobs-slide.is-next) {
  transform: translate3d(calc(-50% + 44%), 14px, 0) scale(0.92);
}

:is(
  .story-carousel.is-enhanced .story-slide,
  .jobs-carousel.is-enhanced .jobs-slide
):is(.is-far-prev, .is-far-next) {
  opacity: 0.20;
  pointer-events: none;
}

:is(.story-carousel.is-enhanced .story-slide.is-far-prev, .jobs-carousel.is-enhanced .jobs-slide.is-far-prev) {
  transform: translate3d(calc(-50% - 80%), 22px, 0) scale(0.84);
}

:is(.story-carousel.is-enhanced .story-slide.is-far-next, .jobs-carousel.is-enhanced .jobs-slide.is-far-next) {
  transform: translate3d(calc(-50% + 80%), 22px, 0) scale(0.84);
}

:is(.story-carousel.is-enhanced .story-slide.is-active, .jobs-carousel.is-enhanced .jobs-slide.is-active) {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1.02);
  z-index: 3;
  pointer-events: auto;
}

/* Mobile Geometry */
@media (max-width: 767px) {
  :is(.story-track, .jobs-track) {
    min-height: var(--carousel-mobile-track-min-height);
  }

  :is(.story-slide, .jobs-slide) {
    width: min(82vw, 380px);
  }

  :is(.story-card, .jobs-carousel .job-card) {
    border-radius: var(--carousel-card-radius-mobile);
    border-color: var(--carousel-card-border-mobile);
    box-shadow: var(--carousel-card-shadow-mobile);
  }

  :is(.story-card-media, .jobs-carousel .job-card-media) {
    aspect-ratio: 4 / 5;
    border-radius: inherit;
  }

  :is(.story-carousel.is-enhanced .story-slide, .jobs-carousel.is-enhanced .jobs-slide) {
    transition-duration: 420ms;
  }

  :is(.story-carousel.is-enhanced .story-slide.is-prev, .jobs-carousel.is-enhanced .jobs-slide.is-prev) {
    transform: translate3d(calc(-50% - 26%), 6px, 0) scale(0.9);
    opacity: 0.28;
  }

  :is(.story-carousel.is-enhanced .story-slide.is-next, .jobs-carousel.is-enhanced .jobs-slide.is-next) {
    transform: translate3d(calc(-50% + 26%), 6px, 0) scale(0.9);
    opacity: 0.28;
  }

  :is(
    .story-carousel.is-enhanced .story-slide,
    .jobs-carousel.is-enhanced .jobs-slide
  ):is(.is-far-prev, .is-far-next) {
    opacity: 0;
  }

  :is(.story-carousel.is-enhanced .story-viewport, .jobs-carousel.is-enhanced .jobs-viewport) {
    padding: var(--carousel-mobile-tight-padding);
  }

  :is(.story-controls, .jobs-controls) {
    width: fit-content;
    max-width: 100%;
    justify-content: center;
    --carousel-ctrl-gap: 0.4rem;
    --carousel-ctrl-bar-padding: 0.35rem;
    --carousel-ctrl-counter-min: 3.4rem;
  }

  :is(.story-card-copy h3, .jobs-carousel .job-title) {
    font-size: clamp(1.05rem, 5vw, 1.32rem);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .jobs-carousel .job-card-copy {
    padding: var(--carousel-mobile-copy-padding);
  }

  .jobs-carousel .job-card-type {
    max-width: 100%;
    padding: 0.28rem 0.58rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .jobs-carousel .job-meta {
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .jobs-carousel .job-meta span:last-child {
    display: none;
  }

  .jobs-carousel .job-desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: var(--space-3);
  }

  :is(
    .story-carousel.is-enhanced .story-slide.is-active .story-card,
    .jobs-carousel.is-enhanced .jobs-slide.is-active .job-card
  ) {
    border-color: var(--carousel-card-border-active-mobile);
    box-shadow: var(--carousel-card-shadow-active-mobile);
  }
}

/* Input Modes / Reduced Motion */
@media (hover: none), (pointer: coarse) {
  :is(.story-card, .jobs-carousel .job-card) {
    box-shadow: var(--carousel-card-shadow-mobile);
  }

  .story-card:hover .story-card-img,
  .story-card:focus-visible .story-card-img,
  .jobs-carousel .job-card:hover .job-card-media img,
  .jobs-carousel .job-card:focus-visible .job-card-media img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .story-slide,
    .jobs-slide,
    .story-card,
    .jobs-carousel .job-card,
    .story-card-img,
    .jobs-carousel .job-card-media img,
    .story-control-btn,
    .jobs-control-btn,
    .story-carousel.is-enhanced .story-track,
    .jobs-carousel.is-enhanced .jobs-track
  ) {
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Open-positions badge — the live "N offene Stellen" USP pill. The count is SSOT
   (content/open_positions.yaml → jobs_active|selectattr('open')); this only
   styles it. Language-neutral; tokens only (no hard-coded colours/sizes).

   SURFACE-AGNOSTIC BY CONTRACT. The badge has three placements on three different
   surfaces — the DARK careers band (.dark-section, /karriere/), the LIGHT home
   careers teaser (.karriere-teaser, /) and the LIGHT contact panel (.subject-panel,
   /kontakt/). It used to hard-wire the FIXED --on-dark-* tokens, so it was only
   correct on the dark band: on the home page the label rendered white-on-white at
   1.00:1 — the owner saw the green dot and the red number with the words MISSING —
   and the chip's own surface + border (white 8%/10%) were invisible there too.
   So every colour here is SURFACE-RELATIVE: the chrome is a tint OF THE INK
   (color-mix over --color-text) and the ink is a flipping semantic token. On the
   dark band --color-text is white, which reproduces the previous white-8%/10%
   glass chip exactly; on a light surface the same rule yields a dark tint; dark
   mode flips both for free. One skin, every surface — no per-placement re-skin.
   ───────────────────────────────────────────────────────────────────────── */
.open-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) auto 0;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  /* Eckiger, konsistent mit den Geschwister-Badges derselben Seite (.job-card-type /
     .story-card-badge nutzen --badge-radius) statt der Pille (--radius-full). */
  border-radius: var(--badge-radius);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
}

.open-badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  /* GRÜN = „aktiv/verfügbar/live" — semantisch korrekt für offene Stellen (rot liest
     als Alarm). 1:1 die Werte der Schwester .status-tag--open .status-tag__dot
     (main.css) → dasselbe „offen"-Signal, EINE Farbe, keine Divergenz mehr. */
  background: var(--color-success);
  --pulse-ring: rgb(var(--c-success) / 0.5);
  box-shadow: 0 0 0 0 var(--pulse-ring);
  animation: badge-pulse 2.4s ease-out infinite;
}

.open-badge-num {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-text);
}

.open-badge-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-snug);
  /* Flippendes Ink-Token statt fixem --on-dark-text-soft: .dark-section und der
     Dark Mode setzen es beide selbst, auf heller Fläche wird es dunkel. Das war
     die Weiss-auf-Weiss-Stelle. */
  color: var(--color-text-muted);
}

/* Zero-state: no active openings — quiet, no pulse, no accent number.
   Ink kommt aus der Basisregel (schon --color-text-muted); hier nur die Fläche. */
.open-badge--none {
  background: transparent;
  border-color: transparent;
  padding-left: var(--space-5);
}

/* Wiederverwendbarer Pulse-Ring (SSOT): Farbe kommt aus --pulse-ring des jeweiligen
   Dots — beide „offen"-Signale (.open-badge-dot und .status-tag--open) pulsieren jetzt
   GRÜN (--c-success). EIN Keyframe, mehrere Consumer — kein duplizierter Keyframe. */
@keyframes badge-pulse {
  0%   { box-shadow: 0 0 0 0 var(--pulse-ring); }
  70%  { box-shadow: 0 0 0 0.6rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .open-badge-dot { animation: none; }
}