/* Dialog Group website concept v24
   Premium editorial card refinement.

   This layer removes the visual space that was reserved for decorative
   numeric badges, makes card titles the primary hierarchy and standardises
   internal rhythm. Existing colours, typography, radii, shadows and overall
   component dimensions remain unchanged.
*/

:root {
  --editorial-card-title-gap: 0.9rem;
  --editorial-card-copy-gap: 1.5rem;
  --editorial-card-label-gap: 1rem;
  --editorial-card-footer-gap: 1.25rem;
}

/* Fallback for pages regenerated from an older template. In the current v24
   HTML these elements have been removed completely. */
main :is(
  .check-question-number,
  .content-index,
  .delivery-number,
  .detail-capability-index,
  .insight-category-count,
  .insight-category-number,
  .signal-number,
  .solution-family-number,
  .solution-index,
  .step-number
) {
  display: none !important;
}

/* Equal card tracks within every content-card component. */
main :is(
  .signal-grid,
  .delivery-grid,
  .solution-family-grid,
  .roadmap,
  .roadmap-steps,
  .value-cards,
  .capability-grid,
  .definition-facts,
  .measure-grid,
  .measure-list,
  .related-grid,
  .content-card-grid,
  .insight-category-grid,
  .insight-point-grid,
  .article-point-grid,
  .article-step-list,
  .contact-process-grid,
  .fit-grid,
  .case-grid,
  .vacancy-grid,
  .sector-overview-grid,
  .office-list
) {
  align-items: stretch;
  grid-auto-rows: minmax(0, 1fr);
}

main :is(
  .signal-card,
  .delivery-card,
  .solution-family-card,
  .roadmap-step,
  .value-cards > article,
  .value-card,
  .capability-card,
  .definition-fact,
  .measure-card,
  .measure-item,
  .insight-category-card,
  .content-card,
  .insight-point-card,
  .article-point-card,
  .article-step-list > li,
  .contact-process-card,
  .fit-grid > article,
  .related-card,
  .case-card,
  .vacancy-card,
  .sector-overview-card,
  .office-card
) {
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
}

/* Cards with a straightforward title-copy-action structure share one calm
   editorial flow. Their existing visual treatment stays intact. */
main :is(
  .signal-card,
  .delivery-card,
  .solution-family-card,
  .value-cards > article,
  .value-card,
  .capability-card,
  .definition-fact,
  .measure-card,
  .measure-item,
  .insight-point-card,
  .article-point-card,
  .contact-process-card,
  .fit-grid > article,
  .vacancy-card,
  .office-card
) {
  display: flex;
  flex-direction: column;
}

/* Titles occupy the space previously used by number badges. */
main :is(
  .signal-card,
  .delivery-card,
  .solution-family-card,
  .roadmap-step,
  .value-cards > article,
  .value-card,
  .capability-card,
  .definition-fact,
  .measure-card,
  .measure-item,
  .insight-point-card,
  .article-point-card,
  .contact-process-card,
  .fit-grid > article,
  .related-card,
  .content-card,
  .vacancy-card,
  .sector-overview-card,
  .office-card
) > :is(h2, h3, h4) {
  margin-top: 0 !important;
  margin-bottom: var(--editorial-card-title-gap) !important;
}

main :is(
  .signal-card,
  .delivery-card,
  .solution-family-card,
  .roadmap-step,
  .value-cards > article,
  .value-card,
  .capability-card,
  .definition-fact,
  .measure-card,
  .measure-item,
  .insight-point-card,
  .article-point-card,
  .contact-process-card,
  .fit-grid > article,
  .related-card,
  .content-card,
  .vacancy-card,
  .sector-overview-card,
  .office-card
) > p {
  margin-top: 0 !important;
}

main .signal-card {
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
}

main .delivery-card > p,
main .solution-family-card > p,
main .value-cards > article > p,
main .value-card > p,
main .capability-card > p,
main .definition-fact > p,
main .measure-card > p,
main .measure-item > p,
main .insight-point-card > p,
main .article-point-card > p,
main .contact-process-card > p,
main .fit-grid > article > p,
main .vacancy-card > p,
main .sector-overview-card > p {
  margin-bottom: var(--editorial-card-copy-gap) !important;
}

/* Process labels remain useful, but no longer share a row with a number. */
main .step-topline {
  justify-content: flex-start;
  margin-bottom: var(--editorial-card-label-gap);
}

main .step-label {
  width: auto;
}

main .roadmap-step > h3 {
  margin-bottom: var(--editorial-card-title-gap) !important;
}

/* Ordered article steps retain semantic list order while using the full card
   width after removal of the visible number. */
main .article-step-list > li {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

main .article-step-list > li h3 {
  margin-top: 0 !important;
  margin-bottom: var(--editorial-card-title-gap) !important;
}

/* Capability rows no longer reserve an empty index column. */
main :is(.detail-capability-item, .detail-capabilities-list > article) {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

main :is(.detail-capability-item, .detail-capabilities-list > article) h3 {
  margin-top: 0 !important;
  margin-bottom: var(--editorial-card-title-gap) !important;
}

/* Question text becomes the sole heading inside each check card. */
main .check-question legend {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: var(--editorial-card-title-gap);
}

main .check-question-text {
  padding-top: 0;
}

/* Category and article cards no longer reserve room for a corner index. */
main .content-card-top {
  justify-content: flex-start;
  margin-bottom: var(--editorial-card-label-gap);
}

main .content-card h3 {
  margin-top: 0 !important;
  margin-bottom: var(--editorial-card-title-gap) !important;
}

main .content-card > p {
  margin-bottom: var(--editorial-card-copy-gap) !important;
}

main .content-card-footer {
  margin-top: auto;
  padding-top: var(--editorial-card-footer-gap);
}

main .insight-category-card strong {
  margin-bottom: var(--editorial-card-title-gap);
}

main .insight-category-card .text-link,
main .related-card .text-link,
main .vacancy-card .text-link,
main .solution-family-card .text-link {
  margin-top: auto;
  padding-top: var(--editorial-card-footer-gap);
}

/* Sector cards previously used a large top margin to clear the number. */
main .sector-overview-card h3,
main .sector-overview-card h2 {
  margin-top: 0 !important;
}

/* Preserve the divider above the “Je krijgt…” result statement. */
main .delivery-output {
  display: block;
  margin-top: auto !important;
  padding-top: 1.15rem !important;
  border-top: 1px solid rgba(0, 39, 102, 0.13) !important;
}

/* Existing labels remain restrained and consistently separated from titles. */
main :is(.related-kicker, .content-type, .vacancy-card-top) {
  margin-bottom: var(--editorial-card-label-gap);
}

@media (max-width: 760px) {
  :root {
    --editorial-card-title-gap: 0.8rem;
    --editorial-card-copy-gap: 1.25rem;
    --editorial-card-footer-gap: 1.1rem;
  }
}

/* The interaction check follows the same title-led card system. */
main .check-question legend {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: 1.25rem;
}

main .check-question-text {
  padding-top: 0;
}

/* Question cards use equal tracks as well, including longer translated copy. */
main .check-form {
  grid-auto-rows: minmax(0, 1fr);
}

main .check-question {
  height: 100%;
  box-sizing: border-box;
}

/* Localised solution templates use these existing card families. They now
   inherit the same established card shell as the Dutch value and measure
   components instead of falling back to unstyled block content. */
main .capability-grid,
main .measure-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layout-card-gap, 1.25rem);
  align-items: stretch;
  grid-auto-rows: minmax(0, 1fr);
}

main .capability-card {
  min-height: 245px;
  padding: 2.25rem;
  border: 1px solid rgba(52, 104, 208, 0.12);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

main .measure-item {
  min-height: 310px;
  padding: clamp(1.8rem, 3.5vw, 2.5rem);
  border: 1px solid rgba(52, 104, 208, 0.13);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 1080px) {
  main .capability-grid,
  main .measure-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  main .capability-grid,
  main .measure-list {
    grid-template-columns: 1fr;
  }
}

/* The assessment always contains nine questions. Explicit equal tracks keep the
   question cards the same height even when one translated prompt wraps. */
main .check-form {
  grid-template-rows: repeat(9, minmax(0, 1fr));
}

/* Migration measurement uses a split editorial layout. The metric cards stack
   in the wider column so the copy keeps a readable measure. */
body.migration-page main .measure-grid {
  grid-template-columns: minmax(0, 0.82fr) minmax(28rem, 1.18fr);
  gap: var(--layout-grid-gap-wide, clamp(2.5rem, 5vw, 5rem));
  align-items: start;
}

body.migration-page main .measure-list {
  grid-template-columns: 1fr;
}

body.migration-page main .measure-item {
  min-height: 0;
}

@media (max-width: 1080px) {
  body.migration-page main .measure-grid {
    grid-template-columns: 1fr;
  }
}