/*
	Abstracts are helpers, variables and functions
	for scss compliation.
*/
/**==================================================================================================================================
BREAKPOINT
@TODO: remove? What is use case?? either use simple global points or write custom line. why does first breakpoint have to be 0?
 ==================================================================================================================================*/
/**==================================================================================================================================
BREAKPOINT ENDS
==================================================================================================================================*/
span.edit-link {
  display: inline-block;
  background-color: yellow;
  font-weight: 700;
  position: fixed;
  left: 0;
  bottom: 3.125rem;
  transform: translateX(-45px);
  transition: all 0.2s;
}

span.edit-link a {
  display: block;
  padding: 0.9375rem;
}

span.edit-link:hover {
  transform: translateX(0);
}

/*
	Variables for compliation
	NB! Colors should be added to base/config file as css root variable.
*/
/**
 * Block section background colors.
 * Include the background options ACF fields group to use these.
 */
/*
 * makes ul/ol as a dropdown select (normaly in mobile)
 * Structure: div > title > list > li > a
*/
/*
	Variables for legacy dc plugins
*/
section.subpage-hero {
  --sph-frame-top: 2.5rem;
  --sph-frame-x: 2.5rem;
  --sph-radius: var(--element-border-radius);
  --sph-topbar-top: 1.5rem;
  --sph-topbar-inline: 1.5rem;
  --sph-content-inline: 4rem;
  --sph-content-bottom: clamp(2.25rem, 6vh, 4rem);
  --sph-notch-gap: 1.5rem;
  --sph-notch-edge: 0rem;
  --sph-notch-bg: var(--color__white);
  --sph-bg: var(--color__moss-green);
  --sph-text: var(--color__white);
  --sph-watermark-opacity: 0.1;
  --sph-min-height: 66svh;
  position: relative;
  margin: 0 0 var(--spacing-block-small);
  color: var(--sph-text);
  /* --- Panel colors ------------------------------------------------- */
  /* --- Frame --------------------------------------------------------- */
  /* --- Content ------------------------------------------------------- */
  /* --- Notch: bottom-right cut-out around the CTA -------------------- */
  /* --- Image: full-bleed frame, inset copy -------------------------- */
  /* --- Color panel: inset frame ---------------- */
  /* --- Entrance (JS takes over after fonts) -------------------------- */
}

section.subpage-hero[data-background-color=moss-green] {
  --sph-bg: var(--color__moss-green);
  --sph-text: var(--color__white);
}

section.subpage-hero[data-background-color=blue] {
  --sph-bg: var(--color__blue);
  --sph-text: var(--color__white);
}

section.subpage-hero[data-background-color=green-dark] {
  --sph-bg: var(--color__green-dark);
  --sph-text: var(--color__green-light);
}

section.subpage-hero[data-background-color=beige] {
  --sph-bg: var(--color__beige);
  --sph-text: var(--color__black);
}

section.subpage-hero[data-background-color=light-blue] {
  --sph-bg: var(--color__light-blue);
  --sph-text: var(--color__blue);
}

section.subpage-hero .subpage-hero__frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: var(--sph-min-height);
  max-height: 40rem;
  overflow: hidden;
  border-bottom-right-radius: var(--sph-radius);
  border-bottom-left-radius: var(--sph-radius);
}

@media screen and (max-width: 850px) {
  section.subpage-hero .subpage-hero__frame {
    min-height: 82svh;
    border-bottom-left-radius: 0;
  }
}
@media screen and (max-width: 850px) {
  section.subpage-hero .subpage-hero__frame {
    min-height: 86svh;
  }
}
section.subpage-hero .subpage-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

section.subpage-hero .subpage-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

section.subpage-hero .subpage-hero__image--top {
  -o-object-position: top;
     object-position: top;
}

section.subpage-hero .subpage-hero__image--bottom {
  -o-object-position: bottom;
     object-position: bottom;
}

section.subpage-hero .subpage-hero__picture {
  display: contents;
}

section.subpage-hero .subpage-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
}

section.subpage-hero .subpage-hero__watermark {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  color: var(--sph-text);
  opacity: var(--sph-watermark-opacity);
  pointer-events: none;
  transform: translateY(-50%);
}

section.subpage-hero .subpage-hero__watermark svg {
  display: block;
}

section.subpage-hero .subpage-hero__watermark svg path {
  fill: currentColor;
}

section.subpage-hero .subpage-hero__watermark--mobile {
  display: none;
}

section.subpage-hero .subpage-hero__watermark--desktop {
  top: 0;
  height: 100%;
  min-height: 49.0625rem;
  aspect-ratio: 427/568;
  transform: none;
}

section.subpage-hero .subpage-hero__watermark--desktop svg {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 850px) {
  section.subpage-hero .subpage-hero__watermark--desktop {
    display: none;
  }
  section.subpage-hero .subpage-hero__watermark--mobile {
    display: block;
  }
}
section.subpage-hero .subpage-hero__topbar {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
  margin: var(--sph-topbar-top) var(--sph-topbar-inline);
}

section.subpage-hero .subpage-hero__content {
  position: relative;
  z-index: 5;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: clamp(1.75rem, 5vh, 3.5rem);
  padding: clamp(2rem, 6vh, 4.5rem) var(--sph-content-inline) var(--sph-content-bottom);
}

section.subpage-hero .subpage-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

section.subpage-hero .subpage-hero__eyebrow {
  margin: 0;
  color: inherit;
}

section.subpage-hero .subpage-hero__title {
  max-width: 22ch;
  color: inherit;
  text-wrap: balance;
}

section.subpage-hero .subpage-hero__text {
  max-width: 45rem;
  padding-left: 3rem;
  border-left: 2px solid currentColor;
  border-left-color: color-mix(in srgb, currentColor 45%, transparent);
  color: inherit;
  text-wrap: balance;
}

@media screen and (max-width: 850px) {
  section.subpage-hero .subpage-hero__text {
    padding-left: 1.5rem;
  }
}
section.subpage-hero .subpage-hero__text > :first-child {
  margin-top: 0;
}

section.subpage-hero .subpage-hero__text > :last-child {
  margin-bottom: 0;
}

section.subpage-hero .subpage-hero__notch {
  --r: var(--sph-radius);
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 7;
  max-width: calc(100% - var(--sph-content-inline));
  padding: var(--sph-notch-gap) var(--sph-notch-edge) 0 var(--sph-notch-gap);
  background: var(--sph-notch-bg);
  border-top-left-radius: var(--r);
}

section.subpage-hero .subpage-hero__notch::before, section.subpage-hero .subpage-hero__notch::after {
  content: "";
  position: absolute;
  width: var(--r);
  height: var(--r);
  background: radial-gradient(var(--r) at top left, rgba(0, 0, 0, 0) 98%, var(--sph-notch-bg) 100%);
}

section.subpage-hero .subpage-hero__notch::before {
  right: 0;
  bottom: 100%;
}

section.subpage-hero .subpage-hero__notch::after {
  right: 100%;
  bottom: 0;
}

@media screen and (max-width: 1000px) {
  section.subpage-hero .subpage-hero__notch {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: flex-end;
    flex: 0 0 auto;
    max-width: 100%;
    padding: var(--sph-notch-gap) var(--sph-notch-gap) 0 var(--sph-notch-gap);
  }
}
section.subpage-hero .subpage-hero__button.white {
  border: 1px solid var(--color__blue);
}

section.subpage-hero.subpage-hero--image {
  --sph-topbar-top: 2rem;
  --sph-topbar-inline: 5%;
  --sph-content-inline: 5%;
  --sph-notch-edge: var(--sph-notch-gap);
}

section.subpage-hero.subpage-hero--image .subpage-hero__content {
  gap: 4rem;
  justify-content: flex-end;
  padding-bottom: 5.5rem;
}

@media screen and (max-width: 850px) {
  section.subpage-hero.subpage-hero--image .subpage-hero__content {
    justify-content: space-between;
    padding-bottom: 3rem;
  }
}
section.subpage-hero.subpage-hero--panel {
  padding: var(--sph-frame-top) var(--sph-frame-x) 0;
}

section.subpage-hero.subpage-hero--panel .subpage-hero__frame {
  background: var(--sph-bg);
  border-radius: var(--sph-radius);
}

@media screen and (max-width: 850px) {
  section.subpage-hero.subpage-hero--panel .subpage-hero__frame {
    border-radius: 0;
  }
}
section.subpage-hero.subpage-hero--panel .subpage-hero__content {
  justify-content: space-between;
  padding-bottom: calc(var(--sph-content-bottom) + 2.625rem);
}

@media screen and (max-width: 850px) {
  section.subpage-hero.subpage-hero--panel .subpage-hero__content {
    padding-bottom: var(--sph-content-bottom);
  }
}
section.subpage-hero.subpage-hero--no-text {
  --sph-no-text-trim: 16svh;
}

section.subpage-hero.subpage-hero--no-text .subpage-hero__content {
  justify-content: flex-end;
}

section.subpage-hero.subpage-hero--no-text.subpage-hero--panel {
  --sph-min-height: calc(78svh - var(--sph-no-text-trim));
}

@media screen and (max-width: 850px) {
  section.subpage-hero.subpage-hero--no-text.subpage-hero--panel .subpage-hero__frame {
    min-height: calc(90svh - var(--sph-no-text-trim));
  }
}
@media screen and (max-width: 850px) {
  section.subpage-hero.subpage-hero--no-text.subpage-hero--image .subpage-hero__content {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 850px) {
  section.subpage-hero.subpage-hero--no-text.subpage-hero--image .subpage-hero__frame {
    min-height: calc(90svh - var(--sph-no-text-trim));
  }
}
@media screen and (max-width: 850px) {
  section.subpage-hero {
    --sph-frame-top: 0rem;
    --sph-frame-x: 0rem;
    --sph-topbar-top: var(--page-gutter);
    --sph-topbar-inline: var(--page-gutter);
    --sph-content-inline: var(--page-gutter);
    --sph-min-height: clamp(23.75rem, 70svh, 35rem);
  }
  section.subpage-hero.subpage-hero--image {
    --sph-topbar-top: 1.25rem;
    --sph-topbar-inline: var(--page-gutter);
    --sph-content-inline: var(--page-gutter);
  }
  section.subpage-hero.subpage-hero--has-cta .subpage-hero__content {
    padding-bottom: 4rem;
  }
  section.subpage-hero.subpage-hero--panel .subpage-hero__frame {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }
  section.subpage-hero .subpage-hero__heading {
    container-type: inline-size;
  }
  section.subpage-hero .subpage-hero__title {
    max-width: none;
    font-size: min(clamp(3rem, 3vw + 1rem, 3.75rem), 100cqi / (var(--sph-title-chars, 8) * 0.58));
  }
}
section.subpage-hero.subpage-hero--anim-text .subpage-hero__title, section.subpage-hero.subpage-hero--anim-complex .subpage-hero__title {
  visibility: hidden;
}

section.subpage-hero.subpage-hero--anim-complex .subpage-hero__watermark {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  section.subpage-hero.subpage-hero--anim-text .subpage-hero__title, section.subpage-hero.subpage-hero--anim-complex .subpage-hero__title {
    visibility: visible;
  }
  section.subpage-hero.subpage-hero--anim-complex .subpage-hero__watermark {
    opacity: var(--sph-watermark-opacity);
  }
}
.acf-block-preview section.subpage-hero.subpage-hero--anim-text .subpage-hero__title, .acf-block-preview section.subpage-hero.subpage-hero--anim-complex .subpage-hero__title {
  visibility: visible;
}

.acf-block-preview section.subpage-hero.subpage-hero--anim-complex .subpage-hero__watermark {
  opacity: var(--sph-watermark-opacity);
}