/* ==========================================================================
   TPA About Us — block components
   --------------------------------------------------------------------------
   Loaded alongside assets/css/portstoronto.css, not instead of it. Everything
   here is scoped to the .tpa- classes the block render templates emit, so it
   cannot reach existing pages.

   Type sizing: the theme sets body font-size in vw, which lands between about
   16px and 20px on desktop but drops to ~13px below 576px. New components
   inherit that scale so they sit naturally in the page, with a 1rem floor on
   small screens so nothing we add goes below 16px. Chrome (buttons, meta,
   captions) is sized in rem so it stays legible regardless.

   Structure: nothing decorative above a heading — headings are navy and sit
   directly on the page, per the site style guide. Everything else stays quiet.
   ========================================================================== */

:root {
	--tpa-navy: #0b3b60;
	--tpa-blue: #1679c5;
	--tpa-pale: #bfdce6;
	--tpa-band: #edf4f8;
	--tpa-ink: #2b2b2b;
	--tpa-dim: #4b5563;
	--tpa-rule: #c9d2da;
	/* A control on either surface: 3.2:1 on the pale blue, 4.6:1 on white (WCAG 1.4.11). */
	--tpa-steel: #577a90;
	--tpa-round: 10px;
	--tpa-lift: 0 3px 6px #00000029;
	--tpa-lift-hi: 0 6px 18px #0b3b6026;
	--tpa-gap: clamp(1rem, 2vw, 1.75rem);
	--tpa-measure: 68ch;
}

/* --------------------------------------------------------------------------
   Shared block chrome
   -------------------------------------------------------------------------- */

.tpa-block {
	margin-block: clamp(2rem, 4vw, 3.25rem);
	color: var(--tpa-ink);
}

.tpa-block:first-child {
	margin-block-start: 0;
}

.tpa-block *,
.tpa-block *::before,
.tpa-block *::after {
	box-sizing: border-box;
}

.tpa-section-heading {
	margin: 0 0 1rem;
	color: var(--tpa-navy);
}

/* Shaded band, for the "use shading to delineate rows, sections" note in the brief. */
.tpa-band {
	background: var(--tpa-band);
	border-radius: var(--tpa-round);
	padding: clamp(1.25rem, 3vw, 2.25rem);
}

.tpa-block-placeholder {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px dashed var(--tpa-rule);
	border-radius: var(--tpa-round);
	color: var(--tpa-dim);
	font-size: 0.9rem;
}

/* Every interactive thing we add gets the same visible focus ring. */
.tpa-block a:focus-visible,
.tpa-block button:focus-visible,
.tpa-block [tabindex]:focus-visible,
.tpa-quicklinks a:focus-visible,
.tpa-newsletter-inline :focus-visible {
	outline: 3px solid var(--tpa-blue);
	outline-offset: 2px;
	border-radius: 3px;
}

.tpa-carousel__btn:focus-visible {
	outline-color: var(--tpa-navy);
}

/* Icon appended to links that leave the site or open a document. */
.tpa-link-icon,
.tpa-doc-list__external {
	margin-inline-start: 0.35em;
	font-size: 0.8em;
	vertical-align: baseline;
}

/* --------------------------------------------------------------------------
   Block styles registered against core blocks
   -------------------------------------------------------------------------- */

/* Lead-in paragraph: the 12pt intro the client sets at the top of each page.
   No measure limit — the round 1 review asked for these to run the full width of the
   content column, like the body copy around them. */
.is-style-tpa-lead-in {
	margin-block-end: 1.5rem;
	font-size: 1.2em;
	line-height: 1.5;
	color: var(--tpa-navy);
}

/* Names-only organisation list, running in columns. */
.is-style-tpa-columns {
	columns: 3 14rem;
	column-gap: 2.5rem;
	padding-inline-start: 1.1em;
}

.is-style-tpa-columns li {
	break-inside: avoid;
	margin-block-end: 0.4em;
}

/* Highlight panel, for the urgent-harbour-issue box on Contact Us. */
.is-style-tpa-highlight {
	position: relative;
	background: var(--tpa-band);
	border-inline-start: 4px solid var(--tpa-navy);
	border-radius: 0 var(--tpa-round) var(--tpa-round) 0;
	padding: clamp(1.1rem, 2.5vw, 1.75rem) clamp(1.1rem, 2.5vw, 1.75rem) clamp(0.6rem, 2vw, 1rem);
	margin-block: 2rem;
}

.is-style-tpa-highlight > :first-child {
	margin-block-start: 0;
}

.is-style-tpa-highlight > :last-child {
	margin-block-end: 0;
}

.is-style-tpa-highlight h2,
.is-style-tpa-highlight h3 {
	color: var(--tpa-navy);
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

.tpa-card-grid__intro {
	max-width: var(--tpa-measure);
	margin-block-end: 1.5rem;
}

.tpa-card-grid__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--tpa-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 992px) {
	.tpa-card-grid__list {
		grid-template-columns: repeat(var(--tpa-cols, 3), 1fr);
	}
}

.tpa-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--tpa-round);
	box-shadow: var(--tpa-lift);
	overflow: hidden;
}

.tpa-band .tpa-card {
	box-shadow: none;
	border: 1px solid var(--tpa-rule);
}

.tpa-card__media {
	margin: 0;
	background: var(--tpa-band);
}

.tpa-card__media img {
	display: block;
	width: 100%;
	/* height:auto is needed because the img height attribute is a presentational
	   hint that would otherwise beat aspect-ratio. */
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.tpa-card-grid--logo .tpa-card__media {
	display: grid;
	place-items: center;
	padding: 1.25rem;
	background: #fff;
	border-block-end: 1px solid var(--tpa-rule);
}

.tpa-card-grid--logo .tpa-card__media img {
	aspect-ratio: auto;
	max-height: 5rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/*
 * Same padded box, on navy. The four Awards and Recognition certification marks the
 * client supplied are white artwork on transparency, so they disappear on a white
 * card. Nothing else about the card changes.
 */
.tpa-card-grid--logo-dark .tpa-card__media {
	display: grid;
	place-items: center;
	/* A floor, so marks of different proportions still line their captions up. */
	min-height: 8rem;
	padding: 1.5rem 1.25rem;
	background: var(--tpa-navy);
	border-block-end: 0;
}

.tpa-card-grid--logo-dark .tpa-card__media img {
	aspect-ratio: auto;
	max-height: 5rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.tpa-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.15rem 1.25rem 1.35rem;
}

.tpa-card__title {
	margin: 0;
	font-size: 1.15em;
	line-height: 1.25;
	color: var(--tpa-navy);
}

.tpa-card__text p {
	margin: 0 0 0.65em;
}

.tpa-card__text p:last-child {
	margin-block-end: 0;
}

.tpa-card__link {
	margin: auto 0 0;
	padding-block-start: 0.5rem;
	font-weight: 600;
}

/* Text-only cards keep the datum rule so they still read as a set. */
.tpa-card-grid--none .tpa-card {
	border-block-start: 3px solid var(--tpa-navy);
	border-radius: 0 0 var(--tpa-round) var(--tpa-round);
}

/* --------------------------------------------------------------------------
   Carousel

   Scroll-snap rather than Bootstrap's carousel: touch swipe comes free, the
   number of slides in view can change per breakpoint, and the track is a real
   scrollable region so keyboard users can reach it. Nothing auto-advances.
   -------------------------------------------------------------------------- */

.tpa-carousel {
	--tpa-slide: 82%;
}

.tpa-carousel__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1.1rem;
}

.tpa-carousel__heading {
	margin: 0;
	color: var(--tpa-navy);
}

.tpa-carousel__controls {
	display: flex;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.tpa-carousel__btn {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tpa-navy);
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.tpa-carousel__btn:hover:not(:disabled) {
	background: var(--tpa-blue);
}

/* A disabled control is exempt from the contrast minimum, but white on grey left the
   chevron unreadable. Muted navy on the pale band reads clearly and still looks off. */
.tpa-carousel__btn:disabled {
	background: var(--tpa-band);
	border: 1px solid var(--tpa-rule);
	color: var(--tpa-dim);
	cursor: default;
}

.tpa-carousel__track {
	display: flex;
	gap: var(--tpa-gap);
	margin: 0;
	padding: 0.35rem 0 1rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/*
	 * The scrollbar is a progress indicator here as much as a control, so the thumb
	 * has to read on the pale blue band as well as on white: --tpa-rule, which it
	 * used to be, all but vanished on the band. The faint track shows the full length.
	 * Chrome and Firefox use these two; Safari uses the -webkit- rules below.
	 */
	scrollbar-width: thin;
	scrollbar-color: var(--tpa-steel) rgb(11 59 96 / 0.12);
}

.tpa-carousel__track::-webkit-scrollbar {
	height: 8px;
}

.tpa-carousel__track::-webkit-scrollbar-track {
	background: rgb(11 59 96 / 0.12);
	border-radius: 4px;
}

.tpa-carousel__track::-webkit-scrollbar-thumb {
	background: var(--tpa-steel);
	border-radius: 4px;
}

.tpa-carousel__slide {
	flex: 0 0 var(--tpa-slide);
	scroll-snap-align: start;
}

.tpa-carousel__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: var(--tpa-round);
	box-shadow: var(--tpa-lift);
	overflow: hidden;
}

.tpa-carousel__media {
	margin: 0;
	background: var(--tpa-band);
}

.tpa-carousel__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Slides with no photograph yet still hold their place in the set. */
.tpa-carousel__media--empty {
	aspect-ratio: 3 / 2;
	background: linear-gradient(180deg, var(--tpa-pale), var(--tpa-band));
}

.tpa-carousel__body {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.15rem 1.35rem 1.4rem;
}

.tpa-carousel__title {
	margin: 0;
	font-size: 1.2em;
	line-height: 1.25;
	color: var(--tpa-navy);
}

.tpa-carousel__text p {
	margin: 0 0 0.65em;
}

.tpa-carousel__text p:last-child {
	margin-block-end: 0;
}

.tpa-carousel__link {
	margin: auto 0 0;
	padding-block-start: 0.6rem;
}

/* Image-only carousels: no card frame, caption sits under the photo. */
.tpa-carousel--image .tpa-carousel__card {
	background: transparent;
	box-shadow: none;
}

.tpa-carousel--image .tpa-carousel__media img {
	border-radius: var(--tpa-round);
	height: auto;
	aspect-ratio: 16 / 10;
}

.tpa-carousel--image .tpa-carousel__body {
	padding: 0.75rem 0.15rem 0;
}

.tpa-carousel__foot {
	display: flex;
	justify-content: center;
}

.tpa-carousel__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tpa-carousel__dots button {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
}

/*
 * A navy ring, filled for the current slide: the same pattern as the page header's
 * dots, so the state reads by shape as well as colour, and the ring holds 8:1 on the
 * pale blue band where the old grey fill (--tpa-rule) measured 1.06:1.
 */
.tpa-carousel__dots button::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	box-sizing: border-box;
	width: 0.75rem;
	height: 0.75rem;
	border: 2px solid var(--tpa-navy);
	border-radius: 50%;
	background: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, scale 0.15s ease;
}

.tpa-carousel__dots button:hover::before {
	border-color: var(--tpa-blue);
	background: var(--tpa-blue);
}

.tpa-carousel__dots button[aria-current="true"]::before {
	border-color: var(--tpa-navy);
	background: var(--tpa-navy);
	scale: 1.25;
}

/*
 * Community Events has 13 slides since round 9, and 13 of the 44px targets are wider
 * than a phone. 24px is still the WCAG 2.5.8 minimum and keeps the row on one line down
 * to about 375px; narrower than that it wraps rather than pushing the page sideways.
 */
@media (max-width: 575px) {
	.tpa-carousel__dots button {
		width: 1.5rem;
		height: 1.5rem;
	}
}

@media (min-width: 768px) {
	.tpa-carousel {
		--tpa-slide: calc((100% - var(--tpa-gap)) / 2);
	}

	.tpa-carousel--image {
		--tpa-slide: 66%;
	}
}

@media (min-width: 992px) {
	.tpa-carousel {
		--tpa-slide: calc((100% - (2 * var(--tpa-gap))) / 3);
	}

	.tpa-carousel--image {
		--tpa-slide: calc((100% - var(--tpa-gap)) / 2);
	}
}

/* --------------------------------------------------------------------------
   People
   -------------------------------------------------------------------------- */

.tpa-people__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tpa-people--row .tpa-person {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem var(--tpa-gap);
	padding-block: 1.75rem;
	border-block-start: 1px solid var(--tpa-rule);
}

.tpa-people--row .tpa-person:first-child {
	border-block-start: 0;
	padding-block-start: 0.5rem;
}

@media (min-width: 768px) {
	.tpa-people--row .tpa-person {
		grid-template-columns: 11rem 1fr;
	}
}

.tpa-people--grid .tpa-people__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--tpa-gap);
}

.tpa-people--grid .tpa-person {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	background: #fff;
	border-radius: var(--tpa-round);
	box-shadow: var(--tpa-lift);
	padding: 1rem 1rem 1.25rem;
}

.tpa-person__media {
	position: relative;
	/* Without this the grid stretches the media column, and its background runs
	   the full height of an expanded biography. */
	align-self: start;
	overflow: hidden;
	border-radius: var(--tpa-round);
	background: var(--tpa-band);
	max-width: 11rem;
}

.tpa-person__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center top;
}

.tpa-person__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	background: var(--tpa-pale);
	color: var(--tpa-navy);
	font-size: 2.5rem;
	font-weight: 700;
}

.tpa-person__body {
	min-width: 0;
}

.tpa-person__name {
	margin: 0;
	font-size: 1.2em;
	line-height: 1.25;
	color: var(--tpa-navy);
}

.tpa-person__role {
	margin: 0.15rem 0 0.75rem;
	color: var(--tpa-dim);
	font-weight: 600;
}

/*
 * Read biography disclosure. Secondary to everything around it — it reveals the
 * rest of a paragraph, it does not lead anywhere — so it is a quiet outline rather
 * than a filled button, and it stands clear of the paragraph above it (round 2
 * review, item 2).
 */
.tpa-person__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	margin-block-start: 1.5rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--tpa-rule);
	border-radius: 25px;
	background: transparent;
	color: var(--tpa-navy);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tpa-person__toggle:hover,
.tpa-person__toggle[aria-expanded="true"] {
	border-color: var(--tpa-navy);
	background: var(--tpa-band);
}

.tpa-person__toggle .bi {
	transition: rotate 0.15s ease;
}

.tpa-person__toggle[aria-expanded="true"] .bi {
	rotate: 180deg;
}

.tpa-person__bio {
	margin-block-start: 0.9rem;
	max-width: var(--tpa-measure);
}

.tpa-person__bio > :first-child {
	margin-block-start: 0;
}

.tpa-person__bio > :last-child {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Document list
   -------------------------------------------------------------------------- */

.tpa-doc-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tpa-doc-list__item + .tpa-doc-list__item {
	border-block-start: 1px solid var(--tpa-rule);
}

.tpa-doc-list__link {
	display: flex;
	/* Centred rather than baseline-aligned, so the larger file icon sits with the row. */
	align-items: center;
	gap: 0.6rem;
	min-height: 2.75rem;
	padding: 0.7rem 0.25rem;
	text-decoration: none;
	color: var(--tpa-navy);
}

.tpa-doc-list__link:hover .tpa-doc-list__label {
	text-decoration-thickness: 2px;
}

/* 24px rather than inherited body size: the client asked for these to read larger. */
.tpa-doc-list__icon {
	flex: 0 0 auto;
	font-size: 24px;
	line-height: 1;
	color: var(--tpa-blue);
}

.tpa-doc-list__label {
	flex: 1 1 auto;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.tpa-doc-list__meta {
	flex: 0 0 auto;
	color: var(--tpa-dim);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tpa-doc-list__empty {
	color: var(--tpa-dim);
}

/* --------------------------------------------------------------------------
   In Focus stories
   -------------------------------------------------------------------------- */

/* Full width, to match the body copy on the rest of the page (round 1 review). */
.tpa-stories__intro {
	margin-block-end: 1.25rem;
}

/*
 * Round 9: the same flat, square-cornered card as the press releases in What's New
 * (the TPA Press plugin's .tpa-press-card), at Claire's request, so the two feeds on
 * Community read as one family. The grid, hairline, padding and type sizes are the
 * plugin's; only the date keeps its own format, which comes from the story.
 */
.tpa-stories__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 991px) {
	.tpa-stories__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (max-width: 575px) {
	.tpa-stories__list {
		grid-template-columns: 1fr;
	}
}

/* The whole card is the click target. The title anchor is stretched over the article
   rather than wrapping it, so the card stays one link and one tab stop. */
.tpa-story article {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #d5e0e6;
}

.tpa-story article:has(a:focus-visible) {
	outline: 3px solid var(--tpa-blue);
	outline-offset: 4px;
}

.tpa-story__media {
	display: block;
	background: var(--tpa-band);
}

.tpa-story__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.tpa-story__body {
	padding: 1.5rem;
}

.tpa-story__date {
	margin: 0;
	color: #516272;
	font-size: 0.9rem;
}

.tpa-story__title {
	margin: 0.4rem 0 0.6rem;
	font-size: 1.35rem;
	line-height: 1.15;
}

.tpa-story__title a {
	color: var(--tpa-navy);
	text-decoration: none;
}

/* Covers the card, so a click anywhere on it follows the story. */
.tpa-story__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tpa-story article:hover .tpa-story__title a {
	text-decoration: underline;
}

/* The card carries the focus ring instead, via :has() above. */
.tpa-story__title a:focus-visible {
	outline: none;
}

.tpa-story__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
}

.tpa-stories__more {
	margin-block-start: 1.25rem;
	font-weight: 600;
}

.tpa-stories__more .bi {
	vertical-align: -0.1em;
}

/* --------------------------------------------------------------------------
   Quick links
   -------------------------------------------------------------------------- */

.tpa-quicklinks {
	background: var(--tpa-band);
	border-radius: var(--tpa-round);
	padding: 1.1rem 1.35rem 1.25rem;
}

/*
 * Sticky variant, switched on per block. Contact Us is long enough that the reader
 * scrolls well past the jump links before deciding they want them, so there they
 * follow down the page. The offset clears the theme's sticky header.
 */
.tpa-quicklinks--sticky {
	position: sticky;
	inset-block-start: var(--tpa-sticky-top, 0.5rem);
	z-index: 20;
	box-shadow: var(--tpa-lift);
}

/*
 * Jumping to a section would otherwise land it underneath the panel that sent you there.
 * Only on pages that actually have a sticky panel, so nothing else gains dead space.
 */
:has(> .tpa-quicklinks--sticky) :is(h2, h3)[id],
:has(.tpa-quicklinks--sticky) .tpa-block[id] {
	scroll-margin-block-start: 15rem;
}

.tpa-quicklinks__title {
	margin: 0 0 0.65rem;
	font-size: 1.5em;
	line-height: 1.25;
	color: var(--tpa-navy);
}

.tpa-quicklinks__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Solid navy, matching the core buttons the theme styles elsewhere in About Us. */
.tpa-quicklinks__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	min-height: 2.75rem;
	padding: 0.35rem 1.25rem;
	border: 0;
	border-radius: 25px;
	background: var(--tpa-navy);
	color: #fff;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 600;
	transition: background-color 0.15s ease;
}

.tpa-quicklinks__list a:hover,
.tpa-quicklinks__list a:focus-visible {
	background: var(--tpa-blue);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Embedded frames
   -------------------------------------------------------------------------- */

.tpa-frame {
	margin-inline: 0;
}

.tpa-frame .ratio,
.tpa-frame__tall {
	border-radius: var(--tpa-round);
	overflow: hidden;
	background: var(--tpa-band);
}

.tpa-frame__tall {
	height: var(--tpa-frame-height, 1650px);
}

.tpa-frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.tpa-frame__caption {
	margin-block-start: 0.6rem;
	color: var(--tpa-dim);
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Newsletter, inline variant — the homepage band

   Lifted from the inline <style> that used to sit inside page-home.php. The
   homepage and the tpa/newsletter-signup block now render the same markup from
   template-parts/widgets/tpa-newsletter.php, so there is one copy of this.
   -------------------------------------------------------------------------- */

.tpa-newsletter {
	--tpa-primary: #0b3b60;      /* deep marine blue: headings, button */
	--tpa-primary-dark: #1679c5; /* button hover */
	--tpa-accent: #1679c5;       /* links */
	--tpa-surface: #bfdce6;      /* section background */
	--tpa-card: #ffffff;         /* input background */
	--tpa-text: #2b2b2b;
	--tpa-text-muted: #4b5563;
	--tpa-border: #0b3b60;
	--tpa-radius: 8px;

	background: var(--tpa-surface);
	color: var(--tpa-text);
	padding: 56px 24px;
}

/*
 * The band goes full width; its contents line up with the rest of the page. 1320px is
 * Bootstrap's .container at xxl, which is what the homepage and the footer use — the
 * markup used to carry the class itself, before the two copies were merged into one
 * template part. Inside page content the band is already narrower than this, so the
 * max-width simply never applies there.
 */
.tpa-newsletter__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 40px;
	align-items: center;
}

.tpa-newsletter__title {
	font-size: 3rem;
	color: var(--tpa-primary);
	margin: 0 0 8px;
}

.tpa-newsletter__subtitle {
	font-size: 15px;
	font-weight: 600;
	color: var(--tpa-accent);
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.tpa-newsletter__body {
	font-size: 16px;
	line-height: 1.6;
	color: var(--tpa-text-muted);
	margin: 0;
}

.tpa-newsletter__divider {
	width: 1px;
	align-self: stretch;
	background: var(--tpa-border);
}

.tpa-newsletter__form-col {
	padding-top: 4px;
}

.tpa-newsletter__form-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--tpa-text);
}

.tpa-newsletter__required-note {
	font-size: 13px;
	color: var(--tpa-text-muted);
	margin: 0 0 16px;
}

.tpa-newsletter__required-note .asterisk {
	color: #b3261e;
}

.tpa-newsletter__field-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.tpa-newsletter__input {
	flex: 1 1 240px;
	min-width: 0;
	padding: 14px 16px;
	font-size: 15px;
	font-family: inherit;
	color: var(--tpa-text);
	background: var(--tpa-card);
	border: 1px solid var(--tpa-border);
	border-radius: var(--tpa-radius);
}

.tpa-newsletter__input:focus-visible {
	outline: 2px solid var(--tpa-accent);
	outline-offset: 1px;
}

.tpa-newsletter__submit {
	flex: 0 0 auto;
	padding: 14px 24px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	color: #fff;
	background: var(--tpa-primary);
	border: none;
	border-radius: var(--tpa-radius);
	cursor: pointer;
	transition: background 0.15s ease;
}

.tpa-newsletter__submit:hover {
	background: var(--tpa-primary-dark);
}

.tpa-newsletter__submit:focus-visible {
	outline: 2px solid var(--tpa-primary-dark);
	outline-offset: 2px;
}

.tpa-newsletter__responses .response {
	margin-top: 12px;
	font-size: 14px;
}

#mce-error-response {
	color: #b3261e;
}

#mce-success-response {
	color: #0f7a3d;
}

/*
 * In page content the band sits inside a column that is already padded, and the
 * heading competes with the page's own h2s at 3rem, so it is dialled back there.
 */
.tpa-newsletter-block .tpa-newsletter {
	border-radius: var(--tpa-round);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.tpa-newsletter-block .tpa-newsletter__title {
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
}

/*
 * The white variant of the band. The pale blue was doing the work of separating the
 * band from the page, so on white a hairline and the same radius take that over --
 * without them the form reads as loose fields dropped into the article.
 */
.tpa-newsletter--white {
	--tpa-surface: #ffffff;
	--tpa-card: #ffffff;

	border: 1px solid var(--tpa-rule);
}

.tpa-newsletter--white .tpa-newsletter__input {
	background: #fbfcfd;
}

@media (max-width: 860px) {
	.tpa-newsletter__inner {
		grid-template-columns: 1fr;
	}

	.tpa-newsletter__divider {
		width: 100%;
		height: 1px;
	}
}

/* --------------------------------------------------------------------------
   Contact details in columns

   The client asked for the Contact Us department contacts to run in columns.
   A grid of cards rather than CSS columns, so a heading never separates from
   the phone number underneath it.
   -------------------------------------------------------------------------- */

/*
 * WordPress puts a .wp-block-group__inner-container between a group and its blocks on
 * a classic theme (wp_restore_group_inner_container). Left alone that wrapper is the
 * grid's only child, and every card stacks. display:contents takes it out of layout so
 * the cards are the grid items.
 */
.is-style-tpa-contact-grid > .wp-block-group__inner-container,
.is-style-tpa-contact-card > .wp-block-group__inner-container {
	display: contents;
}

/*
 * Two columns, not as many as fit. auto-fit gave three on a desktop content column,
 * which left each card about 250px wide -- narrower than
 * communications@torontoportauthority.com, so the address ran out past the card. Two
 * columns is what the client asked for in round 4 and what the longest address needs.
 */
.is-style-tpa-contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tpa-gap);
	margin-block: 1.5rem;
}

@media (max-width: 47.99em) {
	.is-style-tpa-contact-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.is-style-tpa-contact-card {
	padding: 1.1rem 1.25rem 1.25rem;
	background: var(--tpa-band);
	border-radius: var(--tpa-round);
	min-width: 0;
}

/*
 * An email address is one unbroken word. Belt and braces: break-word first, so normal
 * prose still breaks between words, and anywhere as the last resort for an address
 * longer than the column however narrow the screen gets.
 */
.is-style-tpa-contact-card,
.is-style-tpa-contact-card a {
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Both shapes, because the wrapper above may or may not be there. */
.is-style-tpa-contact-card > :first-child,
.is-style-tpa-contact-card > .wp-block-group__inner-container > :first-child {
	margin-block-start: 0;
	padding-block-start: 0;
}

.is-style-tpa-contact-card > :last-child,
.is-style-tpa-contact-card > .wp-block-group__inner-container > :last-child {
	margin-block-end: 0;
}

.is-style-tpa-contact-card h3,
.is-style-tpa-contact-card h4 {
	color: var(--tpa-navy);
	font-size: 1.15em;
}

.is-style-tpa-contact-card ul {
	margin-block-end: 0;
	padding-inline-start: 1.1em;
}

/* --------------------------------------------------------------------------
   Social channels, in page content
   -------------------------------------------------------------------------- */

.tpa-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.tpa-socials a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	color: var(--tpa-navy);
	font-weight: 600;
	text-decoration: none;
}

.tpa-socials a:hover {
	text-decoration: underline;
}

.tpa-socials .bi {
	font-size: 1.4em;
}

/* --------------------------------------------------------------------------
   Small screens, motion, print
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
	/* The theme drops to 3.5vw here, about 13px on a 375px phone.
	   Hold anything we add at 16px or above. */
	.tpa-block,
	.is-style-tpa-lead-in,
	.is-style-tpa-highlight,
	.tpa-quicklinks {
		font-size: max(1rem, 3.5vw);
	}

	.tpa-carousel__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.is-style-tpa-columns {
		columns: 1;
	}

	.tpa-doc-list__link {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tpa-carousel__track {
		scroll-behavior: auto;
	}

	.tpa-block *,
	.tpa-block *::before,
	.tpa-block *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

@media print {
	.tpa-carousel__controls,
	.tpa-carousel__foot,
	.tpa-quicklinks,
	.tpa-newsletter-block {
		display: none;
	}

	.tpa-carousel__track {
		display: block;
		overflow: visible;
	}

	.tpa-person__bio[hidden] {
		display: block !important;
	}

	.tpa-person__toggle {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Newsletter signup, shared by the sidebar widget and the inline block.

   Lifted verbatim from the inline <style> that used to sit at the top of
   template-parts/widgets/portstoronto-socials-cta.php, so there is now one
   copy rather than one per variant. Bootstrap already ships .visually-hidden,
   so that rule is no longer redeclared here.
   -------------------------------------------------------------------------- */

.tpa-newsletter-sb {
	--tpa-primary: #0b3b60;
	--tpa-primary-dark: #1679c5;
	--tpa-surface: #bfdce6;
	--tpa-card: #ffffff;
	--tpa-text: #2b2b2b;
	--tpa-text-muted: #4b5563;
	--tpa-border: #c9d2da;
	--tpa-radius: 8px;

	color: var(--tpa-text);
	background: var(--tpa-surface);
	border: none;
	border-radius: 0.375rem;
	padding: 1rem !important;
	max-width: 340px;
	box-shadow: 0 3px 6px #00000029;
}

.tpa-newsletter-sb__title {
	margin: 0 0 8px;
	color: var(--tpa-primary);
}

/*
 * The same box inside page content, where the column is wider than the right rail.
 * It keeps the rail's proportions rather than stretching to the full measure: the
 * client asked for "the smaller version", and a full-width version of this shape is
 * the band, which is the other setting.
 */
.tpa-newsletter-block--compact .tpa-newsletter-sb {
	max-width: 26rem;
	margin-block: 1.5rem;
	padding: 1.25rem !important;
}

/*
 * On white the drop shadow is the only thing holding the box together, and a shadow
 * on white reads as a mistake at this size. A hairline does the job instead.
 */
.tpa-newsletter-sb--white {
	--tpa-surface: #ffffff;

	border: 1px solid var(--tpa-rule);
	box-shadow: none;
}

.tpa-newsletter-sb--white .tpa-newsletter-sb__input {
	background: #fbfcfd;
}

.tpa-newsletter-sb__body {
	font-size: 14px;
	line-height: 1.5;
	color: var(--tpa-text-muted);
	margin: 0 0 12px;
}

.tpa-newsletter-sb__required-note {
	font-size: 12px;
	color: var(--tpa-text-muted);
	margin: 0 0 12px;
}

.tpa-newsletter-sb__required-note .asterisk {
	color: #b3261e;
}

.tpa-newsletter-sb__input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 14px;
	font-family: inherit;
	color: var(--tpa-text);
	background: var(--tpa-card);
	border: 1px solid var(--tpa-border);
	border-radius: var(--tpa-radius);
	margin-bottom: 12px;
}

.tpa-newsletter-sb__input:focus-visible {
	outline: 2px solid var(--tpa-primary);
	outline-offset: 1px;
}

.tpa-newsletter-sb__submit {
	width: 100%;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	color: #fff;
	background: var(--tpa-primary);
	border: none;
	border-radius: var(--tpa-radius);
	cursor: pointer;
	transition: background 0.15s ease;
}

.tpa-newsletter-sb__submit:hover {
	background: var(--tpa-primary-dark);
}

.tpa-newsletter-sb__submit:focus-visible {
	outline: 2px solid var(--tpa-primary-dark);
	outline-offset: 2px;
}

.tpa-newsletter-sb__responses .response {
	margin-top: 4px;
	margin-bottom: 12px;
	font-size: 13px;
}

/*
 * Field and button only (round 9, Community). No panel, heading or required-field
 * note: the paragraph above introduces the form, so the form sits straight under it
 * with the paragraph's own bottom margin as the only gap. The field and the button
 * take the pill shape of the page's other buttons, so the form reads as one more
 * control in the section rather than as a widget dropped into it.
 */
.tpa-newsletter-block--field {
	margin-block: 0;
}

.tpa-newsletter-field {
	max-width: 30rem;
}

.tpa-newsletter-field__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tpa-newsletter-field__input {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.5rem 1.15rem;
	font: inherit;
	font-size: 1rem;
	color: var(--tpa-ink);
	background: #fff;
	border: 1px solid #8097a7;
	border-radius: 999px;
}

.tpa-newsletter-field__input::placeholder {
	color: #5f6f7c;
}

.tpa-newsletter-field__input:focus-visible {
	outline: 3px solid var(--tpa-blue);
	outline-offset: 2px;
	border-color: var(--tpa-navy);
}

.tpa-newsletter-field__submit {
	flex: 0 0 auto;
	min-height: 2.75rem;
	padding: 0.4rem 1.6rem;
	font: inherit;
	font-size: 1rem;
	color: #fff;
	background: var(--tpa-navy);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.tpa-newsletter-field__submit:hover {
	background: var(--tpa-blue);
}

.tpa-newsletter-field__submit:focus-visible {
	outline: 3px solid var(--tpa-blue);
	outline-offset: 2px;
}

/*
 * Mailchimp marks an invalid field with .mce_inline_error, and can also write a message
 * element with the same class after it, inside the row. The field just turns red; the
 * message gets a line of its own.
 */
.tpa-newsletter-field__input.mce_inline_error {
	border-color: #b3261e;
}

.tpa-newsletter-field__row div.mce_inline_error {
	flex-basis: 100%;
	order: 3;
	margin: 0 0 0 1.15rem;
	padding: 0 !important;
	background: none !important;
	font-size: 0.9rem;
	color: #b3261e !important;
}

.tpa-newsletter-field__responses .response {
	margin-top: 0.5rem;
	font-size: 0.9rem;
}

#mce-error-response {
	color: #b3261e;
}

#mce-success-response {
	color: #0f7a3d;
}

/* The French sidebar previously set this to .8vw, which is about 11px on a
   1400px screen. Hold it at 15px or above, in both languages. */
#portstoronto-socials li {
	font-size: max(0.95rem, 0.8vw);
	margin-block-end: 0.35rem;
}

/* --------------------------------------------------------------------------
   Social channel list, used in page content on the Community page.
   The sidebar has its own copy under #portstoronto-socials.
   -------------------------------------------------------------------------- */

.tpa-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.tpa-socials a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	color: var(--tpa-navy);
	text-decoration: none;
	font-weight: 600;
}

.tpa-socials a:hover {
	text-decoration: underline;
}

.tpa-socials .bi {
	font-size: 1.35rem;
	line-height: 1;
}

/* Shaded panel, used to separate the individual projects on Capital Projects. */
.is-style-tpa-panel {
	background: var(--tpa-band);
	border-radius: var(--tpa-round);
	padding: clamp(1.25rem, 3vw, 2rem);
	margin-block: 1.75rem;
}

.is-style-tpa-panel > :first-child {
	margin-block-start: 0;
}

.is-style-tpa-panel > :last-child {
	margin-block-end: 0;
}

.is-style-tpa-panel h2,
.is-style-tpa-panel h3 {
	color: var(--tpa-navy);
}

/* ==========================================================================
   Round 8
   ========================================================================== */

/* --------------------------------------------------------------------------
   Key Figures block

   The Strategic Priorities tiles Claire liked (white, with the navy datum
   rule) but led by the number, since the number is what a reader scans for.
   The figure is set in the heading face so it reads as display type, and the
   label beneath it says what the number counts.
   -------------------------------------------------------------------------- */

.tpa-figures__intro {
	max-width: var(--tpa-measure);
	margin-block-end: 1.5rem;
}

.tpa-figures__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--tpa-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 992px) {
	.tpa-figures__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tpa-figures__tile {
	padding: 1.25rem 1.5rem 1.5rem;
	background: #fff;
	border: 1px solid var(--tpa-rule);
	border-block-start: 3px solid var(--tpa-navy);
	border-radius: 0 0 var(--tpa-round) var(--tpa-round);
}

.tpa-figures__title {
	margin: 0 0 1rem;
	color: var(--tpa-navy);
	font-size: 1.15em;
}

.tpa-figures__list {
	display: grid;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tpa-figure {
	display: grid;
	gap: 0.15rem;
}

.tpa-figure__value {
	font-family: "Trust-2a", sans-serif;
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	line-height: 1.05;
	color: var(--tpa-navy);
	font-variant-numeric: lining-nums;
}

.tpa-figure__label {
	line-height: 1.4;
	color: var(--tpa-ink);
}

/* --------------------------------------------------------------------------
   Latest Press Releases block

   The cards are the TPA Press plugin's own, styled by its press.css. The
   homepage adds a few overrides inline in page-home.php; the ones that matter
   here are repeated, in rem rather than the homepage's vw sizes.
   -------------------------------------------------------------------------- */

.tpa-press-feed__intro {
	max-width: var(--tpa-measure);
	margin-block-end: 1.5rem;
}

.tpa-press-feed .tpa-press-listing {
	margin: 0;
}

.tpa-press-feed .tpa-press-card h2,
.tpa-press-feed .tpa-press-card h3,
.tpa-press-feed .tpa-press-card h4 {
	margin-block: 0.4rem 0.6rem;
	font-size: 1.35rem;
	line-height: 1.15;
}

.tpa-press-feed .tpa-press-card :is(h2, h3, h4) a {
	text-decoration: none;
}

.tpa-press-feed .tpa-press-card :is(h2, h3, h4) a:hover {
	text-decoration: underline;
}

.tpa-press-feed .tpa-press-card p {
	font-size: 1rem;
	font-weight: 400;
	font-style: normal;
}

.tpa-press-feed__more {
	margin-block-start: 1.75rem;
}

/* --------------------------------------------------------------------------
   Page header: photo carousel or video (template-parts/page-hero.php)

   Every slide sits in the same grid cell and only the active one is opaque,
   so the header takes the height of one photograph whichever is showing and
   the change is a crossfade rather than a slide.
   -------------------------------------------------------------------------- */

.tpa-hero {
	position: relative;
	width: 100%;
	--tpa-hero-height: 55vh;
}

.tpa-hero__media {
	display: grid;
}

.tpa-hero__slide {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}

.tpa-hero__slide.is-active {
	opacity: 1;
}

.tpa-hero__img,
#banner-image .tpa-hero__img {
	display: block;
	width: 100%;
	height: var(--tpa-hero-height);
	object-fit: cover;
}

@media only screen and (orientation: portrait) {
	.tpa-hero {
		--tpa-hero-height: 25vh;
	}
}

.tpa-hero__controls {
	position: absolute;
	inset-inline-end: max(1rem, calc((100% - 1296px) / 2));
	inset-block-end: 1rem;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem 0.25rem 0.25rem;
	background: rgb(11 59 96 / 0.82);
	border-radius: 999px;
}

.tpa-hero__toggle {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 1.35rem;
	cursor: pointer;
}

.tpa-hero__toggle[hidden] {
	display: none;
}

.tpa-hero__toggle:hover {
	background: rgb(255 255 255 / 0.15);
}

.tpa-hero__dots {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A 24px target around a 10px dot (WCAG 2.5.8). */
.tpa-hero__dots button {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.tpa-hero__dots button::before {
	content: "";
	width: 0.65rem;
	height: 0.65rem;
	border: 2px solid #fff;
	border-radius: 50%;
	transition: background-color 0.2s;
}

.tpa-hero__dots button[aria-current="true"]::before,
.tpa-hero__dots button:hover::before {
	background: #fff;
}

.tpa-hero__toggle:focus-visible,
.tpa-hero__dots button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 1px;
	border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Feature Page template (page-feature.php)

   One loud thing: the header. It is taller than a standard banner and the page
   title is set over it on a navy card that steps down across the bottom edge,
   so the page opens on a photograph and a name rather than on site chrome.
   Everything below is quiet: full-width sections that alternate white and the
   site's pale blue, with the content held to the same width as the header and
   the breadcrumbs.
   -------------------------------------------------------------------------- */

.tpa-feature {
	/* Bootstrap's .container widths, so sections line up with the breadcrumbs. */
	--tpa-page: 100%;
	--tpa-gutter: 0.75rem;
	--tpa-section-pad: max(var(--tpa-gutter), calc((100% - var(--tpa-page)) / 2 + var(--tpa-gutter)));
}

@media (min-width: 576px) {
	.tpa-feature { --tpa-page: 540px; }
}

@media (min-width: 768px) {
	.tpa-feature { --tpa-page: 720px; }
}

@media (min-width: 992px) {
	.tpa-feature { --tpa-page: 960px; }
}

@media (min-width: 1200px) {
	.tpa-feature { --tpa-page: 1140px; }
}

@media (min-width: 1400px) {
	.tpa-feature { --tpa-page: 1320px; }
}

.tpa-feature .tpa-hero {
	--tpa-hero-height: clamp(24rem, 72vh, 50rem);
}

@media only screen and (orientation: portrait) {
	.tpa-feature .tpa-hero {
		--tpa-hero-height: clamp(20rem, 58vh, 40rem);
	}
}

.tpa-hero__title {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 1;
	pointer-events: none;
}

.tpa-hero__h1 {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	padding: 1.1rem 1.6rem 1rem;
	background: var(--tpa-navy);
	color: #fff;
	font-size: clamp(2.4rem, 5.5vw, 4.5rem);
	line-height: 1.02;
	pointer-events: auto;
}

/* The card steps halfway down out of the photograph on wider screens. */
@media (min-width: 768px) {
	.tpa-hero__h1 {
		transform: translateY(50%);
	}

	.tpa-hero--titled + .tpa-feature__crumbs {
		padding-block-start: clamp(2.25rem, 4.5vw, 3.75rem);
	}
}

/* On a phone the title sits on the photograph, so the controls move to the top. */
@media (max-width: 767.98px) {
	.tpa-hero--titled .tpa-hero__controls {
		inset-block: 0.75rem auto;
	}
}

.tpa-feature__crumbs hr {
	margin-block-end: 0;
}

/* Sections run edge to edge; their contents keep to the page width. */
.tpa-feature__content > .is-style-tpa-section,
.tpa-feature__content > .is-style-tpa-section-shaded {
	margin: 0;
	padding-block: clamp(3rem, 7vw, 5.5rem);
	padding-inline: var(--tpa-section-pad);
}

.tpa-feature__content > .is-style-tpa-section-shaded {
	background: var(--TPA-Secondary, var(--tpa-pale));
}

/* The breadcrumb rule already separates the first section from the header. */
.tpa-feature__content > :first-child:is(.is-style-tpa-section, .is-style-tpa-section-shaded) {
	padding-block-start: clamp(2.25rem, 4.5vw, 3.5rem);
}

/*
 * The footer carries Bootstrap's mt-5. Under a page that ends on a shaded section that
 * leaves a white strip between the two; the last section's own padding is spacing enough.
 */
body:has(.tpa-feature) #footer {
	margin-top: 0 !important;
}

/* Anything an editor places outside a section still keeps to the page width. */
.tpa-feature__content > :not(.is-style-tpa-section):not(.is-style-tpa-section-shaded) {
	margin-inline: var(--tpa-section-pad);
}

.tpa-feature__content > :not(.is-style-tpa-section):not(.is-style-tpa-section-shaded):first-child {
	margin-block-start: clamp(2rem, 5vw, 3.5rem);
}

/* Both shapes, because the group's inner wrapper may or may not be there. */
:is(.is-style-tpa-section, .is-style-tpa-section-shaded) > :first-child,
:is(.is-style-tpa-section, .is-style-tpa-section-shaded) > .wp-block-group__inner-container > :first-child {
	margin-block-start: 0;
}

:is(.is-style-tpa-section, .is-style-tpa-section-shaded) > :last-child,
:is(.is-style-tpa-section, .is-style-tpa-section-shaded) > .wp-block-group__inner-container > :last-child {
	margin-block-end: 0;
}

.tpa-feature__content h2.wp-block-heading,
.tpa-feature__content .tpa-section-heading {
	margin-block-end: 1.25rem;
	color: var(--tpa-navy);
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	line-height: 1.1;
}

.tpa-feature__content h3.wp-block-heading {
	color: var(--tpa-navy);
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	line-height: 1.15;
}

.tpa-feature__content :is(.is-style-tpa-section, .is-style-tpa-section-shaded) p {
	max-width: var(--tpa-measure);
}

/* #1679C5 on the pale blue is about 3:1, short of AA for text, so links go navy there. */
.is-style-tpa-section-shaded a:not(.wp-block-button__link):not(.btn) {
	color: var(--tpa-navy);
}

/* The section is the band now; a block's own shading would be a band on a band. */
.tpa-feature__content .tpa-band {
	padding: 0;
	background: transparent;
	border-radius: 0;
}

/* Two groups side by side. Used inside sections on Community. */
.is-style-tpa-pair > .wp-block-group__inner-container {
	display: contents;
}

.is-style-tpa-pair {
	display: grid;
	gap: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 768px) {
	.is-style-tpa-pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Each half is a group, and on a classic theme WordPress wraps both the pair's and each
 * half's contents in .wp-block-group__inner-container, so the halves are reached through
 * .wp-block-group rather than as direct children.
 */
.is-style-tpa-pair .wp-block-group > :first-child,
.is-style-tpa-pair .wp-block-group > .wp-block-group__inner-container > :first-child {
	margin-block-start: 0;
}

.is-style-tpa-pair .wp-block-group > :last-child,
.is-style-tpa-pair .wp-block-group > .wp-block-group__inner-container > :last-child {
	margin-block-end: 0;
}

/* A photograph as one half: Community Support since round 9. Flat, like the cards. */
.is-style-tpa-pair .wp-block-image {
	margin: 0;
}

.is-style-tpa-pair .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.tpa-feature__content .is-style-tpa-pair h2 {
	font-size: clamp(1.75rem, 2.8vw, 2.25rem);
}

/* Except in the opening section, where the heading beside the intro is the page's first word after the title. */
.tpa-feature__content > :first-child .is-style-tpa-pair h2 {
	font-size: clamp(2.25rem, 4.2vw, 3.4rem);
	line-height: 1.05;
}

/* Stacked on a phone, the opening heading belongs with the intro beneath it. */
.tpa-feature__content > :first-child .is-style-tpa-pair {
	row-gap: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.tpa-hero__slide,
	.tpa-hero__dots button::before {
		transition: none;
	}
}

@media print {
	.tpa-hero__controls {
		display: none;
	}

	.tpa-hero__slide:not(.is-active) {
		display: none;
	}
}