/**
 * CCS Pro - Section-specific styles
 * Additional section layout and visual overrides
 */

/* Hero section - two column grid */
.section-hero .grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .section-hero .grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

/* Section header (title + subtitle) */
.section-header {
  margin-bottom: 3rem;
}
.section-header.section-header--centered {
  text-align: center;
}
.section-header.section-header--centered .section-header__inner {
  margin-left: auto;
  margin-right: auto;
}
.section-header__inner {
  max-width: 42rem;
}
.section-header h2 {
  font-size: 1.875rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .section-header h2 { font-size: 2.25rem; }
}
.section-header .subtitle {
  font-size: 1.125rem;
  color: hsl(var(--muted-foreground));
}

/* Readiness / status pills (red, blue, orange, gray, green) */
.pill-red { background: #fef2f2; color: #b91c1c; }
.pill-blue { background: #eff6ff; color: #1d4ed8; }
.pill-orange { background: #fff7ed; color: #c2410c; }
.pill-gray { background: #f4f4f5; color: #52525b; }
.pill-green { background: #f0fdf4; color: #15803d; }

/* Document status rows */
.doc-row-green { border: 1px solid #bbf7d0; background: #f0fdf4; }
.doc-row-orange { border: 1px solid #fed7aa; background: #fff7ed; }
.doc-row-red { border: 1px solid #fecaca; background: #fef2f2; }

/* Gradient card wrapper */
.bg-gradient-to-br { background: linear-gradient(to bottom right, hsl(var(--primary) / 0.05), hsl(var(--primary) / 0.1)); }
.from-primary\/5 { /* used with gradient */ }
.to-primary\/10 { /* used with gradient */ }
.to-transparent { /* gradient stop */ }
.bg-gradient-to-br.from-primary\/5.to-transparent { background: linear-gradient(to bottom right, hsl(var(--primary) / 0.05), transparent); }

/* Section overflow - prevent horizontal scroll */
.section-hero,
.section-tinted,
section[class^="section-"],
section[aria-label] {
  overflow-x: hidden;
  max-width: 100%;
}

/* Support section - badge row gap and link row */
section[aria-label="Support"] .flex.flex-wrap.justify-center.gap-4 {
  gap: 0.75rem 1.5rem;
}
section[aria-label="Support"] .flex.flex-wrap.items-center.justify-center {
  margin-top: 0.5rem;
}

/* Team section - card grid and card sizing */
section[aria-label="Team"] .grid {
  gap: 1.5rem;
  max-width: 36rem;
}
@media (min-width: 640px) {
  section[aria-label="Team"] .grid { gap: 2rem; }
}
section[aria-label="Team"] .card-elevated {
  padding: 1.5rem;
}
@media (min-width: 640px) {
  section[aria-label="Team"] .card-elevated { padding: 1.75rem; }
}

/* FAQ accordion - trigger padding and alignment */
.js-accordion .card-elevated {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) {
  .js-accordion .card-elevated { padding-left: 1.5rem; padding-right: 1.5rem; }
}
.js-accordion-trigger {
  min-height: 3.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.js-accordion-trigger:hover {
  color: hsl(var(--primary));
}

/* Pricing - refund block spacing */
#pricing .mt-12 {
  margin-top: 2.5rem;
}
#pricing .p-4.rounded-xl {
  padding: 1rem 1.25rem;
}
#pricing .p-4.rounded-xl .mt-2 {
  margin-top: 0.5rem;
}

/* Final CTA - button group spacing */
section[aria-label="Final CTA"] .flex.flex-wrap.justify-center.gap-4 {
  gap: 0.75rem 1rem;
}
@media (min-width: 640px) {
  section[aria-label="Final CTA"] .flex.flex-wrap.justify-center.gap-4 { gap: 1rem; }
}

/* Blur decorative */
.blur-3xl { filter: blur(48px); }