/* =========================================================================
   resources-page.css — premium v2 styling for /resources (body.f8-resources)
   Author: Gemini Builder 2026-05-29
   Purpose: Fix readability, spacing, and motion for the resources hub.
   ========================================================================= */

/* Root tokens for resources context */
:root {
  --resources-accent: var(--accent);
}

/* Fix for the nth-child(even) issue in premium-transformation.css */
/* We want to explicitly control backgrounds for the alternating sections */
body.f8-resources section:nth-child(even) {
  background-color: var(--white) !important;
  color: var(--bg) !important;
}

body.f8-resources section:nth-child(odd) {
  background-color: var(--bg) !important;
  color: var(--white) !important;
}

/* Specific overrides for hero which is usually 1st (odd) but we want it obsidian */
body.f8-resources .ca-hero {
  background-color: var(--bg-deep) !important;
  color: var(--white) !important;
}

/* Ensure sections have proper spacing */
body.f8-resources .ca-section-light,
body.f8-resources .ca-section-dark,
body.f8-resources section {
  padding-block: clamp(4rem, 10vh, 8rem) !important;
}

/* Card Polish */
body.f8-resources .ca-card {
  transition: transform 0.4s var(--ease-canonical), border-color 0.3s, box-shadow 0.4s !important;
}

body.f8-resources .ca-section-light .ca-card {
  background: var(--ca-c-f8fafc) !important;
  border: 1px solid rgba(4, 14, 26, 0.05) !important;
  box-shadow: 0 4px 20px -4px rgba(4, 14, 26, 0.05) !important;
}

body.f8-resources .ca-section-light .ca-card:hover {
  transform: translateY(-8px) !important;
  border-color: var(--resources-accent) !important;
  box-shadow: 0 20px 40px -12px rgba(4, 14, 26, 0.1) !important;
}

body.f8-resources .ca-section-dark .ca-card.ca-glass {
  background: var(--white-03) !important;
  border: 1px solid var(--white-08) !important;
  backdrop-filter: blur(12px) !important;
}

body.f8-resources .ca-section-dark .ca-card.ca-glass:hover {
  transform: translateY(-8px) !important;
  border-color: var(--resources-accent) !important;
  background: var(--white-05) !important;
}

/* Hero Title Spans Fix */
body.f8-resources .ca-hero-title span {
  display: inline-block !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  body.f8-resources .ca-hero-title span {
    white-space: normal !important;
    display: block !important;
  }
}

/* Responsive Grid Adjustments */
@media (max-width: 1024px) {
  body.f8-resources .grid {
    gap: 1.5rem !important;
  }
}

/* Article Card specific */
.article-card {
  height: 100%;
}

/* Motion Reveal overrides if needed */
.ms-reveal {
  opacity: 0;
  transform: translateY(20px);
}

.ms-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease-out, transform 0.8s var(--ease-canonical);
}