/* ==========================================================================
   POLISH — the last stylesheet loaded by concepts 1-6
   Cross-concept consistency fixes. Everything here exists because the same
   defect appeared in more than one concept, and fixing it in six places
   invites the six from drifting apart again.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · BUTTON LABELS
   .btn is a flex container, and flex defaults to justify-content: flex-start.
   That is invisible while a button is only as wide as its text, and obvious
   the moment one goes full-width on a phone — the label sits hard against the
   left edge with all the empty space on the right.
   -------------------------------------------------------------------------- */
.btn,
.mbtn,
.rail__cta,
.pill,
button.btn,
a.btn {
	justify-content: center;
	text-align: center;
}

/* --------------------------------------------------------------------------
   2 · THE PRESS LOGOS
   Nine logos in a wrapping flex row with `flex: 0 1 7rem` wrapped wherever
   they happened to run out of space: eight across and one stranded beneath on
   a wide screen, and a ragged left-aligned stack on a phone.

   Nine does not divide into a rectangle, so the balanced answer is five and
   four. Giving each item an exact fifth of the row (minus its share of the
   gaps) forces precisely five per row, and `justify-content: center` centres
   the remaining four underneath instead of leaving them hanging left.

   Three per row on a phone, which divides nine exactly.
   -------------------------------------------------------------------------- */
.press {
	--press-gap: clamp(1rem, 3vw, 2.5rem);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--press-gap);
}

.press li {
	flex: 0 0 calc((100% - (4 * var(--press-gap))) / 5);
	display: grid;
	place-items: center;
	min-width: 0;
}

.press img {
	width: 100%;
	max-width: 7.5rem;
	height: auto;
	margin-inline: auto;
}

@media (max-width: 62rem) {
	.press li {
		flex-basis: calc((100% - (3 * var(--press-gap))) / 4);
	}
}

@media (max-width: 48rem) {
	.press {
		--press-gap: clamp(.9rem, 4vw, 1.6rem);
	}

	.press li {
		flex-basis: calc((100% - (2 * var(--press-gap))) / 3);
	}

	.press img {
		max-width: 6rem;
	}
}

/* --------------------------------------------------------------------------
   3 · THE FOOTER WORDMARK ON A PHONE
   The footer collapses to one centred column below 48rem, but .foot__brand
   keeps `width: 100%` from the desktop rule. The cell is centred; the logo
   inside it is not, so it printed hard left under centred copy.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
	.foot__base {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.foot__brand {
		width: auto;
		max-width: 100%;
		justify-self: center;
		text-align: center;
	}

	.foot__brand img {
		margin-inline: auto;
	}

	.foot__locale {
		justify-self: center;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   4 · THE UTILITY STRIP ON A PHONE
   Locale, contact toggle and address sat in a wrapping flex row. At 430px —
   the iPhone Pro Max a desktop browser offers in its device list — the three
   just fit across one line, which is why this looked solved. At 393px, which
   is what most Android handsets actually report, the address drops to a
   second line and the strip doubles in height at the very top of the screen,
   where vertical space is worth the most.

   The locale is the only one of the three that carries no action, so it goes.
   What is left is held to a single row: the toggle hard left, the address —
   or, in concept 5, the search — hard right, both set a little tighter so the
   pair still clears a 360px screen. Only the expanded telephone panel is
   allowed a second row, and only while it is open.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {

	/* — concepts 3, 4, 5 and 6 — .strip — */
	.strip__inner {
		flex-wrap: wrap;
		align-items: center;
		gap: .35rem .6rem;
		min-height: 2rem;
	}

	.strip__locale { display: none; }

	.strip__toggle {
		order: 1;
		font-size: .625rem;
		letter-spacing: .08em;
		white-space: nowrap;
	}

	/* The right-hand item: a bare <a> in concepts 3, 4 and 6, the search
	   button in concept 5. Both are pushed to the far edge of the same row. */
	.strip__inner > a,
	.strip__search {
		order: 2;
		margin-left: auto;
		font-size: .6875rem;
		white-space: nowrap;
	}

	.strip a[href^="mailto"] { margin-left: auto; }

	/* The telephone panel is the one thing allowed a line of its own, and only
	   once the reader has asked for it. */
	.strip__group,
	.strip__group--tel {
		order: 3;
		flex-basis: 100%;
	}

	/* — concept 1 — .utility — the telephone panel is nested one level deeper
	   here, so the outer row is locked to a single line and the wrapping is
	   left to the group that actually contains the numbers. — */
	.utility__inner {
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: .6rem;
		min-height: 0;
	}

	.utility__locale,
	.utility__sep { display: none; }

	.utility__group {
		flex-wrap: wrap;
		align-items: center;
		gap: .35rem .6rem;
		min-height: 2rem;
	}

	/* The child combinator matters: the telephone panel is itself a
	   .utility__group, and it is the last child of the group it sits in. */
	.utility__inner > .utility__group:first-child { flex: 1 1 auto; min-width: 0; }
	.utility__inner > .utility__group:last-child  { flex: 0 0 auto; }

	.utility__toggle {
		font-size: .625rem;
		letter-spacing: .08em;
		white-space: nowrap;
	}

	.utility__inner > .utility__group:last-child a {
		font-size: .6875rem;
		white-space: nowrap;
	}

	.utility__group--tel { flex-basis: 100%; }
}

/* The narrowest handsets still in circulation report 360px. Two more notches
   off the tracking keeps the pair on one line there as well. */
@media (max-width: 23.5rem) {
	.strip__toggle,
	.utility__toggle {
		font-size: .5875rem;
		letter-spacing: .04em;
	}

	.strip__inner > a,
	.strip__search,
	.utility__inner > .utility__group:last-child a { font-size: .625rem; }
}