/*
 * Gemeinsame Weiterführung des ausgewählten Startseitenstils auf den
 * Unterseiten: sichtbares Gold-M im Hero, großzügige Fotomomente und
 * dieselbe ruhige Kartenästhetik. Inhalt und Seitenstruktur bleiben erhalten.
 */

.studio-subpage.studio-direction--fullbleed {
  --fullbleed-card: rgba(251, 248, 240, 0.95);
}

/*
 * Das metallisch-goldene M nutzt das Seitenverhältnis der gelieferten PNG.
 * So bleibt insbesondere die untere Schleife innerhalb des Hero-Bereichs,
 * statt an der quadratischen Zeichenfläche oder der Abschnittskante zu enden.
 */
.studio-subpage.studio-direction--fullbleed .hero::after {
  top: -54px;
  right: clamp(36px, 6vw, 110px);
  width: min(62vw, 900px);
  aspect-ratio: 1417 / 993;
  background-position: right center;
  background-size: contain;
  opacity: 0.72;
}

.studio-subpage.studio-direction--fullbleed .hero-grid > div:first-child::before,
.studio-subpage.studio-direction--fullbleed .hero > .container > .narrow::before {
  inset: -26px -98px -30px -20px;
  background: linear-gradient(
    90deg,
    rgba(var(--hero-rgb), 1) 0%,
    rgba(var(--hero-rgb), 0.99) 74%,
    rgba(var(--hero-rgb), 0.84) 86%,
    rgba(var(--hero-rgb), 0) 100%
  );
}

/* Die Bildrahmen greifen die bewusst versetzte Goldkontur des Index-Heros auf. */
.studio-subpage.studio-direction--fullbleed .hero-media::before {
  border-color: rgba(227, 151, 23, 0.84);
  transform: translate(14px, -11px);
}

/* Ein klarer, vollflächiger Fotomoment pro Unterseite. */
.studio-subpage.studio-direction--fullbleed .immersive-photo-section {
  min-height: clamp(590px, 68vh, 750px);
}

.studio-subpage.studio-direction--fullbleed .immersive-photo::after {
  background:
    linear-gradient(90deg, rgba(33, 25, 20, 0.16), rgba(33, 25, 20, 0) 48%),
    linear-gradient(0deg, rgba(33, 25, 20, 0.14), rgba(33, 25, 20, 0) 44%);
}

.studio-subpage.studio-direction--fullbleed .immersive-photo-section--align-right .immersive-photo::after {
  background:
    linear-gradient(270deg, rgba(33, 25, 20, 0.18), rgba(33, 25, 20, 0) 50%),
    linear-gradient(0deg, rgba(33, 25, 20, 0.13), rgba(33, 25, 20, 0) 44%);
}

.studio-subpage.studio-direction--fullbleed .immersive-photo__content {
  align-items: center;
  justify-content: flex-start;
  padding-block: 54px;
}

.studio-subpage.studio-direction--fullbleed .immersive-photo-section--align-right .immersive-photo__content {
  justify-content: flex-end;
}

.studio-subpage.studio-direction--fullbleed .immersive-photo__card {
  width: min(100%, 560px);
  background: var(--fullbleed-card);
}

.studio-subpage.studio-direction--fullbleed .immersive-photo__card h2 {
  max-width: 17ch;
}

.studio-subpage .pregnancy-phase-heading {
  hyphens: manual;
  overflow-wrap: normal;
}

.studio-subpage.studio-direction--fullbleed .immersive-photo__card .check-list {
  margin-top: 20px;
}

.studio-subpage.studio-direction--fullbleed .immersive-photo-section--family {
  background: #d99b22;
}

.studio-subpage.studio-direction--fullbleed .immersive-photo-section--pregnancy {
  background: #b78978;
}

.studio-subpage.studio-direction--fullbleed .immersive-photo-section--support {
  background: #9b6a42;
}

@media (max-width: 1023px) {
  .studio-subpage.studio-direction--fullbleed .hero::after {
    top: -46px;
    right: -250px;
    width: min(78vw, 700px);
    opacity: 0.52;
  }

  .studio-subpage.studio-direction--fullbleed .immersive-photo-section {
    min-height: 680px;
  }
}

@media (max-width: 767px) {
  .studio-subpage.studio-direction--fullbleed .hero::after {
    top: auto;
    right: -220px;
    bottom: 14px;
    width: min(132vw, 560px);
    opacity: 0.3;
  }

  .studio-subpage.studio-direction--fullbleed .hero-grid > div:first-child::before,
  .studio-subpage.studio-direction--fullbleed .hero > .container > .narrow::before {
    inset: -18px -30px -22px -14px;
  }

  .studio-subpage.studio-direction--fullbleed .immersive-photo-section {
    min-height: 0;
  }

  .studio-subpage.studio-direction--fullbleed .immersive-photo {
    height: 520px;
  }

  .studio-subpage.studio-direction--fullbleed .immersive-photo__content {
    padding: 0;
  }

  .studio-subpage.studio-direction--fullbleed .immersive-photo__card {
    width: calc(100% - 32px);
    margin-inline: auto;
  }

  /* Mobile Fakten werden zu gleichmäßigen, mittig beschrifteten Pillen. */
  .studio-subpage .hero .fact-row li {
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

@media print {
  .studio-subpage.studio-direction--fullbleed .immersive-photo-section {
    min-height: auto;
    padding: 36px 0;
    background: #fff;
  }

  .studio-subpage.studio-direction--fullbleed .immersive-photo {
    display: none;
  }
}