/*
 * Responsive corrections.
 *
 * Loaded after landing.css so it can close gaps the design system left open.
 * Each rule below fixes a measured problem at a 390px viewport; the comments
 * record what broke, so these can be folded back into the design system later.
 */

/* -------------------------------------------------------------------------
 * Grid children must be allowed to shrink
 *
 * A grid track declared as 1fr resolves to minmax(auto, 1fr), so its width can
 * never drop below the content's min-content width. One non-wrapping element
 * (a timeline duration, a breadcrumb trail) was therefore pushing whole
 * sections past the viewport and making the page scroll sideways.
 * ------------------------------------------------------------------------- */

.content-grid > *,
.page-hero__split > *,
.page-hero__inner > *,
.hero__inner > *,
.security__inner > *,
.multilingual__inner > *,
.footer__top > *,
.footer__cols > * {
  min-width: 0;
}

/* -------------------------------------------------------------------------
 * Breadcrumbs
 *
 * Long page titles made the trail wider than the screen. Let it wrap.
 * ------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .breadcrumb {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .breadcrumb__current {
    white-space: normal;
  }
}

/* -------------------------------------------------------------------------
 * Vertical timeline (werkwijze)
 *
 * The step header put the title and the duration on one line, and the duration
 * was set to never wrap. On a phone that combination decided the page width.
 * ------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .vtl__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .vtl__duration {
    white-space: normal;
  }

  .vtl__bullets {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
 * Form progress strip (aanvraag)
 *
 * Three steps side by side cut off the last label below ~420px. Stacking keeps
 * every step legible.
 * ------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .form-progress {
    flex-wrap: wrap;
  }

  .form-progress__step {
    flex: 1 1 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }

  .form-progress__step:last-child {
    border-bottom: 0;
  }
}

/* -------------------------------------------------------------------------
 * Hero and contact actions
 *
 * landing.css stacks .hero__ctas on small screens but not the page-hero or
 * call-to-action variants, so those still tried to sit side by side.
 * ------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .page-hero__ctas,
  .cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-hero__stats {
    grid-template-columns: 1fr;
  }

  .map-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .map-meta__link {
    width: 100%;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
 * Hero headings
 *
 * Dutch compounds such as "belangenbehartigers" are wider than a phone screen
 * at heading size. Breaking is allowed only for words that genuinely do not
 * fit, so normal headings keep their intended line breaks.
 * ------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .hero__title,
  .page-hero__title,
  .hero__title-accent,
  .page-hero__title-accent,
  .cta__title,
  .section-title {
    overflow-wrap: break-word;
  }
}

/* -------------------------------------------------------------------------
 * Long words and links
 *
 * Email addresses and legal references in prose could not break, which reopened
 * the same sideways-scroll problem on the policy pages.
 * ------------------------------------------------------------------------- */

.prose,
.vtl__lead,
.aside-meta__item-val,
.map-meta__address {
  overflow-wrap: break-word;
}

.prose a {
  overflow-wrap: anywhere;
}

/* Images never exceed their column. */
.editorial-image img,
.prose img {
  max-width: 100%;
  height: auto;
}