/* Partners (9.0). Direction A's chrome and tokens, Option A's shared
   location pieces (l-btn, l-h2, --l-wrap, --l-tear) from location.css. Built on the client's design
   (2026-09-21): a split hero, the teams on a yellow plank panel, the
   charitable partners as logo cards with their state and the arrow on a
   footer row, and the home page's good-time band carrying the enquiry. Everything here is pt- prefixed and scoped to body.acs-partners;
   sections keep Direction A's gap between them. Mobile first; tablets from
   640, desktop from 1024. */

body.acs-partners .pt *,
body.acs-partners .pt *::before,
body.acs-partners .pt *::after {
	box-sizing: border-box;
}

body.acs-partners .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body.acs-partners .pt-section .l-btn {
	margin-top: 0;
	justify-content: center;
}

/* The small line above a heading */
body.acs-partners .pt-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
}

body.acs-partners .pt-eyebrow--red {
	color: var(--acs-red);
}

body.acs-partners .pt-eyebrow--ink {
	color: var(--acs-ink);
}

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

/* Built like the location template's hero: the red fades into the photo,
   the paper tears top and bottom. Phones stack it, photo on top. */
body.acs-partners .pt-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: -0.5rem; /* tucked under the logo row */
	padding-bottom: calc(var(--l-tear) + 1.25rem);
	background: var(--acs-red);
	color: var(--acs-white);
}

body.acs-partners .pt-hero::before,
body.acs-partners .pt-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 3;
	height: var(--l-tear);
	background: 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

body.acs-partners .pt-hero::before {
	top: -1px;
	background-image: url("../directions/a/media/masks/hero-top.png");
}

body.acs-partners .pt-hero::after {
	bottom: -1px;
	background-image: url("../directions/a/media/masks/hero-bottom.png");
}

body.acs-partners .pt-hero__media {
	position: relative;
	height: clamp(15rem, 68vw, 20rem);
	background: var(--acs-placeholder-deep);
}

body.acs-partners .pt-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The red washes down over the photo on phones */
body.acs-partners .pt-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(var(--l-red-rgb), 0.15) 0%,
		rgba(var(--l-red-rgb), 0.25) 45%,
		rgba(var(--l-red-rgb), 1) 100%
	);
}

body.acs-partners .pt-hero__copy {
	position: relative;
	z-index: 1;
	padding: 1.75rem var(--acs-gutter) 0;
}

body.acs-partners .pt-hero__title {
	margin: 0;
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.25rem);
	line-height: 1.02;
	color: var(--acs-white);
}

body.acs-partners .pt-hero__accent {
	display: block;
	color: var(--acs-yellow);
}

body.acs-partners .pt-hero__sub {
	margin: 1.125rem 0 0;
	max-width: 26rem;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	line-height: 1.5;
}

/* ---------- Sections on the grid ---------- */

body.acs-partners .pt-section {
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin-inline: auto;
}

body.acs-partners .pt-heading {
	text-align: center;
}

/* ---------- 9.3 Sponsoring local teams ---------- */

/* A yellow panel on the grid, torn on all four sides: the heading at the
   left, each team on a white card behind its jersey number at the right */
body.acs-partners .pt-teams {
	width: calc(min(var(--l-wrap), 100% - 2 * var(--acs-gutter)) + 2 * 0.64 * var(--l-tear));
	margin-inline: auto;
}

body.acs-partners .pt-teams__inner {
	position: relative;
	padding: calc(var(--l-tear) + 1.75rem) calc(var(--l-tear) + 1.25rem);
	background:
		url("../directions/a/media/masks/offer-left.png") left top / var(--l-tear) 100% no-repeat,
		url("../directions/a/media/masks/offer-right.png") right -4px top / var(--l-tear) 100% no-repeat, /* its outer columns are transparent */
		var(--acs-yellow);
	color: var(--acs-ink);
}

body.acs-partners .pt-teams__inner::before,
body.acs-partners .pt-teams__inner::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--l-tear);
	background: 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

body.acs-partners .pt-teams__inner::before {
	top: -3px; /* the strip's outer rows are transparent */
	background-image: url("../directions/a/media/masks/offer-top.png");
}

body.acs-partners .pt-teams__inner::after {
	bottom: -3px;
	background-image: url("../directions/a/media/masks/offer-bottom.png");
}

body.acs-partners .pt-teams__title {
	color: var(--acs-ink);
}

body.acs-partners .pt-teams__list {
	display: grid;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

body.acs-partners .pt-teams__card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.125rem 1.25rem;
	border-radius: 0.75rem;
	background: var(--acs-white);
}

/* The jersey number */
body.acs-partners .pt-teams__num {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--acs-yellow);
	font-family: var(--acs-font-display);
	font-size: 1.125rem;
	line-height: 1;
}

body.acs-partners .pt-teams__name {
	font-family: var(--acs-font-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
	line-height: 1.15;
}

/* ---------- 9.2 Partner wall ---------- */

/* The cards sit straight on the paper; only they are white */
body.acs-partners .pt-wall {
	position: relative;
}

body.acs-partners .pt-wall__inner {
	width: min(var(--l-wrap), 100% - 2 * var(--acs-gutter));
	margin-inline: auto;
}

body.acs-partners .pt-wall .pt-eyebrow {
	text-align: center;
}

body.acs-partners .pt-wall__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

/* One card: the logo, then its state and the arrow under a hairline */
body.acs-partners .pt-tile__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--acs-line);
	border-radius: 0.75rem;
	background: var(--acs-white);
	color: var(--acs-ink);
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.acs-partners .pt-tile__link:hover,
body.acs-partners .pt-tile__link:focus-visible {
	transform: translateY(-3px);
	border-color: var(--acs-ctrl-line);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.09);
}

body.acs-partners .pt-tile__logo {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 8rem;
	padding: 1.5rem 1.125rem;
}

/* The width comes from wall.php (every logo the same area); the height
   follows the file's own proportions. On phones every logo comes down by
   the same share, so the widest still fits the narrow card and the tall
   ones do not end up the biggest. */
body.acs-partners .pt-tile__logo img {
	width: calc(var(--pt-logo-w, 9rem) * var(--pt-logo-fit, 1));
	max-width: 100%;
	height: auto;
	max-height: 6rem;
	object-fit: contain;
}

body.acs-partners .pt-tile__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 1.125rem;
	border-top: 1px solid var(--acs-line);
}

body.acs-partners .pt-tile__label {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
}

body.acs-partners .pt-tile__arrow {
	display: inline-flex;
	flex: none;
	color: var(--acs-red);
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

body.acs-partners .pt-tile__link:hover .pt-tile__arrow,
body.acs-partners .pt-tile__link:focus-visible .pt-tile__arrow {
	transform: rotate(-45deg) translateX(3px);
}

/* ================= 640: three cards across ================= */

@media (min-width: 640px) {
	body.acs-partners .pt-wall__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* ================= Desktop (built at 1440) ================= */

@media (min-width: 1024px) {
	/* The copy on the red at the left, the photo filling the right */
	body.acs-partners .pt-hero {
		flex-direction: row;
		align-items: center;
		min-height: 34rem;
		margin-top: 0;
		padding-bottom: 0;
	}

	body.acs-partners .pt-hero__media {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 56%;
		height: auto;
	}

	body.acs-partners .pt-hero__media::after {
		background: linear-gradient(
			90deg,
			rgba(var(--l-red-rgb), 1) 0%,
			rgba(var(--l-red-rgb), 0.82) 14%,
			rgba(var(--l-red-rgb), 0.45) 36%,
			rgba(var(--l-red-rgb), 0.15) 64%,
			rgba(var(--l-red-rgb), 0.05) 100%
		);
	}

	/* The copy starts on the grid's left edge, as every section below */
	body.acs-partners .pt-hero__copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		width: 54%;
		padding: calc(var(--l-tear) + 3rem) 1.5rem calc(var(--l-tear) + 3rem) max(var(--acs-gutter), (100% - var(--l-wrap)) / 2);
	}

	body.acs-partners .pt-hero__title {
		font-size: 2.75rem;
	}

	body.acs-partners .pt-wall__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 1.5rem;
		margin-top: 2.75rem;
	}

	body.acs-partners .pt-tile__logo {
		min-height: 11rem;
		padding: 2rem 1.5rem;
	}

	body.acs-partners .pt-tile__foot {
		padding: 1rem 1.25rem;
	}

	body.acs-partners .pt-tile__label {
		font-size: 1.0625rem;
	}

	/* The heading at the left, the team cards at the right */
	body.acs-partners .pt-teams__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: center;
		column-gap: 4rem;
		padding: calc(var(--l-tear) + 2.5rem) calc(var(--l-tear) + 2.5rem);
	}

	body.acs-partners .pt-teams__list {
		gap: 1rem;
		margin-top: 0;
	}

	body.acs-partners .pt-teams__card {
		gap: 1.25rem;
		padding: 1.375rem 1.75rem;
	}

	body.acs-partners .pt-teams__num {
		width: 3rem;
		height: 3rem;
		font-size: 1.25rem;
	}

}

/* ================= 1440: the build width ================= */

@media (min-width: 1440px) {
	/* Two lines, as the client's frame: the second must not wrap */
	body.acs-partners .pt-hero__title {
		font-size: 3.375rem;
	}
}

/* ---------- Partners: the style guide applied (2026-09-29) ----------
   Every text role takes the scale in assets/css/tokens.css, fluid from the
   phone value at 375 to the desktop value at 1440, as on the home page (the
   good-time band, the footer and the logo follow from direction.css). Button
   labels are UI labels and keep their sizes. */
body.acs-partners .pt-hero__title {
	font-size: var(--acs-h1-size);
	line-height: var(--acs-h1-lh);
}

body.acs-partners .pt-hero__sub {
	font-size: var(--acs-text-xl-size);
	line-height: var(--acs-text-xl-lh);
}

body.acs-partners .l-h2 {
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
}

/* Team names: H5, as the location card names (designer, 2026-09-29; was
   H4, five lines on narrow phones) */
body.acs-partners .pt-teams__name {
	font-size: var(--acs-h5-size);
	line-height: var(--acs-h5-lh);
}

body.acs-partners .pt-teams__num {
	font-size: var(--acs-h5-size);
	line-height: var(--acs-h5-lh);
}

body.acs-partners .pt-tile__label {
	font-size: var(--acs-text-base-size);
	line-height: var(--acs-text-base-lh);
}

body.acs-partners .pt-eyebrow {
	font-size: var(--acs-text-sm-size);
	line-height: var(--acs-text-sm-lh);
}

/* ---------- Hero copy centred in the red the eye sees (desktop) ----------
   The copy's padding was even, but the headline's capitals start lower in
   their box than the last line of the line under it ends, so the copy sat
   2.2 to 2.4px high (92.3 above, 96.7 below at 1440). It moves down 0.145rem
   by trading padding; the band keeps its height. */
@media (min-width: 1024px) {
	body.acs-partners .pt-hero__copy {
		padding-top: calc(var(--l-tear) + 3rem + 0.145rem);
		padding-bottom: calc(var(--l-tear) + 3rem - 0.145rem);
	}
}

/* ---------- Labels centred on their box or icon (style guide) ----------
   Measured on the real baseline, these sat 1.5 to 1.7px high: Century
   Gothic's capitals sit 0.125em above the middle of the line, Hobo's
   numerals 0.063em. Each moves down that offset (icons back up); every size
   is unchanged. */

/* The partner tiles' state label: the arrow moves up to its centre line */
body.acs-partners .pt-tile__foot svg {
	position: relative;
	top: -0.125em;
}

/* The jersey numbers centred in their yellow circle */
body.acs-partners .pt-teams__num {
	box-sizing: border-box;
	padding-top: 0.126em;
}

/* The team names on the circle's centre line (Hobo's capitals sat 0.065em
   high: 2.5px at 1440, 1.5px at 375) */
body.acs-partners .pt-teams__name {
	position: relative;
	top: 0.065em;
}

/* ---------- Hero heading on two lines (designer, 2026-10-02) ----------
   Big hearts. / Bigger giving. at H1, two lines at every width (the yellow
   line is 7.47em: 269px at 375); from 640 it is held on one line. */
@media (min-width: 640px) {
	body.acs-partners .pt-hero__accent {
		white-space: nowrap;
	}
}

@media (min-width: 1024px) {
	body.acs-partners .pt-hero__copy {
		width: auto;
	}

	/* The photo starts 4rem before the heading's longest line ends (7.47em
	   of H1, Bigger giving.), so that line ends in the red fade and the
	   child's face stays clear of it */
	body.acs-partners .pt-hero__media {
		left: calc(max(var(--acs-gutter), (100% - var(--l-wrap)) / 2) + 7.47 * var(--acs-h1-size) - 4rem);
		width: auto;
	}
}

/* ---------- 9.2 Giving (2026-10-02; full sections 2026-10-05) ----------
   One full section per cause, straight on the paper (the two white cards
   are gone; designer, 2026-10-05): the photo with 16px corners at one
   side and, facing it, the logo, the amount on its yellow swipe at H2 over
   what it went to at H4, the line under them at Body L, then the red
   button. The sides swap from one section to the next. Stacked on phones,
   the photo first. */
body.acs-partners .pt-giving {
	display: grid;
	gap: 1.75rem;
	color: var(--acs-ink);
}

/* Grey until the photo arrives (CLAUDE.md rule 5) */
body.acs-partners .pt-giving__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 1rem;
	background: var(--acs-line);
}

body.acs-partners .pt-giving__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The photo eases in a little inside its frame on hover: the site's image
   hover, as the Got a crowd? cards on the location template (designer,
   2026-10-07; it lifted with a shadow before) */
body.acs-partners .pt-giving__media img {
	transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

body.acs-partners .pt-giving__media:hover img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	body.acs-partners .pt-giving__media img {
		transition: none;
	}
}

body.acs-partners .pt-giving__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

body.acs-partners .pt-giving__logo {
	display: block;
	/* Both logos take the same width, so the wide Phoenix Children's mark
	   and the squarer VFR one read as the same size (designer, 2026-10-06;
	   sized by height before, which left VFR looking small) */
	width: 9.5rem;
	height: auto;
	max-height: 5.5rem;
	object-fit: contain;
	object-position: left center;
	/* a logo file with a white ground (VFR) sits on the paper without its
	   white box (designer, 2026-10-05) */
	mix-blend-mode: multiply;
}

/* Greyscale stand-in until the logo arrives (CLAUDE.md rule 5) */
body.acs-partners .pt-giving__logo--empty {
	width: 9rem;
	border-radius: var(--acs-radius);
	background: var(--acs-line);
}

body.acs-partners .pt-giving__title {
	margin: 1.5rem 0 0;
	font-family: var(--acs-font-display);
	font-weight: 400;
	text-transform: uppercase;
}

/* The amount on a yellow highlighter swipe, ink on yellow (designer,
   2026-10-02: yellow text on the paper would read at 1.4:1); the swipe
   draws in from the left as the section scrolls in (partners.js) */
body.acs-partners .pt-giving__amount {
	display: table;
	padding: 0.05em 0.3em 0;
	border-radius: 0.2em;
	background: linear-gradient(var(--acs-yellow), var(--acs-yellow)) left center / 100% 100% no-repeat;
	color: var(--acs-ink);
	font-size: var(--acs-h2-size);
	line-height: var(--acs-h2-lh);
}

body.acs-partners .pt-giving__label {
	display: block;
	margin-top: 0.75rem;
	font-size: var(--acs-h4-size);
	line-height: var(--acs-h4-lh);
	text-wrap: balance;
}

body.acs-partners .pt-giving__text {
	max-width: 32rem;
	margin: 1rem 0 0;
	color: var(--acs-ink-soft);
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
}

body.acs-partners .pt-giving .pt-giving__cta {
	margin-top: 1.75rem;
}

/* the word and letter spans partners.js writes the headings on with: a
   word never breaks across lines, each letter moves on its own */
body.acs-partners .pt-word {
	display: inline-block;
	white-space: nowrap;
}

body.acs-partners .pt-letter {
	display: inline-block;
}

/* The headings that write on are set without kerning pairs: letters in
   their own boxes cannot kern, so with kerning on the text shifted a
   little (the T and the S) the moment the plain text came back at the end
   of the animation (designer, 2026-10-06) */
body.acs-partners .pt-hero__title,
body.acs-partners .pt-giving__title,
body.acs-partners .pt-wall .pt-heading {
	font-kerning: none;
	font-variant-ligatures: none;
}

@media (min-width: 768px) {
	body.acs-partners .pt-giving {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: 2.5rem;
	}

	body.acs-partners .pt-giving--flip .pt-giving__media {
		order: 2;
	}
}

@media (min-width: 1024px) {
	body.acs-partners .pt-giving {
		gap: 4rem;
	}

	/* the line runs the column's full width on desktop, so it sits on two
	   lines (designer, 2026-10-06) */
	body.acs-partners .pt-giving__text {
		max-width: none;
		text-wrap: balance;
	}
}

/* More community partners: a card without a site to open (the local teams)
   is not a link, so it does not lift */
body.acs-partners .pt-tile__link--plain:hover {
	transform: none;
	border-color: var(--acs-line);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* Hero: a white heart after Big hearts. (designer, 2026-10-05; white, not
   yellow, 2026-10-06) */
body.acs-partners .pt-hero__heart {
	display: inline-block;
	margin-left: 0.12em;
	color: var(--acs-white);
	vertical-align: baseline;
}

body.acs-partners .pt-hero__heart svg {
	display: block;
	width: 0.72em;
	height: 0.72em;
	fill: currentColor;
	rotate: 8deg;
}

/* ---------- 9.3 Photo strip (2026-10-02) ----------
   Giving photos in a row, edge to edge, running right to left on Direction
   A's marquee keyframes; 16px corners, as the blog photos. Pauses on hover;
   still with reduced motion. */
body.acs-partners .pt-strip {
	overflow: hidden;
}

body.acs-partners .pt-strip__track {
	display: flex;
	width: max-content;
	animation: acs-goodtime-marquee 45s linear infinite;
}

body.acs-partners .pt-strip:hover .pt-strip__track {
	animation-play-state: paused;
}

body.acs-partners .pt-strip__group {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0 1rem 0 0; /* the gap between the two copies */
	list-style: none;
}

body.acs-partners .pt-strip__photo {
	flex: none;
	width: 16rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 1rem;
	background: var(--acs-placeholder);
}

body.acs-partners .pt-strip__photo img,
body.acs-partners .pt-strip__empty {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 1024px) {
	body.acs-partners .pt-strip__group {
		gap: 1.5rem;
		padding-right: 1.5rem;
	}

	body.acs-partners .pt-strip__photo {
		width: 26rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.acs-partners .pt-strip__track {
		animation: none;
	}
}

/* ---------- 9.6 Partner with us (designer's frame, 2026-10-02) ----------
   Straight on the paper: the eyebrow, the heading at H2 on two lines, the
   line at Body L and the red button at the left; the photo at the right
   with rounded corners. Stacked on phones, the copy first. */
body.acs-partners .pt-join {
	display: grid;
	gap: 2rem;
}

body.acs-partners .pt-join__title {
	margin: 0;
}

body.acs-partners .pt-join__text {
	max-width: 30rem;
	margin: 1rem 0 0;
	color: var(--acs-ink);
	font-size: var(--acs-text-lg-size);
	line-height: var(--acs-text-lg-lh);
}

body.acs-partners .pt-join .pt-join__cta {
	margin-top: 1.75rem;
}

body.acs-partners .pt-join__media {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

body.acs-partners .pt-join__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* simple: the photo with 16px corners, as the blog photos (designer,
   2026-10-02; the torn edges and the note are gone) */
body.acs-partners .pt-join__media {
	border-radius: 1rem;
}

@media (min-width: 1024px) {
	body.acs-partners .pt-join {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: center;
		gap: 4rem;
	}
}

/* ---------- More community partners: four a row (designer, 2026-10-02) ----------
   The wall's heading is now More community partners (no eyebrow); its cards
   run four across from 1024, two rows for eight. */
@media (min-width: 1024px) {
	body.acs-partners .pt-wall__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* A partner without a logo on file: its initials in the display face on a
   grey placeholder, until the file arrives (CLAUDE.md rule 5; designer,
   2026-10-06; the name is under it) */
body.acs-partners .pt-tile__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 5rem;
	height: 5rem;
	padding: 0.2em 1.25rem 0;
	border-radius: var(--acs-radius);
	background: var(--acs-line);
	color: var(--acs-ink);
	font-family: var(--acs-font-display);
	font-size: var(--acs-h4-size);
	line-height: 1;
	letter-spacing: 0.04em;
}

/* Phones (two cards a row): no arrow, so the partner's name takes the
   card's full width and sits on two lines at most (designer, 2026-10-06);
   the whole card is still the link */
@media (max-width: 639px) {
	body.acs-partners .pt-tile__logo {
		--pt-logo-fit: 0.72;
	}

	body.acs-partners .pt-tile__arrow {
		display: none;
	}

	body.acs-partners .pt-tile__foot {
		padding-inline: 0.75rem;
	}

	body.acs-partners .pt-tile__label {
		flex: 1;
		text-wrap: balance;
	}
}

/* With the link chips gone the cards end the wall, so the teams panel's
   yellow sits a full section gap under them (the tear's own reach taken
   off, as before) */
@media (min-width: 1024px) {
	body.acs-partners main > .pt-teams {
		margin-top: calc(var(--acs-section-gap) - (var(--l-tear) * 0.587 - 3px));
	}
}

/* the strip's photos take the cards' gap from 768 too */
@media (min-width: 768px) {
	body.acs-partners .pt-strip__group {
		gap: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* More community partners: Show more under the cards, centred; its chevron
   turns over when the rest are open. Hidden cards stay out of the grid. */
body.acs-partners .pt-tile[hidden] {
	display: none;
}

body.acs-partners .pt-wall__more {
	display: flex;
	justify-content: center;
	margin: 2.5rem 0 0;
}

body.acs-partners .pt-wall__more[hidden] {
	display: none;
}

body.acs-partners .pt-wall__more .l-btn {
	margin-top: 0;
	border: 0;
	font-family: inherit;
	cursor: pointer;
}

body.acs-partners .pt-wall__more svg {
	transition: transform 0.2s ease;
}

body.acs-partners .pt-wall__more [aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* ---------- Partner with us: twelve photos (designer, 2026-10-06) ----------
   The home band's stage holds eight; here it is 3300 units wide with four
   more places at its right end, so the client's ten community photos and
   the page's two giving photos each get their own spot. Scoped to the
   Partners template: Our story also carries the acs-partners class and
   keeps the home band's eight places. */
body.page-template-partners .a-goodtime__group {
	width: calc(3300 * var(--acs-gtu));
}

body.page-template-partners .a-goodtime__photo:nth-child(9) { --x: 2085; --y: 45; --wu: 600; --r: 3deg; --z: 3; }
body.page-template-partners .a-goodtime__photo:nth-child(10) { --x: 2115; --y: 520; --wu: 540; --r: -4deg; --z: 6; }
body.page-template-partners .a-goodtime__photo:nth-child(11) { --x: 2700; --y: 70; --wu: 620; --r: -5deg; --z: 4; }
body.page-template-partners .a-goodtime__photo:nth-child(12) { --x: 2690; --y: 530; --wu: 520; --r: 4deg; --z: 6; }

/* Desktop: a last row short of four sits in the page's centre (one, two or
   three cards), the cards the same width as in a full row (designer,
   2026-10-06). */
@media (min-width: 1024px) {
	body.acs-partners .pt-wall__grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	body.acs-partners .pt-wall__grid > li {
		flex: 0 0 calc((100% - 3 * 1.5rem) / 4);
		min-width: 0;
	}
}

/* Every card's foot is two name lines tall, so the hairline sits at the
   same height on all of them; a one-line name is centred in it (designer,
   2026-10-06). All widths. */
body.acs-partners .pt-tile__label {
	display: flex;
	align-items: center;
	min-height: 2.4em;
	min-height: 2lh;
}

/* The initials placeholders at the logos' size (the logos run about 45px
   tall on phones and 63px on desktop; the placeholders were 80px at every
   width) (designer, 2026-10-06) */
body.acs-partners .pt-tile__empty {
	min-width: 3.5rem;
	height: 2.875rem;
	padding-inline: 0.875rem;
	font-size: 1.125rem;
}

@media (min-width: 1024px) {
	body.acs-partners .pt-tile__empty {
		min-width: 4.5rem;
		height: 4rem;
		padding-inline: 1.125rem;
		font-size: 1.625rem;
	}
}

/* ---------- Style guide pass (2026-10-06) ----------
   Measured against the home page's section rhythm at 375, 768, 1024, 1280
   and 1440: the heading sits 56px above its content from 1024 (32px
   below, as it was), and a heading's line sits 12px under it. */
@media (min-width: 1024px) {
	body.acs-partners .pt-wall__grid {
		margin-top: 3.5rem; /* was 44px */
	}
}

body.acs-partners .pt-giving__text {
	margin-top: 0.75rem; /* was 16px */
}

/* 1024 to 1199: three cards a row, so the longest partner names keep to
   two lines beside the arrow (four a row held them to three lines) */
@media (min-width: 1024px) and (max-width: 1199px) {
	body.acs-partners .pt-wall__grid > li {
		flex-basis: calc((100% - 2 * 1.5rem) / 3);
	}
}

/* ---------- Phones: every section centred (designer, 2026-10-07) ----------
   The two giving blocks (logo, amount, line, button), the teams heading
   and the partner cards' names were left aligned. The hero stays left
   aligned at every width (designer's standing rule, 2026-10-07). */
@media (max-width: 767px) {
	body.acs-partners .pt-giving__copy,
	body.acs-partners .pt-teams__copy {
		text-align: center;
	}

	body.acs-partners .pt-giving__copy {
		align-items: center;
	}

	body.acs-partners .pt-giving__logo {
		object-position: center;
	}

	body.acs-partners .pt-giving__amount {
		margin-inline: auto;
	}

	body.acs-partners .pt-tile__label {
		justify-content: center;
		text-align: center;
	}
}