/* ============================================================
   SIGES Project Showcase — [siges_project_showcase]
   Layout: Bild-Slider links + Content-Card (Brand-Color) rechts.
   ============================================================ */

.siges-ps {
  position: relative;
  width: 100%;
  max-width: var(--siges-content-max, 1600px);
  margin: clamp(40px, 6vw, 96px) auto;
  padding: 0 var(--sg-outer, 16px);
  box-sizing: border-box;
}

.siges-ps__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: stretch;
  min-height: clamp(380px, 50vw, 620px);
}

/* ── Media (Slider) — links ─────────────────────────────────── */
.siges-ps__media {
  position: relative;
  border-radius: var(--sg-radius-lg, 16px);
  overflow: hidden;
  background: var(--siges-border, #ECE9E4);
  box-shadow: var(--sg-shadow, 0 2px 8px rgba(58,48,40,0.08));
  isolation: isolate;
}

.siges-ps__slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}
.siges-ps__slider::-webkit-scrollbar { display: none; }

.siges-ps__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
  position: relative;
  min-height: clamp(320px, 50vw, 620px);
}
.siges-ps__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dots — unten zentriert */
.siges-ps__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  pointer-events: auto;
}
.siges-ps__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(58, 48, 40, 0.35);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.siges-ps__dot.is-active {
  background: var(--siges-text, #2C2825);
  transform: scale(1.2);
}
.siges-ps__dot:hover { background: rgba(58, 48, 40, 0.6); }

/* ── Content-Card — rechts ──────────────────────────────────── */
.siges-ps__card {
  background: var(--ps-bg, #FF8D5F);
  color: var(--ps-text, #FFFFFF);
  border-radius: var(--sg-radius-lg, 16px);
  padding: clamp(28px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.5vw, 24px);
  box-shadow: var(--sg-shadow, 0 2px 8px rgba(58,48,40,0.08));
}

.siges-ps__eyebrow {
  margin: 0;
  font-family: var(--siges-font-deco, 'Courier Prime', monospace);
  font-size: var(--sg-font-eyebrow, clamp(11px, 0.62rem + 0.2vw, 13px));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
  color: inherit;
}

.siges-ps__heading {
  margin: 0;
  font-family: 'Ageo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--sg-font-section, clamp(24px, 1.25rem + 1.45vw, 44px));
  font-weight: var(--sg-fw-section, 700);
  line-height: var(--sg-lh-section, 1.15);
  letter-spacing: var(--sg-ls-section, -0.01em);
  color: inherit;
  text-transform: uppercase;
}

.siges-ps__copy {
  font-family: 'Ageo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--sg-font-body, clamp(15px, 0.875rem + 0.3vw, 18px));
  line-height: var(--sg-lh-body, 1.55);
  color: inherit;
  opacity: 0.95;
}
.siges-ps__copy p { margin: 0 0 1em; }
.siges-ps__copy p:last-child { margin: 0; }

/* CTA — Outline-Pill, Brand-Pattern */
.siges-ps__cta {
  align-self: flex-start;
  margin-top: clamp(8px, 1vw, 16px);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  height: 48px;
  box-sizing: border-box;
  font-family: 'Ageo', 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 999px;
  transition: background 0.22s ease, color 0.22s ease, transform 0.18s ease;
  white-space: nowrap;
}
.siges-ps__cta:hover,
.siges-ps__cta:focus-visible {
  background: color-mix(in srgb, currentColor 12%, transparent);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.siges-ps__cta-arrow {
  display: inline-block;
  transition: transform 0.22s ease;
}
.siges-ps__cta:hover .siges-ps__cta-arrow,
.siges-ps__cta:focus-visible .siges-ps__cta-arrow {
  transform: translateX(3px);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .siges-ps__grid {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
  }
  .siges-ps__media {
    border-radius: var(--sg-radius-lg, 16px) var(--sg-radius-lg, 16px) 0 0;
    aspect-ratio: 16 / 11;
    min-height: 0;
  }
  .siges-ps__slide,
  .siges-ps__slide img { min-height: 0; }
  .siges-ps__card {
    border-radius: 0 0 var(--sg-radius-lg, 16px) var(--sg-radius-lg, 16px);
    padding: clamp(20px, 6vw, 36px);
  }
}

@media (max-width: 600px) {
  .siges-ps {
    margin: 24px auto;
    padding: 0 var(--sg-outer, 16px);
  }
}