/* Page-owned styles for Understanding the Gungeoneers */

.gungeoneers-page {
  --page-section-gap: var(--space-9);
  --page-section-gap-mobile: var(--space-8);
}

.page-section {
  margin-block-end: var(--page-section-gap);
}

.page-section:last-child {
  margin-block-end: 0;
}

.section-kicker {
  color: var(--color-antique-gold);
  margin-block-end: var(--space-3);
}

.section-intro {
  max-width: 68ch;
  margin-block-end: var(--space-6);
}

/* Hero Selection Section */
.hero-selection-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.hero-selection-copy {
  grid-column: 1 / span 7;
  min-width: 0;
}

.hero-selection-copy p {
  max-width: 68ch;
}

.hero-selection-callout {
  margin-block-start: var(--space-5);
  max-width: 68ch;
}

.hero-selection-figure {
  grid-column: 8 / span 5;
  min-width: 0;
  margin-block-end: 0;
  transform: rotate(-2deg);
  border: 1px solid var(--color-antique-gold-40);
  background-color: var(--color-dungeon-charcoal);
}

.hero-selection-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-selection-figure figcaption {
  padding: var(--space-3) var(--space-4);
  margin-block-start: 0;
  border-top: 1px solid var(--color-antique-gold-40);
}

/* Equipment Slots Section */
.equipment-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  margin-block-start: var(--space-6);
}

.equipment-slot-card {
  min-width: 0;
  padding: var(--space-5);
  border-left: 1px solid var(--color-antique-gold-40);
  background-color: rgba(23, 26, 34, 0.6);
}

.equipment-slot-card h3 {
  text-align: center;
  margin-block-end: var(--space-4);
}

.equipment-slot-card p {
  max-width: 50ch;
}

.slot-glyph {
  font-size: 2rem;
  line-height: 1;
  color: var(--color-antique-gold);
  text-align: center;
  margin-block-end: var(--space-4);
}

.callout-teal {
  border-left-color: var(--color-mystic-teal);
  margin-block: var(--space-4);
}

/* Meet the Gungeoneers Section */
.hero-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-block-start: var(--space-6);
}

.hero-card {
  min-width: 0;
  padding: var(--space-5);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-card:nth-child(even) {
  transform: translateY(16px);
}

.hero-card:hover {
  transform: translateY(12px);
  box-shadow: var(--color-torchlight-glow);
}

.hero-card h3 {
  margin-block-end: var(--space-3);
}

.hero-card p {
  max-width: 45ch;
}

/* Choosing Your First Gungeoneer */
.choose-first-wrapper {
  background-color: var(--color-arcane-violet-10);
  padding: var(--space-7) var(--space-5);
  border: 1px solid var(--color-antique-gold-40);
}

.comparison-card {
  max-width: 66.666%;
  margin-inline: auto;
  padding: var(--space-6);
}

.comparison-card h3 {
  margin-block-end: var(--space-4);
}

.comparison-card p {
  max-width: 60ch;
}

/* Starting Equipment in Action */
.starting-equipment-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
  margin-block-start: var(--space-6);
}

.starting-equipment-copy {
  grid-column: 1 / span 6;
  min-width: 0;
}

.starting-equipment-copy p {
  max-width: 60ch;
}

.gameplay-screenshot-frame {
  grid-column: 7 / span 6;
  min-width: 0;
  margin-block-end: 0;
  transform: rotate(-1deg);
  border: 1px solid var(--color-antique-gold-40);
  background-color: var(--color-dungeon-charcoal);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.gameplay-screenshot-frame:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: var(--color-torchlight-glow);
}

.gameplay-screenshot-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.gameplay-screenshot-frame figcaption {
  padding: var(--space-3) var(--space-4);
  margin-block-start: 0;
  border-top: 1px solid var(--color-antique-gold-40);
}

/* Narrow text blocks for dodge roll, table flipping, floors */
.narrow-text-block {
  max-width: 66.666%;
  margin-inline: auto;
}

.narrow-text-block h2,
.narrow-text-block h3 {
  margin-block-end: var(--space-4);
}

.narrow-text-block p {
  max-width: 68ch;
}

.narrow-text-block .callout {
  margin-block-start: var(--space-5);
}

/* FAQ Section */
.faq-card {
  max-width: 66.666%;
  margin-inline: auto;
  padding: var(--space-6);
  margin-block-start: var(--space-6);
}

.faq-item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-antique-gold-40);
}

.faq-item:first-child {
  padding-block-start: 0;
}

.faq-item:last-child {
  padding-block-end: 0;
  border-bottom: none;
}

.faq-item h3 {
  margin-block-end: var(--space-3);
}

.faq-item p {
  max-width: 60ch;
}

/* CTA Section */
.cta-section {
  background-color: var(--color-arcane-violet-10);
  padding: var(--space-8) var(--space-5);
  border: 1px solid var(--color-antique-gold-40);
}

.cta-block {
  max-width: 50%;
  margin-inline: auto;
  text-align: center;
}

.cta-block h2 {
  margin-block-end: var(--space-4);
}

.cta-block p {
  max-width: 50ch;
  margin-inline: auto;
  margin-block-end: var(--space-6);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}

.cta-actions .btn,
.cta-actions .btn-secondary {
  min-width: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .hero-selection-copy {
    grid-column: 1 / span 8;
  }

  .hero-selection-figure {
    grid-column: 9 / span 4;
  }

  .comparison-card,
  .faq-card {
    max-width: 80%;
  }

  .narrow-text-block {
    max-width: 80%;
  }

  .cta-block {
    max-width: 70%;
  }
}

@media (max-width: 860px) {
  .hero-selection-grid,
  .starting-equipment-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hero-selection-copy,
  .hero-selection-figure,
  .starting-equipment-copy,
  .gameplay-screenshot-frame {
    grid-column: 1 / -1;
  }

  .hero-selection-figure,
  .gameplay-screenshot-frame {
    transform: none;
    max-width: 100%;
  }

  .equipment-slots-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .equipment-slot-card {
    border-left: none;
    border-top: 1px solid var(--color-antique-gold-40);
    padding-block-start: var(--space-5);
  }

  .hero-cards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .hero-card:nth-child(even) {
    transform: none;
  }

  .hero-card:hover {
    transform: translateY(-4px);
  }

  .comparison-card,
  .faq-card,
  .narrow-text-block,
  .cta-block {
    max-width: 100%;
  }

  .choose-first-wrapper,
  .cta-section {
    padding: var(--space-6) var(--space-4);
  }
}

@media (max-width: 600px) {
  .page-section {
    margin-block-end: var(--page-section-gap-mobile);
  }

  .hero-selection-grid,
  .starting-equipment-grid {
    gap: var(--space-5);
  }

  .hero-selection-figure,
  .gameplay-screenshot-frame {
    margin-inline: 0;
  }

  .hero-selection-figure img,
  .gameplay-screenshot-frame img {
    width: 100%;
  }

  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-actions .btn,
  .cta-actions .btn-secondary {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-selection-figure,
  .gameplay-screenshot-frame,
  .hero-card {
    transition: none;
    transform: none;
  }
}