/* ============================================================
   Unified hero treatment
   Loaded after template-specific styles so every hero follows the
   MDP reference rhythm without changing content-driven mobile flow.
============================================================ */

body.fs-inner-page #main-content > section:first-of-type:is(
  .hero-bg,
  .fs-content-blog-hero,
  .fs-content-contact-hero
) {
  min-height: 42rem !important;
  padding-block: 5rem 4rem !important;
}

body.fs-inner-page #main-content > section:first-of-type:is(
  .hero-bg,
  .fs-content-blog-hero,
  .fs-content-contact-hero
) :is(h1, h2, h3) :is(.fs-hero-highlight, .text-yellow-300) {
  color: #fff !important;
}

body.fs-inner-page #main-content > section:first-of-type:is(
  .hero-bg,
  .fs-content-blog-hero,
  .fs-content-contact-hero
) nav[aria-label="breadcrumb"] {
  display: none !important;
}

body.home #main-content > section:first-of-type {
  min-height: 42rem !important;
}

body.home #main-content > section:first-of-type h1 :is(.text-yellow-300, [style*="#FDE047"]) {
  color: #fff !important;
}

/* Customer Segment uses a square visual; keep the copy at the same top
 * rhythm as MDP instead of vertically centering it against that image. */
@media (min-width: 768px) {
  /* Match the homepage hero typography across every inner-page hero. */
  body.fs-inner-page #main-content > section:first-of-type h1 {
    font-size: 3.6rem !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
  }

  body.fs-inner-page #main-content > section:first-of-type p {
    font-size: 1rem !important;
    line-height: 1.625 !important;
  }

  /* Strip template-specific inner padding so the section's 5rem top
   * spacing is the single source of truth, matching the homepage gap. */
  body.fs-inner-page #main-content > section:first-of-type:is(
    .hero-bg,
    .fs-content-blog-hero,
    .fs-content-contact-hero
  ) {
    padding-block: 5rem 4rem !important;
  }

  body.fs-template-about #main-content > .fs-about-hero:first-of-type {
    min-height: 42rem !important;
    padding-block: 5rem 4rem !important;
  }

  body.fs-template-about .fs-about-hero__layout,
  body.fs-template-blog #main-content > .fs-content-blog-hero:first-of-type > .relative,
  body.fs-template-contact #main-content > .fs-content-contact-hero:first-of-type > .relative {
    min-height: 0 !important;
    padding-block: 0 !important;
  }

  body.fs-template-products .fs-products-hero__layout,
  body.fs-template-about .fs-about-hero__layout {
    align-items: start;
  }

  body.fs-template-customer-segment .fs-market-hero {
    align-items: stretch;
    padding-block: 5rem 4rem !important;
  }

  body.fs-template-customer-segment .fs-market-hero__layout {
    align-items: center;
  }

  body.fs-template-customer-segment .fs-market-hero__copy h1 .block {
    white-space: normal;
    overflow-wrap: normal;
  }

  /* OrderAgent has a more specific template rule that previously reduced
   * the hero to 3.2rem padding. Keep it on the same 5rem homepage rhythm. */
  body.fs-inner-marketing.fs-template-technology-order-agent
    #main-content > section.fs-order-agent-hero.hero-bg:first-of-type {
    min-height: 42rem !important;
    padding-block: 5rem 4rem !important;
  }

  body.fs-inner-page #main-content > section:first-of-type .eyebrow {
    display: block;
  }

  /* Some technology heroes use the shared section-label component instead
   * of .eyebrow. Align its visible glyph box with the homepage baseline
   * without changing the heading's flow position. */
  body.fs-inner-page #main-content > section:first-of-type .fs-section-label.inline-block {
    position: relative;
    top: -6px;
  }
}

@media (min-width: 1280px) {
  body.fs-template-customer-segment .fs-market-hero__layout {
    grid-template-columns: minmax(38rem, 1.1fr) minmax(28rem, .9fr);
    gap: clamp(2.5rem, 4vw, 4rem);
  }

  body.fs-template-customer-segment .fs-market-hero__copy h1 {
    max-width: 100%;
    font-size: clamp(3.25rem, 5vw, 4.75rem) !important;
  }

  body.fs-template-customer-segment .fs-market-hero__copy h1 .block {
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}

/* OrderAgent used a centered grid, which pushed the copy down inside the
 * shared hero height. Align it to the same top rhythm as the MDP layout. */
@media (min-width: 768px) {
  body.fs-template-technology-order-agent .fs-order-agent-hero__layout {
    align-items: start;
  }

  body.fs-template-technology-order-agent .fs-order-agent-hero__layout > div:first-child {
    padding-top: 0 !important;
  }
}

@media (max-width: 767px) {
  body.fs-inner-page #main-content > section:first-of-type:is(
    .hero-bg,
    .fs-content-blog-hero,
    .fs-content-contact-hero
  ) {
    min-height: 0 !important;
    padding-block: 4.75rem 3rem !important;
  }

  body.home #main-content > section:first-of-type {
    min-height: 0 !important;
  }

  body.fs-template-technology-order-agent .fs-order-agent-hero__layout > div:first-child {
    padding-top: 0;
    min-width: 0;
    max-width: 100%;
  }

  body.fs-template-technology-order-agent .fs-order-agent-hero__layout {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  body.fs-template-technology-order-agent .fs-order-agent-hero__layout > * {
    min-width: 0;
    max-width: 100%;
  }

  body.fs-template-technology-order-agent .fs-order-agent-hero__layout p {
    overflow-wrap: anywhere;
  }
}