/* ===================================================================
   Main.styles.css — Home page
   Hero (promo banner + Bullpass card), game filter, case grids.
   =================================================================== */

/* =====================================================
   HERO
   ===================================================== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  margin-bottom: 42px;
}

/* ---------- Promo banner ---------- */
.promo {
  position: relative;
  min-height: 172px;
  padding: 26px 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(100deg, #2a1550 0%, #4a1d6b 42%, #7a2470 72%, #c0392b 100%);
  overflow: hidden;
  isolation: isolate;
}

.promo__bg,
.promo__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

.promo__bg { opacity: .55; mix-blend-mode: screen; }

.promo__art {
  left: auto;
  right: 0;
  width: 62%;
  object-fit: cover;
  object-position: right center;
}

/* Left-side scrim so the copy stays readable over the art */
.promo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(24, 10, 44, .92) 0%, rgba(30, 12, 52, .7) 34%, transparent 62%);
}

.promo__body {
  position: relative;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.promo__badge {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .62);
}

.promo__title {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

.promo__text {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, .74);
}

.promo__btn {
  margin-top: 5px;
  height: 38px;
  font-size: 13px;
}

/* ---------- Bullpass card ---------- */
.pass {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 172px;
  padding: 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #123a2e, #0e2b3f 65%, #10233a);
  overflow: hidden;
  isolation: isolate;
}

.pass__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  z-index: -1;
  opacity: .95;
}

.pass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 26%, rgba(8, 12, 20, .86) 74%);
}

.pass__body {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pass__head {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pass__title {
  font-size: 15px;
  font-weight: 800;
}

.pass__arrow {
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  transition: transform var(--t) var(--ease);
}

.pass:hover .pass__arrow { transform: translateX(3px); }

.pass__sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.pass__btn {
  height: 38px;
  font-size: 13px;
  border-radius: var(--r-sm);
}

/* =====================================================
   GAME FILTER (icon toggles right of the H1)
   ===================================================== */
.cases__head { margin-bottom: 8px; }

.game-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.game-filter__btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.game-filter__btn svg { width: 19px; height: 19px; }

.game-filter__btn:hover {
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  transform: translateY(-1px);
}

.game-filter__btn.is-active {
  background: var(--bg-surface-3);
  color: var(--brand-red);
}

/* =====================================================
   CASE GRID
   ===================================================== */
.group { margin-bottom: 12px; }

.case-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.case {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px;
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t) var(--ease),
              border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              background-color var(--t) var(--ease);
}

/* Soft radial glow behind the render, revealed on hover */
.case::before {
  content: '';
  position: absolute;
  top: -18%;
  left: 50%;
  width: 78%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 28, 60, .2), transparent 68%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}

.case:hover {
  transform: translateY(-5px) scale(1.02);
  background: var(--bg-surface-2);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.case:hover::before { opacity: 1; }

.case__thumb {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / .82;
}

.case__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5));
  transition: transform var(--t-slow) var(--ease-out);
}

.case:hover .case__thumb img { transform: scale(1.07) translateY(-3px); }

.case__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.35;
  transition: color var(--t-fast) var(--ease);
}

.case:hover .case__name { color: var(--text-primary); }

/* Price pill */
.case__price {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  background: var(--bg-surface-3);
  font-size: 12.5px;
  font-weight: 700;
  transition: background-color var(--t-fast) var(--ease);
}

.case:hover .case__price { background: var(--bg-elevated); }

.case__old {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  text-decoration: line-through;
}

/* Free / locked states */
.case__free,
.case__locked {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
}

.case__free {
  background: rgba(59, 130, 246, .14);
  color: var(--accent-blue);
}

.case:hover .case__free { background: rgba(59, 130, 246, .22); }

.case__locked {
  background: var(--bg-surface-2);
  color: var(--text-dim);
}

.case--locked .case__thumb img { filter: grayscale(.65) brightness(.75) drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); }
.case--locked:hover .case__thumb img { filter: grayscale(.2) brightness(.95) drop-shadow(0 10px 22px rgba(0, 0, 0, .5)); }

/* Discount badge */
.case__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1400px) {
  .hero { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 1180px) {
  .hero { grid-template-columns: minmax(0, 1fr) 270px; }
  .promo__art { width: 56%; }
  .promo__title { font-size: 22px; }
  .case-grid { gap: 14px; }
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .pass { min-height: 150px; }
  .cases__head { flex-wrap: wrap; }
  .game-filter { width: 100%; }
}

@media (max-width: 860px) {
  .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .hero { margin-bottom: 30px; }
  .promo {
    min-height: 0;
    padding: 20px;
  }
  .promo__art {
    width: 100%;
    opacity: .38;
  }
  .promo::after {
    background: linear-gradient(90deg, rgba(24, 10, 44, .94) 0%, rgba(30, 12, 52, .82) 55%, rgba(30, 12, 52, .6) 100%);
  }
  .promo__body { max-width: none; }
  .promo__title { font-size: 20px; }
  .promo__text { font-size: 11px; }
  /* Bullpass art is busiest in the middle on narrow screens — darken more so
     the title and subtitle stay legible. */
  .pass::after {
    background: linear-gradient(180deg, rgba(8, 12, 20, .35) 0%, rgba(8, 12, 20, .8) 45%, rgba(8, 12, 20, .94) 100%);
  }
  .case { padding: 16px 12px 14px; gap: 8px; }
  .case__name { font-size: 11.5px; }
  .case-grid { gap: 10px; }
}

@media (max-width: 520px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-filter__btn { width: 31px; height: 31px; }
  .game-filter__btn svg { width: 17px; height: 17px; }
}