/* French-only responsive accommodations. Existing NL, AR and EN output is untouched. */

/* French is an information language; consultations use NL, AR or EN. */
html[lang="fr-BE"] .fr-language-notice {
  margin-block: 16px 22px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 7%, white);
  font-size: .94rem;
  line-height: 1.6;
}

html[lang="fr-BE"] .fr-single-service-card {
  grid-template-columns: minmax(0, 1fr);
}

html[lang="fr-BE"] .footer-grid > * {
  min-width: 0;
}

html[lang="fr-BE"] .footer-grid > div:not(:first-child) a,
html[lang="fr-BE"] .footer .nowrap-link {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* A location may wrap, but a Belgian phone number must remain intact. */

html[lang="fr-BE"] body.pain-page main#main .page-hero h1 {
  white-space: normal !important;
}

html[lang="fr-BE"] main#main .page-hero h1,
html[lang="fr-BE"] .contact-hero h1,
html[lang="fr-BE"] .contact-hero p,
html[lang="fr-BE"] .home-hero .hero-title-sub {
  white-space: normal !important;
}

/* Match the NL homepage tablet portrait composition exactly. */
@media (min-width: 761px) and (max-width: 1199px) {
  html[lang="fr-BE"] .home-hero .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px !important;
  }
}

/* Keep the French desktop grid identical to NL while long French copy wraps. */
@media (min-width: 1200px) and (max-width: 1320px) {
  html[lang="fr-BE"] .home-hero .hero-grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr);
  }

  html[lang="fr-BE"] .home-hero .hero-copy {
    min-width: 0;
  }

  html[lang="fr-BE"] .home-hero .hero-facts-home {
    grid-template-columns: minmax(0, 1fr);
  }

  html[lang="fr-BE"] .home-hero .hero-facts-home > div,
  html[lang="fr-BE"] .home-hero .hero-facts-home > div > span {
    grid-column: 1 !important;
    min-width: 0;
    white-space: normal !important;
  }
}

@media (max-width: 1320px) {
  html[lang="fr-BE"] .site-header .main-nav,
  html[lang="fr-BE"] .site-header .header-actions > .btn {
    display: none;
  }

  html[lang="fr-BE"] .site-header .mobile-toggle {
    display: block;
  }

  html[lang="fr-BE"] .site-header .header-actions {
    margin-inline-start: auto;
  }

  html[lang="fr-BE"] .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[lang="fr-BE"] .baby-page .info-strip strong {
    white-space: normal !important;
  }
}

@media (min-width: 1321px) {
  html[lang="fr-BE"] .site-header .header-inner {
    gap: 10px;
  }

  html[lang="fr-BE"] .site-header .brand {
    min-width: 210px;
  }

  html[lang="fr-BE"] .site-header .main-nav {
    gap: 11px;
    font-size: .82rem;
  }

  html[lang="fr-BE"] .site-header .header-actions > .btn {
    min-width: 0;
    padding-inline: 12px;
    font-size: .82rem;
  }

  /* Give the French contact column enough room without changing the other languages. */
  html[lang="fr-BE"] .footer-grid {
    grid-template-columns:
      minmax(210px, 1.1fr)
      minmax(270px, 1.4fr)
      minmax(160px, .8fr)
      minmax(340px, 1.35fr) !important;
    gap: 22px !important;
  }

  html[lang="fr-BE"] .footer-grid > div:last-child > a {
    overflow-wrap: normal;
  }

  /* Keep each homepage fact naturally on one line when the desktop copy column fits it. */
  html[lang="fr-BE"] .home-hero .hero-facts-home {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px !important;
    width: 100%;
  }

  html[lang="fr-BE"] .home-hero .hero-facts-home > div,
  html[lang="fr-BE"] .home-hero .hero-facts-home > .full-line {
    grid-column: 1 !important;
    min-width: 0;
    width: 100%;
  }

}

@media (max-width: 1320px) {
  html[lang="fr-BE"] .desktop-single-line,
  html[lang="fr-BE"] .compact-single-line,
  html[lang="fr-BE"] .local-title-two-lines .title-line {
    white-space: normal !important;
  }

  html[lang="fr-BE"] .quick-facts,
  html[lang="fr-BE"] .hero-facts,
  html[lang="fr-BE"] .hero-facts-home,
  html[lang="fr-BE"] .about-intro .quick-facts {
    min-width: 0;
    max-width: 100%;
  }

  html[lang="fr-BE"] .quick-facts > div,
  html[lang="fr-BE"] .quick-facts span,
  html[lang="fr-BE"] .hero-facts > div,
  html[lang="fr-BE"] .hero-facts span,
  html[lang="fr-BE"] .hero-facts-home > div,
  html[lang="fr-BE"] .hero-facts-home span,
  html[lang="fr-BE"] .about-intro .quick-facts > div {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 760px) {
  html[lang="fr-BE"] .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[lang="fr-BE"] .home-hero .hero-title-sub,
  html[lang="fr-BE"] .page-hero h1,
  html[lang="fr-BE"] .content h2,
  html[lang="fr-BE"] .content h3 {
    overflow-wrap: anywhere;
  }
}

/* FR homepage only: let the long consultation fact reflow inside the tablet card. */
@media (min-width: 761px) and (max-width: 820px) {
  html[lang="fr-BE"] .home-hero .hero-facts-home {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  html[lang="fr-BE"] .home-hero .hero-facts-home > div,
  html[lang="fr-BE"] .home-hero .hero-facts-home > .full-line {
    grid-column: 1 !important;
    width: 100%;
  }

  html[lang="fr-BE"] .home-hero .hero-facts-home > div {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
  }
}

/* FR homepage only: keep the longer facts inside the shared NL desktop composition. */
@media (min-width: 1321px) and (max-width: 1473px) {
  html[lang="fr-BE"] .home-hero .hero-facts-home {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px !important;
    width: 100%;
  }

  html[lang="fr-BE"] .home-hero .hero-facts-home > div {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    min-width: 0;
  }

  html[lang="fr-BE"] .home-hero .hero-facts-home > div > span:not(.quick-check) {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: break-word;
  }
}

/* FR Kortenberg circumcision only: keep the full consultation label inside its schedule. */
@media (min-width: 761px) {
  html[lang="fr-BE"] body.fr-kortenberg-circumcision-page .local-panel .schedule.kortenberg-single .hours-row:last-child {
    display: grid;
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr) !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100%;
  }

  html[lang="fr-BE"] body.fr-kortenberg-circumcision-page .local-panel .schedule.kortenberg-single .hours-row:last-child > span,
  html[lang="fr-BE"] body.fr-kortenberg-circumcision-page .local-panel .schedule.kortenberg-single .hours-row:last-child > strong {
    min-width: 0;
    max-width: 100%;
  }

  html[lang="fr-BE"] body.fr-kortenberg-circumcision-page .local-panel .schedule.kortenberg-single .hours-row:last-child > strong {
    white-space: normal !important;
    overflow-wrap: break-word;
    text-align: end;
  }
}


/* FR-only: single-option care selector spans the full panel width (desktop + mobile) */
html[lang="fr-BE"] .care-dialog-grid{grid-template-columns:1fr}