/* Inline styles extracted from hero.njk */

/* Desktop: lock hero to viewport height */
@media (min-width: 1024px) {
  #up {
    height: 100svh;
    max-height: 100svh;
  }
}

#up .gp-section__inner {
  --gp-section-pt: 0px;
  --gp-section-pb: 0px;
}

#up .gp-three-points-content {
  --gp-max-width: 100%;
}

/* Section-specific styles extracted from style.css */
.gp-section-hero .gp-hero-image-container {
  --gp-hero-img-width: min(710px, 49.3vw);
  --gp-hero-img-height: min(652px, 72.4vh);
  display: flex;
  justify-content: center;
  width: var(--gp-hero-img-width);
  height: var(--gp-hero-img-height);
  background: white;
  margin-left: auto;
  margin-right: 9%;
  margin-top: -12.7%;
}

@media (max-width: 999px) {
  .gp-section-hero .gp-hero-image-container {
    --gp-hero-img-width: 100%;
    height: auto;
    width: auto;
    margin-top: -14%;
    margin-left: calc(var(--gp-container-side-gutter) * -1);
    margin-right: calc(var(--gp-container-side-gutter) * -1);
  }
}

@media (min-width: 768px) and (max-width: 999px) {
  .gp-section-hero .gp-hero-image-container {
    /* Cap on short viewports (landscape phones) so the portrait does not
       overflow the fold; portrait tablets are tall enough to keep 750px. */
    --gp-hero-img-height: min(750px, 90vh);
    margin-top: -12%;
  }
}

@media (max-width: 599px) {
  .gp-section-hero .gp-hero-image-container {
    --gp-hero-img-height: 560px;
  }
}

/* Mobile: image starts at 30% of Pirker line-height, ends at bottom of viewport */
@media (max-width: 767px) {
  .gp-section-hero .gp-branding {
    z-index: 3;
  }
  .gp-section-hero .gp-three-points-content {
    z-index: 2;
  }
  .gp-section-hero .gp-hero-image-container {
    position: absolute;
    z-index: 1;
    top: calc(var(--gp-g-visible-height) + var(--gp-g-text-gap) + var(--gp-branding-font-size) * var(--gp-g-line-height) * 0.3);
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    margin: 0;
  }
  .gp-section-hero .gp-hero-image-container__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 63% 12%;
  }
}

.gp-section-hero .gp-hero-image-container__img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 25%;
     object-position: center 25%;
  margin-bottom: -11%;
}

@media (max-width: 999px) {
  .gp-section-hero .gp-hero-image-container__img {
    margin-bottom: 0;
    -o-object-position: center 12%;
       object-position: center 12%;
    width: var(--gp-hero-img-width);
    height: var(--gp-hero-img-height);
  }
}

.gp-section-hero .gp-three-points-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7vh;
  padding-inline: var(--gp-container-side-gutter);
  font-size: 30px;
  line-height: 1.4;
}

@media (max-width: 1023px) {
  .gp-section-hero .gp-three-points-content {
    font-size: 3vmax;
  }
}

/* Phones up to 440px */
@media (max-width: 440px) {
  .gp-section-hero .gp-three-points-content {
    font-size: 2.5vmax;
  }
}

/* Narrow tall phones */
@media (max-width: 360px) and (min-height: 780px) {
  .gp-section-hero .gp-three-points-content {
    font-size: 2.3vmax;
  }
}

.gp-section-hero .gp-three-points-content .-tpc {
  text-align: center;
}

.gp-section-hero .gp-three-points-content .-tpc.-tpc-text-2 {
  text-align: left;
}

.gp-section-hero .gp-three-points-content .-tpc.-tpc-text-3 {
  text-align: right;
}

/* Desktop only: nudge g.deckt (right tagline) further left */
@media (min-width: 1000px) {
  .gp-section-hero .gp-three-points-content .-tpc.-tpc-text-3 {
    padding-right: 150px;
  }
}

@media (max-width: 1023px) {
  .gp-section-hero .gp-three-points-content .-tpc.-tpc-text-1 {
    text-align: left;
  }
  .gp-section-hero .gp-three-points-content .-tpc.-tpc-text-2 {
    text-align: center;
  }
  .gp-section-hero .gp-three-points-content .-tpc.-tpc-text-3 {
    text-align: right;
  }
}

/* ===== Mobile-only hero image fixes (desktop untouched) =====
   The 999px block above sets img to a fixed pixel height (560px on small
   phones, 750px on tablets). That created two visible bugs:
     1) On short viewports the 560px image overflowed the hero into the
        next section.
     2) On tall viewports the image was shorter than the container so the
        container's `background: white` (line 28) showed as a white strip.
   These rules override with cover-fill + transparent container + section
   overflow-clip. Higher specificity (.gp-section.gp-section-hero) ensures
   we win against the prior 999px rules without changing the desktop path.

   ─── TUNE THIS to dial the overlap ──────────────────────────────────────
   --gp-hero-image-overlap controls how far the image top sits ABOVE the
   visible bottom of the SPENGLER MEISTER + DACHDECKER subtext block.
     positive value (e.g. 24px) → more overlap (image creeps up under text)
     0                          → image top exactly at subtext bottom
     negative value             → gap (image starts below subtext)
   Scoped to mobile only (max-width: 767px); desktop is untouched.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .gp-section.gp-section-hero {
    --gp-hero-image-overlap: 110px;      /* ← tweak me */
    overflow: hidden;
  }
  .gp-section.gp-section-hero .gp-hero-image-container {
    background: transparent;
    overflow: hidden;
    /* Position image just under (and slightly overlapping) the SPENGLER
       subtext block. Breakdown:
         PIRKER_bottom_from_section_top = font × 1.83 - 4.5rem
         + 10px  → .gp-branding__subtext `top: calc(100% + 10px)` gap
         + 100.8px → subtext block: 3 lines × 24px × 1.4 line-height
         - overlap → how far image creeps up under subtext (the knob) */
    top: calc(
      var(--gp-branding-font-size) * 1.83
      - 4.5rem
      + 10px
      + 100.8px
      - var(--gp-hero-image-overlap)
    ) !important;
  }
  .gp-section.gp-section-hero .gp-hero-image-container__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 63% 12%;
  }
}

/* Desktop: align the tagline row with the 1060px content column and drop it to
   the screendesign's baseline near the section foot. */
@media (min-width: 1000px) {
  .gp-section-hero .gp-three-points-content {
    padding-inline: max(70px, calc((100% - 1060px) / 2));
    bottom: 2.8vh;
  }
}