/*
 * home.css: the home page "/" (reference/spec/home.md 3.3 to 3.11, PRODUCT.md Decisions).
 * Shared pieces (listing card, card grid, section head, skeletons, empty box) live in
 * components.css; this file only lays out the hero, the spotlight and the Explore strip.
 */

/* ───────────── hero section (3.3) ───────────── */
.home-hero { padding-top: 20px; }
@media (min-width: 640px) { .home-hero { padding-top: 24px; } }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; }
.hero-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hero-carousel-wrap { grid-column: span 2 / span 2; }
}

/* ───────────── carousel (3.4) ───────────── */
.hero-carousel {
  position: relative; height: 180px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--secondary);
}
@media (min-width: 640px) { .hero-carousel { height: 200px; } }
@media (min-width: 768px) { .hero-carousel { height: 220px; } }

.hero-bg { position: absolute; inset: 0; }
.hero-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease); }
.hero-layer.is-active { opacity: 1; }
.hero-layer > img,
.hero-layer > video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%;
}
/* slide 2: our ambient footage over the banner, darkened and pushed toward the green palette.
   A flat translucent deep-green layer does the darkening and tint: a CSS filter on the video or a
   blend mode above it would recomposite every video frame (slow on phones and software renderers). */
.hero-video { opacity: 0; transition: opacity 600ms var(--ease); }
.hero-video.is-playing { opacity: 1; }
.hero-tint {
  position: absolute; inset: 0; background: rgba(1, 51, 29, 0.35);
  opacity: 0; transition: opacity 600ms var(--ease); pointer-events: none;
}
.hero-video.is-playing + .hero-tint { opacity: 1; }

.hero-shade-x,
.hero-shade,
.hero-shade-b { position: absolute; pointer-events: none; }
.hero-shade-x { inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.2) 100%); }
.hero-shade { inset: 0; background: rgba(0, 0, 0, 0.25); }
.hero-shade-b { left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent); }

.hero-text {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 20px; min-width: 0; pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.hero-text.is-active { opacity: 1; transform: none; }
.hero-text.is-active .hero-cta { pointer-events: auto; }
@media (min-width: 640px) { .hero-text { padding: 24px; } }
@media (min-width: 768px) { .hero-text { padding: 32px; } }

.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 576px; min-width: 0; }
.hero-h2 {
  max-width: 100%; font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -0.025em;
  color: #fff; overflow-wrap: anywhere;
}
@media (min-width: 640px) { .hero-h2 { font-size: 24px; line-height: 30px; } }
@media (min-width: 768px) { .hero-h2 { font-size: 30px; line-height: 37.5px; } }
.hero-cta { margin-top: 4px; }
.hero-cta > svg,
.spot-cta .btn > svg { transition: transform var(--dur-fast) var(--ease); }
.hero-cta:hover > svg,
.spot-cta .btn:hover > svg { transform: translateX(2px); }

/* dots: traded draws 4 px pills; each sits centred in a 24 px tall button so the tap target
   passes WCAG 2.5.8 while the pills keep traded's size, colour and vertical position */
.hero-dots {
  position: absolute; z-index: 1; left: 10px; bottom: 10.75px;
  display: flex; align-items: center;
}
@media (min-width: 640px) { .hero-dots { left: 14px; bottom: 14.75px; } }
@media (min-width: 768px) { .hero-dots { left: 29px; } }
.hero-dot {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: var(--radius-md);
}
.hero-dot > span {
  display: block; width: 4px; height: 4px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.3);
  transition: width var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.hero-dot:hover > span { background: rgba(255, 255, 255, 0.5); }
.hero-dot.is-active > span { width: 20px; background: #fff; }
@media (min-width: 768px) {
  .hero-dot { width: 10px; transition: width var(--dur-fast) var(--ease); }
  .hero-dot.is-active { width: 26px; }
}
/* traded's 50 percent white counter; the soft shadow keeps 9 px text legible over a bright banner frame */
.hero-count {
  margin-left: 6px; font-size: 9px; line-height: 13.5px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
@media (min-width: 768px) { .hero-count { margin-left: 9px; } }

/* ───────────── Feature Spotlight (3.5) ───────────── */
.spotlight {
  display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-surface); background: var(--card); padding: 16px;
}
@media (min-width: 640px) { .spotlight { padding: 24px; } }
.spot-main { min-width: 0; }
.spot-label {
  margin-bottom: 8px; font-size: 10px; line-height: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted);
}
.spot-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.spot-tile {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--radius-xl);
  background: var(--secondary); box-shadow: 0 0 0 1px var(--border); color: var(--fg);
}
.spot-tile > svg { width: 20px; height: 20px; }
.spot-title { min-width: 0; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
@media (min-width: 640px) { .spot-title { font-size: 20px; } }
.spot-body { margin-top: 12px; font-size: 12px; line-height: 19.5px; color: var(--muted); }
.spot-cta { display: flex; margin-top: 16px; min-width: 0; }

/* ───────────── DEALS (3.6, 3.7) ───────────── */
.section-head-title .section-wordmark { max-width: 100%; }
.deals-notice { flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.deals-notice > svg { margin-top: 0; }
.deals-notice-text { flex: 1 1 220px; min-width: 0; }

/* ───────────── Explore Pokemon (3.10) ───────────── */
.explore-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; min-width: 0; }
@media (min-width: 640px) {
  .explore-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; }
}
.explore-head .section-title > span { min-width: 0; }
.explore-head .view-more { align-self: flex-start; }
@media (min-width: 640px) { .explore-head .view-more { align-self: auto; flex-shrink: 0; } }
.explore-ball { width: 24px; height: 24px; flex-shrink: 0; object-fit: contain; }
@media (min-width: 640px) { .explore-ball { width: 28px; height: 28px; } }

/* 4 px of padding on every side keeps the keyboard focus ring inside the scroller */
.explore-tabs { display: flex; gap: 8px; overflow-x: auto; margin: -4px -4px 16px; padding: 4px; }
.explore-tab {
  display: flex; flex-shrink: 0; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
  font-size: 11px; line-height: 16.5px; font-weight: 600; color: var(--fg); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.explore-tab:hover { border-color: var(--fg-30); background: var(--card-80); }
/* selected chips take the PONPACK green (PRODUCT.md Decisions, brand accent mapping) */
.explore-tab[aria-pressed="true"],
.explore-tab[aria-pressed="true"]:hover { border-color: var(--accent); background: var(--accent-strong); color: #fff; }
.explore-tab > img { width: 24px; height: 24px; flex-shrink: 0; object-fit: contain; image-rendering: pixelated; }
.explore-tab > img.is-big { width: 28px; height: 28px; }
@media (min-width: 640px) {
  .explore-tab { gap: 8px; padding: 6px 10px; font-size: 12px; line-height: 16px; }
  .explore-tab > img { width: 28px; height: 28px; }
  .explore-tab > img.is-big { width: 36px; height: 36px; }
}

/* invisible 3:4 slots keep the grid at 12 children (traded's placeholders) */
.explore-slot { aspect-ratio: 3 / 4; visibility: hidden; }
.explore-note { margin-top: 12px; }