/* Shared inner-page typography. Loaded after page-specific styles.
 * Desktop / tablet / phone:
 * page 56/44/34, section 48/38/30, subsection 28/24/22,
 * card 22/22/20, subtitle 20/18/18, label 14 at every breakpoint.
 * Body 16px; helper text, controls and sequence labels 14px minimum.
 * Scoped to inner pages so the homepage keeps its existing typography.
 */
.pages {
  --yl-title-page: 56px;
  --yl-title-section: 48px;
  --yl-title-subsection: 28px;
  --yl-title-card: 22px;
  --yl-title-subtitle: 20px;
  --yl-title-label: 14px;
  --yl-text-body: 16px;
  --yl-text-small: 14px;
  --yl-text-stat: 40px;
  font-size: var(--yl-text-body) !important;
}

@media (max-width: 1199px) {
  .pages {
    --yl-title-page: 44px;
    --yl-title-section: 38px;
    --yl-title-subsection: 24px;
    --yl-title-subtitle: 18px;
    --yl-text-stat: 36px;
  }
}

@media (max-width: 767px) {
  .pages {
    --yl-title-page: 34px;
    --yl-title-section: 30px;
    --yl-title-subsection: 22px;
    --yl-title-card: 20px;
    --yl-text-stat: 32px;
  }
}

/* Legacy page styles and CMS spans must inherit their semantic text role.
 * Explicit roles below override this reset, including article headings.
 */
.pages :where(*),
.pages :where(*)::before,
.pages :where(*)::after {
  font-size: inherit !important;
}

/* Heading defaults also cover CMS single pages and future inner-page sections. */
.pages :is(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.pages h1 {
  font-size: var(--yl-title-page) !important;
  line-height: 1.15;
}
.pages h2 {
  font-size: var(--yl-title-section) !important;
  line-height: 1.2;
}
.pages h3 {
  font-size: var(--yl-title-subsection) !important;
  line-height: 1.3;
}
.pages h4 {
  font-size: var(--yl-title-card) !important;
  line-height: 1.4;
}
.pages :is(h5, h6) {
  font-size: var(--yl-title-subtitle) !important;
  line-height: 1.4;
}
.pages :is(h1, h2, h3, h4, h5, h6) > a {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.pages.newslist .media-body h4 a {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Subsections and panel headings can be h2 or h3 in the existing templates. */
.pages :is(
  .manufacturing-workshop__heading h3,
  .manufacturing-dfm h3,
  .quality-traceability__heading h3,
  .quality-mes h3,
  .case-solution__copy h3,
  .contact-review h2,
  .contact-form-panel__heading h2,
  .yl-related-panel h2,
  .yl-product-enquiry > header h2
) {
  font-size: var(--yl-title-subsection) !important;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Cards, list entries and process steps share one visual title level. */
.pages :is(
  .aboutus-support__list li p,
  .aboutus-capability h3,
  .manufacturing-workshop h4,
  .manufacturing-system__top p,
  .manufacturing-system__grid b,
  .manufacturing-process-card h3,
  .manufacturing-finish-card h3,
  .engineering-scope__list h3,
  .engineering-workflow__steps h3,
  .engineering-hero__visual figcaption strong,
  .engineering-scope__image figcaption strong,
  .engineering-evidence figcaption strong,
  .case-hero__visual figcaption strong,
  .quality-capability-card--document > strong,
  .quality-gates__track h3,
  .quality-mes__benefits h3,
  .quality-capability-card h3,
  .quality-production-card h3,
  .quality-hero__visual figcaption strong,
  .quality-release figcaption h3,
  .case-workflow__steps h3,
  .case-compliance h2,
  .contact-review__steps strong,
  .yl-catalog-card h2,
  .yl-editorial-item__body h2,
  .yl-resource-item__body h2,
  .yl-job-card h2,
  .yl-search-result__body h2,
  .yl-related-list strong,
  .yl-related-news-grid h3,
  .yl-related-product-grid h3,
  .yl-download-box h2,
  .yl-video-modal__header h2,
  .newslist .media-body h4,
  .taglist li > a > span.d-none,
  .taglist li > a > span.d-inline
) {
  font-size: var(--yl-title-card) !important;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Subtitles and leading summaries retain their existing colors and spacing. */
.pages :is(
  .aboutus-lead,
  .aboutus-section-heading > p:last-child,
  .manufacturing-hero__subtitle,
  .manufacturing-hero__lead,
  .manufacturing-section-heading > p,
  .manufacturing-finishing__heading > p,
  .engineering-hero__lead,
  .engineering-section-heading > p,
  .engineering-workflow__heading > p,
  .quality-title > small,
  .quality-hero__lead,
  .quality-section-heading > p,
  .quality-mes__subtitle,
  .case-challenge__lead,
  .case-section-heading > p,
  .contact-hero__lead,
  .yl-list-heading > p:last-child,
  .yl-product-summary__subtitle
) {
  font-size: var(--yl-title-subtitle) !important;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Eyebrows and small heading labels use the same responsive scale. */
.pages :is(
  .aboutus-eyebrow,
  .aboutus-direction > span,
  .aboutus-since > span,
  .manufacturing-eyebrow,
  .manufacturing-media__step,
  .manufacturing-system__top > div > span,
  .manufacturing-dfm__title > span,
  .manufacturing-process-card__type,
  .manufacturing-finish-card__top small,
  .manufacturing-fact > span,
  .engineering-eyebrow,
  .engineering-hero__visual figcaption > span,
  .engineering-scope__image figcaption > span,
  .engineering-evidence figcaption > span,
  .engineering-workflow__steps small,
  .engineering-workflow__result > span,
  .quality-eyebrow,
  .quality-hero__visual figcaption > span,
  .quality-mes__visual figcaption > span,
  .quality-capability-card figure figcaption,
  .quality-production-card figure figcaption,
  .quality-gates__track small,
  .quality-capability-card__type,
  .quality-release figcaption > span,
  .case-eyebrow,
  .case-category > span,
  .case-hero__visual figcaption > span,
  .case-photo figcaption > span,
  .case-capabilities > span,
  .contact-eyebrow,
  .contact-review__kicker,
  .yl-eyebrow,
  .yl-product-enquiry > header span,
  .yl-video-modal__header span
) {
  font-size: var(--yl-title-label) !important;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Article headings belong to the text hierarchy, rather than hero sections.
 * Editor-authored headings may contain inline sizes, including on child spans.
 */
.pages :is(.yl-rich-content, .yl-job-card__content, .section.container.pages > .about_content) :is(h1, h2) {
  font-size: var(--yl-title-subsection) !important;
  line-height: 1.3;
}
.pages :is(.yl-rich-content, .yl-job-card__content, .section.container.pages > .about_content) h3 {
  font-size: var(--yl-title-card) !important;
  line-height: 1.4;
}
.pages :is(.yl-rich-content, .yl-job-card__content, .section.container.pages > .about_content) :is(h4, h5, h6) {
  font-size: var(--yl-title-subtitle) !important;
  line-height: 1.4;
}
.pages :is(.yl-rich-content, .yl-job-card__content, .section.container.pages > .about_content) :is(h1, h2, h3, h4, h5, h6) * {
  font-size: inherit !important;
}

/* Body copy, lists and article summaries share one size on every screen. */
.pages :is(
  .aboutus-intro__copy > p:not(.aboutus-lead),
  .aboutus-direction p,
  .manufacturing-workshop__heading > p:last-child,
  .manufacturing-workshop__note p,
  .manufacturing-media__points li,
  .manufacturing-equipment-list dt,
  .manufacturing-equipment-list dd,
  .engineering-workflow__result p,
  .quality-mes__intro > p:not(.quality-eyebrow):not(.quality-mes__subtitle),
  .quality-mes__records-heading p,
  .quality-mes__record-list li,
  .quality-mes__benefits p,
  .quality-production-card p,
  .quality-release figcaption p,
  .case-challenge__copy > p:not(.case-eyebrow):not(.case-challenge__lead),
  .case-solution__copy > p,
  .case-list > li,
  .case-workflow__steps p,
  .case-process__note p,
  .case-result__list > li,
  .case-cta__copy > p:not(.case-eyebrow),
  .contact-details__intro,
  .contact-details__cms p,
  .contact-details__cms p:first-child,
  .yl-editorial-item__summary,
  .yl-resource-item__description,
  .yl-search-result__body > p,
  .yl-product-enquiry__lead,
  .yl-related-news-grid p,
  .yl-related-list small,
  .yl-rich-content,
  .yl-job-card__content
) {
  font-size: var(--yl-text-body) !important;
  line-height: 1.7;
}

/* Labels, metadata, captions, helper copy and form controls. */
.pages :is(small, sup, sub, label, figcaption) {
  font-size: var(--yl-text-small) !important;
}
.pages :is(input, select, textarea) {
  font-size: var(--yl-text-body) !important;
}
.pages :is(
  .aboutus-metric p,
  .aboutus-support__count span,
  .aboutus-capability li,
  .manufacturing-materials li,
  .manufacturing-system__foot,
  .manufacturing-fact > span,
  .manufacturing-fact p,
  .manufacturing-equipment-stats span,
  .manufacturing-test-standards li,
  .manufacturing-workshop__image figcaption,
  .engineering-partnership li,
  .quality-hero__facts span,
  .quality-traceability__fact span,
  .quality-capability-card li,
  .quality-mes__visual figcaption,
  .case-category,
  .case-photo figcaption,
  .case-capabilities p,
  .case-compliance p,
  .contact-hero__requirements li,
  .contact-review__steps small,
  .contact-details__note span,
  .contact-details__note strong,
  .contact-details__note small,
  .contact-form-panel__heading > p,
  .contact-file-control__name,
  .contact-file-control small,
  .contact-form-status,
  .yl-meta,
  .yl-catalog-card__copy > p,
  .yl-search-result__url,
  .yl-related-list__date,
  .yl-related-news-grid article > a > span,
  .yl-product-enquiry > header small,
  .yl-product-enquiry__brief li,
  .yl-content-pager,
  .yl-content-pager p,
  .yl-content-pager a,
  .yl-empty-state p,
  .yl-job-card__type,
  .yl-download-box > p,
  button,
  input[type="submit"],
  input[type="button"],
  .case-button,
  .contact-file-control__button,
  .contact-submit,
  .yl-text-link,
  .yl-submit-button,
  .yl-pagination .page-link,
  .yl-pagination .page-num,
  .yl-product-tabs .nav-link
) {
  font-size: var(--yl-text-small) !important;
}

/* Sequence numbers differ from statistical values. */
.pages :is(
  .aboutus-support__list li > span,
  .aboutus-capability__number,
  .engineering-partnership span,
  .engineering-scope__list > li > span,
  .engineering-workflow__steps > li > span,
  .quality-gates__track > li > span,
  .quality-capability-card__number,
  .quality-mes__record-list li > span,
  .case-solution__copy h3 > span,
  .case-workflow__number,
  .contact-review__steps li > span,
  .yl-catalog-card__index,
  .yl-editorial-item__index,
  .yl-search-result__index,
  .yl-job-card__index
),
.pages .case-result__list > li::before {
  font-size: var(--yl-text-small) !important;
}
.pages :is(
  .aboutus-since strong,
  .aboutus-metric strong,
  .aboutus-support__count strong,
  .manufacturing-fact strong,
  .manufacturing-equipment-stats strong,
  .quality-hero__facts strong,
  .quality-traceability__fact strong
) {
  font-size: var(--yl-text-stat) !important;
}
.pages :is(
  .aboutus-metric strong span,
  .manufacturing-fact strong small,
  .manufacturing-equipment-stats small
) {
  font-size: var(--yl-text-small) !important;
}

/* Detail-page category navigation sits outside main.pages. */
:is(.yl-list-page > .subnavlist, .subnavlist:has(+ .yl-detail-page)) :is(
  ul li > a,
  .dropdown-menu .dropdown-item
) {
  font-size: 14px !important;
}
:is(.yl-list-page > .subnavlist, .subnavlist:has(+ .yl-detail-page)) .swiper-subnav::before {
  font-size: 14px !important;
}
body:has(.pages) .scroll-top dd {
  font-size: 14px;
}
.pages .aboutus-capability__icon {
  font-size: 26px !important;
}
.pages .case-process__icon {
  font-size: 24px !important;
}

/* Give enlarged process titles enough room to keep whole words. */
@media (min-width: 576px) {
  .pages .manufacturing-equipment-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .pages .engineering-workflow__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pages .engineering-workflow__steps li:nth-child(3n+1) {
    border-left: 0;
  }
  .pages .engineering-workflow__steps li:nth-child(n+4) {
    border-top: 1px solid rgba(255,255,255,.17);
  }
  .pages .engineering-workflow__steps li:nth-child(3n):after {
    display: none;
  }
}
@media (max-width: 479px) {
  .pages .manufacturing-system__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
