/* Shared page hero system for all non-home pages */
.pack-hero {
  --hero-height: clamp(330px, 28vw, 425px);
  --hero-photo-left: 36%;
  --hero-blue-solid: 34%;
  --hero-blue-fade-1: 38%;
  --hero-blue-fade-2: 46%;
  --hero-blue-fade-3: 54%;
  --hero-blue-fade-end: 62%;
  --hero-blue-opacity: 1;
  --hero-photo-tint: .10;
  --hero-text-x: 0px;
  --hero-text-y: 0px;
  --hero-text-width: 34%;
  --hero-text-min: 360px;
  --hero-title-scale: 1;
  --hero-body-scale: 1;
  position: relative;
  height: var(--hero-height);
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  border-top: 4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
  background: #082b57;
  color: #fff;
}

/* The real page photo fills the banner. It starts under the blue panel so no edge is visible. */
.pack-hero__media {
  position: absolute;
  inset: 0 0 0 var(--hero-photo-left);
  z-index: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: var(--hero-position, center center);
  background-repeat: no-repeat;
}

.pack-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: cover;
  object-position: var(--hero-position, center center);
}

/* Supplied blue map artwork: solid through the text area, then a long soft fade. */
.pack-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(rgba(8,43,87, calc(1 - var(--hero-blue-opacity))), rgba(8,43,87, calc(1 - var(--hero-blue-opacity)))), url('../assets/images/hero/blue-map-background.png');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg,
    #000 0%,
    #000 var(--hero-blue-solid),
    rgba(0,0,0,.92) var(--hero-blue-fade-1),
    rgba(0,0,0,.62) var(--hero-blue-fade-2),
    rgba(0,0,0,.28) var(--hero-blue-fade-3),
    rgba(0,0,0,0) var(--hero-blue-fade-end),
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg,
    #000 0%,
    #000 var(--hero-blue-solid),
    rgba(0,0,0,.92) var(--hero-blue-fade-1),
    rgba(0,0,0,.62) var(--hero-blue-fade-2),
    rgba(0,0,0,.28) var(--hero-blue-fade-3),
    rgba(0,0,0,0) var(--hero-blue-fade-end),
    rgba(0,0,0,0) 100%);
  pointer-events: none;
}

/* Gentle navy tint over the transition only. The photo stays clean on the right. */
.pack-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(8,43,87,0) 0%,
    rgba(8,43,87,0) 32%,
    rgba(8,43,87,.08) 40%,
    rgba(8,43,87,.13) 48%,
    rgba(8,43,87,.07) 56%,
    rgba(8,43,87,0) 64%,
    rgba(8,43,87,0) 100%);
  pointer-events: none;
}

.pack-hero__copy {
  position: relative;
  z-index: 4;
  width: var(--hero-text-width);
  min-width: var(--hero-text-min);
  transform: translate(var(--hero-text-x), var(--hero-text-y));
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 2.4vw, 42px) clamp(22px, 2vw, 38px);
  background: transparent;
}

.pack-hero__copy::before,
.pack-hero__copy::after,
.pack-hero__lockup,
.pack-hero__coins {
  display: none;
}

.pack-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: calc(clamp(3.45rem, 4.35vw, 5.35rem) * var(--hero-title-scale));
  font-weight: 700;
  letter-spacing: .01em;
  line-height: .86;
  text-transform: uppercase;
  text-shadow: 0 7px 18px rgba(0,0,0,.30);
}

.pack-hero h1 span { display: block; }
.pack-hero h1 .gold { color: var(--gold); }

.pack-hero__rule {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  width: min(360px, 100%);
  margin: clamp(14px, 1.5vw, 20px) 0 clamp(12px, 1.3vw, 18px);
  color: var(--gold);
}

.pack-hero__rule span { height: 2px; background: var(--gold); }
.pack-hero__rule b { font-size: 1rem; line-height: 1; }

.pack-hero__copy > p {
  position: relative;
  z-index: 1;
  max-width: 360px;
  margin: 0;
  color: #fff;
  font-family: 'Inter', Arial, sans-serif;
  font-size: calc(clamp(.88rem, .94vw, 1.02rem) * var(--hero-body-scale));
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 4px 10px rgba(0,0,0,.34);
}

@media (max-width: 1100px) {
  .pack-hero { height: clamp(310px, 34vw, 390px); }
  .pack-hero__copy { width: 34%; min-width: 300px; padding-inline: 22px; }
  .pack-hero h1 { font-size: clamp(3.3rem, 5.5vw, 5rem); }
  .pack-hero__copy > p { font-size: .95rem; }
}

@media (max-width: 780px) {
  .pack-hero {
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
  }
  .pack-hero__media {
    position: relative;
    inset: auto;
    height: 240px;
  }
  .pack-hero::before {
    background-size: cover;
    background-position: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .pack-hero::after { background: rgba(8,43,87,.72); }
  .pack-hero__copy {
    width: 100%;
    min-width: 0;
    min-height: 280px;
    padding: 34px 22px 28px;
    text-align: center;
    align-items: center;
  }
  .pack-hero h1 { font-size: clamp(4rem, 16vw, 5.8rem); }
  .pack-hero__rule { margin-inline: auto; }
  .pack-hero__copy > p { max-width: 520px; font-size: 1rem; }
}