/* Media fallbacks — gradients + typography when image/video files are missing */

.media-frame { position: relative; overflow: hidden; }
.media-frame > img {
  position: relative; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.35s;
}
.media-frame.is-missing > img {
  opacity: 0 !important;
  position: absolute;
  pointer-events: none;
}

.media-ph {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.media-frame.is-missing .media-ph,
.media-frame.is-missing > .media-ph,
.hero-media.is-missing-poster .media-ph--hero {
  opacity: 1;
}

.media-ph::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
}
.media-ph__brand {
  position: relative; z-index: 1;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  letter-spacing: 0.2em;
  color: var(--blue-hi);
  text-shadow: 0 0 32px var(--blue-glow);
}
.media-ph__label {
  position: relative; z-index: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-style: italic;
  font-size: clamp(0.65rem, 1.5vw, 0.85rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 8px;
}
.media-ph__line {
  position: relative; z-index: 1;
  width: 48px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  margin-top: 14px;
}

/* Hero wall */
.media-ph--hero::before,
.hero-fallback {
  background:
    radial-gradient(ellipse 90% 70% at 72% 22%, rgba(0, 51, 255, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 18% 82%, rgba(224, 140, 36, 0.1) 0%, transparent 50%),
    linear-gradient(145deg, #0a0a0e 0%, #030303 45%, #08080c 100%);
}
.media-ph--hero::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 58%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(224, 140, 36, 0.5), transparent);
  transform: skewX(-10deg);
  pointer-events: none;
}

/* Team / athlete collage */
.media-ph--team::before {
  background:
    linear-gradient(160deg, rgba(3,3,3,.5) 0%, transparent 45%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 51, 255, 0.15), transparent),
    linear-gradient(200deg, #121218, #050505);
}
.media-ph--team .media-ph__brand { font-size: clamp(1.2rem, 3vw, 1.8rem); }

/* Texture / wallpaper */
.media-ph--texture::before {
  background:
    repeating-linear-gradient(
      -35deg,
      transparent,
      transparent 12px,
      rgba(224, 140, 36, 0.06) 12px,
      rgba(224, 140, 36, 0.06) 13px
    ),
    repeating-linear-gradient(
      -35deg,
      transparent,
      transparent 28px,
      rgba(26, 26, 34, 0.9) 28px,
      rgba(26, 26, 34, 0.9) 42px
    ),
    #030303;
}

/* Product */
.media-ph--product::before {
  background:
    linear-gradient(145deg, #14141a 0%, #0a0a0c 50%, #12121a 100%);
}
.media-ph--product .media-ph__brand {
  font-size: 1.25rem;
  color: var(--orange);
  letter-spacing: 0.14em;
}

/* Shield (if SVG fails) */
.media-ph--shield::before {
  background: radial-gradient(circle at 50% 45%, rgba(0, 51, 255, 0.25), transparent 65%);
}
.media-ph--shield .media-ph__brand { font-size: 1.75rem; }

/* Layout-specific */
.hero-media { position: absolute; inset: 0; }
.hero-media .media-ph--hero { z-index: 0; }
.hero-media.is-missing-poster .hero-poster { opacity: 0; }
.hero-media.is-missing-poster .media-ph--hero { opacity: 1; }

.hero-wall-panel.media-frame.is-missing { min-height: clamp(280px, 45vh, 520px); }
.hero-wall-panel .media-ph--hero { opacity: 0; }
.hero-wall-panel.is-missing .media-ph--hero { opacity: 1; }
.hero-wall-panel.is-missing .hero-wall-panel__content { z-index: 3; }

.wallpaper.media-frame { min-height: clamp(120px, 18vw, 200px); }
.wallpaper .media-ph--texture { opacity: 0; }
.wallpaper.is-missing .wallpaper__img { opacity: 0; }
.wallpaper.is-missing .media-ph--texture { opacity: 1; }

.about-visual.media-frame { min-height: 420px; }
.about-visual .about-wall { position: absolute; inset: 0; z-index: 2; }
.about-visual.is-missing .about-wall { opacity: 0; }

.collage-cell.media-frame { aspect-ratio: 3/4; }
.collage-cell .media-ph { opacity: 0; }
.collage-cell.is-missing img { opacity: 0; }
.collage-cell.is-missing .media-ph { opacity: 1; }

.dev-visual.media-frame,
.facility-media.media-frame { min-height: 100%; }
.dev-visual .media-ph,
.facility-media .media-ph { opacity: 0; }
.dev-visual.is-missing > img,
.facility-media.is-missing > img { opacity: 0; }
.dev-visual.is-missing .media-ph,
.facility-media.is-missing .media-ph { opacity: 1; }

.collage__wide-wrap.media-frame { position: relative; }
.collage__wide-wrap.is-missing .collage__wide { opacity: 0; }

.product-img-wrap.media-frame { aspect-ratio: 1; }
.product-img-wrap .media-ph--product { opacity: 0; }
.product-img-wrap.is-missing .media-ph--product { opacity: 1; }

.modal-img.media-frame { min-height: 320px; }
.modal-img .media-ph--product { opacity: 0; }
.modal-img.is-missing .media-ph--product { opacity: 1; }
.modal-img.is-missing img { opacity: 0; }

.cart-item .media-frame {
  width: 64px; height: 64px;
  border: 1px solid var(--border);
}
.cart-item .media-ph--product { opacity: 0; font-size: 0.65rem; }
.cart-item .media-frame.is-missing .media-ph--product { opacity: 1; }

/* CSS backgrounds — gradient only (no 404 from missing JPGs) */
.hero-fallback {
  background:
    linear-gradient(105deg, rgba(3,3,3,.88) 0%, rgba(3,3,3,.55) 50%, rgba(3,3,3,.75) 100%),
    radial-gradient(ellipse 100% 80% at 70% 20%, rgba(0, 51, 255, 0.25) 0%, transparent 55%),
    linear-gradient(180deg, #08080c 0%, #030303 50%, #050508 100%);
}
.store-hero-bg {
  background:
    linear-gradient(200deg, rgba(3,3,3,.92) 0%, rgba(3,3,3,.75) 100%),
    repeating-linear-gradient(-35deg, transparent, transparent 14px, rgba(224,140,36,.04) 14px, rgba(224,140,36,.04) 15px),
    linear-gradient(200deg, #060608, #030303);
}
.cta-bg {
  background:
    linear-gradient(180deg, rgba(3,3,3,.9) 0%, rgba(3,3,3,.95) 100%),
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(0, 51, 255, 0.15), transparent 55%),
    linear-gradient(180deg, var(--p1), var(--bg));
}
.about::before,
.collage::before {
  background: repeating-linear-gradient(
    -35deg, transparent, transparent 20px,
    rgba(224, 140, 36, 0.03) 20px, rgba(224, 140, 36, 0.03) 21px
  );
}

/* Fix: packages facility card image */
.packages-facility-card .media-frame,
.packages-facility-card .media-frame--inline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.packages-facility-card .media-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fix: hero image panel media-frame wrapper */
#hero .hero-image-panel .media-frame,
#hero .hero-image-panel .media-frame--inline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#hero .hero-image-panel .media-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}