/*
 * Shared mobile type and spacing system for service-page heroes.
 * Page-family styles continue to own artwork, colours and component styling.
 */
@media (max-width: 680px) {
  body {
    --service-mobile-cover-height: 292px;
    --service-mobile-gutter: 22px;
    --service-mobile-title-size: clamp(1.8rem, 8.8vw, 2.45rem);
    --service-mobile-summary-size: clamp(1.2rem, 5.35vw, 1.45rem);
  }

  .service-hero-heading {
    display: flex !important;
    width: 100%;
    min-height: var(--service-mobile-cover-height) !important;
    padding: 0 var(--service-mobile-gutter) !important;
    justify-content: center !important;
    flex-direction: column !important;
    transform: translateY(10px);
  }

  .service-hero-heading > p:first-child {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.18em !important;
    line-height: 1.55 !important;
  }

  .service-hero-heading h1 {
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: var(--service-mobile-title-size) !important;
    letter-spacing: -0.055em !important;
    line-height: 1.04 !important;
  }

  .service-hero-heading h1 :where(span, em, strong, b) {
    font-size: 1em !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
  }

  .service-hero-heading h1 :where(
    [class*="title-line"],
    .wp-title-accent,
    .wp-title-base
  ) {
    display: block;
    white-space: nowrap;
  }

  .service-hero-heading h1 :where(
    [class*="title-line"],
    .wp-title-accent,
    .wp-title-base
  ) + :where(
    [class*="title-line"],
    .wp-title-accent,
    .wp-title-base
  ) {
    margin-top: 4px !important;
  }

  .service-hero-details {
    margin-top: 42px !important;
    padding-top: 34px !important;
    padding-right: var(--service-mobile-gutter) !important;
    padding-bottom: 42px !important;
    padding-left: var(--service-mobile-gutter) !important;
  }

  .search-service-page .search-service-hero__inner,
  .search-service-page .search-service-hero__layout {
    column-gap: 0 !important;
    row-gap: 42px !important;
  }

  .search-service-page .service-hero-details {
    margin-top: 0 !important;
  }

  .service-hero-details > .service-hero-summary:first-child {
    margin: 0 !important;
    font-size: var(--service-mobile-summary-size) !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.52 !important;
  }

  .service-hero-details > p:nth-of-type(2) {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    font-size: 0.98rem !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: 1.75 !important;
  }

  .service-hero-details > :is(div, nav)[class*="action"],
  .service-hero-details > .wp-cta-wrap {
    margin-top: 28px !important;
  }

  .service-hero-details > :is(p, ul)[class*="note"],
  .service-hero-details > :is(p, ul)[class*="topic"] {
    margin-top: 27px !important;
  }

  /* Marketing pages already receive their horizontal gutter from the content shell. */
  .marketing-service-page .marketing-hero__copy {
    padding-top: 0 !important;
  }

  .marketing-service-page .service-hero-heading {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .marketing-service-page .service-hero-details {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }

  .marketing-service-page[data-marketing-service="aged-domain-acquisition"] .marketing-hero__actions {
    margin-top: 34px !important;
  }

  /* Company guides previously used a taller cover; all service covers now share 292px. */
  .registration-guide .us-editorial-hero::after,
  .registration-guide .us-editorial-hero-visual,
  .registration-guide .us-editorial-hero-heading {
    height: var(--service-mobile-cover-height) !important;
    min-height: var(--service-mobile-cover-height) !important;
  }

  .registration-guide .us-editorial-hero-copy {
    grid-template-rows: var(--service-mobile-cover-height) auto !important;
  }

  /* Decorative rules belong to the page family, but should not reopen title spacing. */
  .service-hero-heading > :is(.av-title-rule, [class*="title-rule"]) {
    margin-top: 18px !important;
  }
}