/**
 * Utility classes — small, single-purpose helpers usable in any template.
 * Depends on tokens in assets/css/base/variables.css (loaded before this
 * file — see functions.php enqueue order).
 *
 * Note: `_s` (the parent starter theme) already ships some accessibility/
 * alignment utilities in the theme's original style.css (.screen-reader-text,
 * .alignleft/.alignright/.aligncenter, .sticky, .bypostauthor) — those are
 * NOT duplicated here. This file only adds new helpers Design Refrance's
 * layout patterns will need.
 */

/* Layout container — caps width at the confirmed 1440px canvas (TSI Style
   Guide.html: "Content max-width 1440px"). Gutters confirmed from the same
   doc: "page gutters are 56px desktop / 16px mobile". */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter-desktop);
}

@media (max-width: 768px) {
	.container {
		padding-inline: var(--gutter-mobile);
	}
}

/* Section vertical spacing — confirmed from TSI Style Guide.html:
   "Section padding runs 56–72px". Apply to any <section>-level wrapper so
   spacing stays consistent and centrally adjustable via the scale. */
.section-spacing        { padding-block: var(--space-5); } /* 56px — style guide default */
.section-spacing--sm     { padding-block: var(--space-4); } /* 40px — below the confirmed 56–72px range, for tighter cases */
.section-spacing--lg     { padding-block: var(--space-6); } /* 72px — style guide's upper bound */

/* Flex helpers */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Visually hidden but accessible (distinct from _s's .screen-reader-text
   only in naming — kept for parity with common utility-class conventions
   used elsewhere in the project; functionally identical) */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}