/**
 * Mobile responsiveness fixes.
 *
 * Loaded last, after themes/hinterfund_v2/assets/css/hinterfund_v2.style*.css,
 * so these rules win on specificity ties. Everything is inside a max-width
 * media query, so desktop rendering is untouched.
 *
 * Goal: no page scrolls horizontally on a phone — document scrollWidth must
 * equal clientWidth, and nothing paints outside the viewport.
 */

@media (max-width: 991.98px) {

  /* ---------------------------------------------------------------------
   * 1. The "HINTERFUND BY HONEYCOMB CREDIT" wordmark in the hero.
   *
   * The theme sets `text-wrap-mode:nowrap` on it and then boxes it at
   * `width:146px; height:12.61px`. The box is `position:absolute` with
   * `overflow:visible`, so the box itself stayed in bounds but the text
   * painted out to ~452px — this is the run-off in the screenshot.
   * ------------------------------------------------------------------- */
  .homepage-b .homepage-content .homepage-title {
    white-space: normal;
    text-wrap-mode: wrap;
    width: auto;
    max-width: calc(100% - 72px);
    height: auto;
    overflow-wrap: break-word;
  }

  /* ---------------------------------------------------------------------
   * 2. The same wordmark in the footer, which appears on every page.
   *
   * Also `nowrap`, but in normal flow inside a `.col-6` (195px on a 390px
   * screen), so it rendered 415px wide. This is what actually pushed
   * document scrollWidth to 453px site-wide and let the whole page slide.
   * ------------------------------------------------------------------- */
  .page__footer .footer-title-b {
    flex: 0 0 100%;
    max-width: 100%;
    height: auto;
  }

  .page__footer .footer-title-b a {
    white-space: normal;
    text-wrap-mode: wrap;
    overflow-wrap: break-word;
  }

  /* ---------------------------------------------------------------------
   * 3. Flex and grid children default to `min-width:auto`, which refuses to
   * shrink below the intrinsic width of their content. A 500px-wide image
   * therefore held its column open at 500px (and the hero grid track at
   * 573px) regardless of the 390px viewport. `min-width:0` lets the track
   * collapse so the image's own `max-width:100%` can finally apply.
   * ------------------------------------------------------------------- */
  .hero-b {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-b > *,
  .hero-wrapper > *,
  .hero-info-b > *,
  .hero-desc-b > *,
  .grid-3 > *,
  .grid-2 > *,
  .grid-4 > *,
  .grid-wrapper > *,
  .row > [class*="col-"] {
    min-width: 0;
  }

  /* In a `flex-direction:column` container width is the *cross* axis, so
   * `min-width:0` buys nothing there — an `align-items:center` child sizes to
   * its content and never shrinks. These media wrappers hold a 500px image, so
   * they need an explicit cap to come back inside the column. */
  .page__content .d-flex > *,
  .page__content .image-item__f-image,
  .page__content .content-image__field-media-image,
  .page__content .media,
  .page__content figure,
  .page__content img {
    min-width: 0;
    max-width: 100%;
  }

  /* ---------------------------------------------------------------------
   * 4. Media never wider than the column that holds it. Scoped away from the
   * header/nav so the fixed-size brand logo and icons keep their dimensions.
   * ------------------------------------------------------------------- */
  .page__content img,
  .page__content video,
  .page__content iframe,
  .page__footer img,
  .page__content embed,
  .page__content object {
    max-width: 100%;
  }

  .page__content img:not([width]),
  .page__footer img:not([width]) {
    height: auto;
  }

  /* ---------------------------------------------------------------------
   * 5. Long unbroken strings (URLs, campaign slugs, email addresses) must
   * wrap rather than force their container wide.
   * ------------------------------------------------------------------- */
  .page__content p,
  .page__content li,
  .page__content h1,
  .page__content h2,
  .page__content h3,
  .page__content h4,
  .page__content h5,
  .page__content td,
  .page__content th,
  .page__content a {
    overflow-wrap: break-word;
  }

  /* Wide tables and pre blocks scroll inside themselves, not the page. */
  .page__content table,
  .page__content pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  /* ---------------------------------------------------------------------
   * 6. Rich-text campaign copy pasted from Google Docs / Word carries inline
   * `white-space:nowrap` and inline pixel widths on its spans. One such span
   * on a campaign page was 545px wide, which widened the layout viewport to
   * 600px and dragged the fixed header and nav out with it. Only elements
   * that actually carry an inline override are touched, and only inside
   * editorial fields — `!important` is required to beat a style attribute.
   * ------------------------------------------------------------------- */
  .page__content .field__text-long [style*="white-space"],
  .page__content .field--type-text-long [style*="white-space"],
  .page__content .field__item [style*="white-space"],
  .page__content [class*="long-description"] [style*="white-space"] {
    white-space: normal !important;
  }

  .page__content .field__text-long [style*="width"],
  .page__content .field--type-text-long [style*="width"],
  .page__content [class*="long-description"] [style*="width"] {
    max-width: 100% !important;
  }

  /* Embedded video wrappers ship an inline `min-width:300px`, which is wider
   * than the content column on a 320px phone once padding is subtracted. */
  .page__content [style*="min-width"] {
    min-width: 0 !important;
  }

  /* ---------------------------------------------------------------------
   * 7. Form controls. Text inputs fall back to their `size` attribute width
   * (~425px) when no width rule applies, which overflowed narrow columns.
   * ------------------------------------------------------------------- */
  .page input,
  .page select,
  .page textarea,
  .page .form-control {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ---------------------------------------------------------------------
   * 8. Buttons hold their label on one line by default. Long calls to action
   * ("Join the Hinter Fund Alumni Database") then run past the column, so let
   * them wrap on small screens instead.
   * ------------------------------------------------------------------- */
  .page__content .btn,
  .page__content .button-wrapper > a,
  .page__content .button-b a {
    white-space: normal;
    max-width: 100%;
  }
}

/**
 * Phone-only. Kept separate from the block above because the 576–991px
 * layout still uses the absolutely-positioned two-column hero, which these
 * rules would undo.
 */
@media (max-width: 575.98px) {

  /* ---------------------------------------------------------------------
   * 9. Home page hero: stack the wordmark, tagline and slider in normal flow.
   *
   * The theme absolutely positions the wordmark and the tagline at fixed
   * offsets (`top:125px` for the tagline) that only hold while the wordmark
   * is a single 12.61px-tall line. Now that it wraps to two lines to stay on
   * screen, those fixed offsets overlap. `.homepage-content` is already
   * `display:flex; flex-direction:column` here, so returning both children to
   * static lets the column stack them and the block sizes itself to whatever
   * the text actually needs — at any phone width.
   * ------------------------------------------------------------------- */
  .homepage-b .homepage-content .homepage-title {
    position: static;
    margin: 34.2px 36px 12px;
  }

  .homepage-b .homepage-content .homepage-desc {
    position: static;
    top: auto;
    margin: 0 36px;
    min-height: 0;
  }

  /* The 120px top margin existed only to clear the absolute elements above. */
  .homepage-b .homepage-content .homepage-slider {
    margin-top: 24px;
  }
}