/**
 * Solutions Pages (Oplossingen)
 *
 * Extra styles for solution/feature detail pages on top of integration-detail.css.
 * These pages reuse the .page--dark system from integration details.
 *
 * - /oplossingen/voorraadbeheer/
 * - /oplossingen/orderverwerking/
 * - /oplossingen/inkoop/
 * - /oplossingen/prestaties/
 * - /oplossingen/btwfacturen/
 * - /oplossingen/email/
 */

/* ==========================================================================
   SOLUTION HERO (replaces partner-hero for pages without a partner logo)
   ========================================================================== */

.page--dark .solution-hero {
  position: relative;
  overflow: hidden;
  background: #001c38;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 200px calc(50vw - 50%) 64px;
  margin-bottom: 40px;
}

.page--dark .solution-hero #iso-hero-canvas,
.page--dark .solution-hero #stock-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.page--dark .solution-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.page--dark .solution-hero__intro {
  color: rgba(204, 229, 255, 0.95);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Images inside content columns should never overflow */
.page--dark .page-layout__content img {
  max-width: 100%;
  height: auto;
}

.page--dark .solution-hero__subtitle {
  color: rgba(204, 229, 255, 0.8);
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  margin: 0 0 24px 0;
}

@media (max-width: 1023px) {
  .page--dark .solution-hero {
    padding: 32px 20px 40px;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: 24px;
  }

  .page--dark .solution-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ==========================================================================
   SECTION DIVIDERS (visual rhythm between H2 sections)
   ========================================================================== */

.page--dark .page-layout__content h2 {
  padding-top: 40px;
  border-top: 1px solid rgba(5, 56, 107, 0.6);
}

.page--dark .page-layout__content h2:first-of-type {
  padding-top: 0;
  border-top: none;
}

/* ==========================================================================
   QUOTE BLOCK (Testimonial — sidebar)
   ========================================================================== */

.page--dark .quote-block {
  background: #002345;
  border: 1px solid var(--blue-400, #05386B);
  border-radius: 20px;
  padding: 32px;
}

.page--dark .quote-block__text {
  color: rgba(204, 229, 255, 0.8);
  font-family: var(--font-family-primary, "Source Sans 3", sans-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.page--dark .quote-block__cite {
  color: rgba(204, 229, 255, 0.6);
  font-family: var(--font-family-primary, "Source Sans 3", sans-serif);
  font-size: 14px;
  font-style: normal;
  display: block;
}