/**
 * About (page 52) and Contact (page 54).
 *
 * Both pages are Spectra containers edited in the block editor, like the
 * homepage, and load home.css for the shared pieces: the hero scrim
 * (.sd-hero), the closing call to action (.sd-closer) and the button styles.
 * This file adds the sections the homepage doesn't have:
 *
 *   .sd-page-hero      a shorter hero with a lede paragraph
 *   .sd-split          text beside a photo (--reverse puts the photo left)
 *   .sd-cards-section  a heading over a row of .sd-cards info boxes
 *
 * As on the homepage, everything hangs off the className set on each
 * container in the editor.
 */

/* Astra capitalises every heading site-wide. */
.sd-page-hero .uagb-heading-text,
.sd-split .uagb-heading-text,
.sd-cards-section .uagb-heading-text,
.sd-cards .uagb-ifb-title,
.sd-closer .uagb-heading-text {
	text-transform: none;
}

/* Section eyebrow: Spectra's "above heading" text. */
.sd-split .uagb-desc-text,
.sd-cards-section > .uagb-container-inner-blocks-wrap > .wp-block-uagb-advanced-heading .uagb-desc-text {
	margin: 0 0 .8rem;
	color: var(--ast-global-color-0, #21B4A6);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Page hero
   --------------------------------------------------------------------------- */

/* The scrim is the hero's ::before; lift the copy above it. */
.sd-page-hero > * {
	position: relative;
	z-index: 1;
}

/* Line the copy up with the 1200px measure of the sections below. */
.sd-page-hero {
	padding-left: max(40px, calc((100vw - 1200px) / 2)) !important;
	padding-right: max(40px, calc((100vw - 1200px) / 2)) !important;
}

.sd-page-hero .uagb-heading-text {
	max-width: 16ch;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
}

.sd-page-hero .sd-lede {
	max-width: 34rem;
	margin: 1.1rem 0 0;
	color: rgba(237, 246, 243, .85);
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Text beside a photo
   --------------------------------------------------------------------------- */

.sd-split > .uagb-container-inner-blocks-wrap {
	gap: clamp(2rem, 6vw, 5rem) !important;
	align-items: center !important;
}

.sd-split--reverse > .uagb-container-inner-blocks-wrap {
	flex-direction: row-reverse !important;
}

.sd-split--raised {
	background: var(--ast-global-color-4, #1C2A3C);
}

/* Spectra centres a child container's content; the copy reads left. */
.sd-split .sd-split__text {
	align-items: flex-start !important;
	text-align: left;
}

.sd-split .sd-split__text .uagb-heading-text {
	font-size: clamp(1.8rem, 3.2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.015em;
}

.sd-split .sd-split__text .wp-block-uagb-advanced-heading {
	margin-bottom: 1.4rem;
}

.sd-split .sd-split__text p:not(.uagb-desc-text) {
	max-width: 34rem;
	margin: 0 0 1rem;
	color: var(--sd-text-muted, rgba(237, 246, 243, .72));
	font-size: 1.04rem;
	line-height: 1.7;
}

.sd-split .sd-split__text a:not(.uagb-buttons-repeater) {
	color: var(--ast-global-color-0, #21B4A6);
}

.sd-split .wp-block-uagb-buttons {
	width: auto !important;
	margin-top: 1rem;
}

.sd-split__media .wp-block-uagb-image,
.sd-split__media .wp-block-uagb-image__figure {
	width: 100%;
	margin: 0;
}

.sd-split__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 12px;
}

/* ---------------------------------------------------------------------------
   Heading over a row of cards
   --------------------------------------------------------------------------- */

.sd-cards-section--raised {
	background: var(--ast-global-color-4, #1C2A3C);
}

.sd-cards-section .uagb-heading-text {
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -.015em;
}

.sd-cards-section > .uagb-container-inner-blocks-wrap > .wp-block-uagb-advanced-heading {
	margin-bottom: 2.5rem;
	text-align: center;
}

.sd-cards {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem !important;
	width: 100%;
}

.sd-cards .wp-block-uagb-info-box {
	height: 100%;
	padding: 1.9rem 1.75rem;
	border: 1px solid var(--sd-border, rgba(237, 246, 243, .14));
	border-radius: 10px;
	background: var(--ast-global-color-5, #111A28);
	text-align: left;
}

/* On the plain page background the cards take the raised surface instead. */
.sd-cards-section:not(.sd-cards-section--raised) .sd-cards .wp-block-uagb-info-box {
	background: var(--ast-global-color-4, #1C2A3C);
}

.sd-cards .uagb-ifb-title {
	margin-bottom: .55rem;
	font-size: 1.15rem;
	font-weight: 600;
}

.sd-cards .uagb-ifb-desc {
	margin: 0;
	font-size: .98rem;
	line-height: 1.6;
}

/* Contact cards: the address or number is the point, so it leads. */
.sd-cards--contact .uagb-ifb-title {
	color: var(--ast-global-color-0, #21B4A6) !important;
	font-size: .78rem;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.sd-cards--contact .uagb-ifb-desc a {
	display: inline-block;
	margin-bottom: .3rem;
	color: var(--ast-global-color-3, #EDF6F3);
	font-size: 1.15rem;
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.sd-cards--contact .uagb-ifb-desc a:hover,
.sd-cards--contact .uagb-ifb-desc a:focus-visible {
	color: var(--ast-global-color-0, #21B4A6);
}

/* Team: the role sits under the name like a caption. */
.sd-cards--team .uagb-ifb-desc {
	color: var(--ast-global-color-0, #21B4A6) !important;
	font-size: .92rem;
}

/* ---------------------------------------------------------------------------
   Closing call to action: room for more than one button
   --------------------------------------------------------------------------- */

.sd-closer .uagb-desc-text {
	margin-top: .7rem;
	color: var(--sd-text-muted, rgba(237, 246, 243, .72));
	font-size: 1.05rem;
}

.sd-closer .wp-block-uagb-buttons {
	width: 100% !important;
}

.sd-closer .uagb-buttons__wrap {
	flex-wrap: wrap;
	justify-content: center !important;
	gap: .75rem;
}

/* ---------------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------------- */

@media (max-width: 921px) {
	.sd-split > .uagb-container-inner-blocks-wrap,
	.sd-split--reverse > .uagb-container-inner-blocks-wrap {
		flex-direction: column !important;
	}

	.sd-split .sd-split__text,
	.sd-split .sd-split__media {
		max-width: 100% !important;
		width: 100% !important;
	}

	.sd-split__media img {
		aspect-ratio: 4 / 3;
	}

	.sd-cards {
		grid-template-columns: 1fr;
		gap: 1rem !important;
	}

	.sd-page-hero {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}