/**
 * ACAART Article Design - shared responsive layer.
 *
 * Only rules that cross module boundaries live here; each module file carries
 * its own breakpoints. Loaded last, which is also why the inline colour and
 * typography tokens are attached to this handle: they must win over every
 * style sheet before them without needing `!important`.
 */

/* Justified copy is only comfortable on a wide measure. */
@media (min-width: 783px) {
	.acaart-pad-article__content > p {
		text-align: justify;
		hyphens: auto;
	}

	.acaart-pad-article__content figcaption {
		text-align: start;
		hyphens: manual;
	}
}

@media (max-width: 782px) {
	.acaart-pad-article {
		--acaart-gap: 1.85rem;
	}

	.acaart-pad-article__content > p,
	.acaart-pad-article p {
		text-align: start;
		hyphens: manual;
	}

	.acaart-pad-article .acaart-pad-highlights__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.9rem;
	}

	.acaart-pad-article h2 {
		margin-block-start: calc(var(--acaart-heading-space-before) * 0.85);
	}

	/* Long words and unbroken URLs must never widen the layout. */
	.acaart-pad-article pre,
	.acaart-pad-article code {
		overflow-x: auto;
		max-inline-size: 100%;
	}
}

@media (max-width: 640px) {
	.acaart-pad-article .acaart-pad-answer {
		padding-block: 1.2rem 1.1rem;
	}

	.acaart-pad-article .acaart-pad-steps__item {
		padding-inline-start: 2.9rem;
		padding-block-end: 1.5rem;
	}

	.acaart-pad-article .acaart-pad-steps__marker {
		inline-size: 2rem;
		block-size: 2rem;
		font-size: 0.78rem;
	}

	.acaart-pad-article .acaart-pad-steps__item::before {
		inset-inline-start: 1rem;
		inset-block-start: 2.25rem;
	}

	.acaart-pad-article .acaart-pad-highlights__card {
		padding-inline: 1.1rem;
		padding-block: 1.15rem;
	}

	.acaart-pad-article .acaart-pad-highlights__meta-row {
		flex-direction: column;
		gap: 0.1rem;
	}

	.acaart-pad-article .acaart-pad-highlights__meta dd {
		text-align: start;
	}

	.acaart-pad-article .acaart-pad-cta {
		padding-inline: 1.1rem;
		padding-block: 1.5rem;
	}

	.acaart-pad-article .acaart-pad-cta__button {
		display: block;
		inline-size: 100%;
		padding-inline: 1.2rem;
		padding-block: 0.9rem;
	}

	.acaart-pad-article .acaart-pad-faq__question {
		padding-inline-end: 2.1rem;
		font-size: 1rem;
	}

	.acaart-pad-article .acaart-pad-faq__answer {
		padding-inline-end: 0;
	}
}

/* Very narrow phones: 320px must not clip or overflow. */
@media (max-width: 380px) {
	.acaart-pad-article .acaart-pad-toc__title {
		letter-spacing: 0.1em;
		font-size: 0.74rem;
	}

	.acaart-pad-article .acaart-pad-steps__item {
		padding-inline-start: 2.6rem;
	}

	.acaart-pad-article .acaart-pad-highlights__badge {
		white-space: normal;
	}
}