/* ==========================================================================
   True Aid — Responsive
   Breakpoints follow the blueprint: 1440+, 1024–1439, 768–1023, 320–767.
   Layouts are recomposed rather than shrunk.
   ========================================================================== */

/* ==========================================================================
   Laptop — 1024 to 1439
   Preserve the hierarchy; tighten the spacing.
   ========================================================================== */

@media (max-width: 1200px) {
	.ta-nav a,
	.ta-nav__toggle {
		padding-inline: var(--ta-space-3);
	}
}

@media (max-width: 1100px) {
	.ta-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ta-footer__brand {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Tablet — 768 to 1023
   Three and four column modules become two. Navigation collapses.
   ========================================================================== */

@media (max-width: 1023px) {

	/* --- Split compositions ------------------------------------------- */
	.ta-split,
	.ta-split--media-lead,
	.ta-impact-headline,
	.ta-page-hero--split .ta-page-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ta-space-6);
	}

	:root {
		--ta-header-h: 76px;
		--ta-header-h-scrolled: 68px;
	}

	/* --- Navigation --------------------------------------------------- */
	.ta-nav {
		display: none;
	}

	.ta-nav-toggle {
		display: inline-flex;
	}

	/* Search and Donate move into the menu panel, which already carries a
	   full search form and a full-width Donate button. The mobile pill keeps
	   just the logo and the menu button. */
	.ta-header__actions .ta-button--icon,
	.ta-header__actions .ta-button--primary {
		display: none;
	}

	.ta-header__actions {
		gap: var(--ta-space-2);
	}

	/* --- Hero --------------------------------------------------------- */
	



	/* --- Grids -------------------------------------------------------- */
	.ta-programmes-grid,
	.ta-projects-grid,
	.ta-stories-grid,
	.ta-countries-grid,
	.ta-involved-grid,
	.ta-grid--3,
	.ta-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

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

	.ta-programmes-mosaic > *,
	.ta-programmes-mosaic > :nth-child(1),
	.ta-programmes-mosaic > :nth-child(6) {
		grid-column: span 1;
	}

	.ta-programme-tile,
	.ta-programme-tile--lg {
		min-height: 300px;
	}

	/* --- Split compositions ------------------------------------------- */
	

	/* Map goes above its panel; the country list stays a real list. */
	.ta-map-section__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Featured projects stack into a single column. */
	.ta-featured-projects__lead,
	.ta-featured-projects__side {
		grid-column: 1 / -1;
	}

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

	/* Impact story: card no longer overlaps. */
	

	/* Stories 1 + 3 becomes a stack. */
	.ta-stories-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-story-card--featured {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Sidebars drop below content. */
	.ta-project-layout,
	.ta-donate-layout,
	.ta-contact-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-project-sidebar,
	.ta-donate-aside {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ta-donate-band__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-donate-band__image {
		display: none;
	}

	.ta-reports-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* --- Footer -------------------------------------------------------- */
	.ta-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Mobile — up to 767
   A deliberate single-column hierarchy, not a squeezed desktop.
   ========================================================================== */

@media (max-width: 767px) {
	:root {
		--ta-header-h: var(--ta-header-h-mobile);
		--ta-header-h-scrolled: var(--ta-header-h-mobile);
	}

	.ta-logo__img,
	.ta-header.is-scrolled .ta-logo__img {
		height: 34px;
	}

	/* Hero image first, at a portrait crop, then the copy. */



	/* Single column everywhere that matters. */
	.ta-programmes-grid,
	.ta-projects-grid,
	.ta-stories-grid,
	.ta-countries-grid,
	.ta-involved-grid,
	.ta-programmes-mosaic,
	.ta-featured-projects__side,
	.ta-grid--2,
	.ta-grid--3,
	.ta-grid--4,
	.ta-contact-cards,
	.ta-project-sidebar,
	.ta-donate-aside {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Statistics go 2-up; labels stay legible. */
	.ta-stats,
	.ta-stats--strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ta-space-5);
	}

	/* Values become a stacked accordion-style list. */
	.ta-values {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-value {
		padding: var(--ta-space-5);
	}

	/* Horizontal project card becomes vertical. */
	.ta-project-card--horizontal {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-project-card--horizontal .ta-card__media {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	.ta-stories-layout__list .ta-story-card {
		grid-template-columns: 88px minmax(0, 1fr);
	}

	.ta-report-card {
		grid-template-columns: 84px minmax(0, 1fr);
		gap: var(--ta-space-4);
	}

	/* Filters collapse behind a disclosure button. */
	.ta-filters__toggle {
		display: inline-flex;
		width: 100%;
	}

	.ta-filters {
		display: none;
		flex-direction: column;
		align-items: stretch;
		margin-top: var(--ta-space-3);
	}

	.ta-filters.is-open {
		display: flex;
	}

	.ta-filters .ta-field,
	.ta-filters__search {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ta-filters__actions {
		flex-direction: column;
	}

	/* Amount chips 2 across. */
	.ta-amounts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ta-donation {
		padding: var(--ta-space-5);
		border-radius: var(--ta-radius-md);
	}

	/* Footer becomes accordion-friendly stacked groups. */
	.ta-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ta-space-6);
	}

	.ta-footer__cta {
		flex-direction: column;
		align-items: flex-start;
	}

	.ta-footer__legal {
		flex-direction: column;
		align-items: flex-start;
	}

	.ta-newsletter__form .ta-button {
		width: 100%;
	}

	/* Simplify decorative motifs rather than letting them clutter. */
	.ta-motif__waves,
	.ta-watermark {
		display: none;
	}

	.ta-section--dark .ta-watermark {
		display: block;
		width: 70%;
		right: -18%;
	}

	blockquote {
		padding-left: var(--ta-space-4);
	}
}

/* ==========================================================================
   Very small screens — 320 to 400
   ========================================================================== */

@media (max-width: 400px) {
	.ta-stats--strip {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-report-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-report-card__cover {
		max-width: 120px;
	}
}

/* ==========================================================================
   Large desktop — 1440 and above
   More air, never wider text.
   ========================================================================== */

@media (min-width: 1440px) {

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

/* ==========================================================================
   Logical properties for right-to-left
   The layout uses logical properties throughout; these fix the few places
   where a physical direction is unavoidable.
   ========================================================================== */

[dir="rtl"] .ta-eyebrow__rule {
	transform: translateY(-3px) scaleX(-1);
}

[dir="rtl"] .ta-link:hover .ta-icon,
[dir="rtl"] .ta-button .ta-icon {
	transform: scaleX(-1);
}

[dir="rtl"] .ta-watermark {
	right: auto;
	left: -6%;
}

[dir="rtl"] blockquote,
[dir="rtl"] .ta-quote {
	padding-left: 0;
	padding-right: var(--ta-space-6);
	border-left: 0;
	border-right: 3px solid var(--ta-teal);
}

[dir="rtl"] .ta-mobile-nav {
	transform: translateX(-100%);
}

[dir="rtl"] .ta-mobile-nav.is-open {
	transform: translateX(0);
}

[dir="rtl"] .ta-mobile-nav .sub-menu {
	border-left: 0;
	border-right: 2px solid var(--ta-pale-teal);
	padding-left: 0;
	padding-right: var(--ta-space-4);
}

[dir="rtl"] .ta-timeline {
	border-left: 0;
	border-right: 2px solid var(--ta-pale-teal);
}

[dir="rtl"] .ta-timeline__item {
	padding-left: 0;
	padding-right: var(--ta-space-6);
}

[dir="rtl"] .ta-timeline__item::before {
	left: auto;
	right: -7px;
}

[dir="rtl"] .ta-select {
	background-position: left var(--ta-space-4) center;
	padding-right: var(--ta-space-4);
	padding-left: var(--ta-space-8);
}

[dir="rtl"] .ta-search .ta-icon {
	left: auto;
	right: var(--ta-space-4);
}

[dir="rtl"] .ta-search .ta-input {
	padding-left: var(--ta-space-4);
	padding-right: calc(var(--ta-space-4) * 2 + var(--ta-icon-md));
}

[dir="rtl"] .ta-method-note {
	border-left: 0;
	border-right: 3px solid var(--ta-teal);
	border-radius: var(--ta-radius-md) 0 0 var(--ta-radius-md);
}


[dir="rtl"] .ta-motif__arc,
[dir="rtl"] .ta-arc {
	transform: scaleX(-1);
}

/* --- v2 “Connector” right-to-left ----------------------------------------- */
[dir="rtl"] .ta-swoosh,
[dir="rtl"] .ta-eyebrow__rule {
	transform: scaleX(-1);
}

[dir="rtl"] .ta-eyebrow__rule {
	transform: scaleX(-1) translateY(-3px);
}

[dir="rtl"] .ta-tlink:hover .ta-icon {
	transform: translateX(-4px) scaleX(-1);
}

[dir="rtl"] .ta-tlink .ta-icon,
[dir="rtl"] .ta-tile__go .ta-icon,
[dir="rtl"] .ta-act__go .ta-icon,
[dir="rtl"] .ta-rrow__arrow .ta-icon {
	transform: scaleX(-1);
}