/* ============== Shared page hero ==============
   Two-column copy + illustration layout used on yoga, activity-painting,
   and cafe-karte. Page-specific colours come in via .page-hero--* modifiers
   so the markup is identical and only background / text colours / image
   change per page. */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Mobile: Hero wächst mit dem Inhalt — keine harte Höhen-Begrenzung,
     damit Eyebrow/Titel/CTA bei langen Texten nicht abgeschnitten werden.
     Desktop unten lockt den Hero auf einen Viewport, weil dort das
     Photo rechts gepinnt ist und sonst über den Fold ragt. */
  padding-block: var(--section-py-mobile);
}

@media (min-width: 1024px) {
  .page-hero {
    height: calc(100vh - var(--nav-height));
    min-height: 580px;
    overflow: hidden;
    padding-block: clamp(48px, 6vh, 96px);
  }
}

.page-hero__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: stretch;
}

/* Auf Desktop nimmt das Photo-Background die rechte Hälfte des Hero ein.
   Wir geben dem Copy-Block einen 2-Spalten-Grid mit 50% links + Reserve
   rechts, damit lange Überschriften (z.B. "EINE BÜHNE FÜR KREATIVE
   MARKEN") in der Farb-Spalte umbrechen statt in die Photo-Spalte zu
   ragen. */
@media (min-width: 1024px) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 50%) 1fr;
  }
}

.page-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-width: 0;
}

.page-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 9vw, 88px);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

/* Per-page titles can opt into a different line-break on mobile vs >=768px
   by wrapping each variant in .page-hero__title-sm / .page-hero__title-md.
   Default: show desktop variant, hide mobile variant. */
.page-hero__title-sm { display: none; }
.page-hero__title-md { display: inline; }

@media (max-width: 767px) {
  .page-hero__title-sm { display: inline; }
  .page-hero__title-md { display: none; }
}

.page-hero__text {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--font-size-lg);
  line-height: 1.75;
  max-width: 32rem;
}

/* margin-top: auto pushes the CTAs to the bottom of the copy column so they
   sit at a comparable vertical position on every page, regardless of how
   tall the title above happens to wrap. */
.page-hero__ctas {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-start;
  padding-top: var(--space-md);
}

/* ============== Photo-backed heroes ==============
   Photos are portrait (1066×1600). To avoid heavy upscaling on wide
   desktops, every photo-hero defines two custom properties — image URL
   and fallback colour — and the rules below stack a colour panel on
   the left + the photo at native aspect on the right (>=1024px). On
   mobile we fall back to a full-bleed cover with a dark overlay so the
   light text stays readable. */
[class*="page-hero--"] {
  background-color: var(--page-hero-fallback, transparent);
}

.page-hero--yoga      { --page-hero-fallback: var(--color-midnight); --page-hero-image: url('/assets/images/heros/hero-yoga.webp'); }
.page-hero--ap        { --page-hero-fallback: var(--color-brand-red);   --page-hero-image: url('/assets/images/heros/hero-activity.webp'); }
.page-hero--menu      { --page-hero-fallback: var(--color-bordeaux);    --page-hero-image: url('/assets/images/heros/karte-hero.webp'); }
.page-hero--coworking { --page-hero-fallback: var(--color-forest-green);--page-hero-image: url('/assets/images/heros/hero-coworking.webp'); }
.page-hero--store     { --page-hero-fallback: var(--color-midnight);    --page-hero-image: url('/assets/images/heros/hero-store.webp'); }
.page-hero--kalender  { --page-hero-fallback: var(--color-bordeaux);    --page-hero-image: url('/assets/images/heros/hero-kalender.webp'); }

/* Mobile / tablet: photo as full-bleed background with dark overlay. */
.page-hero--yoga,
.page-hero--ap,
.page-hero--menu,
.page-hero--coworking,
.page-hero--store,
.page-hero--kalender {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    var(--page-hero-image);
  background-size: cover, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat;
}

/* Desktop: photo pinned to the right at its natural aspect ratio.
   The fallback colour fills the left band where the copy sits, and a
   narrow horizontal gradient softens the seam between colour panel
   and photo so the join doesn't read as a hard line. */
@media (min-width: 1024px) {
  .page-hero--yoga,
  .page-hero--ap,
  .page-hero--menu,
  .page-hero--coworking,
  .page-hero--store,
  .page-hero--kalender {
    background-image:
      linear-gradient(
        to right,
        var(--page-hero-fallback) 0%,
        var(--page-hero-fallback) 45%,
        rgba(0, 0, 0, 0) 65%
      ),
      var(--page-hero-image);
    background-size: 100% 100%, auto 100%;
    background-position: left center, right center;
  }
}

/* ============== Page-specific text colours ============== */
.page-hero--yoga .page-hero__eyebrow,
.page-hero--yoga .page-hero__title {
  color: var(--color-off-white);
}
.page-hero--yoga .page-hero__text {
  color: rgba(250, 240, 244, 0.9);
}

.page-hero--ap .page-hero__eyebrow,
.page-hero--ap .page-hero__title {
  color: var(--color-off-white);
}
.page-hero--ap .page-hero__text {
  color: rgba(250, 240, 244, 0.9);
}

.page-hero--menu .page-hero__eyebrow {
  color: var(--color-baby-pink);
}
.page-hero--menu .page-hero__title {
  color: var(--color-white);
}
.page-hero--menu .page-hero__text {
  color: var(--off-white-80);
}

.page-hero--coworking .page-hero__eyebrow {
  color: rgba(168, 213, 196, 0.85);
}
.page-hero--coworking .page-hero__title {
  color: var(--color-off-white);
}
.page-hero--coworking .page-hero__text {
  color: rgba(250, 240, 244, 0.9);
}

.page-hero--store .page-hero__eyebrow {
  color: var(--baby-pink-60);
}
.page-hero--store .page-hero__title {
  color: var(--color-off-white);
}
.page-hero--store .page-hero__text {
  color: rgba(250, 240, 244, 0.85);
}

.page-hero--kalender {
  background-color: var(--color-bordeaux);
}
.page-hero--kalender .page-hero__eyebrow {
  color: rgba(242, 167, 187, 0.75);
}
.page-hero--kalender .page-hero__title {
  color: var(--color-off-white);
}
.page-hero--kalender .page-hero__text {
  color: rgba(250, 240, 244, 0.85);
}