/* WP Suite Comparison CPT styles
   Load after common.css and shared wps-solutions.css, only on wps_comparison posts.
   Visual intent: decision-support page, light surface, blue/purple comparison accent. */

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) {
  --wps-bg: radial-gradient(circle at 10% 8%, rgba(37, 99, 235, 0.08), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(124, 58, 237, 0.07), transparent 28%),
    #f5f7ff;
  --wps-bg-alpha: rgba(245, 247, 255, 0.84);
  --wps-solutions-accent: #2563eb;
  --wps-solutions-accent-2: #7c3aed;
  --wps-text-eyebrow: #1d4ed8;
  --wps-text-headline: #2563eb;
  --wps-text-headline-2: #7c3aed;
  --wps-solutions-shadow: 0 16px 42px rgba(37, 99, 235, 0.075);
  --wps-solutions-table-bg: #f5f7ff;
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template-default,
  .wps-comparison-page
),
:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template-default
) .wp-site-blocks {
  max-width: 100%;
  overflow-x: clip;
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-solutions-section.hero {
  position: relative;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
  width: min(1200px, 100%);
  max-width: 1200px;
  min-height: unset;
  margin-top: clamp(36px, 2.4vw, 64px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 42px;
  border: 1px solid rgba(37, 99, 235, 0.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 96% 15%, rgba(124, 58, 237, 0.11), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(238, 244, 255, 0.90));
  box-shadow: var(--wps-solutions-shadow);
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-solutions-section.hero > * {
  position: relative;
  z-index: 1;
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-solutions-section.hero h1 {
  max-width: 820px;
  font-size: clamp(2.35rem, 4.7vw, 4.15rem) !important;
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-solutions-section.hero .wps-solutions-lead {
  max-width: 760px;
  margin-bottom: 4px;
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-solutions-section.hero .wps-solutions-answer {
  width: min(720px, 100%);
  margin: 10px 0 0;
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-solutions-section.hero::after {
  content: "VS";
  position: absolute;
  right: clamp(24px, 6vw, 70px);
  bottom: clamp(20px, 4vw, 44px);
  z-index: 0;
  display: grid;
  place-items: center;
  width: clamp(98px, 14vw, 148px);
  aspect-ratio: 1;
  border-radius: 999px;
  color: rgba(37, 99, 235, 0.14);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.08em;
  background: radial-gradient(circle, rgba(255,255,255,.92), rgba(37,99,235,.055));
  border: 1px solid rgba(37, 99, 235, 0.12);
  pointer-events: none;
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-solutions-answer {
  border-left: 0;
  border-top: 4px solid var(--wps-solutions-accent);
  border-radius: 16px;
  background: #ffffff;
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-solutions-card {
  border-radius: 20px;
  border-color: rgba(37, 99, 235, 0.12);
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-solutions-grid.three .wps-solutions-card {
  border-top: 4px solid rgba(37, 99, 235, 0.50);
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-hscroll {
  border-radius: 20px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  background: var(--wps-solutions-table-bg);
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.065);
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-compare th,
:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-compare td {
  border-color: rgba(37, 99, 235, 0.10);
  background: var(--wps-solutions-table-bg);
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-compare thead th {
  background: var(--wps-solutions-table-bg);
  color: #172554 !important;
}

:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-compare.has-main th:nth-child(2),
:is(
  body.single-wps_comparison,
  body.post-type-wps_comparison,
  body.wps_comparison-template,
  body.wps_comparison-template-default,
  .wps-comparison-page
) .wps-compare.has-main td:nth-child(2) {
  background: #f5f3ff;
  box-shadow: inset 3px 0 0 rgba(124, 58, 237, 0.42);
}

@media (max-width: 900px) {
  :is(body.single-wps_comparison, body.post-type-wps_comparison, body.wps_comparison-template, body.wps_comparison-template-default, .wps-comparison-page) .wps-solutions-section.hero::after {
    opacity: 0.45;
    width: 96px;
    font-size: 3rem;
  }
}

@media (max-width: 767px) {
  :is(body.single-wps_comparison, body.post-type-wps_comparison, body.wps_comparison-template, body.wps_comparison-template-default, .wps-comparison-page) .wps-solutions-section.hero {
    width: 100%;
    margin-top: 24px !important;
    padding: 20px;
    border-radius: 22px;
  }

  :is(body.single-wps_comparison, body.post-type-wps_comparison, body.wps_comparison-template, body.wps_comparison-template-default, .wps-comparison-page) .wps-solutions-section.hero h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }
}

@supports not (overflow: clip) {
  .wps-comparison-page,
  body.single-wps_comparison {
    overflow-x: hidden;
  }
}