/*
 Theme Name:     Divi Child
 Theme URI:      https://www.chefblogger.me
 Description:    Divi Child Theme
 Author:         Eric Mächler
 Author URI:     https://www.ericmaechler.com
 Template:       Divi
 Version:        2.0
*/
/* =============================================
   HERO SCROLL EFFECT — Divi 5
   ============================================= */

/* Section als Scroll-Anker + dunkler Hintergrund */
.titel-hero-sektion {
  position: relative;
  background: #262626 !important;
}

/* Et_pb_section / Spalten transparent, damit body-dunkel durchscheint */
.titel-hero-sektion .et_pb_section,
.titel-hero-sektion .et_pb_row,
.titel-hero-sektion .et_pb_column {
  background: transparent !important;
}

/* Sticky Wrapper = die Section selbst, GSAP pinnt sie */
.titel-hero-sektion .et_pb_section_inner {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 1vh;
  will-change: transform;
}

/* Titel-Row: absolut positioniert oben */
.titel-hero-row {
  position: absolute !important;
  top: -20vh;
  left: 5vw;
  right: 5vw;
  z-index: 10;
}

/* Titel t1 */
.titel-hero-t1 h2,
.titel-hero-t1 h1 {
  font-size: clamp(3.5rem, 9vw, 9rem) !important;
  font-weight: 800 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
}

/* "Residencies" Label (t2) — sitzt an der Titel-Position (top: 12vh) */
.titel-hero-t2 {
  position: absolute !important;
  top: 12vh;
  left: 5vw;
  right: 5vw;
  z-index: 10;
  opacity: 0;
  transform: translateY(10px);
  margin-bottom: 0;
}
.titel-hero-t2 h2,
.titel-hero-t2 h1 {
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* Bilder-Row: niedriger angesetzt, damit Karten nicht in den Titel ragen.
   BG transparent — Pin-Spacer (#262626) scheint durch, keine weissen Lücken. */
.titel-hero-bilderzeile {
  position: relative;
  width: 100%;
  height: 60vh;
  background: transparent;
}

/* Alle Bilder: absolut, 9/16 Format, dunkler Karten-Background */
.titel-hero-bild1,
.titel-hero-bild2,
.titel-hero-bild3,
.titel-hero-bild4 {
  position: absolute !important;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 5px;
  background: #111;
  cursor: pointer;
}

.titel-hero-bild1 img,
.titel-hero-bild2 img,
.titel-hero-bild3 img,
.titel-hero-bild4 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.45s ease !important;
}

.titel-hero-bild1:hover img,
.titel-hero-bild2:hover img,
.titel-hero-bild3:hover img,
.titel-hero-bild4:hover img {
  transform: scale(1.04) !important;
}

/* Startzustände (chaotisch) */
.titel-hero-bild1 {
  width: 19%;
  top: 35%;
  left: 4%;
  transform: rotate(-7deg) translateY(-12px);
  z-index: 3;
}
.titel-hero-bild2 {
  width: 14%;
  top: 25%;
  left: 27%;
  transform: rotate(5deg) translateY(8px);
  z-index: 2;
}
.titel-hero-bild3 {
  width: 17%;
  top: 45%;
  left: 47%;
  transform: rotate(-4deg) translateY(10px);
  z-index: 3;
}
.titel-hero-bild4 {
  width: 16%;
  top: 29%;
  left: 72%;
  transform: rotate(6deg) translateY(-5px);
  z-index: 2;
}

/* Spalten der Bilderzeile deaktivieren */
.titel-hero-bilderzeile .et_pb_column {
  position: static !important;
  padding: 0 !important;
  width: auto !important;
}

/* GSAP pin-spacer: 200vh Padding-Bereich unter dem Hero.
   Ohne BG würde hier der Body durchscheinen. */
.pin-spacer:has(.titel-hero-sektion) {
  background: #262626;
}

/* =============================================
   RESPONSIVE — Tablet ≤980px
   ============================================= */
@media (max-width: 980px) {
  .titel-hero-row {
    top: -10vh;
  }
  .titel-hero-t2 {
    top: 8vh;
  }
  .titel-hero-bilderzeile {
    height: 50vh;
  }
  .titel-hero-bild1,
  .titel-hero-bild2,
  .titel-hero-bild3,
  .titel-hero-bild4 {
    width: 22%;
  }
}

/* =============================================
   RESPONSIVE — Mobile ≤600px
   ============================================= */
@media (max-width: 600px) {
  .titel-hero-row {
    top: -5vh;
  }
  .titel-hero-t2 {
    top: 5vh;
  }
  .titel-hero-bilderzeile {
    height: 45vh;
  }
  /* Karten weniger chaotisch, gleich gross */
  .titel-hero-bild1,
  .titel-hero-bild2,
  .titel-hero-bild3,
  .titel-hero-bild4 {
    width: 23%;
  }
}