/* Originalaufnahmen PDP — volle Breite, symmetrisch je nach Anzahl */
.pdp-originals {
  --po-ink: var(--navy, #001e5a);
  --po-steel: var(--steel, #5a6b85);
  --po-line: rgba(0, 30, 90, 0.08);
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0;
  background: #f7f9fc;
  border-block: 1px solid var(--po-line);
}

.pdp-originals[hidden] {
  display: none;
}

.pdp-originals__inner {
  display: grid;
  gap: 0.85rem;
}

.pdp-originals__head {
  display: grid;
  gap: 0.3rem;
  max-width: 40rem;
}

.pdp-originals__eyebrow {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue, #0d5bff);
}

.pdp-originals__title {
  margin: 0;
  font-family: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--po-ink);
  line-height: 1.2;
}

.pdp-originals__lede {
  margin: 0;
  color: var(--po-steel);
  font-size: 0.88rem;
  line-height: 1.45;
}

.pdp-originals__stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.65rem;
  width: 100%;
}

.pdp-originals__tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #e8eef8;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  isolation: isolate;
  grid-column: span 3;
}

/* 5 Fotos: 3 oben + 2 unten */
.pdp-originals__stage[data-count="5"] .pdp-originals__tile {
  grid-column: span 4;
}
.pdp-originals__stage[data-count="5"] .pdp-originals__tile:nth-child(n + 4) {
  grid-column: span 6;
}

/* 6 Fotos: 3 + 3 */
.pdp-originals__stage[data-count="6"] .pdp-originals__tile {
  grid-column: span 4;
}

/* 7 Fotos: 4 + 3 */
.pdp-originals__stage[data-count="7"] .pdp-originals__tile {
  grid-column: span 3;
}
.pdp-originals__stage[data-count="7"] .pdp-originals__tile:nth-child(n + 5) {
  grid-column: span 4;
}

/* 4 Fotos: eine Reihe */
.pdp-originals__stage[data-count="4"] .pdp-originals__tile {
  grid-column: span 3;
}

.pdp-originals__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.pdp-originals__tile:hover img,
.pdp-originals__tile:focus-visible img {
  transform: scale(1.03);
}

.pdp-originals__tile:focus-visible {
  outline: 2px solid var(--blue, #0d5bff);
  outline-offset: 2px;
}

.pdp-originals__note {
  margin: 0;
  font-size: 0.68rem;
  color: rgba(0, 30, 90, 0.45);
  letter-spacing: 0.01em;
}

@media (max-width: 900px) {
  .pdp-originals__stage {
    gap: 0.55rem;
  }

  .pdp-originals__stage[data-count="5"] .pdp-originals__tile,
  .pdp-originals__stage[data-count="5"] .pdp-originals__tile:nth-child(n + 4),
  .pdp-originals__stage[data-count="6"] .pdp-originals__tile,
  .pdp-originals__stage[data-count="7"] .pdp-originals__tile,
  .pdp-originals__stage[data-count="7"] .pdp-originals__tile:nth-child(n + 5),
  .pdp-originals__stage[data-count="4"] .pdp-originals__tile {
    grid-column: span 6;
  }
}

@media (max-width: 560px) {
  .pdp-originals__stage {
    gap: 0.45rem;
  }

  .pdp-originals__stage .pdp-originals__tile,
  .pdp-originals__stage[data-count="5"] .pdp-originals__tile,
  .pdp-originals__stage[data-count="5"] .pdp-originals__tile:nth-child(n + 4),
  .pdp-originals__stage[data-count="6"] .pdp-originals__tile,
  .pdp-originals__stage[data-count="7"] .pdp-originals__tile,
  .pdp-originals__stage[data-count="7"] .pdp-originals__tile:nth-child(n + 5),
  .pdp-originals__stage[data-count="4"] .pdp-originals__tile {
    grid-column: span 6;
  }
}