/*
 * Alex Eteridou – verbindliches Galeriesystem
 * Diese Datei ist die einzige Layoutquelle fuer alle Portfolio-Galerien.
 */

.alex-editorial-gallery-page {
  --alex-gallery-max: 1600px;
  --alex-gallery-gap: 14px;
  --alex-gallery-edge: 14px;
  width: 100%;
  margin: 0;
  color: #1d1d1f;
  background: #fff;
}

/* Einheitlicher Kopfbereich – unabhaengig von Titel und Kategorie. */
.alex-editorial-gallery-page .detail-hero {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 58px 0 0 !important;
  background: #f5f5f7 !important;
  text-align: center !important;
  overflow: hidden !important;
}

.alex-editorial-gallery-page .detail-hero-copy {
  width: min(980px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
  padding: clamp(68px, 9vw, 130px) 0 clamp(46px, 6vw, 78px) !important;
}

.alex-editorial-gallery-page .detail-hero-copy .eyebrow {
  display: block !important;
  margin: 0 0 16px !important;
  color: #6e6e73 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.alex-editorial-gallery-page .detail-hero-copy h1 {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  color: #1d1d1f !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(48px, 7vw, 104px) !important;
  font-weight: 600 !important;
  line-height: .96 !important;
  letter-spacing: -.06em !important;
  text-wrap: balance;
}

.alex-editorial-gallery-page .detail-hero-copy p {
  max-width: 720px !important;
  margin: 26px auto 28px !important;
  color: #6e6e73 !important;
  font-size: clamp(17px, 1.7vw, 22px) !important;
  line-height: 1.45 !important;
}

.alex-editorial-gallery-page .detail-cta {
  display: inline-flex !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 22px !important;
  border: 1px solid rgba(29,29,31,.38) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #1d1d1f !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.alex-editorial-gallery-page .detail-cta:hover {
  background: rgba(29,29,31,.06) !important;
  border-color: rgba(29,29,31,.62) !important;
}

.alex-editorial-gallery-page .detail-closing .detail-cta {
  background: transparent !important;
  border-color: rgba(255,255,255,.62) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.alex-editorial-gallery-page .detail-hero-image {
  position: relative !important;
  width: 100% !important;
  height: clamp(440px, 66vw, 760px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #e8e8ed !important;
  overflow: hidden !important;
}

.alex-editorial-gallery-page .detail-hero-image .detail-hero-photo,
.alex-editorial-gallery-page .detail-hero-image .asset-photo {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.alex-editorial-gallery-page .detail-hero-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--asset-position, 50% 50%) !important;
}

.alex-editorial-gallery-page .detail-hero-image::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.08) 66%, transparent) !important;
  pointer-events: none !important;
}

.alex-editorial-gallery-page .gallery-mood-title {
  position: absolute !important;
  z-index: 3 !important;
  left: clamp(24px, 5vw, 84px) !important;
  bottom: clamp(28px, 5vw, 72px) !important;
  width: min(900px, calc(100% - 48px)) !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(48px, 7vw, 104px) !important;
  font-weight: 600 !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
  text-align: left !important;
  text-shadow: 0 2px 24px rgba(0,0,0,.18) !important;
}

.alex-editorial-gallery-page .gallery-mood-title span {
  display: block !important;
}

.alex-editorial-gallery-page .editable-page-content:empty {
  display: none !important;
}

/*
 * Galerie: echtes Masonry-Raster in der gespeicherten WordPress-Reihenfolge.
 * Anders als CSS-Spalten läuft es sichtbar von links nach rechts; neue Bilder
 * fliessen automatisch weiter und alle Originalformate bleiben erhalten.
 */
.alex-editorial-gallery-page .detail-section.detail-overview {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: var(--alex-gallery-edge) !important;
  background: #fff !important;
  overflow: visible !important;
}

.alex-editorial-gallery-page .alex-gallery {
  display: block !important;
  width: min(var(--alex-gallery-max), 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.alex-editorial-gallery-page .alex-gallery-flow {
  display: grid !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: 1px !important;
  gap: var(--alex-gallery-gap) !important;
}

.alex-editorial-gallery-page .alex-gallery-item {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  line-height: 0 !important;
  grid-row-end: span var(--alex-gallery-row-span, 1) !important;
}

.alex-editorial-gallery-page .alex-gallery-item img,
.alex-editorial-gallery-page .alex-gallery-image {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
}

.alex-editorial-gallery-page .detail-closing {
  margin: 0 !important;
  padding: clamp(90px, 11vw, 170px) 20px !important;
  background: #000 !important;
  color: #f5f5f7 !important;
  text-align: center !important;
}

.alex-editorial-gallery-page .detail-closing h2 {
  max-width: 980px !important;
  margin: 0 auto 34px !important;
  color: inherit !important;
  font-size: clamp(46px, 6vw, 88px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
}

@media (min-width: 601px) and (max-width: 980px) {
  .alex-editorial-gallery-page {
    --alex-gallery-gap: 10px;
    --alex-gallery-edge: 10px;
  }

  .alex-editorial-gallery-page .alex-gallery-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .alex-editorial-gallery-page {
    --alex-gallery-gap: 6px;
    --alex-gallery-edge: 6px;
  }

  .alex-editorial-gallery-page .detail-hero {
    padding-top: 54px !important;
  }

  .alex-editorial-gallery-page .detail-hero-copy {
    width: calc(100% - 32px) !important;
    padding: 54px 0 38px !important;
  }

  .alex-editorial-gallery-page .detail-hero-copy h1 {
    font-size: 36px !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
  }

  .alex-editorial-gallery-page .detail-hero-copy p {
    margin: 18px auto 22px !important;
    font-size: 16px !important;
    line-height: 1.48 !important;
  }

  .alex-editorial-gallery-page .detail-cta {
    min-height: 42px !important;
    padding: 10px 19px !important;
    border: 1px solid rgba(29,29,31,.18) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #1d1d1f !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    font-size: 15px !important;
  }

  .alex-editorial-gallery-page .detail-hero-image {
    height: 62svh !important;
    min-height: 420px !important;
  }

  .alex-editorial-gallery-page .detail-hero-image::after {
    background: linear-gradient(0deg, rgba(0,0,0,.58), transparent 72%) !important;
  }

  .alex-editorial-gallery-page .gallery-mood-title {
    left: 20px !important;
    bottom: 26px !important;
    width: calc(100% - 40px) !important;
    font-size: 38px !important;
    line-height: .98 !important;
    letter-spacing: -.04em !important;
  }

  .alex-editorial-gallery-page .detail-closing h2 {
    font-size: 34px !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  .alex-editorial-gallery-page .detail-closing .detail-cta {
    border-color: rgba(255,255,255,.3) !important;
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .alex-editorial-gallery-page .alex-gallery-flow {
    grid-template-columns: 1fr !important;
  }
}