/*
 * Guides page — creative layer on top of the core theme, matching the
 * same visual language as assets/css/services-page.css (glow orbs,
 * card hover-lift, glow CTA button) but under its own .guides-page
 * scope with its own class names, so this page can be edited
 * independently without any risk to the About Us / Services pages.
 *
 * IMPORTANT: this theme ships a pre-compiled, purged Tailwind build
 * (assets/css/tailwind.css) rather than a live JIT build — only the
 * exact utility classes already used elsewhere in the theme exist in
 * that file. Layout that isn't already proven safe elsewhere in the
 * theme is written here as real, hand-authored CSS instead of
 * guessed-at Tailwind classes.
 */

.guides-page {
  overflow-x: clip;
}

.guides-section-head {
  max-width: 40rem;
  margin-bottom: 2.5rem;
}

/* ---------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------- */

.guides-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 15% 0%, hsl(var(--accent) / 0.14), transparent 60%),
    radial-gradient(50% 70% at 100% 30%, hsl(var(--accent) / 0.10), transparent 60%);
}

.guides-hero-inner {
  position: relative;
  padding-top: 3.5rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .guides-hero-inner { padding-top: 4.5rem; padding-bottom: 5.5rem; }
}

.guides-glow-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  background: radial-gradient(circle, hsl(var(--accent) / 0.35), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.guides-glow-orb--1 { width: 420px; height: 420px; top: -140px; left: -100px; }
.guides-glow-orb--2 { width: 380px; height: 380px; bottom: -160px; right: -80px; }

.guides-hero-content {
  position: relative;
  z-index: 1;
}

.guides-hero-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.guides-hero-title {
  max-width: 44rem;
}
.guides-hero-sub {
  max-width: 38rem;
  font-size: 1.0625rem;
}
@media (min-width: 768px) {
  .guides-hero-sub { font-size: 1.1875rem; }
}

/* ---------------------------------------------------------------------
   Cards — category grid + featured guides list
   ------------------------------------------------------------------- */

.guides-icon-badge {
  position: relative;
}

.guides-card {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.guides-card:hover {
  transform: translateY(-3px);
  border-color: hsl(var(--accent) / 0.4);
  box-shadow: 0 12px 28px hsl(0 0% 0% / 0.08);
}

.guides-list-card {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.guides-list-card:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--accent) / 0.4);
  box-shadow: 0 10px 24px hsl(0 0% 0% / 0.07);
}

/* ---------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------- */

.guides-cta {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.guides-glow-btn {
  box-shadow: 0 0 0 0 hsl(var(--accent) / 0.5);
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}
.guides-glow-btn:hover {
  box-shadow: 0 0 24px 2px hsl(var(--accent) / 0.45);
}