/* =========================================================
   SURFCAMP HERO GRID
========================================================= */

.surfcamp-hero-grid{
  position:relative;
  isolation:isolate;

  width:100%;
  min-width:0;

  overflow:hidden;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      var(--surfcamp-grid-primary-light,#5ED3DF),
      var(--surfcamp-grid-primary-dark,#0E7490)
    );

  border-radius:0 0 18px 18px;

  box-shadow:
    0 18px 48px rgba(15,111,143,.12);

  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial,
    sans-serif;
}


/* =========================================================
   FULL BLEED / WPBAKERY
========================================================= */

.surfcamp-hero-grid--full-bleed{
  width:100vw;
  max-width:100vw;

  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}


/* =========================================================
   HEIGHT
========================================================= */

.surfcamp-hero-grid--height-large{
  min-height:clamp(
    560px,
    35.65vw,
    730px
  );
}


.surfcamp-hero-grid--height-medium{
  min-height:560px;
}


.surfcamp-hero-grid--height-compact{
  min-height:480px;
}


/* =========================================================
   MEDIA
========================================================= */

.surfcamp-hero-grid__media{
  position:absolute;
  inset:0;

  z-index:0;

  overflow:hidden;

  border-radius:inherit;

  background:#dbeff2;
}


.surfcamp-hero-grid__image{
  position:absolute;
  inset:0;

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1.001);
  backface-visibility:hidden;
}


/* Bildposition */

.surfcamp-hero-grid--position-center
.surfcamp-hero-grid__image{
  object-position:center center;
}


.surfcamp-hero-grid--position-left
.surfcamp-hero-grid__image{
  object-position:left center;
}


.surfcamp-hero-grid--position-right
.surfcamp-hero-grid__image{
  object-position:right center;
}


.surfcamp-hero-grid--position-top
.surfcamp-hero-grid__image{
  object-position:center top;
}


.surfcamp-hero-grid--position-bottom
.surfcamp-hero-grid__image{
  object-position:center bottom;
}


/* =========================================================
   IMAGE FALLBACK
========================================================= */

.surfcamp-hero-grid__placeholder{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(255,255,255,.22),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      var(--surfcamp-grid-primary-light,#5ED3DF),
      var(--surfcamp-grid-primary-dark,#0E7490)
    );
}


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

.surfcamp-hero-grid__overlay{
  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(5,47,61,.70) 0%,
      rgba(5,51,65,.55) 22%,
      rgba(5,55,70,.32) 43%,
      rgba(5,55,70,.10) 64%,
      rgba(5,55,70,0) 82%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 0%,
      rgba(2,37,49,.03) 55%,
      rgba(2,37,49,.18) 100%
    );
}


/* softer */

.surfcamp-hero-grid--overlay-soft
.surfcamp-hero-grid__overlay{
  background:
    linear-gradient(
      90deg,
      rgba(5,47,61,.54) 0%,
      rgba(5,51,65,.35) 36%,
      rgba(5,55,70,.08) 65%,
      transparent 84%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,0),
      rgba(2,37,49,.12)
    );
}


/* stronger */

.surfcamp-hero-grid--overlay-strong
.surfcamp-hero-grid__overlay{
  background:
    linear-gradient(
      90deg,
      rgba(4,42,55,.82) 0%,
      rgba(4,47,60,.68) 30%,
      rgba(5,53,67,.38) 53%,
      rgba(5,55,70,.10) 76%,
      transparent 92%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.04),
      rgba(2,37,49,.24)
    );
}


/* =========================================================
   INNER
========================================================= */

.surfcamp-hero-grid__inner{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;

  width:100%;
  min-height:inherit;

  padding:
    clamp(64px,6vw,92px)
    clamp(48px,9vw,185px)
    clamp(56px,5vw,80px);
}


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

.surfcamp-hero-grid__content{
  width:100%;
  max-width:880px;
}


/* =========================================================
   KICKER
========================================================= */

.surfcamp-hero-grid__kicker{
  margin:0 0 25px !important;

  color:rgba(255,255,255,.72);

  font:
    800
    16px/1.15
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial;

  letter-spacing:.12em;
  text-transform:uppercase;

  text-shadow:
    0 2px 15px rgba(0,0,0,.12);
}


/* =========================================================
   TITLE
========================================================= */

.surfcamp-hero-grid__title{
  max-width:760px;

  margin:0 !important;

  color:#fff;

  font:
    900
    clamp(44px,2.85vw,60px)/.98
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial;

  letter-spacing:-.038em;

  text-wrap:balance;

  text-shadow:
    0 3px 22px rgba(0,0,0,.16);
}


/* =========================================================
   SUBTITLE
========================================================= */

.surfcamp-hero-grid__subtitle{
  max-width:850px;

  margin-top:25px;

  color:rgba(255,255,255,.95);

  font:
    500
    clamp(18px,1.02vw,21px)/1.55
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial;

  text-shadow:
    0 2px 12px rgba(0,0,0,.16);
}


.surfcamp-hero-grid__subtitle p{
  margin:0 0 8px;
}


.surfcamp-hero-grid__subtitle p:last-child{
  margin-bottom:0;
}


.surfcamp-hero-grid__subtitle strong{
  color:#fff;
  font-weight:800;
}


.surfcamp-hero-grid__subtitle a{
  color:#fff;

  font-weight:700;

  text-decoration-thickness:1px;
  text-underline-offset:3px;
}


/* =========================================================
   ACTIONS
========================================================= */

.surfcamp-hero-grid__actions{
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-top:30px;
}


/* =========================================================
   BUTTON
========================================================= */

.surfcamp-hero-grid__button{
  position:relative;
  z-index:1;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:13px;

  min-height:54px;

  padding:15px 27px;

  border:0;

  /*
   * Screenshot bewusst weniger "Pill" als
   * die normalen Grid-Buttons.
   */
  border-radius:12px;

  background:
    linear-gradient(
      90deg,
      #32B9CC,
      var(--surfcamp-grid-primary,#1AA6B7)
    );

  color:#fff !important;

  font:
    900
    15px/1
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial;

  text-decoration:none !important;

  box-shadow:
    0 12px 26px rgba(14,116,144,.30);

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


.surfcamp-hero-grid__button:hover,
.surfcamp-hero-grid__button:focus{
  color:#fff !important;

  text-decoration:none !important;

  background:
    linear-gradient(
      90deg,
      #7FE7F0,
      #0C6B86
    );

  transform:translateY(-2px);

  box-shadow:
    0 16px 32px rgba(26,166,183,.38);
}


.surfcamp-hero-grid__button:focus-visible{
  outline:3px solid rgba(255,255,255,.92);
  outline-offset:4px;
}


.surfcamp-hero-grid__button i{
  flex:0 0 auto;

  font-size:13px;
  line-height:1;

  transition:transform .18s ease;
}


.surfcamp-hero-grid__button:hover i,
.surfcamp-hero-grid__button:focus i{
  transform:translateX(3px);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

  .surfcamp-hero-grid--height-large{
    min-height:560px;
  }


  .surfcamp-hero-grid__inner{
    padding:
      70px
      54px
      62px;
  }


  .surfcamp-hero-grid__content{
    max-width:740px;
  }


  .surfcamp-hero-grid__title{
    max-width:720px;

    font-size:48px;
  }


  .surfcamp-hero-grid__subtitle{
    max-width:700px;

    font-size:18px;
  }

}


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

@media(max-width:620px){

  /*
   * Mobile immer komplett edge-to-edge.
   * Keine runden Ecken.
   */
  .surfcamp-hero-grid{
    width:100vw;
    max-width:100vw;

    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);

    border-radius:0 !important;
  }


  .surfcamp-hero-grid--height-large{
    min-height:590px;
  }


  .surfcamp-hero-grid--height-medium{
    min-height:540px;
  }


  .surfcamp-hero-grid--height-compact{
    min-height:480px;
  }


  .surfcamp-hero-grid__inner{
    align-items:center;

    padding:
      64px
      22px
      50px;
  }


  /*
   * Auf kleinen Screens wird das gesamte Bild etwas
   * stärker abgedunkelt, damit der Text unabhängig
   * vom Bildmotiv lesbar bleibt.
   */
  .surfcamp-hero-grid__overlay,
  .surfcamp-hero-grid--overlay-soft
  .surfcamp-hero-grid__overlay,
  .surfcamp-hero-grid--overlay-strong
  .surfcamp-hero-grid__overlay{
    background:
      linear-gradient(
        90deg,
        rgba(3,43,56,.72),
        rgba(3,43,56,.48)
      ),
      linear-gradient(
        180deg,
        rgba(3,43,56,.08),
        rgba(3,43,56,.36)
      );
  }


  .surfcamp-hero-grid__kicker{
    margin-bottom:18px !important;

    font-size:12px;

    letter-spacing:.13em;
  }


  .surfcamp-hero-grid__title{
    max-width:100%;

    font-size:clamp(
      36px,
      10.3vw,
      44px
    );

    line-height:1;

    letter-spacing:-.04em;
  }


  .surfcamp-hero-grid__subtitle{
    margin-top:20px;

    font-size:16px;
    line-height:1.5;
  }


  .surfcamp-hero-grid__actions{
    margin-top:25px;
  }


  .surfcamp-hero-grid__button{
    min-height:52px;

    padding:14px 21px;

    font-size:14px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .surfcamp-hero-grid__button,
  .surfcamp-hero-grid__button i{
    transition:none;
  }


  .surfcamp-hero-grid__button:hover,
  .surfcamp-hero-grid__button:focus{
    transform:none;
  }

}

/* =========================================================
   HERO SUBTITLE RESPONSIVE
========================================================= */

.surfcamp-hero-grid__subtitle--desktop{
  display:block;
}

.surfcamp-hero-grid__subtitle--mobile{
  display:none;
}


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

@media(max-width:620px){

  .surfcamp-hero-grid__subtitle--desktop{
    display:none;
  }

  .surfcamp-hero-grid__subtitle--mobile{
    display:block;
  }

}