/* =====================================================
   LANA – Profile Hero (FINAL • RECT AVATAR CARD)
   Path: /childtheme/css/profile-hero/lana-profile-hero.css
   ===================================================== */

/* Unsichtbare ACF Quellen */
.lana-hero-bg-desktop-source,
.lana-hero-avatar-desktop-source,
.lana-hero-bg-mobile-source,
.lana-hero-avatar-mobile-source,
.lana-hero-name-source,
.lana-hero-city-source{
  display:none !important;
}

/* =====================================================
   HERO CONTAINER
   ===================================================== */

.lana-profile-hero{
  position: relative;
  width: 100%;
  min-height: clamp(460px, 58vw, 660px);

  overflow: visible;
  isolation: isolate;

  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: #ffffff;

  /* ===== Avatar als Rechteck-Card (Desktop) =====
     Höhe orientiert sich grob an altem Kreis, Breite deutlich größer */
  --lana-avatar-w: min(520px, calc(100vw - 64px)); /* viel breiter, aber mit Abstand links/rechts */
  --lana-avatar-h: 300px;                          /* “Portrait-Card” */
  --lana-avatar-border: 8px;                      /* Rahmen */
  --lana-avatar-radius: 0%;                       /* 10% rounded */

  /*
    Platz UNTER dem Hero reservieren:
    Hälfte der Card-Höhe + Border + Puffer
  */
  padding-bottom: calc((var(--lana-avatar-h) / 2) + var(--lana-avatar-border) + 22px);

  --lana-hero-bg: none;
  --lana-avatar-img: none;
}

/* =====================================================
   BACKGROUND IMAGE
   ===================================================== */

.lana-profile-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 1;

  background-image: var(--lana-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: scale(1.02);
}

/* =====================================================
   SHADE / OVERLAY
   ===================================================== */

.lana-profile-hero__shade{
  position: absolute;
  inset: 0;
  z-index: 2;

  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.42) 0%,
    rgba(0,0,0,0.22) 45%,
    rgba(0,0,0,0.12) 100%
  );

  pointer-events: none;
}

/* =====================================================
   TEXT CONTENT
   ===================================================== */

.lana-profile-hero__content{
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 3;

  text-align: center;
  padding: 16px 20px;
  width: min(92%, 1000px);
}

/* =====================================================
   TYPO (Elementor Global Styles Override)
   ===================================================== */

/* NAME (H1) – forced */
.lana-profile-hero .lana-profile-hero__content h1.lana-profile-hero__name{
  margin: 0 !important;
  padding: 0 !important;

  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;

  font-size: 50px !important;
  line-height: 1.05 !important;
  color: #ffffff !important;

  text-shadow: none !important;
}

/* SUBLINE – forced */
.lana-profile-hero .lana-profile-hero__content .lana-profile-hero__sub{
  margin-top: 12px !important;
  padding: 0 !important;

  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;

  font-size: 16px !important;
  line-height: 1.25 !important;
  color: #ffffff !important;

  opacity: 1 !important;
  text-shadow: none !important;
}

.lana-profile-hero .lana-profile-hero__content .lana-profile-hero__sub *{
  color: #ffffff !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* =====================================================
   AVATAR CARD (RECT • 50/50 OVERLAP)
   ===================================================== */

.lana-profile-hero__avatar{
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 5;

  width: var(--lana-avatar-w);
  height: var(--lana-avatar-h);

  border-radius: var(--lana-avatar-radius);

  background-image: var(--lana-avatar-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border: var(--lana-avatar-border) solid #ffffff;

  /* Feine hellgraue Außenlinie */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.22) !important;

  transform: translate(-50%, 50%);
  overflow: hidden;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767px){

  .lana-profile-hero{
    min-height: clamp(380px, 70vw, 560px);

    --lana-avatar-w: min(92vw, 420px);
    --lana-avatar-h: 240px;
    --lana-avatar-border: 8px;

    padding-bottom: calc((var(--lana-avatar-h) / 2) + var(--lana-avatar-border) + 16px);
  }

  .lana-profile-hero__content{
    top: 50%;
  }

  .lana-profile-hero .lana-profile-hero__content h1.lana-profile-hero__name{
    font-size: 38px !important;
  }

  .lana-profile-hero .lana-profile-hero__content .lana-profile-hero__sub{
    font-size: 14px !important;
    letter-spacing: 0.28em !important;
  }
}