/* Home page specific styles for PLBaldursGate */

.hero {
  padding-block: var(--space-16);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
.hero__content p { max-width: 60ch; }
.hero__cta { display: flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }
.hero__highlights { margin-top: var(--space-4); color: var(--color-text-muted); display: grid; gap: var(--space-2); padding: 0; }
.hero__highlights i { color: var(--color-accent); margin-right: var(--space-2); }
.hero__media img { object-fit: cover; }

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.feature-grid .card p { max-width: 55ch; }
.feature-grid .btn { margin-top: var(--space-3); }

/* Visuals */
.visuals__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* Deep-dive */
.deep-dive { display: grid; gap: var(--space-6); }
.deep-dive .card + .card { margin-top: 0; }
.deep-dive__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }

/* Popular resources */
.resource-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.popular__cta { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* CTA band */
.cta-band { background: linear-gradient(180deg, color-mix(in oklab, var(--color-surface-3), white 2%), var(--color-surface-2)); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.cta-band__inner { display: grid; gap: var(--space-3); text-align: center; }
.cta-band__actions { display: inline-flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-2); flex-wrap: wrap; }

/* Video embed */
.video-embed { aspect-ratio: 16 / 9; background: #000; }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-dramatic), transform var(--dur-slow) var(--ease-dramatic); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 1200px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .visuals__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
  .resource-cards { grid-template-columns: 1fr; }
}