/*
 * Mobile-slice overrides (DesignMobile) — loaded after styles.css + wp.css.
 *
 * Contents:
 * C1 — product breadcrumb: one line under 768px, ellipsis on the current item
 * (design feedback 2026-10-15 C1). The full trail stays in the DOM for screen
 * readers; only the visual box is clipped.
 * C4 — mobile type scale (design feedback 2026-10-16 C4), aligned to the
 *    site-wide <640px scale in styles.css:
 *      small  13 / 20
 *      body   15 / 24
 *      h3     18 / 26
 *      card   18 / 26
 *      h2     24 / 32
 *      h1     28 / 36
 *    ≥640px keeps the desktop scale untouched.
 */


@media (max-width: 767px) {
	/* -------------------------------------------------------------------------
	 * C1 — product breadcrumb: single line, no wrap.
	 * ---------------------------------------------------------------------- */
	.pp-breadcrumb ol {
		flex-wrap: nowrap;
		overflow: hidden;
	}

	.pp-breadcrumb li {
		flex: 0 0 auto;
		white-space: nowrap;
		min-width: 0;
	}

	/* Only the current item gives way: the leading crumbs stay whole and the
	   product title truncates with an ellipsis. */
	.pp-breadcrumb li:last-child {
		flex: 0 1 auto;
		min-width: 3ch;
	}

	.pp-breadcrumb li:last-child > span {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* -------------------------------------------------------------------------
	 * C4 — mobile type scale.
	 * ---------------------------------------------------------------------- */

	/* Display titles (h1 tier, 28 / 36) */
	.hero h1,
	.talk-hero h1,
	.contact-hero h1,
	.faq-page__header h1,
	.pp-buybox h1,
	.article-header h1,
	.blog-hero h1,
	.privacy-paper h1 {
		font-size: 28px;
		line-height: 36px;
	}

	/* The about hero renders its display title as a bold `p` (h1 is sr-only). */
	.about-hero p {
		font-size: 28px;
		line-height: 36px;
	}

	/* Section headings (h2 tier, 24 / 32) */
	.section-title,
	.cta-title,
	.detail-block__title,
	.about-service h2,
	.about-company h2,
	.about-history h2,
	.about-executives > .page-container > h2,
	.about-locations h2,
	.blog-tags-row h2,
	[data-region="blog-listing"] h2,
	.related-articles h2,
	.feature-story__heading h2,
	.faq-page .faq-group h2,
	.article-content h2 {
		font-size: 24px;
		line-height: 32px;
	}

	/* Card headings (18 / 26) */
	.showcase-card__heading,
	.search-page .article-card__body h3 {
		font-size: 18px;
		line-height: 26px;
	}

	/* Stat values keep one step above cards (24 / 1.35) */
	.trust-card__value {
		font-size: 24px;
		line-height: 1.35;
	}

	/* Sub-headings (h3 tier, 18 / 26) */
	.pp-prose h3,
	.article-content h3,
	.detail-card__title,
	.about-person h3,
	.about-location h3,
	.case-card h3,
	.search-page .blog-navigation__query {
		font-size: 18px;
		line-height: 26px;
	}

	/* Body text (15 / 24) */
	.hero__eyebrow,
	.showcase-card__text,
	[data-region="home-start-cta"] .download-cta__text,
	.faq-page__intro,
	.faq-item > summary,
	.faq-item__answer,
	.faq-page p,
	.faq-page li,
	.detail-block__intro,
	.pp-buybox__lead,
	.pp-quote__intro,
	.pp-prose,
	.article-content p,
	.article-content li,
	.search-page__status,
	.feature-testimonial blockquote,
	.it-testimonial blockquote {
		font-size: 15px;
		line-height: 24px;
	}

	/* Hero lede under the big listing titles. */
	.blog-hero p {
		font-size: 15px;
		line-height: 24px;
	}

	/* Legal document follows the shared type scale. */
	.privacy-paper h2,
	.privacy-paper h3 {
		font-size: 18px;
		line-height: 26px;
	}

	.privacy-paper p,
	.privacy-paper li,
	.privacy-paper address {
		font-size: 15px;
		line-height: 24px;
	}


	/* Featured story card body tightens to the baseline leading */
	.feature-story__body {
		line-height: 1.6;
	}

	/* Small navigation and utility text. */
	.blog-tags a {
		font-size: 13px;
		line-height: 20px;
	}

	.legal-navigation a,
	.legal-navigation span {
		font-size: 13px;
		line-height: 20px;
	}
}