/* Gameplay Page Styles – Baxelplgame.com */

.page-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background:
    radial-gradient(1000px 400px at 10% 10%, rgba(201,169,97,0.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.2), transparent 40%),
    var(--color-background);
}

.page-hero .hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
}

@media (max-width: 900px) {
  .page-hero .hero-inner { grid-template-columns: 1fr; }
}

.hero-copy h1 { margin-bottom: var(--space-4); }
.hero-copy .lead { max-width: 50ch; }
.hero-ctas { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-2xl); border: 1px solid var(--color-neutral-800); }

.section { padding: var(--space-12) 0; }
.section-accent { background: var(--color-background-elevated); border-top: 1px solid var(--color-neutral-800); border-bottom: 1px solid var(--color-neutral-800); }

.media-frame img { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border: 1px solid var(--color-neutral-800); }

/* Video embeds */
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 900px) { .video-grid { grid-template-columns: 1fr; } }
.video-embed { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--color-neutral-800); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* FAQ */
.faq-item { background: var(--color-background-elevated); border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); }
.faq-item[open] { box-shadow: var(--shadow-md); }
.faq-item summary { cursor: pointer; font-family: var(--font-ui); font-weight: var(--font-weight-semibold); color: var(--color-primary-light); outline: none; }
.faq-item summary::marker { color: var(--color-primary); }
.faq-item p { margin-top: var(--space-3); color: var(--color-text-secondary); }

/* Prices */
.price { font-size: var(--font-size-2xl); color: var(--color-primary-light); }

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--transition-slow), transform var(--transition-slow); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }