/* ========================================
   Detail Page Styles
   (for static detail pages / direct URL access)
   ======================================== */

/* ========================================
   Detail Page Content Styles
   ======================================== */

.detail-page__content {
  max-width: 800px;
  margin: 0 auto;
}

.detail-page__content h1 {
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 8vw, 5rem);
  color: var(--color-magenta);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  line-height: 1.1;
}

.detail-page__meta {
  font-family: var(--font-body);
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--color-gold);
  margin-bottom: var(--spacing-lg);
  text-transform: uppercase;
}

.detail-page__content p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--color-white);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

/* Navigation */
.detail-page__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.detail-page__prev,
.detail-page__next {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 2vw, 1.125rem);
  color: var(--color-gold);
  text-decoration: none;
  text-transform: uppercase;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--color-gold);
  transition: all 0.3s ease;
}

.detail-page__prev:hover,
.detail-page__next:hover {
  background: var(--color-gold);
  color: var(--color-black);
}

/* ========================================
   Mobile Adjustments
   ======================================== */

@media (max-width: 768px) {
  .detail-page__nav {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .detail-page__prev,
  .detail-page__next {
    width: 100%;
    text-align: center;
  }
}

/* ========================================
   Standalone Detail Page Styles
   ======================================== */

.detail-page {
  min-height: 100vh;
  background: var(--color-black);
}

.detail-page__hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
}

.detail-page__hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-page article > section,
.detail-page article > nav {
  position: relative;
  z-index: 2;
  background: var(--color-black);
}

/* ========================================
   Global Fixed Background (Parallax)
   ======================================== */

.detail-bg {
  position: fixed;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background: url('../img/bg_box_purple_filled_alpha.png') no-repeat center center;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}

/* ========================================
   VP1: Info & Credits Section
   ======================================== */

.detail-info {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  overflow: hidden; /* Contain the oversized background */
  background-color: var(--color-black);
}

/* Grid background variant - with section-specific parallax BG element */
.detail-info--grid-bg {
  position: relative;
  background: var(--color-black);
  overflow: hidden;
}

.detail-info--grid-bg .detail-bg--section {
  position: absolute;
  inset: -50px;
  background: url('../img/bg_box_purple_alpha.png') no-repeat center center;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}

.detail-info--grid-bg > *:not(.detail-bg--section) {
  position: relative;
  z-index: 1;
}

/* Background element for parallax animation */
.detail-info__bg {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background: var(--color-black) url('../img/bg_box_purple_alpha.png') no-repeat center center;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
}

.detail-info__frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 0;
  border: 5px solid var(--color-navy);
  padding: 0;
  max-width: 1400px;
  min-height: 70vh;
  width: 100%;
  background: var(--color-black);
}

/* Left Column: Description */
.detail-info__description {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-navy);
  padding: var(--space-lg);
  grid-column: 1;
  grid-row: 1;
}

.detail-info__title {
  font-family: var(--font-body);
  color: var(--color-gold);
  text-transform: uppercase;
  line-height: 0.85;
  margin: 0 0 var(--space-md) 0;
  width: 100%;
  container-type: inline-size;
}

.detail-info__title span {
  display: block;
  /* Fluid typography based on container width */
  font-size: clamp(2rem, 9cqi, 6rem);
  white-space: nowrap;
}

.detail-info__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1;
}

.detail-info__section h3 {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  color: var(--color-gold);
  text-transform: uppercase;
  margin: 0 0 var(--space-xs) 0;
}

.detail-info__section p {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  color: var(--color-magenta);
  line-height: 1.4;
  margin: 0;
}

/* Color Palette Row (bottom left) */
.detail-info__palette {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-top: 5px solid var(--color-navy);
  background: var(--color-black);
  grid-column: 1;
  grid-row: 2;
}

.detail-info__palette-swatches {
  display: flex;
  gap: var(--space-xs);
}

.detail-info__swatch {
  width: 24px;
  height: 24px;
  background: var(--swatch-color);
}

/* Right Column: Credits (spans both rows) */
.detail-info__credits {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 5px solid var(--color-navy);
  padding: var(--space-xl);
  position: relative;
  background: var(--color-black);
  grid-column: 2;
  grid-row: 1 / 3;
}

/* Inner wrapper for centering */
.detail-info__credits-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  max-width: 600px;
}

.detail-info__client-logo {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: clamp(60px, 8vw, 100px);
  height: auto;
}

.detail-info__agency {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.detail-info__label {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--color-magenta);
  text-transform: uppercase;
}

.detail-info__value {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--color-gold);
  text-transform: uppercase;
}

.detail-info__team {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.detail-info__team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-xl);
}

/* Each credit pair */
.detail-info__credit {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-info__role {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  color: var(--color-magenta);
  text-transform: uppercase;
}

.detail-info__name {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  color: var(--color-gold);
}

/* Two-column team layout (e.g. Agency + Production) */
.detail-info__team-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

/* 3-column variant for extended credits */
.detail-info__team-columns--three {
  grid-template-columns: 1fr 1fr 1fr;
}

.detail-info__team-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.detail-info__team-column .detail-info__label {
  margin-bottom: var(--space-xs);
}

/* Column title (sub-header within team columns) */
.detail-info__column-title {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

@media (max-width: 768px) {
  .detail-info__team-columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }

  /* 3-column becomes 2-column on tablet */
  .detail-info__team-columns--three {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  /* 3-column stays 2-column on mobile */
  .detail-info__team-columns--three {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }
}

.detail-info__tag {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  color: var(--color-gold);
  text-transform: uppercase;
}

/* ========================================
   VP1 Responsive - Tablet
   ======================================== */

@media (max-width: 1200px) {
  .detail-info__description {
    padding: var(--space-md);
  }

  .detail-info__palette {
    padding: var(--space-sm) var(--space-md);
  }

  .detail-info__credits {
    padding: var(--space-md);
  }
}

/* ========================================
   VP1 Responsive - Mobile
   ======================================== */

@media (max-width: 1024px) {
  .detail-info {
    padding: var(--space-xl) var(--space-md);
    min-height: auto;
  }

  .detail-info__frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .detail-info__description {
    grid-column: 1;
    grid-row: 1;
  }

  .detail-info__palette {
    grid-column: 1;
    grid-row: 2;
    border-top: 5px solid var(--color-navy);
  }

  .detail-info__credits {
    grid-column: 1;
    grid-row: 3;
    border-left: none;
    border-top: 5px solid var(--color-navy);
  }

  .detail-info__section p {
    font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  }

  .detail-info__client-logo {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: var(--space-md);
  }

  .detail-info__team-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .detail-info__team-grid {
    grid-template-columns: 1fr 1fr;
  }

  .detail-info__palette {
    flex-wrap: wrap;
  }
}

/* ========================================
   About Page Info Variants
   ======================================== */

/* About Page: Ohne Palette (Color Swatches) */
.detail-info--about .detail-info__palette {
  display: none;
}

/* About Page: Frame füllt beide Rows (keine Palette-Row) */
.detail-info--about .detail-info__frame {
  grid-template-rows: 1fr;
}

/* About Page: Credits volle Höhe (span nur 1 Row) */
.detail-info--about .detail-info__credits {
  grid-row: 1;
}

/* 3-Spalten Grid für Services */
.detail-info__team-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .detail-info__team-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .detail-info__team-grid--3col {
    grid-template-columns: 1fr;
  }
}

/* Navy Background Variant (no purple grid) */
.detail-info--navy {
  background: var(--color-navy);
}

/* ========================================
   VP2: Casefilm Player
   ======================================== */

.detail-casefilm {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  background: var(--color-navy);
}

.detail-casefilm__wrapper {
  width: 100%;
  max-width: 1400px;
}

.detail-casefilm__headline {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: var(--color-gold);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  letter-spacing: 0.1em;
}

.detail-casefilm__player {
  position: relative;
  width: 100%;
  border: 5px solid var(--color-navy);
  background: var(--color-black);
  box-shadow: 0 0 400px rgba(0, 0, 0, 0.7);
}

.detail-casefilm__video {
  display: block;
  width: 100%;
  height: auto;
}

.detail-casefilm__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(60px, 10vw, 100px);
  height: clamp(60px, 10vw, 100px);
  background: none;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 10;
}

.detail-casefilm__play:focus,
.detail-casefilm__play:focus-visible {
  outline: none;
}

.detail-casefilm__play:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.detail-casefilm__play svg {
  width: 100%;
  height: 100%;
}

.detail-casefilm__play svg circle {
  stroke: none;
}

.detail-casefilm__play svg polygon {
  stroke: none;
}

/* Hide play button when video is playing */
.detail-casefilm__player.is-playing .detail-casefilm__play {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Casefilm Background System - EXPLICIT COLOR CLASSES
   ========================================================================== */

/* Solid colors */
.detail-casefilm--navy {
  background: var(--color-navy);
}

.detail-casefilm--purple {
  background: var(--color-purple);
}

.detail-casefilm--black {
  background: var(--color-black);
}

/* Transparent - shows global grid background */
.detail-casefilm--transparent {
  background: transparent;
}

/* VP2 Mobile */
@media (max-width: 1024px) {
  .detail-casefilm {
    padding: var(--space-2xl) var(--space-md);
    min-height: auto;
  }
}

/* ========================================
   VP3+: Gallery Sections
   ======================================== */

.detail-gallery {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  background: var(--color-black);
}

/* ==========================================================================
   Gallery Background System - EXPLICIT COLOR CLASSES
   Use these classes to set backgrounds. Each is self-contained.
   ========================================================================== */

/* Transparent - shows global fixed grid background */
.detail-gallery--transparent {
  background: transparent;
  flex-direction: column;
}

/* Solid colors (no grid pattern) */
.detail-gallery--navy {
  background: var(--color-navy);
  flex-direction: column;
}

.detail-gallery--purple {
  background: var(--color-purple);
  flex-direction: column;
}

.detail-gallery--black {
  background: var(--color-black);
  flex-direction: column;
}

/* With grid pattern - use with .detail-bg--section child element */
.detail-gallery--navy-grid {
  position: relative;
  background: var(--color-navy);
  flex-direction: column;
  overflow: hidden;
}

.detail-gallery--purple-grid {
  position: relative;
  background: var(--color-purple);
  flex-direction: column;
  overflow: hidden;
}

.detail-gallery--black-grid {
  position: relative;
  background: var(--color-black);
  flex-direction: column;
  overflow: hidden;
}

/* Section-specific parallax background (for --*-grid variants) */
.detail-bg--section {
  position: absolute;
  inset: -50px;
  background: url('../img/bg_box_purple_alpha.png') no-repeat center center;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}

/* Content above grid background */
.detail-gallery--navy-grid > *:not(.detail-bg--section),
.detail-gallery--purple-grid > *:not(.detail-bg--section),
.detail-gallery--black-grid > *:not(.detail-bg--section) {
  position: relative;
  z-index: 1;
}

.detail-gallery__frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  max-width: 1400px;
  border: 5px solid var(--color-navy);
  background: var(--color-navy);
  overflow: visible;
  will-change: transform;
}

.detail-gallery__image {
  position: relative;
  overflow: hidden;
  border-right: 5px solid var(--color-navy);
}

/* Parallax images need overflow visible for overlay */
.detail-gallery__image.detail-gallery__image--parallax {
  overflow: visible;
  z-index: 10;
}

.detail-gallery__image:last-child {
  border-right: none;
}

.detail-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Parallax Image (BG + Overlay) */
.detail-gallery__image.detail-gallery__image--parallax {
  position: relative;
  overflow: visible;
  aspect-ratio: 1 / 1;
}

.detail-gallery__image--parallax .detail-gallery__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.detail-gallery__image--parallax .detail-gallery__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 100;
  pointer-events: none;
  transition: transform 0.3s ease-out;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
  will-change: transform;
}

/* Gallery Mobile */
@media (max-width: 1024px) {
  .detail-gallery {
    padding: var(--space-2xl) var(--space-md);
    min-height: auto;
  }

  .detail-gallery__frame {
    grid-template-columns: 1fr;
  }

  /* Border-bottom for standard galleries, but NOT for complex grid */
  .detail-gallery__frame:not(.detail-gallery__frame--complex) > .detail-gallery__image {
    border-right: none;
    border-bottom: 5px solid var(--color-navy);
  }

  .detail-gallery__frame:not(.detail-gallery__frame--complex) > .detail-gallery__image:last-child {
    border-bottom: none;
  }

  .detail-gallery__image--parallax .detail-gallery__overlay {
    width: 130%;
  }
}

/* ========================================
   Understitial (sticky fullscreen image)
   ======================================== */

.detail-understitial-wrapper {
  position: relative;
  height: 200vh;
  margin-top: -100vh;
  z-index: 1;
}

.detail-understitial {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.detail-understitial img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Understitial Mobile */
@media (max-width: 1024px) {
  .detail-understitial-wrapper {
    height: 200vh;
    margin-top: -100vh;
  }

  .detail-understitial {
    position: sticky;
    top: 0;
    height: 100vh;
  }

  .detail-understitial img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ========================================
   Complex Gallery Grid (VP5 style)
   ======================================== */

.detail-gallery__frame--complex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0;
  align-items: stretch;
}

/* Left image in complex grid (non-parallax) */
.detail-gallery__frame--complex > .detail-gallery__image {
  /* Match right column height exactly */
  aspect-ratio: 1 / 1;
  height: 100%;
  min-height: 0;
}

.detail-gallery__frame--complex > .detail-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-gallery__right {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* No border-left - left column has border-right */
}

.detail-gallery__right > .detail-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}

.detail-gallery__right > .detail-gallery__image {
  border-right: none;
  border-bottom: 5px solid var(--color-navy);
}

.detail-gallery__right-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
}

.detail-gallery__right-bottom .detail-gallery__image {
  border-right: none;
  border-bottom: none;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.detail-gallery__right-bottom .detail-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.detail-gallery__right-bottom .detail-gallery__image:first-child {
  border-right: 5px solid var(--color-navy);
}

/* Complex Grid Mobile */
@media (max-width: 1024px) {
  .detail-gallery__frame--complex {
    grid-template-columns: 1fr;
  }

  /* Left image needs bottom border as separator to right column */
  .detail-gallery__frame--complex > .detail-gallery__image {
    border-right: none;
    border-bottom: 5px solid var(--color-navy);
  }

  .detail-gallery__right {
    border: none;
  }

  /* Right-bottom grid: top row needs border-bottom on mobile */
  .detail-gallery__right-bottom .detail-gallery__image {
    border-bottom: 5px solid var(--color-navy);
  }

  /* Bottom row (last 2 images) - no border-bottom */
  .detail-gallery__right-bottom .detail-gallery__image:nth-child(n+3) {
    border-bottom: none;
  }
}

/* ========================================
   VP6: Manga Gallery with Captions
   ======================================== */

/* Frame with shadow (for navy bg) */
.detail-gallery--navy .detail-gallery__frame,
.detail-gallery--navy-grid .detail-gallery__frame {
  box-shadow: 0 0 400px rgba(0, 0, 0, 0.7);
}

/* VP6 specific grid: Links ~40%, Rechts ~60% */
.detail-gallery__frame--vp6 {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 0;
  overflow: visible;
}

/* Left parallax in VP6 - no forced aspect ratio */
.detail-gallery__frame--vp6 > .detail-gallery__image--parallax {
  border-right: 5px solid var(--color-navy);
  aspect-ratio: auto;
}

/* Right column container */
.detail-gallery__column-right {
  display: flex;
  flex-direction: column;
}

/* Top image in right column */
.detail-gallery__column-right > .detail-gallery__image {
  border-bottom: 5px solid var(--color-navy);
  border-right: none;
}

.detail-gallery__column-right > .detail-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Row for bottom images */
.detail-gallery__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
}

.detail-gallery__row > .detail-gallery__image {
  border-right: none;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.detail-gallery__row > .detail-gallery__image:first-child {
  border-right: 5px solid var(--color-navy);
}

.detail-gallery__row > .detail-gallery__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}

/* Captions row at bottom - matches grid layout */
.detail-gallery__captions {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  width: 100%;
  max-width: 1400px;
  padding: var(--space-lg) 0 0 0;
  padding-left: 20px;
}

.detail-gallery__caption {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--color-gold);
  text-transform: uppercase;
  margin: 0;
}

/* Standalone caption (not inside .detail-gallery__captions wrapper) */
section > .detail-gallery__caption {
  padding: var(--space-lg) var(--space-md) 0;
  text-align: center;
}

/* Second caption aligns to right column start */
.detail-gallery__caption:nth-child(2) {
  padding-left: 10px;
}

/* VP6 Mobile */
@media (max-width: 1024px) {
  .detail-gallery__frame--vp6 {
    grid-template-columns: 1fr;
  }

  .detail-gallery__frame--vp6 > .detail-gallery__image--parallax {
    border-right: none;
    border-bottom: 5px solid var(--color-navy);
  }

  .detail-gallery__captions {
    display: none;
  }
}

/* ========================================
   VP7: Gallery with Labels
   ======================================== */

/* Image container with label */
.detail-gallery__image--labeled {
  position: relative;
  aspect-ratio: 1 / 1;
}

.detail-gallery__image--labeled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Base label styles */
.detail-gallery__label {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Bottom horizontal label (SIX EPISODES) */
.detail-gallery__label--bottom {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  z-index: 5;
}

/* Right column with vertical label */
.detail-gallery__right--labeled {
  position: relative;
}

/* Vertical rotated label (UV LIGHT) */
.detail-gallery__label--vertical {
  position: absolute;
  top: 50%;
  right: var(--space-md);
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  z-index: 5;
}

/* VP7 Mobile */
@media (max-width: 1024px) {
  .detail-gallery__image--labeled {
    border-bottom: 5px solid var(--color-navy);
  }

  .detail-gallery__label--bottom {
    bottom: var(--space-sm);
    left: var(--space-sm);
    font-size: clamp(0.8rem, 3vw, 1.2rem);
  }

  .detail-gallery__label--vertical {
    display: none;
  }
}

/* ========================================
   VP8: Magenta Caption Modifier
   ======================================== */

.detail-gallery__caption--magenta {
  color: var(--color-magenta);
  text-align: center;
  width: 100%;
  padding: var(--space-md) 0 0 0;
}

/* ========================================
   Endcard Section
   ======================================== */

.detail-endcard {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  background: var(--color-navy);
  overflow: hidden;
}

/* Purple background variant */
.detail-endcard--purple {
  background: var(--color-purple);
}

/* Background overlay image (parallax via JS) */
/* Zentrierung via inset+margin statt transform, damit GSAP x/y funktioniert */
.detail-endcard__bg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80%;
  height: 80%;
  background: url('../img/bg_endcard_alpha.png') no-repeat center center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.detail-endcard__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  max-width: 1400px;
  width: 100%;
}

.detail-endcard__card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 5px solid var(--color-navy);
  background: var(--color-black);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .detail-endcard__card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  }
}

.detail-endcard__video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.detail-endcard__video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video card overlay */
.detail-endcard__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: auto;
  pointer-events: none;
  z-index: 2;
}

/* About Card: Profile image with purple multiply overlay + logo on top */
.detail-endcard__card--about .detail-endcard__video-container {
  position: relative;
  background: var(--color-purple);
}

.detail-endcard__card--about .detail-endcard__video-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-purple);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.detail-endcard__about-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-endcard__about-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35%;
  height: auto;
  z-index: 2;
}

.detail-endcard__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-black);
  position: relative;
}

.detail-endcard__icon {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: auto;
  opacity: 0.8;
}

.detail-endcard__label {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  color: var(--color-magenta);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.detail-endcard__title {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  color: var(--color-gold);
  text-transform: uppercase;
}

/* Endcard Footer - Vertikal zentriert wie Startseite */
.detail-endcard__footer {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.detail-endcard__link {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-white);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.3s ease;
}

.detail-endcard__link:hover {
  color: var(--color-gold);
}

.detail-endcard__year {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-white);
}

/* Endcard Mobile */
@media (max-width: 1024px) {
  .detail-endcard {
    padding: var(--space-2xl) var(--space-md);
    min-height: auto;
    flex-direction: column;
  }

  .detail-endcard__bg {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background-size: auto 100%;
    background-position: center center;
  }

  .detail-endcard__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .detail-endcard__card {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  }

  .detail-endcard__footer {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    padding: var(--space-xl) 0 0 0;
  }

  .detail-endcard__bg {
    background-image: url('../img/bg_fence_white_square_faded_alpha.png');
    opacity: 0.5;
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    transform: none;
    background-size: cover;
    background-position: center center;
  }
}

/* ========================================
   Standalone Hero (for detail pages)
   ======================================== */

.standalone-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.standalone-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.standalone-hero .project__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45%;
  max-width: 400px;
  height: auto;
  pointer-events: none;
  z-index: 10;
}

/* ========================================
   Extended Credits (for projects with many team members)
   ======================================== */

.detail-info__credits--extended .detail-info__credits-inner {
  max-height: 65vh;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.detail-info__credits--extended .detail-info__credits-inner::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.detail-info__credits--extended .detail-info__team-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm) var(--spacing-lg);
  column-gap: clamp(20px, 3vw, 40px);
}

.detail-info__credits--extended .detail-info__agency-section {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 2px solid var(--color-gold);
}

.detail-info__credits--extended .detail-info__agency-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.detail-info__credits--extended .detail-info__agency-title {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
  display: block;
  letter-spacing: 0.05em;
}

@media (max-width: 1024px) {
  .detail-info__credits--extended .detail-info__team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .detail-info__credits--extended .detail-info__team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-info__credits--extended .detail-info__credits-inner {
    max-height: none;
    overflow-y: visible;
  }
}

/* ========================================
   Gallery Headline (above gallery container)
   ======================================== */

.detail-gallery__headline {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--color-gold);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 40px;
  letter-spacing: 0.1em;
}

/* ========================================
   Gallery Layout: 2 top + 4 bottom (6 images)
   Usage: .detail-gallery__frame--grid-2x4
   ======================================== */

.detail-gallery__frame--grid-2x4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0;
}

.detail-gallery__frame--grid-2x4 > .detail-gallery__image {
  border-right: 5px solid var(--color-navy);
  border-bottom: 5px solid var(--color-navy);
  overflow: hidden;
}

.detail-gallery__frame--grid-2x4 > .detail-gallery__image:nth-child(2) {
  border-right: none;
}

.detail-gallery__frame--grid-2x4 > .detail-gallery__image img {
  width: 100%;
  height: 100%;
  max-height: 45vh;
  object-fit: cover;
  display: block;
}

.detail-gallery__frame--grid-2x4 .detail-gallery__bottom-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.detail-gallery__frame--grid-2x4 .detail-gallery__bottom-row .detail-gallery__image {
  border-right: 5px solid var(--color-navy);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.detail-gallery__frame--grid-2x4 .detail-gallery__bottom-row .detail-gallery__image:last-child {
  border-right: none;
}

.detail-gallery__frame--grid-2x4 .detail-gallery__bottom-row .detail-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .detail-gallery__frame--grid-2x4 .detail-gallery__bottom-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-gallery__frame--grid-2x4 .detail-gallery__bottom-row .detail-gallery__image:nth-child(2) {
    border-right: none;
  }

  .detail-gallery__frame--grid-2x4 .detail-gallery__bottom-row .detail-gallery__image:nth-child(3) {
    border-right: 5px solid var(--color-navy);
  }

  /* Top row (child 1 & 2) needs border-bottom */
  .detail-gallery__frame--grid-2x4 .detail-gallery__bottom-row .detail-gallery__image:nth-child(1),
  .detail-gallery__frame--grid-2x4 .detail-gallery__bottom-row .detail-gallery__image:nth-child(2) {
    border-bottom: 5px solid var(--color-navy);
  }
}

@media (max-width: 480px) {
  .detail-gallery__frame--grid-2x4 {
    grid-template-columns: 1fr;
  }

  .detail-gallery__frame--grid-2x4 > .detail-gallery__image {
    border-right: none;
  }

  .detail-gallery__frame--grid-2x4 > .detail-gallery__image img {
    max-height: 35vh;
  }
}

/* ========================================
   Gallery Layout: 3x2 Grid (6 equal 1:1 images)
   Usage: .detail-gallery__frame--grid-3x2
   ======================================== */

.detail-gallery__frame--grid-3x2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  border: 5px solid var(--color-navy);
  background: transparent;
}

.detail-gallery__frame--grid-3x2 .detail-gallery__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-right: 5px solid var(--color-navy);
  border-bottom: 5px solid var(--color-navy);
}

/* Remove right border on last column */
.detail-gallery__frame--grid-3x2 .detail-gallery__image:nth-child(3),
.detail-gallery__frame--grid-3x2 .detail-gallery__image:nth-child(6) {
  border-right: none;
}

/* Remove bottom border on last row */
.detail-gallery__frame--grid-3x2 .detail-gallery__image:nth-child(4),
.detail-gallery__frame--grid-3x2 .detail-gallery__image:nth-child(5),
.detail-gallery__frame--grid-3x2 .detail-gallery__image:nth-child(6) {
  border-bottom: none;
}

.detail-gallery__frame--grid-3x2 .detail-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  will-change: transform;
}

.detail-gallery__frame--grid-3x2 .detail-gallery__image:hover img {
  transform: scale(1.05);
}

/* Tablet: 2 columns, 3 rows */
@media (max-width: 768px) {
  .detail-gallery__frame--grid-3x2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  /* Reset all borders first */
  .detail-gallery__frame--grid-3x2 .detail-gallery__image {
    border-right: 5px solid var(--color-navy);
    border-bottom: 5px solid var(--color-navy);
  }

  /* Remove right border on even items (right column) */
  .detail-gallery__frame--grid-3x2 .detail-gallery__image:nth-child(2),
  .detail-gallery__frame--grid-3x2 .detail-gallery__image:nth-child(4),
  .detail-gallery__frame--grid-3x2 .detail-gallery__image:nth-child(6) {
    border-right: none;
  }

  /* Remove bottom border on last row */
  .detail-gallery__frame--grid-3x2 .detail-gallery__image:nth-child(5),
  .detail-gallery__frame--grid-3x2 .detail-gallery__image:nth-child(6) {
    border-bottom: none;
  }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
  .detail-gallery__frame--grid-3x2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .detail-gallery__frame--grid-3x2 .detail-gallery__image {
    border-right: none;
    border-bottom: 5px solid var(--color-navy);
  }

  .detail-gallery__frame--grid-3x2 .detail-gallery__image:last-child {
    border-bottom: none;
  }
}

/* ========================================
   Gallery Layout: 3+2 Grid (3 square top, 2 wide bottom)
   Usage: .detail-gallery__frame--grid-3-2
   ======================================== */

.detail-gallery__frame--grid-3-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  border: 5px solid var(--color-navy);
  background: transparent;
}

/* Top row: 3 square images */
.detail-gallery__frame--grid-3-2 > .detail-gallery__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-right: 5px solid var(--color-navy);
  border-bottom: 5px solid var(--color-navy);
}

.detail-gallery__frame--grid-3-2 > .detail-gallery__image:nth-child(3) {
  border-right: none;
}

.detail-gallery__frame--grid-3-2 > .detail-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  will-change: transform;
}

.detail-gallery__frame--grid-3-2 > .detail-gallery__image:hover img {
  transform: scale(1.05);
}

/* Bottom row container: 2 columns - wide left (2fr), stacked right (1fr) */
.detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
}

.detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row .detail-gallery__image {
  overflow: hidden;
  border-right: 5px solid var(--color-navy);
}

/* First image (wide 16:9) spans both rows */
.detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row .detail-gallery__image:first-child {
  grid-row: 1 / 3;
  border-bottom: none;
}

/* Small images stacked on the right */
.detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row .detail-gallery__image:nth-child(2) {
  border-bottom: 5px solid var(--color-navy);
}

.detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row .detail-gallery__image:last-child {
  border-right: none;
}

.detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row .detail-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  will-change: transform;
}

.detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row .detail-gallery__image:hover img {
  transform: scale(1.05);
}

/* Tablet: 2 columns top, bottom row stacks vertically */
@media (max-width: 768px) {
  .detail-gallery__frame--grid-3-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Third top image becomes full width */
  .detail-gallery__frame--grid-3-2 > .detail-gallery__image:nth-child(3) {
    grid-column: 1 / -1;
    border-right: none;
  }

  .detail-gallery__frame--grid-3-2 > .detail-gallery__image:nth-child(2) {
    border-right: none;
  }

  /* Bottom row: all images stack vertically */
  .detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row .detail-gallery__image:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
    border-right: none;
    border-bottom: 5px solid var(--color-navy);
  }

  .detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row .detail-gallery__image:nth-child(2) {
    grid-row: 2;
    border-right: 5px solid var(--color-navy);
    border-bottom: none;
  }

  .detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row .detail-gallery__image:last-child {
    grid-row: 2;
  }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
  .detail-gallery__frame--grid-3-2 {
    grid-template-columns: 1fr;
  }

  .detail-gallery__frame--grid-3-2 > .detail-gallery__image {
    border-right: none;
  }

  .detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row .detail-gallery__image {
    grid-column: 1;
    grid-row: auto;
    border-right: none;
    border-bottom: 5px solid var(--color-navy);
  }

  .detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row .detail-gallery__image:first-child {
    grid-column: 1;
  }

  .detail-gallery__frame--grid-3-2 .detail-gallery__bottom-row .detail-gallery__image:last-child {
    border-bottom: none;
  }
}

/* ========================================
   Gallery Layout: 3 columns (1x3 grid)
   Usage: .detail-gallery__frame--grid-3x1
   ======================================== */

.detail-gallery__frame--grid-3x1 {
  display: flex;
  border: 5px solid var(--color-navy);
}

.detail-gallery__frame--grid-3x1 > .detail-gallery__image {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 5px solid var(--color-navy);
}

.detail-gallery__frame--grid-3x1 > .detail-gallery__image:last-child {
  border-right: none;
}

/* Wrapper für Bild mit overflow hidden (verhindert Hover-Overflow) */
.detail-gallery__frame--grid-3x1 > .detail-gallery__image .detail-gallery__img-wrapper {
  overflow: hidden;
}

.detail-gallery__frame--grid-3x1 > .detail-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.detail-gallery__frame--grid-3x1 > .detail-gallery__image:hover img {
  transform: scale(1.05);
}

/* Caption ohne eigene Borders - Parent hat alle */
.detail-gallery__frame--grid-3x1 .detail-gallery__caption {
  border: none;
}

@media (max-width: 768px) {
  .detail-gallery__frame--grid-3x1 {
    flex-direction: column;
  }

  .detail-gallery__frame--grid-3x1 > .detail-gallery__image {
    border-right: none;
    border-bottom: 5px solid var(--color-navy);
  }

  .detail-gallery__frame--grid-3x1 > .detail-gallery__image:last-child {
    border-bottom: none;
  }
}

/* Spezial-Styling nur für grid-3x1 (Tier Captions) */
.detail-gallery__frame--grid-3x1 .detail-gallery__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  text-align: center;
  padding: var(--space-md) 0;
  background: var(--color-black);
  min-height: 50px;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .detail-gallery__frame--grid-3x1 .detail-gallery__caption {
    display: none;
  }
}

/* ========================================
   Fullwidth Parallax Section
   Background + floating overlay object
   ======================================== */

.detail-parallax {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.detail-parallax__bg {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  z-index: 0;
  will-change: transform;
}

.detail-parallax__overlay {
  position: relative;
  z-index: 1;
  width: 80%;
  max-width: 1200px;
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.4));
  will-change: transform;
}

/* Schwarzer Hintergrund Variante */
.detail-parallax--black {
  background: var(--color-black);
}

.detail-parallax--navy {
  background: var(--color-navy);
}

/* Mobile Anpassungen */
@media (max-width: 1024px) {
  .detail-parallax {
    min-height: 100vw;
    padding: 0;
  }

  .detail-parallax__bg {
    top: 0;
    height: 100%;
    object-fit: cover;
  }

  .detail-parallax__overlay {
    width: 95%;
    padding: var(--space-2xl) 0;
  }
}

/* ========================================
   Video Duo Section
   2 Videos side by side with border
   ======================================== */

.detail-video-duo {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  background: var(--color-navy);
}

.detail-video-duo__wrapper {
  width: 100%;
  max-width: 1400px;
}

.detail-video-duo__headline {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  color: var(--color-gold);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  letter-spacing: 0.1em;
}

.detail-video-duo__frame {
  display: flex;
  width: 100%;
  border: 5px solid var(--color-navy);
  border-bottom: none;
  overflow: hidden;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.4));
}

.detail-video-duo__video {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-video-duo__video:first-child {
  border-right: 5px solid var(--color-navy);
}

.detail-video-duo__video video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.detail-video-duo__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  color: var(--color-gold);
  text-align: center;
  text-transform: uppercase;
  padding: var(--space-md) 0;
  background: var(--color-black);
  letter-spacing: 0.05em;
  min-height: 50px;
  border-bottom: 5px solid var(--color-navy);
}

/* Video Duo Mobile */
@media (max-width: 1024px) {
  .detail-video-duo {
    padding: var(--space-2xl) var(--space-md);
    min-height: auto;
  }

  .detail-video-duo__frame {
    grid-template-columns: 1fr;
  }

  .detail-video-duo__video:first-child {
    border-right: none;
    border-bottom: 5px solid var(--color-navy);
  }

  .detail-video-duo__caption {
    display: none;
  }
}

/* ========================================
   Gallery Frame: 2x2 Grid
   4 Images in 2 columns, 2 rows
   ======================================== */

.detail-gallery__frame--grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 5px solid var(--color-navy);
  border-bottom: none;
}

.detail-gallery__frame--grid-2x2 > .detail-gallery__image {
  border-right: 5px solid var(--color-navy);
  border-bottom: 5px solid var(--color-navy);
}

.detail-gallery__frame--grid-2x2 > .detail-gallery__image:nth-child(2n) {
  border-right: none;
}

@media (max-width: 768px) {
  .detail-gallery__frame--grid-2x2 {
    grid-template-columns: 1fr;
    border-bottom: 5px solid var(--color-navy);
  }

  .detail-gallery__frame--grid-2x2 > .detail-gallery__image {
    border-right: none;
    border-bottom: 5px solid var(--color-navy);
  }

  /* Last item no border-bottom - frame has it */
  .detail-gallery__frame--grid-2x2 > .detail-gallery__image:last-child {
    border-bottom: none;
  }
}

/* ========================================
   Gallery Frame: 2+3 Grid (Thick Shake style)
   2 images top row, 2 small left + 1 large right bottom
   ======================================== */

.detail-gallery__frame--grid-2-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0;
  border: 5px solid var(--color-navy);
  background: transparent; /* No navy background - images fill completely */
}

/* Top row images */
.detail-gallery__frame--grid-2-3 > .detail-gallery__image {
  border-right: 5px solid var(--color-navy);
  border-bottom: 5px solid var(--color-navy);
  overflow: hidden;
}

.detail-gallery__frame--grid-2-3 > .detail-gallery__image:nth-child(2) {
  border-right: none;
}

.detail-gallery__frame--grid-2-3 > .detail-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  will-change: transform;
}

/* Bottom row container - 2 small squares left, 1 large right */
.detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
}

/* Bottom row images */
.detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row .detail-gallery__image {
  border-right: 5px solid var(--color-navy);
  overflow: hidden;
}

/* First small image - top left */
.detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row .detail-gallery__image:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* Second small image - middle */
.detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row .detail-gallery__image:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / 3;
}

/* Large image - right spanning both rows */
.detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row .detail-gallery__image:nth-child(3) {
  grid-column: 3;
  grid-row: 1 / 3;
  border-right: none;
}

.detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row .detail-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  will-change: transform;
}

@media (max-width: 768px) {
  .detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  /* Reset grid positions for tablet */
  .detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row .detail-gallery__image:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row .detail-gallery__image:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    border-right: none;
  }

  /* Large image spans full width on tablet */
  .detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row .detail-gallery__image:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 2;
    border-top: 5px solid var(--color-navy);
  }
}

@media (max-width: 480px) {
  .detail-gallery__frame--grid-2-3 {
    grid-template-columns: 1fr;
  }

  .detail-gallery__frame--grid-2-3 > .detail-gallery__image {
    border-right: none;
  }

  .detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row {
    display: flex;
    flex-direction: column;
  }

  .detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row .detail-gallery__image {
    border-right: none;
    border-bottom: 5px solid var(--color-navy);
  }

  .detail-gallery__frame--grid-2-3 .detail-gallery__bottom-row .detail-gallery__image:last-child {
    border-bottom: none;
  }
}

/* ========================================
   Showcase Section - Skills-Style Layout
   Fullwidth image with vertical text labels
   ======================================== */

.detail-showcase {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  background: var(--color-black);
}

/* Transparent mit Grid BG (zeigt globales BG durch) */
.detail-showcase--grid-bg {
  background: transparent;
}

/* Labels brauchen keinen BG bei transparentem Showcase */
.detail-showcase--grid-bg .detail-showcase__label {
  background: transparent;
}

.detail-showcase__container {
  position: relative;
  width: 100%;
  max-width: 1400px;
}

.detail-showcase__frame {
  position: relative;
  border: 5px solid var(--color-navy);
}

/* Main image in frame - cropped to 50vh on desktop */
.detail-showcase__frame > .detail-showcase__image {
  width: 100%;
  height: 50vh;
  max-height: 500px;
  display: block;
  overflow: hidden;
}

.detail-showcase__frame > .detail-showcase__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: transform;
}

/* Bottom row images - normal aspect ratio */
.detail-showcase__image {
  width: 100%;
  display: block;
  overflow: hidden;
}

.detail-showcase__image img {
  width: 100%;
  height: auto;
  display: block;
  will-change: transform;
}

/* Vertikale Labels links/rechts */
.detail-showcase__label {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: transparent;
  -webkit-text-stroke: 2px var(--color-gold);
  text-stroke: 2px var(--color-gold);
  letter-spacing: 0;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  z-index: 3;
  background: var(--color-black);
  padding: var(--space-lg) 0;
}

.detail-showcase__label--left {
  left: -40px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}

.detail-showcase__label--right {
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
}

/* Top/Bottom Labels - Hidden on Desktop */
.detail-showcase__label--top,
.detail-showcase__label--bottom {
  display: none;
}

/* Bottom row: 3 smaller images */
.detail-showcase__bottom-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 0;
}

.detail-showcase__bottom-row .detail-showcase__image {
  border: 5px solid var(--color-navy);
  border-right: none;
  border-top: none;
}

.detail-showcase__bottom-row .detail-showcase__image:last-child {
  border-right: 5px solid var(--color-navy);
}

/* Mobile: Labels oben/unten statt links/rechts */
@media (max-width: 1024px) {
  .detail-showcase {
    padding: var(--space-xl) var(--space-md);
    min-height: auto;
  }

  .detail-showcase__label--left,
  .detail-showcase__label--right {
    display: none;
  }

  .detail-showcase__label--top,
  .detail-showcase__label--bottom {
    display: block;
    position: relative;
    writing-mode: horizontal-tb;
    text-align: center;
    font-size: clamp(3rem, 10vw, 6rem);
    background: transparent;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    padding: var(--space-md) 0;
  }

  .detail-showcase__label--bottom {
    transform: rotate(180deg);
  }

  .detail-showcase__bottom-row {
    grid-template-columns: 1fr;
  }

  .detail-showcase__bottom-row .detail-showcase__image {
    border: 5px solid var(--color-navy);
    border-top: none;
  }
}

/* ========================================
   Card Fan Section - Playing Card Style
   Cards fan out on scroll and highlight on hover
   ======================================== */

.detail-cards {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  overflow: hidden;
}

/* Purple background variant */
.detail-cards--purple {
  background: var(--color-purple);
}

/* Navy background variant */
.detail-cards--navy {
  background: var(--color-navy);
}

/* Grid background variant - transparent to show global .detail-bg with parallax */
.detail-cards--grid-bg {
  background: transparent;
}

/* Vertical Labels */
.detail-cards__label {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  color: transparent;
  -webkit-text-stroke: 2px var(--color-gold);
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  z-index: 3;
  padding: var(--space-lg) 0;
}

.detail-cards__label--left {
  left: clamp(20px, 3vw, 60px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}

.detail-cards__label--right {
  right: clamp(20px, 3vw, 60px);
  top: 50%;
  transform: translateY(-50%);
}

/* Card Container - holds the fanned cards */
.detail-cards__container {
  position: relative;
  width: clamp(500px, 80vw, 1000px);
  height: clamp(500px, 80vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Individual Card - LARGE SIZE */
.detail-cards__card {
  position: absolute;
  width: clamp(350px, 56vw, 625px);
  aspect-ratio: 1 / 1;
  cursor: grab;
  will-change: transform;
  transform-origin: center center;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
  /* GSAP handles all transforms - no CSS transitions */
  user-select: none;
  -webkit-user-select: none;
}

.detail-cards__card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Z-index: Middle card (2nd) is in FRONT */
.detail-cards__card:nth-child(1) {
  z-index: 1;
}
.detail-cards__card:nth-child(2) {
  z-index: 3; /* CENTER CARD IN FRONT */
}
.detail-cards__card:nth-child(3) {
  z-index: 2;
}

/* Default fan positions (CSS fallback) */
.detail-cards__card:nth-child(1) {
  transform: rotate(-12deg) translateX(-55%);
}
.detail-cards__card:nth-child(2) {
  transform: rotate(0deg) translateY(-5%);
}
.detail-cards__card:nth-child(3) {
  transform: rotate(12deg) translateX(55%);
}

/* Fanned state (same positions, for JS compatibility) */
.detail-cards--fanned .detail-cards__card:nth-child(1) {
  transform: rotate(-12deg) translateX(-55%);
}
.detail-cards--fanned .detail-cards__card:nth-child(2) {
  transform: rotate(0deg) translateY(-5%);
}
.detail-cards--fanned .detail-cards__card:nth-child(3) {
  transform: rotate(12deg) translateX(55%);
}

/* Hover/Active states are handled by GSAP in cards.js */
/* Filter enhancement on hover (CSS supplement to GSAP transforms) */
@media (hover: hover) {
  .detail-cards__card:hover {
    filter: drop-shadow(0 50px 80px rgba(0, 0, 0, 0.6));
  }
}

/* Mobile/Tablet: Labels horizontal, larger cards */
@media (max-width: 1024px) {
  .detail-cards {
    padding: var(--space-xl) var(--space-md);
    min-height: 80vh;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .detail-cards__label--left,
  .detail-cards__label--right {
    position: relative;
    writing-mode: horizontal-tb;
    text-align: center;
    font-size: clamp(2.5rem, 8vw, 4rem);
    left: auto;
    right: auto;
    top: auto;
    transform: none;
  }

  .detail-cards__label--right {
    transform: rotate(180deg);
  }

  .detail-cards__container {
    width: 100%;
    height: auto;
    min-height: 500px;
  }

  /* MUCH larger cards on mobile */
  .detail-cards__card {
    width: clamp(280px, 70vw, 450px);
  }

  /* Tighter fan on mobile */
  .detail-cards__card:nth-child(1),
  .detail-cards--fanned .detail-cards__card:nth-child(1) {
    transform: rotate(-8deg) translateX(-35%);
  }
  .detail-cards__card:nth-child(3),
  .detail-cards--fanned .detail-cards__card:nth-child(3) {
    transform: rotate(8deg) translateX(35%);
  }
}

/* Small screens - even larger relative to screen */
@media (max-width: 480px) {
  .detail-cards__container {
    min-height: 450px;
  }

  .detail-cards__card {
    width: clamp(260px, 85vw, 380px);
  }

  .detail-cards__card:nth-child(1),
  .detail-cards--fanned .detail-cards__card:nth-child(1) {
    transform: rotate(-6deg) translateX(-30%);
  }
  .detail-cards__card:nth-child(3),
  .detail-cards--fanned .detail-cards__card:nth-child(3) {
    transform: rotate(6deg) translateX(30%);
  }
}