/* ==========================================================================
   True Aid — Layout
   Containers, the 12-column grid, section rhythm and the brand motifs that
   live in the negative space.
   ========================================================================== */

.ta-container {
	width: 100%;
	max-width: calc(var(--ta-container) + (var(--ta-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--ta-gutter);
}

.ta-container--wide {
	max-width: calc(var(--ta-container-wide) + (var(--ta-gutter) * 2));
}

.ta-container--narrow {
	max-width: calc(var(--ta-container-narrow) + (var(--ta-gutter) * 2));
}

.ta-container--reading {
	max-width: calc(var(--ta-reading) + (var(--ta-gutter) * 2));
}

/* Break a child out of the container to full viewport width. */
.ta-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* --- Section rhythm ------------------------------------------------------ */
.ta-section {
	position: relative;
	padding-block: var(--ta-section-y);
}

.ta-section--tight {
	padding-block: var(--ta-section-y-sm);
}

.ta-section--flush-top {
	padding-top: 0;
}

.ta-section--flush-bottom {
	padding-bottom: 0;
}

.ta-section--pale {
	background-color: var(--ta-off-white);
}

.ta-section--pale-blue {
	background-color: var(--ta-pale-blue);
}

.ta-section--pale-teal {
	background-color: var(--ta-pale-teal);
}

.ta-section--dark {
	background-color: var(--ta-blue);
	color: var(--ta-on-dark);
}

.ta-section--dark h1,
.ta-section--dark h2,
.ta-section--dark h3,
.ta-section--dark h4 {
	color: var(--ta-on-dark);
}

.ta-section--dark p,
.ta-section--dark .ta-lede {
	color: var(--ta-on-dark-muted);
}

.ta-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ta-space-5);
	margin-bottom: var(--ta-space-7);
}

.ta-section__head-text {
	max-width: 48ch;
}

.ta-section__head h2 {
	margin-bottom: var(--ta-space-3);
}

.ta-section__head p {
	color: var(--ta-muted);
}

/* --- Grid ---------------------------------------------------------------- */
.ta-grid {
	display: grid;
	gap: var(--ta-gap-card);
}

.ta-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ta-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ta-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 12-column editorial grid for asymmetric compositions. */
.ta-grid--12 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--ta-space-5);
	row-gap: var(--ta-space-7);
}

.ta-col-4  { grid-column: span 4; }
.ta-col-5  { grid-column: span 5; }
.ta-col-6  { grid-column: span 6; }
.ta-col-7  { grid-column: span 7; }
.ta-col-8  { grid-column: span 8; }
.ta-col-12 { grid-column: span 12; }

.ta-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--ta-space-6), 4vw, var(--ta-space-9));
	align-items: center;
}

.ta-split--media-lead {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}

.ta-stack > * + * {
	margin-top: var(--ta-space-5);
}

.ta-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ta-space-3);
}

/* --- Media -------------------------------------------------------------- */
.ta-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--ta-radius-lg);
	background-color: var(--ta-pale-blue);
}

.ta-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ta-motion-slow) var(--ta-ease-out);
}

.ta-media--16-9  { aspect-ratio: 16 / 9; }
.ta-media--21-9  { aspect-ratio: 21 / 9; }
.ta-media--4-3   { aspect-ratio: 4 / 3; }
.ta-media--3-2   { aspect-ratio: 3 / 2; }
.ta-media--16-10 { aspect-ratio: 16 / 10; }
.ta-media--3-4   { aspect-ratio: 3 / 4; }
.ta-media--1-1   { aspect-ratio: 1 / 1; }

/* Arch crop — the shelter silhouette from the A symbol, used sparingly on
   portraits and single editorial images. */
.ta-media--arch {
	border-radius: 50vw 50vw var(--ta-radius-md) var(--ta-radius-md);
}

/* Placeholder shown when a record has no image, so layouts never collapse. */
.ta-media__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 160px;
	background:
		linear-gradient(150deg, var(--ta-pale-blue) 0%, var(--ta-pale-teal) 100%);
	color: rgba(19, 78, 156, .16);
}

.ta-media__placeholder .ta-symbol {
	width: 33%;
	max-width: 120px;
	height: auto;
}

/* --- Brand motifs -------------------------------------------------------
   The connector arc and the watermark A. Both are decorative, both are
   hidden from assistive technology, and both are used selectively — never
   on every section.
   ------------------------------------------------------------------------ */
.ta-motif {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: var(--ta-z-motif);
}

.ta-arc {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--ta-teal);
	opacity: .5;
}

.ta-motif__arc {
	position: absolute;
	left: -8%;
	bottom: 4%;
	width: 116%;
	height: 62%;
}

.ta-watermark {
	position: absolute;
	right: -6%;
	bottom: -18%;
	width: min(46%, 620px);
	height: auto;
	color: var(--ta-pale-teal);
	opacity: .85;
	z-index: var(--ta-z-motif);
	pointer-events: none;
}

.ta-watermark--left {
	right: auto;
	left: -8%;
}

.ta-section--dark .ta-watermark {
	color: rgba(255, 255, 255, .06);
	opacity: 1;
}

.ta-symbol {
	display: block;
}

/* Fine wave lines — the quiet texture from the brand book, drawn in CSS
   rather than shipped as a raster asset. */
.ta-motif__waves {
	position: absolute;
	inset: auto 0 0 0;
	height: 220px;
	background-image:
		repeating-linear-gradient(
			-8deg,
			transparent 0 22px,
			rgba(19, 78, 156, .045) 22px 23px
		);
	mask-image: linear-gradient(to top, #000, transparent);
	-webkit-mask-image: linear-gradient(to top, #000, transparent);
}

/* --- Reveal animation ---------------------------------------------------- */
.ta-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--ta-motion-slow) var(--ta-ease-out),
		transform var(--ta-motion-slow) var(--ta-ease-out);
	will-change: opacity, transform;
}

.ta-reveal.is-visible {
	opacity: 1;
	transform: none;
}