/* ==========================================================================
   Portfolio-Seite: Foto-Hero – nur auf Seiten mit dem Template
   „Portfolio (mit Hero-Bild)" geladen (page-templates/template-portfolio.php).
   Ergänzt landingpage.css, ohne bestehende Theme-Styles zu verändern.
   ========================================================================== */

.portfolio-hero {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: clamp(420px, 70vh, 760px);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--portfolio-hero-position, center center);
}

.portfolio-hero.align-h-left {
  justify-content: flex-start;
}

.portfolio-hero.align-h-center {
  justify-content: center;
}

.portfolio-hero.align-h-right {
  justify-content: flex-end;
}

.portfolio-hero.align-v-top {
  align-items: flex-start;
}

.portfolio-hero.align-v-center {
  align-items: center;
}

.portfolio-hero.align-v-bottom {
  align-items: flex-end;
}

.portfolio-hero-overlay {
  position: absolute;
  inset: 0;
}

.portfolio-hero-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 2rem;
  padding: 2.5rem;
  color: #fff;
  /* Baseline-Lesbarkeit auch ohne das optionale Overlay (siehe
     .portfolio-hero-overlay oben) – konsistent mit dem weißen Text des
     bereits vorhandenen „Hero"-Block-Patterns (inc/block-patterns.php). */
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.portfolio-hero-content h1 {
  color: #fff;
  margin-bottom: 0.5em;
}

.portfolio-hero-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5em;
}

.portfolio-hero.align-h-left .portfolio-hero-content {
  text-align: left;
}

.portfolio-hero.align-h-center .portfolio-hero-content {
  text-align: center;
}

.portfolio-hero.align-h-right .portfolio-hero-content {
  text-align: right;
}

@media (max-width: 720px) {
  .portfolio-hero {
    /* Ohne eigens hinterlegte Mobile-Position bleibt automatisch dieselbe
       Bildkomposition wie auf Desktop erhalten (z. B. das Gesicht bleibt
       im Bild), siehe --portfolio-hero-position[-mobile] im Template. */
    background-position: var(--portfolio-hero-position-mobile, var(--portfolio-hero-position, center center));
    min-height: 60vh;
  }

  .portfolio-hero-content {
    margin: 1.5rem;
    padding: 1.75rem;
    max-width: none;
  }
}