/*
 * Spark Cinematic About Us UX/UI Custom Overrides
 * Clean styles applied strictly to Post ID 24217 (About Us Cinematic Experience)
 */

/* ==========================================================================
   1. Button Flex Row Layouts
   ========================================================================== */

/* Unified flex row container for CTAs */
.spark-cta-buttons-container .elementor-widget-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* Centered layout for Final CTA */
.spark-cta-buttons-container.spark-cta-buttons-centered .elementor-widget-wrap {
  justify-content: center !important;
}

/* Ensure buttons display correctly inline */
.spark-cta-buttons-container .elementor-widget-button {
  width: auto !important;
  display: inline-block !important;
}

/* Force square shape and premium hover effects on buttons */
.spark-cta-buttons-container .elementor-button,
.elementor-widget-button.spark-btn-inverted .elementor-button,
.elementor-widget-button.spark-btn-outline .elementor-button {
  border-radius: 0px !important;
  padding: 16px 32px !important;
  min-height: 58px !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 320ms cubic-bezier(0.19, 1, 0.22, 1) !important;
}

/* Primary Button (Inverted) style: White background, black text */
.elementor-widget-button.spark-btn-inverted .elementor-button {
  background-color: #ffffff !important;
  color: #050505 !important;
  border: 1px solid #ffffff !important;
}

.elementor-widget-button.spark-btn-inverted .elementor-button:hover,
.elementor-widget-button.spark-btn-inverted .elementor-button:focus {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Secondary Button (Outline) style: Transparent background, white border */
.elementor-widget-button.spark-btn-outline .elementor-button {
  background-color: transparent !important;
  color: #f5f5f5 !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
}

.elementor-widget-button.spark-btn-outline .elementor-button:hover,
.elementor-widget-button.spark-btn-outline .elementor-button:focus {
  background-color: #ffffff !important;
  color: #050505 !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Dark outline button style (for White sections) */
.spark-white-section .elementor-widget-button.spark-btn-outline .elementor-button {
  color: #050505 !important;
  border: 1px solid rgba(5, 5, 5, 0.42) !important;
}

.spark-white-section .elementor-widget-button.spark-btn-outline .elementor-button:hover,
.spark-white-section .elementor-widget-button.spark-btn-outline .elementor-button:focus {
  background-color: #050505 !important;
  color: #ffffff !important;
  border-color: #050505 !important;
  transform: translateY(-2px) !important;
}

/* Mobile responsive alignment */
@media screen and (max-width: 767px) {
  .spark-cta-buttons-container .elementor-widget-wrap {
    justify-content: center !important;
    gap: 12px !important;
  }
}

/* ==========================================================================
   2. Editorial White Sections Overrides
   ========================================================================== */

/* Force pure white background on designated sections */
.spark-white-section {
  background-color: #ffffff !important;
  color: #050505 !important;
}

.spark-white-section .elementor-container {
  background-color: #ffffff !important;
}

/* Headings in White Sections */
.spark-white-section .elementor-heading-title {
  color: #050505 !important;
}

/* Text Editors in White Sections */
.spark-white-section .elementor-widget-text-editor,
.spark-white-section .elementor-widget-text-editor p {
  color: rgba(5, 5, 5, 0.72) !important;
}

/* Dividers in White Sections */
.spark-white-section .elementor-divider-separator {
  border-color: rgba(5, 5, 5, 0.14) !important;
}

/* Counters in White Sections */
.spark-white-section .elementor-counter-number-wrapper {
  color: #050505 !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 700 !important;
}

.spark-white-section .elementor-counter-title {
  color: rgba(5, 5, 5, 0.58) !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   3. Custom Accordion overrides (Section 8: How We Create)
   ========================================================================== */

.elementor-widget-accordion .elementor-accordion {
  border: none !important;
}

.elementor-widget-accordion .elementor-accordion-item {
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-left: none !important;
  border-right: none !important;
  margin-bottom: 0 !important;
  background-color: transparent !important;
  border-radius: 0px !important;
  transition: background-color 300ms ease;
}

.elementor-widget-accordion .elementor-accordion-item + .elementor-accordion-item {
  border-top: none !important;
}

.elementor-widget-accordion .elementor-accordion-item:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

.elementor-widget-accordion .elementor-tab-title {
  background-color: transparent !important;
  border: none !important;
  padding: 24px 0 !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important;
  color: rgba(255, 255, 255, 0.58) !important;
  transition: color 300ms ease;
}

.elementor-widget-accordion .elementor-accordion-item.elementor-active .elementor-tab-title,
.elementor-widget-accordion .elementor-accordion-item:hover .elementor-tab-title {
  color: #ffffff !important;
}

.elementor-widget-accordion .elementor-tab-title a {
  color: inherit !important;
}

.elementor-widget-accordion .elementor-tab-content {
  padding: 0 0 32px 0 !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem) !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.74) !important;
  background-color: transparent !important;
  border: none !important;
}

.elementor-widget-accordion .elementor-accordion-icon {
  color: currentColor !important;
  font-size: 0.9rem !important;
  opacity: 0.5;
  transition: transform 300ms ease, opacity 300ms ease;
}

.elementor-widget-accordion .elementor-accordion-item.elementor-active .elementor-accordion-icon {
  opacity: 1;
}

/* ==========================================================================
   4. Premium Capabilities Cards (Section 3: What We Build)
   ========================================================================== */

/* Base Column styling for cards */
.elementor-column.spark-portfolio-card {
  position: relative !important;
  overflow: hidden !important;
  transition: all 450ms cubic-bezier(0.19, 1, 0.22, 1) !important;
}

/* Background image hover zoom */
.elementor-column.spark-portfolio-card > .elementor-widget-wrap {
  position: relative !important;
  z-index: 2 !important;
  background-color: rgba(5, 5, 5, 0.55) !important; /* Muted base overlay */
  transition: background-color 450ms cubic-bezier(0.19, 1, 0.22, 1) !important;
}

/* Add custom overlay for card depth */
.elementor-column.spark-portfolio-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.1) 0%, rgba(5, 5, 5, 0.9) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transition: opacity 450ms cubic-bezier(0.19, 1, 0.22, 1) !important;
}

/* Hover scales background */
.elementor-column.spark-portfolio-card:hover {
  border-color: rgba(255, 255, 255, 0.38) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
}

.elementor-column.spark-portfolio-card:hover > .elementor-widget-wrap {
  background-color: rgba(5, 5, 5, 0.25) !important; /* Reveal background image more on hover */
}

/* Styling lists inside cards */
.elementor-column.spark-portfolio-card ul {
  list-style: none !important;
  margin: 24px 0 0 0 !important;
  padding: 16px 0 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: grid !important;
  gap: 10px !important;
}

.elementor-column.spark-portfolio-card li {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.58) !important;
  position: relative !important;
  padding-left: 18px !important;
  transition: color 300ms ease !important;
}

.elementor-column.spark-portfolio-card li::before {
  content: "→" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #ffffff !important;
  opacity: 0.5 !important;
  transition: transform 300ms ease !important;
}

.elementor-column.spark-portfolio-card:hover li {
  color: rgba(255, 255, 255, 0.85) !important;
}

.elementor-column.spark-portfolio-card li:hover {
  color: #ffffff !important;
}

.elementor-column.spark-portfolio-card li:hover::before {
  transform: translateX(2px) !important;
}