/* Keep the grade-page navigation controls in flow as translated labels grow. */
@media (min-width: 1280px) {
  body:has(#main-content[data-grades-v2]) header.site-header .site-header__masthead {
    grid-template-columns: minmax(176px, 1fr) auto auto;
    column-gap: 24px;
  }
  body:has(#main-content[data-grades-v2]) header.site-header .site-header__utility--left {
    position: static;
    grid-column: 2;
    grid-row: 1;
  }
  body:has(#main-content[data-grades-v2]) header.site-header .site-header__utility--right {
    grid-column: 3;
  }
}

/* Allow the existing statistics row to contain long localized descriptions. */
@media (min-width: 721px) {
  html:is([lang="es"], [lang="pt"], [lang="de"]) .homepage-stability-proof article:nth-child(4) .homepage-stability-proof__content {
    grid-template-rows: minmax(clamp(104px, 8.5vw, 128px), max-content) auto 1fr;
  }
  html[lang="de"] .homepage-stability-proof article:nth-child(3) strong {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* The citation kit reuses the contact panel without the contact page's two columns. */
.contact-page__hero:has(> .contact-page__email[href$="/brand-citation-kit/"]) {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: clamp(24px, 4vw, 56px);
}
.contact-page__hero:has(> .contact-page__email[href$="/brand-citation-kit/"]) > :is(h1, p) {
  margin-block: 0;
}
.contact-page__hero:has(> .contact-page__email[href$="/brand-citation-kit/"]) > p {
  color: #dce4e8;
}
.contact-page__hero:has(> .contact-page__email[href$="/brand-citation-kit/"]) > .section-label {
  color: #a2c528;
}
.contact-page__hero:has(> .contact-page__email[href$="/brand-citation-kit/"]) > .contact-page__email {
  justify-self: start;
  max-width: 100%;
}

/* Let German compound words remain visible inside the existing hero card. */
html[lang="de"] .source-port-hero-card figcaption strong {
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Stack the mining introduction before its existing compact scene on phones. */
@media (max-width: 720px) {
  #approved-mining-mining-scene12[data-scene-labels="flow"] .title {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  #approved-mining-mining-scene12[data-scene-labels="flow"] .title .intro {
    max-width: none;
    margin-block: 0;
    padding-block: 0;
  }
}