/**
 * Reusable image banner page hero.
 */

.gtg-page-image-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(300px, 39vh, 460px);
  padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(3.5rem, 6vw, 5.2rem);
  overflow: hidden;
  background: var(--gtg-image-bg);
  color: var(--gtg-paper);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(1.8rem, 3vw, 3.2rem)), 0 100%);
}

.gtg-page-image-banner::before {
  content: "";
  position: absolute;
  inset: -7% 0;
  z-index: -2;
  background-image: var(--gtg-page-banner-image);
  background-size: cover;
  background-position: var(--gtg-page-banner-position, center 45%);
  background-repeat: no-repeat;
  filter: saturate(.96) contrast(.98);
  transform: scale(1.08);
}

.gtg-page-image-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--gtg-ink-078) 0%, var(--gtg-ink-058) 35%, var(--gtg-ink-030) 65%, var(--gtg-ink-010) 100%),
    linear-gradient(180deg, var(--gtg-ink-010), var(--gtg-ink-042));
}

.gtg-page-image-banner__panel {
  max-width: min(680px, 100%);
  padding: clamp(.8rem, 2vw, 1.3rem) 0;
  color: var(--gtg-paper);
  text-shadow: 0 2px 10px var(--gtg-shadow-044), 0 1px 2px var(--gtg-shadow-055);
}

body.gtg-header-overlay:not(.gtg-front-page) .gtg-page-image-banner {
  padding-top: calc(clamp(2.4rem, 5vw, 4rem) + 1.5rem);
}

.gtg-page-image-banner h1 {
  max-width: 700px;
  margin: 0 0 .75rem;
  color: inherit;
  font-family: Bungee, Impact, sans-serif;
  font-size: clamp(1.95rem, 4.4vw, 3.45rem);
  font-weight: 400;
  line-height: 1.04;
}

.gtg-page-image-banner__lead {
  max-width: 560px;
  margin: 0;
  color: inherit;
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  font-weight: 750;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .gtg-page-image-banner {
    min-height: auto;
    padding: 2.1rem 0 3.5rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.1rem), 0 100%);
  }

  .gtg-page-image-banner::after {
    background:
      linear-gradient(90deg, var(--gtg-ink-082), var(--gtg-ink-046)),
      linear-gradient(180deg, var(--gtg-ink-005), var(--gtg-ink-046));
  }

  body.gtg-header-overlay:not(.gtg-front-page) .gtg-page-image-banner {
    padding-top: 4.5rem;
  }

  .gtg-page-image-banner h1 {
    font-size: clamp(1.75rem, 7vw, 2.65rem);
  }
}

.gtg-page-image-banner__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.35rem;
}

.gtg-page-image-banner__buttons .gtg-button,
.gtg-page-image-banner__buttons .gtg-button:hover,
.gtg-page-image-banner__buttons .gtg-button:focus-visible {
  color: var(--gtg-ink);
  text-shadow: none;
}

.gtg-page-image-banner__buttons .gtg-button:not(.gtg-button--paper),
.gtg-page-image-banner__buttons .gtg-button:not(.gtg-button--paper):hover,
.gtg-page-image-banner__buttons .gtg-button:not(.gtg-button--paper):focus-visible {
  background: var(--gtg-orange);
}

.gtg-page-image-banner__buttons .gtg-button--paper,
.gtg-page-image-banner__buttons .gtg-button--paper:hover,
.gtg-page-image-banner__buttons .gtg-button--paper:focus-visible {
  background: var(--gtg-yellow);
}

@media (max-width: 520px) {
  .gtg-page-image-banner__buttons .gtg-button {
    width: 100%;
  }
}