/* ==========================================================================
   Mobile Page Header V1 — shared inner-page hero rhythm (mobile only)
   Header → divider → breadcrumb → eyebrow → H1 → description
   Breakpoint: max-width 768px (desktop unchanged)
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --mph-gutter-x: 15px;
    --mph-header-pad-y: 15px;
    --mph-header-logo-h: 100px;
    --mph-header-rule: 2px;
    --mph-header-block-h: calc(
      (var(--mph-header-pad-y) * 2) + var(--mph-header-logo-h) + var(--mph-header-rule)
    );
    --mph-gap-after-divider: 16px;
    --mph-gap-after-breadcrumb: 28px;
    --mph-gap-after-eyebrow: 12px;
    --mph-gap-after-title: 22px;
    --mph-hero-offset-top: calc(var(--mph-header-block-h) + var(--mph-gap-after-divider));
  }

  /* ------------------------------------------------------------------------
     Task 4 — site header block (divider owns its row under the logo bar)
     ------------------------------------------------------------------------ */

  .header__area.plr-100 {
    padding-left: var(--mph-gutter-x);
    padding-right: var(--mph-gutter-x);
  }

  .header__inner {
    padding-top: var(--mph-header-pad-y);
    padding-bottom: var(--mph-header-pad-y);
    border-bottom-width: var(--mph-header-rule);
    border-bottom-style: solid;
  }

  .header__logo {
    height: var(--mph-header-logo-h);
  }

  .header__others {
    gap: 20px;
  }

  .header__offcanvas .menu_icon {
    flex-shrink: 0;
  }

  /* ------------------------------------------------------------------------
     Task 1 — unified breadcrumb row (never overlaps header rule)
     ------------------------------------------------------------------------ */

  .about-page-breadcrumb__nav,
  .range-hero__breadcrumb,
  .contact-page-v2__breadcrumb,
  .kc-breadcrumb,
  .legal-breadcrumb-v2,
  .article-breadcrumb-v2,
  .pdp-hero__breadcrumb,
  .industry-breadcrumb,
  .app-breadcrumb {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 0 var(--mph-gap-after-breadcrumb);
    padding: 0;
  }

  .about-page-breadcrumb__list,
  .range-hero__breadcrumb-list,
  .contact-page-v2__breadcrumb-list,
  .kc-breadcrumb__list,
  .legal-breadcrumb-v2__list,
  .article-breadcrumb-v2__list,
  .pdp-hero__breadcrumb-list,
  .industry-breadcrumb__list,
  .app-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-body-s);
    line-height: 1.5;
    text-align: left;
  }

  .about-page-breadcrumb__item,
  .range-hero__breadcrumb-item,
  .contact-page-v2__breadcrumb-item,
  .kc-breadcrumb__item,
  .legal-breadcrumb-v2__item,
  .article-breadcrumb-v2__item,
  .pdp-hero__breadcrumb-item,
  .industry-breadcrumb__item,
  .app-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
  }

  .about-page-breadcrumb__link,
  .range-hero__breadcrumb-link,
  .contact-page-v2__breadcrumb-link,
  .kc-breadcrumb__link,
  .legal-breadcrumb-v2 a,
  .article-breadcrumb-v2__link,
  .pdp-hero__breadcrumb-link,
  .industry-breadcrumb__link,
  .app-breadcrumb__link {
    color: #174b71;
    text-decoration: none;
  }

  .about-page-breadcrumb__current,
  .range-hero__breadcrumb-current,
  .contact-page-v2__breadcrumb-item span[aria-current="page"],
  .kc-breadcrumb__current,
  .legal-breadcrumb-v2__current,
  .article-breadcrumb-v2__current,
  .pdp-hero__breadcrumb-current,
  .industry-breadcrumb__current,
  .app-breadcrumb__item span[aria-current="page"] {
    color: var(--color-text-muted);
    font-weight: 500;
  }

  /* ------------------------------------------------------------------------
     Task 2 & 3 — hero shell offset + vertical rhythm
     ------------------------------------------------------------------------ */

  .hero-v2,
  .about-page-hero,
  .range-hero,
  .contact-page-v2,
  .kc-hero,
  .legal-hero-v2,
  .article-hero-v2,
  .pdp-hero,
  .industry-hero,
  .app-hero {
    padding-top: var(--mph-hero-offset-top);
    padding-left: var(--mph-gutter-x);
    padding-right: var(--mph-gutter-x);
  }

  /* Homepage — no breadcrumb row; preserve divider → eyebrow gap */
  .hero-v2__eyebrow {
    margin-top: var(--mph-gap-after-breadcrumb);
    margin-bottom: var(--mph-gap-after-eyebrow);
  }

  .about-page-hero__eyebrow,
  .range-hero__eyebrow,
  .contact-page-v2__eyebrow,
  .kc-hero__eyebrow,
  .legal-hero-v2__eyebrow,
  .article-hero-v2__category,
  .pdp-hero__eyebrow,
  .industry-hero__content > .industry-eyebrow:first-child,
  .app-hero__content > .app-eyebrow:first-child {
    margin-top: 0;
    margin-bottom: var(--mph-gap-after-eyebrow);
  }

  .hero-v2__title,
  .about-page-hero__title,
  .range-hero__title,
  .contact-page-v2__title,
  .kc-hero__title,
  .legal-hero-v2__title,
  .article-hero-v2__title,
  .pdp-hero__title,
  .industry-hero__title,
  .app-hero__title {
    margin-bottom: var(--mph-gap-after-title);
  }

  .hero-v2__deck,
  .about-page-hero__intro,
  .range-hero__intro,
  .contact-page-v2__copy:first-of-type,
  .kc-hero__copy,
  .legal-hero-v2__intro,
  .article-hero-v2__subtitle,
  .pdp-hero__intro,
  .industry-hero__copy,
  .app-hero__copy {
    margin-top: 0;
  }
}