21. WERKWIJZE / METHODOLOGY PAGE
   ========================================================= */


/* =========================================================
   21A. SHARED DESKTOP ALIGNMENT
   ========================================================= */

.veralisio-page-header,
.veralisio-content-section,
.veralisio-assessment-section,
.veralisio-ai-section,
.veralisio-methodology-footer {
  width: 100%;
  max-width: 1200px;

  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;
}


/* Desktop alignment correction */

@media (min-width: 1025px) {

  .veralisio-page-header,
  .veralisio-content-section,
  .veralisio-assessment-section,
  .veralisio-ai-section,
  .veralisio-methodology-footer {
    transform: translateX(-24px);
  }

}


/* =========================================================
   21B. PAGE HEADER
   ========================================================= */

.veralisio-page-header {
  margin-top: 0;
  margin-bottom: 56px;

  padding-top: 58px;
  padding-bottom: 0;
}

.veralisio-page-header .veralisio-page-label {
  display: block;

  margin: 0 0 22px;

  color: #5946A8;

  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.veralisio-page-header h1 {
  max-width: 880px;

  margin: 0 0 26px;

  color: #30275F;

  font-size: clamp(2.8rem, 4.2vw, 4.3rem);
  font-weight: 700;
  line-height: 1.08;
}

.veralisio-page-lead {
  max-width: 850px;

  margin: 0;

  color: #24212D;

  font-size: 1.25rem;
  line-height: 1.75;
}


/* =========================================================
   21C. NORMAL CONTENT SECTIONS
   ========================================================= */

.veralisio-content-section {
  margin-top: 0;
  margin-bottom: 56px;

  padding-top: 0;
  padding-bottom: 0;
}

.veralisio-section-label {
  display: block;

  margin: 0 0 20px;

  color: #5946A8;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
}

.veralisio-content-section h2 {
  max-width: 880px;

  margin: 0 0 22px;

  color: #30275F;

  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
}

.veralisio-content-section p {
  max-width: 880px;

  margin: 0 0 18px;

  color: #24212D;

  font-size: 1.1rem;
  line-height: 1.75;
}

.veralisio-content-section p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   21D. CALLOUT
   ========================================================= */

.veralisio-method-callout {
  max-width: 880px;

  margin-top: 26px;
  padding: 22px 26px;

  color: #24212D;
  background-color: #F5F3FA;

  border-left: 4px solid #5946A8;
  border-radius: 0 10px 10px 0;

  line-height: 1.65;

  box-sizing: border-box;
}

.veralisio-method-callout strong {
  font-weight: 700;
  color: #24212D;
}


/* =========================================================
   21E. ASSESSMENT SECTION
   ========================================================= */

.veralisio-assessment-section {
  margin-top: 0;
  margin-bottom: 56px;

  padding: 0;
}

.veralisio-assessment-section > .veralisio-section-label,
.veralisio-assessment-section > h2,
.veralisio-assessment-section > p {
  max-width: 880px;
}

.veralisio-assessment-section > h2 {
  margin: 0 0 22px;

  color: #30275F;

  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
}

.veralisio-assessment-section > p {
  margin: 0 0 18px;

  color: #24212D;

  font-size: 1.1rem;
  line-height: 1.75;
}


/* =========================================================
   21F. RATING GRID
   ========================================================= */

.veralisio-rating-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 20px;

  width: 100%;

  margin: 30px 0;
}

.veralisio-rating-card {
  padding: 24px;

  background-color: #FFFFFF;

  border: 1px solid rgba(48, 39, 95, 0.12);
  border-radius: 14px;

  box-sizing: border-box;
}

.veralisio-rating-heading {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 14px;
}

.veralisio-rating-heading h3 {
  margin: 0;

  color: #24212D;

  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.veralisio-rating-card p {
  margin: 0;

  color: #24212D;

  font-size: 0.98rem;
  line-height: 1.6;
}


/* Rating dots */

.veralisio-rating-card .veralisio-rating-dot {
  width: 11px;
  height: 11px;

  flex: 0 0 11px;

  border-radius: 50%;
}

.veralisio-rating-card-green .veralisio-rating-dot {
  background-color: #4F9465;
}

.veralisio-rating-card-orange .veralisio-rating-dot {
  background-color: #D99A45;
}

.veralisio-rating-card-red .veralisio-rating-dot {
  background-color: #C75D5D;
}


/* Assessment callout */

.veralisio-assessment-section .veralisio-method-callout {
  width: 100%;
  max-width: none;
}


/* =========================================================
   21G. AI SECTION
   ========================================================= */

.veralisio-ai-section {
  margin-top: 0;
  margin-bottom: 56px;

  padding: 38px 42px;

  background-color: #F5F3FA;

  border-radius: 14px;
}

.veralisio-ai-section > * {
  max-width: 880px;
}

.veralisio-ai-section .veralisio-section-label {
  margin-bottom: 20px;
}

.veralisio-ai-section h2 {
  margin: 0 0 22px;

  color: #30275F;

  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
}

.veralisio-ai-section p {
  margin: 0 0 18px;

  color: #24212D;

  font-size: 1.1rem;
  line-height: 1.75;
}

.veralisio-ai-section p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   21H. METHODOLOGY FOOTER
   ========================================================= */

.veralisio-methodology-footer {
  margin-top: 0;
  margin-bottom: 72px;

  padding: 42px;

  background-color: #F5F3FA;

  border-radius: 14px;
}

.veralisio-methodology-footer h2 {
  max-width: 880px;

  margin: 0 0 22px;

  color: #30275F;

  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
}

.veralisio-methodology-footer p {
  max-width: 880px;

  margin: 0 0 18px;

  color: #24212D;

  font-size: 1.1rem;
  line-height: 1.75;
}

.veralisio-methodology-footer p:last-of-type {
  margin-bottom: 0;
}


/* Slogan */

.veralisio-methodology-footer .veralisio-intro-slogan {
  display: block;

  max-width: 880px;

  margin-top: 28px !important;
  margin-bottom: 0 !important;

  color: #5946A8;
}

.veralisio-methodology-footer .veralisio-intro-slogan strong {
  display: block;

  margin: 0 0 2px;

  color: #5946A8;

  font-weight: 700;
}

.veralisio-methodology-footer .veralisio-intro-slogan span {
  display: block;

  margin: 0;

  color: #5946A8;

  font-family: "Nunito", sans-serif;
  font-style: italic;
  font-weight: 600;
}


/* =========================================================
   21I. WORDPRESS / WPOPTIMAL CLEAN-UP
   ========================================================= */

.custom-html > p:empty {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

.wpo-row-container:has(.veralisio-page-header) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.wpo-row-container:has(.veralisio-page-header) .wpo-row,
.wpo-row-container:has(.veralisio-page-header) .wpo-column,
.wpo-row-container:has(.veralisio-page-header) .custom-html {
  min-height: 0 !important;
  height: auto !important;

  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   21J. TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  .veralisio-page-header,
  .veralisio-content-section,
  .veralisio-assessment-section,
  .veralisio-ai-section,
  .veralisio-methodology-footer {
    width: calc(100% - 48px);
    max-width: none;

    transform: none;
  }

}


/* =========================================================
   21K. MOBILE
   ========================================================= */

@media (max-width: 767px) {

  /*
     Normale contentsecties volgen de bestaande WPOptimal
     buitenruimte. Geen extra margin-left toevoegen.
  */

  .veralisio-page-header,
  .veralisio-content-section,
  .veralisio-assessment-section {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    transform: none;

    box-sizing: border-box;
  }


  /* Header */

  .veralisio-page-header {
    margin-bottom: 42px;

    padding-top: 32px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  .veralisio-page-header .veralisio-page-label {
    margin-bottom: 16px;

    font-size: 0.78rem;
  }

  .veralisio-page-header h1 {
    margin-bottom: 20px;

    font-size: 2.25rem;
    line-height: 1.12;
  }

  .veralisio-page-lead {
    max-width: none;

    font-size: 1.05rem;
    line-height: 1.65;
  }


  /* Normal sections */

  .veralisio-content-section {
    margin-bottom: 44px;

    padding: 0;
  }

  .veralisio-section-label {
    margin-bottom: 16px;

    font-size: 0.9rem;
  }

  .veralisio-content-section h2,
  .veralisio-assessment-section h2 {
    margin-bottom: 18px;

    font-size: 1.65rem;
    line-height: 1.25;
  }

  .veralisio-content-section p,
  .veralisio-assessment-section > p {
    margin-bottom: 16px;

    font-size: 1rem;
    line-height: 1.65;
  }


  /* Callout */

  .veralisio-method-callout {
    margin-top: 22px;

    padding: 18px 20px;
  }


  /* Assessment */

  .veralisio-assessment-section {
    margin-bottom: 44px;

    padding: 0;
  }

  .veralisio-rating-grid {
    grid-template-columns: 1fr;

    gap: 14px;

    margin: 24px 0;
  }

  .veralisio-rating-card {
    padding: 20px;
  }


  /* AI block */

  .veralisio-ai-section {
    width: calc(100% - 36px);
    max-width: none;

    margin-left: 18px;
    margin-right: 18px;
    margin-bottom: 44px;

    padding: 26px 22px;

    transform: none;

    border-radius: 14px;

    box-sizing: border-box;
  }

  .veralisio-ai-section h2 {
    margin-bottom: 18px;

    font-size: 1.65rem;
  }

  .veralisio-ai-section p {
    font-size: 1rem;
    line-height: 1.65;
  }


  /* Footer */

  .veralisio-methodology-footer {
    width: calc(100% - 36px);
    max-width: none;

    margin-left: 18px;
    margin-right: 18px;
    margin-bottom: 48px;

    padding: 28px 22px;

    transform: none;

    border-radius: 14px;

    box-sizing: border-box;
  }

  .veralisio-methodology-footer h2 {
    margin-bottom: 18px;

    font-size: 1.65rem;
  }

  .veralisio-methodology-footer p {
    font-size: 1rem;
    line-height: 1.65;
  }

  .veralisio-methodology-footer .veralisio-intro-slogan {
    margin-top: 24px !important;
  }

}


/* =========================================================
   21L. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .veralisio-page-header h1 {
    font-size: 2rem;
  }

  .veralisio-content-section h2,
  .veralisio-assessment-section h2,
  .veralisio-ai-section h2,
  .veralisio-methodology-footer h2 {
    font-size: 1.5rem;
  }

}

/* =========================================================