/*
  Phase 8P: mobile breadcrumb/header clearance fix.

  Purpose:
  - Add a header-aware top clearance to interior breadcrumb heroes on phones.
  - Prevent the absolute mobile header logo/hamburger from feeling crowded against
    the breadcrumb title.
  - Preserve desktop layout and keep the change scoped to breadcrumb/page heroes.

  Load order:
  - This file must load after phase8o-mobile-visual-regression-fix.css.
*/

:root {
  --phase8p-breadcrumb-gap-phone: clamp(46px, 13vw, 58px);
  --phase8p-breadcrumb-gap-tablet: clamp(52px, 7vw, 68px);
}

/* The site header is absolute over breadcrumb heroes. On mobile, the previous
   breadcrumb top padding left only a small visual gap after the 70px header.
   Make the top padding explicitly header-aware instead of relying on a fixed
   legacy pt-160 override. */
@media (max-width: 767.98px) {
  .breadcrumb__area.pt-160,
  .breadcrumb__area.pt-95 {
    padding-top: calc(var(--phase8k-header-height-phone, 70px) + var(--phase8p-breadcrumb-gap-phone)) !important;
  }

  .breadcrumb__area.pb-160,
  .breadcrumb__area.pb-95 {
    padding-bottom: clamp(58px, 16vw, 72px) !important;
  }

  .breadcrumb__wrapper {
    max-width: min(100%, 760px);
    margin-inline: auto;
    text-align: center;
  }

  .breadcrumb__title {
    margin-inline: auto;
    max-width: 12em;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .breadcrumb__area.pt-160,
  .breadcrumb__area.pt-95 {
    padding-top: calc(var(--phase8k-header-height-tablet, 78px) + var(--phase8p-breadcrumb-gap-tablet)) !important;
  }
}

/* Extra narrow screens need a little more breathing room because the logo and
   hamburger consume more of the visible hero width. */
@media (max-width: 374.98px) {
  :root {
    --phase8p-breadcrumb-gap-phone: 50px;
  }

  .breadcrumb__title {
    max-width: 11em;
  }
}