/* Small-screen safety net on top of the original design.
   These rules only change anything where content used to be wider than the
   screen; on layouts that already fit they are no-ops. */

/* Flex children default to min-width:auto and refuse to shrink below their
   content, which pushed page heroes and the contact block off narrow phones. */
.hero-content,
.hero-container,
.cc-container,
.cc-container > *,
.cc-info-grid > *,
.featured-post > *,
.split-layout > *,
.concur-col-text,
.concur-col-image {
  min-width: 0;
}

/* Contact page: fixed 320px cards and 300px minimum columns on a 320px phone.
   Two-class selectors so they beat the page's own single-class rules. */
.cc-info-grid > .cc-info-card {
  max-width: 100%;
}
.cc-flex-row > .cc-form-col,
.cc-flex-row > .cc-map-col {
  min-width: min(300px, 100%);
}

/* Contact hero: breadcrumb, title and intro sit in one row, which on a phone
   squeezes the title into a column one letter wide. Stack them instead. */
@media (max-width: 768px) {
  .cc-contact-hero .cc-container {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .cc-contact-hero .cc-breadcrumbs {
    margin-bottom: 10px;
  }
}

/* Headings whose longest word is wider than the screen are scaled down by
   responsive-fixes.js (never broken mid-word). */