/* ========================================
   INFINITY STUDIOS - NEW DESIGN SYSTEM
   ======================================== */

/* CSS Variables for the design system */
:root {
  --bg-primary: #0a0514;
  --bg-secondary: #0f0822;
  --bg-card: #150b2e;
  --bg-card-hover: #1a0e3a;
  --purple-dark: #23124d;
  --purple-border: rgba(124, 58, 237, 0.5);
  --accent-yellow: #facc15;
  --accent-yellow-hover: #fde047;
  --text-white: #ffffff;
  --text-slate: #94a3b8;
  --text-slate-light: #cbd5e1;
}

/* Base styles */
.infinity-section {
  width: 100%;
}

.infinity-section h1,
.infinity-section h2,
.infinity-section h3,
.infinity-section h4,
.infinity-section h5,
.infinity-section h6 {
  color: var(--text-white);
}

.infinity-section p {
  color: var(--text-slate);
}

/* ========================================
   WPBAKERY COMPATIBILITY
   ======================================== */

/* Standard VC text, images, etc. inside rows */
.wpb_content_element,
.vc_column-inner > .wpb_wrapper > *:not(.infinity-section):not(.infinity-home-hero):not(.infinity-page-hero) {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .wpb_content_element,
  .vc_column-inner > .wpb_wrapper > *:not(.infinity-section):not(.infinity-home-hero):not(.infinity-page-hero) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .wpb_content_element,
  .vc_column-inner > .wpb_wrapper > *:not(.infinity-section):not(.infinity-home-hero):not(.infinity-page-hero) {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Remove double padding when custom blocks are inside VC columns */
.vc_column_container:has(> .vc_column-inner > .wpb_wrapper > .infinity-section),
.vc_column_container:has(> .vc_column-inner > .wpb_wrapper > .infinity-home-hero),
.vc_column_container:has(> .vc_column-inner > .wpb_wrapper > .infinity-page-hero) {
  padding-left: 0;
  padding-right: 0;
}

/* Ensure custom blocks without max-w containers still have constrained width */
.vc_column_container .infinity-section:not(:has(> .max-w-7xl)):not(:has(> .max-w-4xl)):not(:has(> .max-w-3xl)),
.vc_column_container .infinity-home-hero:not(:has(> .max-w-7xl)):not(:has(> .max-w-4xl)),
.vc_column_container .infinity-page-hero:not(:has(> .max-w-7xl)):not(:has(> .max-w-4xl)) {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .vc_column_container .infinity-section:not(:has(> .max-w-7xl)):not(:has(> .max-w-4xl)):not(:has(> .max-w-3xl)),
  .vc_column_container .infinity-home-hero:not(:has(> .max-w-7xl)):not(:has(> .max-w-4xl)),
  .vc_column_container .infinity-page-hero:not(:has(> .max-w-7xl)):not(:has(> .max-w-4xl)) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .vc_column_container .infinity-section:not(:has(> .max-w-7xl)):not(:has(> .max-w-4xl)):not(:has(> .max-w-3xl)),
  .vc_column_container .infinity-home-hero:not(:has(> .max-w-7xl)):not(:has(> .max-w-4xl)),
  .vc_column_container .infinity-page-hero:not(:has(> .max-w-7xl)):not(:has(> .max-w-4xl)) {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Full-width row support */
.vc_row[data-vc-full-width="true"] .infinity-section,
.vc_row[data-vc-full-width="true"] .infinity-home-hero,
.vc_row[data-vc-full-width="true"] .infinity-page-hero {
  position: relative;
  left: 0;
  width: 100%;
  max-width: 100vw;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.vc_row[data-vc-full-width="true"] .infinity-section > .max-w-7xl,
.vc_row[data-vc-full-width="true"] .infinity-home-hero > .max-w-7xl,
.vc_row[data-vc-full-width="true"] .infinity-page-hero > .max-w-7xl {
  max-width: none;
}

/* Stretched Row Support */
.vc_row.vc_row-o-content-middle .infinity-section,
.vc_row.vc_row-o-content-top .infinity-section,
.vc_row.vc_row-o-content-bottom .infinity-section {
  width: 100%;
}

/* Fix for VC rows inside custom blocks */
.infinity-section .vc_row,
.infinity-home-hero .vc_row,
.infinity-page-hero .vc_row {
  margin-left: 0;
  margin-right: 0;
}

/* ========================================
   SECTION PADDING CONSISTENCY
   ======================================== */

/* Standard section padding - only apply to blocks without Tailwind padding classes */
.wpb_text_column,
.wpb_single_image,
.infinity-section:not(.infinity-home-hero):not(.infinity-page-hero) {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Hero blocks use Tailwind padding - no CSS override needed */
/* Mobile: pt-64 (16rem) | Desktop: lg:pt-40 or lg:pt-48 */

/* Hero sections use Tailwind padding classes - no CSS override needed */
/* This ensures pt-32/pt-64 on mobile and lg:pt-40/lg:pt-48 on desktop work correctly */

@media (min-width: 768px) {
  .infinity-section,
  .wpb_text_column,
  .wpb_single_image {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* Remove padding when inside a custom block section */
.infinity-section .wpb_text_column,
.infinity-section .wpb_single_image,
.infinity-home-hero .wpb_text_column,
.infinity-page-hero .wpb_text_column {
  padding-top: 0;
  padding-bottom: 0;
}

/* ========================================
   VC ROW BACKGROUNDS
   ======================================== */

.vc_row.vc_bg-dark {
  background-color: var(--bg-primary) !important;
}

/* Hide empty paragraphs in VC content */
.wpb_content_element p:empty,
.wpb_text_column p:empty {
  display: none;
}

/* ========================================
   FULL WIDTH UTILITIES
   ======================================== */

.infinity-full-width {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Custom block margin resets */
.infinity-section:first-child,
.infinity-home-hero:first-child,
.infinity-page-hero:first-child {
  margin-top: 0;
}

.infinity-section:last-child,
.infinity-home-hero:last-child,
.infinity-page-hero:last-child {
  margin-bottom: 0;
}

/* Remove bottom margin from last elements */
.infinity-section *:last-child {
  margin-bottom: 0;
}

/* Fix for lists in content */
.infinity-section ul,
.infinity-section ol {
  padding-left: 1.5rem;
}

/* ========================================
   PROCESS STEPS GRID
   ======================================== */

/* Dynamic grid based on number of steps */
.process-steps-grid {
  display: grid;
  gap: 2rem;
}

/* Mobile: always stack */
@media (max-width: 767px) {
  .process-steps-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet: 2-3 columns based on count */
@media (min-width: 768px) and (max-width: 1023px) {
  .process-steps-grid {
    grid-template-columns: repeat(min(var(--grid-cols, 3), 3), 1fr) !important;
  }
}

/* Desktop: use the CSS variable for columns (max 5) */
@media (min-width: 1024px) {
  .process-steps-grid {
    grid-template-columns: repeat(var(--grid-cols, 5), 1fr) !important;
  }
}

/* When more than 5 steps, show as horizontal scroll or stack */
.process-steps-grid[style*="--grid-cols: 6"],
.process-steps-grid[style*="--grid-cols: 7"],
.process-steps-grid[style*="--grid-cols: 8"],
.process-steps-grid[style*="--grid-cols: 9"],
.process-steps-grid[style*="--grid-cols: 10"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}