/*
 * Main banner component.
 *
 * This file owns the homepage hero headline typography and CTA artwork.
 * Keep base hero layout in assets/css/main.css; keep exported banner/button
 * skins and font treatment here so banner tuning stays isolated.
 */

@font-face {
  font-family: "Advent Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../../fonts/advent-pro/advent-pro-greek-700-normal.woff2")
    format("woff2");
  unicode-range: U+0370-03FF, U+1F00-1FFF;
}

@font-face {
  font-family: "Advent Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url("../../fonts/advent-pro/advent-pro-greek-800-normal.woff2")
    format("woff2");
  unicode-range: U+0370-03FF, U+1F00-1FFF;
}

@font-face {
  font-family: "Advent Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../../fonts/advent-pro/advent-pro-latin-700-normal.woff2")
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Advent Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url("../../fonts/advent-pro/advent-pro-latin-800-normal.woff2")
    format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.g-hero__title {
  letter-spacing: 0.01em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 0 rgba(92, 34, 42, 0.7),
    0 4px 0 rgba(0, 0, 0, 0.55),
    0 0 14px rgba(255, 255, 255, 0.2);
}

.g-hero__cta {
  --g-main-banner-cta-h: clamp(78px, 7.2vw, 96px);
  width: min(calc(var(--g-main-banner-cta-h) * 3.85), 100%);
  min-width: 300px;
  height: var(--g-main-banner-cta-h);
  min-height: 0;
  padding: 0 clamp(42px, 5vw, 58px);
  background-image: url("../../images/buttons/main-banner/button-default@2x.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  overflow: visible;
  font-size: 28px;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 0 rgba(84, 28, 36, 0.72),
    0 4px 0 rgba(0, 0, 0, 0.58),
    0 0 8px rgba(255, 255, 255, 0.22);
  filter: none;
}

.g-hero__cta::before {
  content: "";
  display: block;
  position: absolute;
  inset: -20px -16px -30px;
  z-index: -2;
  background: url("../../images/buttons/main-banner/shadow@2x.webp") center /
    100% 100% no-repeat;
  opacity: 0.78;
  pointer-events: none;
}

.g-hero__cta::after {
  content: "";
  display: block;
  position: absolute;
  inset: -44px -22px -54px;
  z-index: -1;
  background: url("../../images/buttons/main-banner/button-glow@2x.webp") center /
    100% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--g-ease);
}

.g-hero__cta .action-button__inner {
  z-index: 1;
  line-height: 1;
  transform: translateY(-5px);
}

.g-hero__cta:hover,
.g-hero__cta:focus-visible {
  background-image: url("../../images/buttons/main-banner/button-hover@2x.webp");
}

.g-hero__cta:hover::after,
.g-hero__cta:focus-visible::after {
  opacity: 0.32;
}

.g-hero__cta:active {
  background-image: url("../../images/buttons/main-banner/button-active@2x.webp");
  filter: brightness(0.98);
  transform: translateY(1px);
}

@media (max-width: 720px) {
  .g-hero__cta {
    --g-main-banner-cta-h: clamp(74px, 22vw, 86px);
    min-width: 0;
    padding: 0 44px;
    font-size: 15px;
  }
}