/* =========================================================
   01 — MOBILE PAINT OPTIMIZATION
   ========================================================= */

@media (max-width: 768px) {
  .service-page .idea-services-breakdown::before,
  .service-page .idea-services-breakdown::after,
  .service-page .idea-results-section::before,
  .service-page .idea-results-section::after,
  .service-page .idea-why-section::before,
  .service-page .idea-why-section::after,
  .service-page .idea-faq-section::before,
  .service-page .idea-final-cta-section::after {
    opacity: 0.55;
    filter: blur(28px);
  }

  .service-page .idea-service-card,
  .service-page .idea-result-card,
  .service-page .idea-process-card,
  .service-page .idea-why-card,
  .service-page .idea-premium-faq details {
    box-shadow: 0 10px 22px rgba(7, 17, 31, 0.055);
  }
}

/* =========================================================
   02 — ACCESSIBILITY FOCUS
   ========================================================= */

.service-page a:focus-visible,
.service-page .wp-block-button__link:focus-visible,
.service-page input:focus-visible,
.service-page textarea:focus-visible,
.service-page select:focus-visible,
.service-page summary:focus-visible {
  outline: 3px solid rgba(245, 178, 26, 0.75);
  outline-offset: 3px;
}

/* =========================================================
   03 — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .service-page *,
  .service-page *::before,
  .service-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .service-page .idea-service-card:hover,
  .service-page .idea-result-card:hover,
  .service-page .idea-process-card:hover,
  .service-page .idea-why-card:hover,
  .service-page .wp-block-button__link:hover {
    transform: none !important;
  }
}

/* =========================================================
   04 — TOUCH DEVICE HOVER GUARD
   ========================================================= */

@media (hover: none) {
  .service-page .idea-service-card:hover,
  .service-page .idea-result-card:hover,
  .service-page .idea-process-card:hover,
  .service-page .idea-why-card:hover,
  .service-page .wp-block-button__link:hover {
    transform: none !important;
  }
}

/* =========================================================
   05 — GUTENBERG / CROSS-BROWSER STABILIZATION
   ========================================================= */

.service-page .wp-block-column {
  min-width: 0;
}

.service-page .wp-block-columns {
  align-items: stretch;
}

.service-page .idea-service-card,
.service-page .idea-result-card,
.service-page .idea-process-card,
.service-page .idea-why-card,
.service-page .idea-final-trust-item {
  width: 100%;
  backface-visibility: hidden;
}

/* =========================================================
   06 — RESULTS GRID STABILITY
   ========================================================= */

.service-page .idea-results-columns {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px !important;
  align-items: stretch !important;
}

.service-page .idea-results-columns .idea-result-column {
  display: flex;
  width: 100%;
  min-width: 0;
}

.service-page .idea-results-columns .idea-result-column > .wp-block-group,
.service-page .idea-results-columns .idea-result-card {
  width: 100%;
  height: 100%;
}

@media (max-width: 1180px) {
  .service-page .idea-results-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 781px) {
  .service-page .idea-results-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .service-page .idea-results-columns {
    grid-template-columns: 1fr;
  }

  .service-page .idea-result-card {
    height: auto !important;
    min-height: auto !important;
  }
}

/* =========================================================
   07 — FEATURED CARD COLOR STABILITY
   ========================================================= */

.service-page .idea-service-card--featured,
.service-page .idea-result-card--featured,
.service-page .idea-process-card--active,
.service-page .idea-why-card--dark {
  color: #ffffff;
}

.service-page .idea-service-card--featured h3,
.service-page .idea-service-card--featured h4,
.service-page .idea-service-card--featured .idea-service-title,
.service-page .idea-result-card--featured h3,
.service-page .idea-result-card--featured h4,
.service-page .idea-result-card--featured .idea-result-title,
.service-page .idea-process-card--active h3,
.service-page .idea-process-card--active h4,
.service-page .idea-process-card--active .idea-process-title,
.service-page .idea-why-card--dark h3,
.service-page .idea-why-card--dark h4,
.service-page .idea-why-card--dark .idea-why-card-title {
  color: #ffffff !important;
}

.service-page .idea-service-card--featured p,
.service-page .idea-service-card--featured .idea-service-text,
.service-page .idea-result-card--featured p,
.service-page .idea-result-card--featured .idea-result-text,
.service-page .idea-process-card--active p,
.service-page .idea-process-card--active .idea-process-text,
.service-page .idea-why-card--dark p,
.service-page .idea-why-card--dark .idea-why-card-text {
  color: rgba(255, 255, 255, 0.78) !important;
}

.service-page .idea-service-card--featured .idea-service-icon,
.service-page .idea-process-card--active .idea-process-number,
.service-page .idea-why-card--dark .idea-why-icon {
  background: var(--idea-accent) !important;
  color: var(--idea-heading) !important;
}

/* =========================================================
   08 — FIREFOX SPECIFIC GUARD
   ========================================================= */

@supports (-moz-appearance: none) {
  .service-page .idea-results-columns {
    grid-auto-rows: 1fr;
  }

  .service-page .idea-result-card,
  .service-page .idea-service-card,
  .service-page .idea-process-card,
  .service-page .idea-why-card {
    backface-visibility: hidden;
  }
}

/* =========================================================
   09 — MOBILE STABILITY GUARD
   ========================================================= */

@media (max-width: 768px) {
  .service-page .wp-block-columns {
    gap: 18px !important;
  }

  .service-page .idea-service-card,
  .service-page .idea-result-card,
  .service-page .idea-process-card,
  .service-page .idea-why-card {
    min-height: auto !important;
    height: auto !important;
  }

  .service-page .idea-service-title,
  .service-page .idea-result-title,
  .service-page .idea-process-title,
  .service-page .idea-why-card-title {
    min-height: auto;
  }

  .service-page .idea-result-title,
  .service-page .idea-result-text {
    display: block;
  }
}


/* =========================================================
   10 — FIREFOX FINAL UI LOCK PATCH
   Results Equal Height + Featured Cards Color Stability
   Service Page Only
   ========================================================= */

@supports (-moz-appearance: none) {

  /* RESULTS SECTION — Firefox Equal Height Lock */
  .service-page .idea-results-columns {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
  }

  .service-page .idea-results-columns .idea-result-column {
    display: flex !important;
    align-items: stretch !important;
    min-width: 0 !important;
    height: 100% !important;
  }

  .service-page .idea-results-columns .idea-result-column > *,
  .service-page .idea-results-columns .idea-result-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 268px !important;
  }

  .service-page .idea-result-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* RESULTS featured card color lock */
  .service-page .idea-result-card--featured {
    background:
      radial-gradient(circle at 50% 0%, rgba(245, 178, 26, 0.22), transparent 42%),
      linear-gradient(180deg, var(--idea-heading) 0%, #0d1f38 100%) !important;
    color: #ffffff !important;
  }

  .service-page .idea-result-card--featured .idea-result-title,
  .service-page .idea-result-card--featured .idea-result-text,
  .service-page .idea-result-card--featured p,
  .service-page .idea-result-card--featured h3,
  .service-page .idea-result-card--featured h4 {
    color: #ffffff !important;
  }

  .service-page .idea-result-card--featured .idea-result-number {
    color: var(--idea-accent) !important;
  }

  /* PROCESS featured card color lock */
  .service-page .idea-process-card--active {
    background:
      radial-gradient(circle at 50% 0%, rgba(245, 178, 26, 0.20), transparent 44%),
      linear-gradient(180deg, var(--idea-dark-2) 0%, #0d1f38 100%) !important;
    color: #ffffff !important;
  }

  .service-page .idea-process-card--active .idea-process-title,
  .service-page .idea-process-card--active .idea-process-text,
  .service-page .idea-process-card--active p,
  .service-page .idea-process-card--active h3,
  .service-page .idea-process-card--active h4 {
    color: #ffffff !important;
  }

  .service-page .idea-process-card--active .idea-process-number {
    background: var(--idea-accent) !important;
    color: var(--idea-heading) !important;
  }

  /* WHY CHOOSE US dark card color lock */
  .service-page .idea-why-card--dark {
    background:
      radial-gradient(circle at 18% 0%, rgba(245, 178, 26, 0.22), transparent 42%),
      linear-gradient(180deg, var(--idea-dark-2) 0%, #0d1f38 100%) !important;
    color: #ffffff !important;
  }

  .service-page .idea-why-card--dark .idea-why-card-title,
  .service-page .idea-why-card--dark .idea-why-card-text,
  .service-page .idea-why-card--dark p,
  .service-page .idea-why-card--dark h3,
  .service-page .idea-why-card--dark h4 {
    color: #ffffff !important;
  }

  .service-page .idea-why-card--dark .idea-why-icon {
    background: var(--idea-accent) !important;
    color: var(--idea-heading) !important;
  }
}

/* Firefox Responsive Results Lock */
@supports (-moz-appearance: none) {
  @media (max-width: 1180px) {
    .service-page .idea-results-columns {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 781px) {
    .service-page .idea-results-columns {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 640px) {
    .service-page .idea-results-columns {
      grid-template-columns: 1fr !important;
    }

    .service-page .idea-results-columns .idea-result-column > *,
    .service-page .idea-results-columns .idea-result-card {
      height: auto !important;
      min-height: auto !important;
    }
  }
}