/* Shared responsive corrections, loaded after the component styles. */
:where(h1, h2, h3, p, li, summary, .text-link) {
  overflow-wrap: anywhere;
  hyphens: manual;
}
:where(h1, h2, h3) {
  hyphens: auto;
  hyphenate-limit-chars: 12 5 4;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 4;
}
.hero h1 { hyphens: manual; }
body { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.subhero h1 { overflow-wrap: anywhere; }
:where(.hero, .split, .elements-layout, .local-intro, .local-faq,
  .region-section, .consultation-expectations, .local-consultation-grid,
  .center-grid, .center-contact, .booking-detail, .journal-grid, .team-grid,
  .footer-main, .footer-brand, .legal-grid, .legal-smallprint, .maps-grid,
  .direct-contact-grid, .success-intro, .featured-success, .phases) > * {
  min-width: 0;
}
.button { max-width: 100%; white-space: normal; text-align: center; }
.element summary > span:not(.element-number) { min-width: 0; flex: 1; }
.element-number { display: flex; flex: 0 0 auto; }
.element summary i, .faq-list summary i {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  line-height: 1;
  margin: 0 7px 0 0;
}
.faq-list summary > span { min-width: 0; }
.cookie-heading > div, .cookie-option > span { min-width: 0; }
.cookie-close { width: 44px; height: 44px; }
.cookie-panel { scrollbar-gutter: stable; }
.menu-toggle, .nav-trigger, .desktop-nav > .nav-link { min-height: 44px; }
.mobile-nav-item > span { min-width: 0; }
.anchor-nav { scroll-padding-inline: 5px; }
.anchor-nav a { min-height: 44px; }
.journal-controls, .filters { flex-wrap: wrap; }
.search-label { min-width: 0; max-width: 100%; }
.search-label input { max-width: 100%; font-size: 16px; }
:where(a, button, summary, input):focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: 4px;
}

/* Keep the image and its close control inside even a short landscape screen. */
#lightbox {
  width: max-content;
  max-width: min(1000px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 52px 6px 6px;
  overflow: auto;
}
#lightbox > img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(964px, calc(100vw - 36px));
  max-height: calc(100dvh - 82px);
  margin-inline: auto;
}
.lightbox-close { top: 0; right: 0; width: 44px; height: 44px; }

@media (max-width: 940px) {
  .mobile-nav {
    max-height: var(--mobile-nav-height, calc(100dvh - 145px));
    overscroll-behavior: contain;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .mobile-menu-cta .button { width: 100%; }
  .footer-navigation > a, .footer-contact, .footer-location-cta,
  .footer-cookie-settings, .footer-bottom a { min-height: 44px; }
  .footer-contact, .footer-location-cta { align-items: center; }
  .footer-bottom a, .footer-cookie-settings { display: inline-flex; align-items: center; }
}

@media (min-width: 651px) and (max-width: 940px) {
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 651px) and (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: auto; padding-bottom: 65px; }
  .hero h1 { font-size: 42px; }
  .hero-copy > p:not(.eyebrow) { max-width: 100%; }
  .hero-actions { gap: 16px; }
  .hero-visual { width: calc(100% - 14px); height: 400px; margin-inline: 0; }
}

/* Below this width two embedded Instagram players become too narrow. */
@media (max-width: 760px) {
  .interview-grid-2, .interview-grid-3 { grid-template-columns: minmax(0, 1fr); max-width: 450px; }
  .inline-video-placeholder { min-height: 350px; }
}

@media (max-width: 650px) {
  body { padding-bottom: calc(79px + env(safe-area-inset-bottom)); }
  body.hide-mobile-cta { padding-bottom: 0; }
  .topbar { padding: 0; }
  .copy h2, .section-heading h2, .local-intro h2, .local-faq h2 {
    font-size: clamp(29px, 8vw, 35px);
  }
  .article-header h1 { font-size: clamp(30px, 8.2vw, 36px); }
  .element-content { padding-right: 0; }
  .gallery-strip button { max-width: 100%; }
  .footer-brand { grid-template-columns: minmax(85px, 110px) minmax(0, 1fr); gap: 15px 18px; }
  .footer-brand > a { max-width: 100%; }
  .footer-navigation { gap: 4px 12px; }
  .footer-navigation > a { font-size: 11px; }
  .footer-bottom { font-size: 10px; }
  .footer-bottom > div { gap: 8px 18px; }
  .filters button { min-height: 44px; font-size: 12px; }
  .search-label input { min-height: 48px; font-size: 16px; }
  .cookie-panel {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
  }
  .cookie-heading { gap: 9px; }
  .cookie-heading h2 { font-size: clamp(20px, 6vw, 24px); }
}

@media (max-width: 940px) and (max-height: 500px) {
  .nav-shell { min-height: 70px; }
  .brand img { height: 60px; }
  .mobile-nav { padding-top: 14px; }
  .mobile-nav-item { padding-block: 10px; }
}