/*
 * About us (HANDOFF §4 A.1–A.5; Figma 27:1732 / 35:1557). The hero is in hero.css (.hero--about), the key figures in
 * figures.css (.figures-band--cement), the maps in maps.css.
 */

/* A.2 Who we are: the H2 and the two paragraphs in columns 1–5, the terminal photo in columns 7–12 filling the height
   of the text (changed on 14 October 2026: the old full-width split left the column under the H2 empty). Stacked
   below 1024: the text, then Figma's 335 × 190 crop. */
.about-who {
	row-gap: var(--space-24);
}

.about-who > * {
	grid-column: 1 / -1;
}

.about-who__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
}

.about-who__photo,
.about-who__photo picture {
	display: block;
}

.about-photo {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 1024px) {
	.about-who {
		align-items: stretch;
	}

	.about-who__text {
		grid-column: 1 / span 5;
	}

	.about-who__photo {
		grid-column: 7 / -1;
		position: relative;
		min-height: 320px;
	}

	.about-who__photo picture,
	.about-who__photo .about-photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* A.3 Bulgaria: the split intro, then the map and the terminal cards. 24 apart, 64 from 1024. */
.about-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

@media (min-width: 1024px) {
	.about-stack {
		gap: var(--space-64);
	}
}

/* A.3 Terminal cards (HANDOFF §5.7, Figma 13:41): white, the 16:9 photo, then the town (H3) and "Open in Google Maps",
   8 apart, 24 in. Stacked on phones (24 apart). Six bases since 14 October 2026 (the client added Romania to Figma's four on 5 October, Türkiye on 14 October):
   three in a row from 768 (two rows of three; five in one row was too narrow for six). The photo zooms
   on hover. */
.terminals {
	display: grid;
	gap: var(--space-24);
	margin: 0;
}

@media (min-width: 768px) {
	.terminals {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--grid-gutter);
	}

	.terminal-card {
		grid-column: span 2;
	}
}

.terminal-card {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
}

.terminal-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.terminal-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.terminal-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
	padding: var(--space-24);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.terminal-card__image {
		transition: transform var(--motion-hover-duration) var(--motion-ease);
	}

	.terminal-card:hover .terminal-card__image {
		transform: scale(var(--motion-hover-zoom));
	}
}

/* A.4 Balkan network (#network): Ink. The H2, the fleet ("200" in the Figure style with "Cement wagons" on its
   baseline in Signal Green, 16 apart: the figure's unit, as site-map R6) and the text, 24 apart, in columns 1–5; the
   map in 6–12, the two centred on each other. Below 1024 stacked, the map last. */
.network {
	background: var(--color-ink);
}

.network__inner {
	row-gap: var(--space-24);
	align-items: center;
}

.network__inner > * {
	grid-column: 1 / -1;
}

.network__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
}

.network__fleet {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-16);
}

.network__unit {
	color: var(--color-signal-green);
}

@media (min-width: 1024px) {
	.network__content {
		grid-column: 1 / span 5;
	}

	.network__map {
		grid-column: 6 / -1;
	}
}

/* A.5 Memberships: "Member of" (Eyebrow, Slate) over the three logo slots, centred; Figma 96 above and below on
   desktop, 72 on phones (the section padding, at most 96). Phones: the slots full width, 24 apart, 24 under the
   eyebrow. From 768: a row, 64 apart, 32 under the eyebrow, all as wide as the widest. */
.memberships {
	padding-block: min(var(--space-section), var(--space-96));
}

.memberships__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
}

.memberships__label {
	color: var(--color-slate);
}

.memberships__list {
	display: grid;
	gap: var(--space-24);
	width: 100%;
	margin: 0;
}

@media (min-width: 768px) {
	.memberships__inner {
		gap: var(--space-32);
	}

	.memberships__list {
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		gap: var(--space-64);
		width: max-content;
	}
}

/* The three logos (raster, in their own colours): the same height, the width follows; 48 high on phones, 64 from 768. Each is a link to the
   organisation's site. */
.memberships__list > li {
	display: flex;
	align-items: center;
	justify-content: center;
}

.memberships__link {
	display: flex;
	align-items: center;
	justify-content: center;
}

.memberships__logo {
	display: block;
	width: auto;
	height: 3rem;
	max-width: 100%;
}

@media (min-width: 768px) {
	.memberships__logo {
		height: 4rem;
	}
}