/* ============================================================
   High Point Gamer — Global Stylesheet
   Design System: "The Monolith"
   ============================================================ */

/* ── Material Symbols ── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Monolith Hero Gradient ── */
.monolith-gradient {
  background: linear-gradient(180deg, rgba(14,14,14,0) 0%, rgba(10,10,10,1) 100%);
}

/* ── Base ── */
html { scroll-behavior: smooth; }

/* ── Form Loading Bar ── */
.loading-bar-track {
  height: 3px;
  background: #1c1b1b;
  overflow: hidden;
}
.loading-bar-fill {
  height: 100%;
  width: 40%;
  background: #f58318;
  animation: loading-slide 1.1s ease-in-out infinite;
}
@keyframes loading-slide {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(350%); }
}

/* ============================================================
   MOBILE OPTIMISATIONS
   ============================================================ */

@media (max-width: 767px) {

  /* ── iOS: background-attachment:fixed is unsupported on mobile Safari
     and causes blank/frozen backgrounds ── */
  [style*="background-attachment: fixed"] {
    background-attachment: scroll !important;
  }

  /* ── Hero: 820px min-height is taller than most phone screens ── */
  .min-h-\[820px\] {
    min-height: auto !important;
    padding-top: 6rem !important;
    padding-bottom: 5rem !important;
  }

  /* ── Section padding: py-32 = 128px is excessive on mobile ── */
  .py-32 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  /* ── Partner logos: h-32 = 128px tall; too large for mobile ── */
  .hpg-partner-logos img {
    height: 3rem !important;
    width: auto !important;
  }

  /* ── Flagship Proof: reduce heavy inner padding on narrow screens ── */
  .hpg-flagship-text {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* ── Stats grid: tighter card padding at 2-col layout ── */
  .grid-cols-2 > .p-10 {
    padding: 1.5rem !important;
  }

  /* ── Stats: stat numbers slightly smaller so $1M+ doesn't clip ── */
  .grid-cols-2 .text-5xl {
    font-size: 2.25rem !important;
  }

  /* ── Choose Your Path cards: reduce p-12 so content breathes ── */
  .grid-cols-1 > .p-12 {
    padding: 2rem !important;
  }

  /* ── "What Makes HPG Different" feature rows: tighter padding ── */
  .space-y-1 > .p-8 {
    padding: 1.25rem !important;
  }

  /* ── Testimonial cards: tighter padding ── */
  .grid-cols-1 > .p-8 {
    padding: 1.5rem !important;
  }

  /* ── Pull quote: scale down on mobile ── */
  .md\:text-6xl {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }

  /* ── Prevent slide-right animation from causing horizontal scroll ── */
  body { overflow-x: hidden; }
  .slide-right {
    transform: translateX(0) !important;
    opacity: 1 !important;
  }
}

@media (max-width: 479px) {

  /* ── Hero pills: stack full-width on very small phones ── */
  .hpg-hero-pills {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hpg-hero-pills a {
    text-align: center !important;
    justify-content: center !important;
  }

  /* ── Final CTA button: full width ── */
  .hpg-cta-btn {
    display: block !important;
    text-align: center !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* ── Gutter: tighter on very small phones ── */
  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}