/* ========================================================================== 
   ADVENNO PHASE 4 - SOLUTIONS DETAIL PAGES (SCOPED SHARED)
   Scope: /solutions/index + all solution detail pages migrated in Phase 4
   ========================================================================== */

.p4-solution-page .p4-solution-main {
  --p4-solution-rhythm: clamp(1.25rem, 2.4vw, 2.5rem);
  --p4-solution-card-radius: clamp(16px, 2vw, 22px);
  --p4-solution-card-border: rgba(148, 163, 184, 0.24);
  --p4-solution-card-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
  --p4-solution-progress-track: rgba(148, 163, 184, 0.28);
  padding-top: 0;
  overflow-x: clip;
}

[data-theme="light"] .p4-solution-page .p4-solution-main {
  --p4-solution-progress-track: rgba(148, 163, 184, 0.4);
}

.p4-solution-page .p4-solution-main > section {
  position: relative;
  scroll-margin-top: 112px;
}

.p4-solution-page .p4-solution-main > section + section {
  margin-top: var(--p4-solution-rhythm);
}

.p4-solution-page .p4-solution-main .section-hero,
.p4-solution-page .p4-solution-main .page-hero-enhanced {
  padding-top: var(--p3-hero-top-space) !important;
}

.p4-solution-page .p4-solution-main .section-header {
  margin-bottom: clamp(1.1rem, 2.4vw, 1.9rem);
}

.p4-solution-page .p4-solution-main .grid {
  align-items: stretch;
  row-gap: clamp(1rem, 2.2vw, 1.6rem);
}

.p4-solution-page .p4-solution-main .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.p4-solution-page .p4-solution-main .card,
.p4-solution-page .p4-solution-main .service-card {
  border-radius: var(--p4-solution-card-radius);
  border: 1px solid var(--p4-solution-card-border);
  box-shadow: var(--p4-solution-card-shadow);
  height: 100%;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .p4-solution-page .p4-solution-main .card:hover,
  .p4-solution-page .p4-solution-main .service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(45, 212, 191, 0.4);
    box-shadow: 0 20px 40px rgba(8, 47, 73, 0.22);
  }
}

.p4-solution-page .p4-solution-main .card > :last-child,
.p4-solution-page .p4-solution-main .service-card > :last-child {
  margin-bottom: 0;
}

.p4-solution-page .p4-solution-main .adv-stats-banner {
  gap: clamp(18px, 2.8vw, 32px);
}

.p4-solution-page .p4-solution-main img,
.p4-solution-page .p4-solution-main svg,
.p4-solution-page .p4-solution-main canvas {
  max-width: 100%;
}

.p4-solution-page .p4-solution-main .btn {
  min-height: 44px;
}

.p4-solution-page .p4-solution-main [style*='background:rgba(255,255,255,0.08)'] {
  background: var(--p4-solution-progress-track) !important;
}

@media (max-width: 1024px) {
  .p4-solution-page .p4-solution-main {
    padding-top: 0;
  }

  .p4-solution-page .p4-solution-main > section + section {
    margin-top: clamp(1.1rem, 3.5vw, 1.8rem);
  }
}

@media (max-width: 767px) {
  .p4-solution-page .p4-solution-main {
    padding-top: 0;
  }

  .p4-solution-page .p4-solution-main .section,
  .p4-solution-page .p4-solution-main .section-alt {
    padding-top: clamp(2.35rem, 8.2vw, 2.9rem) !important;
    padding-bottom: clamp(2.35rem, 8.2vw, 2.9rem) !important;
  }

  .p4-solution-page .p4-solution-main .section-hero,
  .p4-solution-page .p4-solution-main .page-hero-enhanced {
    min-height: auto !important;
    padding-top: var(--p3-hero-top-space-mobile) !important;
  }

  .p4-solution-page .p4-solution-main .grid {
    gap: 16px !important;
  }

  .p4-solution-page .p4-solution-main .card,
  .p4-solution-page .p4-solution-main .service-card {
    padding: clamp(1.05rem, 4vw, 1.35rem) !important;
  }

  .p4-solution-page .p4-solution-main .row .btn,
  .p4-solution-page .p4-solution-main .btn-lg {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .p4-solution-page .p4-solution-main [style*='grid-template-columns:repeat(auto-fit,minmax(200px,1fr))'] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p4-solution-page .p4-solution-main *,
  .p4-solution-page .p4-solution-main *::before,
  .p4-solution-page .p4-solution-main *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .p4-solution-page .p4-solution-main .card:hover,
  .p4-solution-page .p4-solution-main .service-card:hover {
    transform: none !important;
    box-shadow: var(--p4-solution-card-shadow) !important;
  }

  .p4-solution-page .p4-solution-main .adv-progress-bar {
    transition: none !important;
  }
}