/* =========================================================
   DSAI-RC — CONTENT & DETAIL PAGES
   About, People, a Person profile, the three article layouts
   (News / Project / Research) and FAQ.
   Layout only — colours and controls live in brand.css.
   ========================================================= */

body.dsairc-detail .dsairc-shell {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding-inline: 0;
}

body.dsairc-detail .wp-block-group.alignfull {
	padding-inline: var(--ev-gutter) !important;
}

/* Every band on a content page keeps the same vertical rhythm; the left
   hairline itself is painted site-wide from brand.css. */
.dsairc-about-intro,
.dsairc-principles,
.dsairc-people-section,
.dsairc-person-detail,
.dsairc-person-contributions,
.dsairc-article-body,
.dsairc-article-contributors,
.dsairc-article-related,
.dsairc-faq-section {
	position: relative;
	padding-block: 80px 60px;
}

.dsairc-principles,
.dsairc-person-contributions,
.dsairc-article-contributors,
.dsairc-article-related {
	background-color: var(--ev-paper);
}

/* About is the one page where the partner marquee lands straight after
   a paper band — it flips to white so the alternation holds. */
.dsairc-principles + .dsairc-partners {
	background-color: #ffffff !important;
}


/* ---------------------------------------------------------
   ABOUT
   --------------------------------------------------------- */

.dsairc-about-split {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.dsairc-about-split-body .dsairc-section-title {
	margin-bottom: 24px;
}

.dsairc-principles-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 40px;
}

.dsairc-principles-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

/* Photo strip spans the full row above the three statements. */
.dsairc-principles-media {
	grid-column: 1 / -1;
	order: -1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
}

.dsairc-principles-media img {
	display: block;
	width: 100%;
	height: clamp(160px, 18vw, 230px);
	border-radius: var(--ev-radius);
	object-fit: cover;
}

.dsairc-principle-card {
	padding: 40px 32px;
	border-radius: var(--ev-radius-lg);
}

.dsairc-principle-card.is-dark {
	background: var(--ev-navy);
}

.dsairc-principle-card.is-teal {
	background: var(--ev-steel);
}

.dsairc-principle-title {
	margin: 0 0 12px;
	color: #ffffff;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.dsairc-principle-text {
	margin: 0;
	color: #ffffff;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
}


/* ---------------------------------------------------------
   PEOPLE
   --------------------------------------------------------- */

.dsairc-people-group + .dsairc-people-group {
	margin-top: 60px;
}

.dsairc-people-group-title {
	margin: 0 0 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ev-line);
	color: var(--ev-navy);
	font-size: 28px;
	font-weight: 700;
	line-height: 35px;
}

.dsairc-people-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
	gap: 40px;
}

.dsairc-people-grid.is-compact {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.dsairc-person-card {
	overflow: visible;
	border-radius: 0;
	background: transparent;
	transition: none;
}

.dsairc-person-card:hover {
	transform: none;
}

.dsairc-person-photo {
	display: block;
	position: relative;
	aspect-ratio: 4 / 5;
	margin: 0 0 20px;
	overflow: hidden;
	border-radius: var(--ev-radius);
	background: var(--ev-paper);
}

.dsairc-person-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dsairc-person-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--ev-blue);
	font-size: 56px;
	font-weight: 700;
}

.dsairc-person-body {
	padding: 0;
}

.dsairc-person-tag {
	display: inline-block;
	margin-bottom: 12px;
	padding: 6px 16px;
	border-radius: var(--ev-pill);
	background: var(--ev-paper);
	color: var(--ev-navy);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.dsairc-person-prefix,
.dsairc-person-suffix {
	display: block;
	color: var(--ev-navy);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
}

.dsairc-person-name {
	margin: 2px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.dsairc-person-name a {
	color: var(--ev-navy);
	text-decoration: none;
}

.dsairc-person-name a:hover {
	color: var(--ev-blue);
}


/* ---------------------------------------------------------
   PERSON DETAIL
   --------------------------------------------------------- */

/* One grid holds the photo/contact column, the identity block and the bio,
   so the bio sits under the name instead of running full width beneath a
   half-empty row. .dsairc-profile is display:contents so the shortcode's
   wrapper does not break the grid it feeds. */
.dsairc-person-layout {
	display: grid;
	grid-template-columns: 370px minmax(0, 1fr);
	gap: 40px 40px;
	align-items: start;
}

.dsairc-profile {
	display: contents;
}



.dsairc-profile-photo {
	margin: 0 0 24px;
}

.dsairc-profile-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--ev-radius-lg);
	object-fit: cover;
}

.dsairc-profile-contact {
	padding: 32px;
	border-radius: var(--ev-radius-lg);
	background: var(--ev-paper);
}

.dsairc-profile-contact .dsairc-block-title {
	margin-bottom: 16px;
	font-size: 18px;
	line-height: 18px;
}

.dsairc-profile-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dsairc-profile-links li {
	position: relative;
	padding-left: 30px;
}

.dsairc-profile-links li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 2px;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border: 3px solid var(--ev-lime);
	border-radius: 50%;
}

.dsairc-profile-links li + li {
	margin-top: 10px;
}

.dsairc-profile-links a {
	color: var(--ev-blue);
	font-size: 18px;
	font-weight: 400;
	word-break: break-word;
}

.dsairc-profile-greeting {
	margin: 0;
	color: var(--ev-navy);
	font-size: 18px;
	font-weight: 400;
}

.dsairc-profile-prefix,
.dsairc-profile-suffix {
	display: block;
	color: var(--ev-navy);
	font-size: 18px;
	font-weight: 400;
}

.dsairc-profile-name {
	margin: 4px 0;
	color: var(--ev-navy);
	font-size: clamp(28px, 2.3vw, 40px);
	font-weight: 700;
	line-height: 1.1;
}

.dsairc-profile-role {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
}

.dsairc-person-bio {
	max-width: 855px;
	margin-top: 32px;
	color: var(--ev-navy);
	font-size: 18px;
	line-height: 1.6;
}

.dsairc-contribution-group + .dsairc-contribution-group {
	margin-top: 60px;
}

.dsairc-contribution-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px;
}

.dsairc-contribution-item {
	padding: 0;
	border-radius: 0;
	background: transparent;
}

.dsairc-contribution-date {
	display: block;
	margin: 12px 0 8px;
	color: var(--ev-navy);
	font-size: 12px;
	font-weight: 700;
}

.dsairc-contribution-title {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.dsairc-contribution-title a {
	color: var(--ev-navy);
	text-decoration: none;
}

.dsairc-contribution-title a:hover {
	color: var(--ev-blue);
}

.dsairc-contribution-excerpt {
	margin: 0 0 20px;
	color: var(--ev-navy);
	font-size: 18px;
	line-height: 1.4;
}


/* ---------------------------------------------------------
   ARTICLE DETAIL — shared bones for News / Project / Research
   --------------------------------------------------------- */

/* The scoped selector is what beats WordPress' constrained-layout
   auto margins — without it the article floats to the middle while
   every other band stays flush with the gutter. */
body.dsairc-detail .dsairc-article-shell {
	box-sizing: border-box;
	width: 100%;
	max-width: 855px;
	margin-inline: 0;
	padding-inline: 0;
}

.dsairc-article-cover {
	margin-bottom: 40px;
}

.dsairc-article-cover img {
	width: 100%;
	border-radius: var(--ev-radius-lg);
}

.dsairc-article-body .wp-block-post-content {
	color: var(--ev-navy);
	font-size: 18px;
	line-height: 1.7;
}

.dsairc-article-body .wp-block-post-content h2,
.dsairc-article-body .wp-block-post-content h3 {
	color: var(--ev-navy);
	font-weight: 700;
}

.dsairc-article-nav {
	gap: 24px;
	margin-top: 60px;
	padding-top: 32px;
	border-top: 1px solid var(--ev-line);
}

.dsairc-article-nav a {
	color: var(--ev-blue);
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}

.dsairc-article-nav a:hover {
	color: var(--ev-navy);
}


/* ---------------------------------------------------------
   RESEARCH DETAIL — abstract beside the publication record
   --------------------------------------------------------- */

.dsairc-research-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 370px;
	gap: 40px;
	align-items: start;
	max-width: none;
	margin: 0;
}

/* [dsairc_publication] renders nothing until an editor fills the
   publication fields — don't hold a column open for it. */
.dsairc-research-grid:not(:has(.dsairc-publication)) {
	grid-template-columns: minmax(0, 1fr);
}

.dsairc-research-abstract .wp-block-post-content {
	color: var(--ev-navy);
	font-size: 18px;
	line-height: 1.7;
}

.dsairc-publication {
	position: sticky;
	top: 100px;
	padding: 32px;
	border-radius: var(--ev-radius-lg);
	background: var(--ev-navy);
	color: #ffffff;
}

.dsairc-publication-list {
	margin: 0 0 24px;
}

.dsairc-publication-row + .dsairc-publication-row {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.dsairc-publication-row dt {
	margin: 0 0 6px;
	color: var(--ev-lime);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.dsairc-publication-row dd {
	margin: 0;
	font-size: 18px;
	line-height: 1.4;
}


/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */

.dsairc-faq-split {
	display: grid;
	grid-template-columns: 458px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.dsairc-faq-aside {
	position: relative;
	overflow: hidden;
	padding: 40px 32px;
	border-radius: var(--ev-radius-lg);
	background: var(--ev-navy);
	color: #ffffff;
}

.dsairc-faq-aside .dsairc-section-eyebrow.is-on-dark {
	margin-bottom: 20px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ev-lime);
	font-size: 18px;
	font-weight: 700;
	line-height: 18px;
}

.dsairc-faq-aside-title {
	margin: 0 0 16px;
	color: #ffffff;
	font-size: clamp(28px, 2.1vw, 34px);
	font-weight: 700;
	line-height: 1.05;
}

.dsairc-faq-aside-text {
	margin: 0 0 32px;
	color: #ffffff;
	font-size: 18px;
	line-height: 1.5;
}

.dsairc-faq-contact {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.dsairc-faq-contact li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 18px;
	line-height: 1.3;
}

.dsairc-faq-contact li + li {
	margin-top: 16px;
}

.dsairc-faq-contact svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--ev-lime);
}

.dsairc-faq-contact a {
	color: #ffffff;
	text-decoration: none;
}

.dsairc-faq-contact a:hover {
	color: var(--ev-lime);
}

.dsairc-faq-main .dsairc-section-title {
	margin: 16px 0 12px;
}

.dsairc-faq-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 32px;
}

/* The card, the summary row and the +/- ring all live in brand.css
   under .wp-block-details, so every accordion on the site matches. */


/* ---------------------------------------------------------
   CONTACT — reuses the FAQ split; only the map is new
   --------------------------------------------------------- */

/* WordPress' constrained layout caps direct children at the global content
   size, which left the map narrower than the column holding it. */
.dsairc-faq-main .dsairc-map,
.dsairc-faq-main .dsairc-map-facts,
.dsairc-faq-main .dsairc-map-actions {
	width: 100%;
	max-width: none;
}

.dsairc-map {
	margin: 32px 0 0;
	overflow: hidden;
	border: 1px solid var(--ev-line);
	border-radius: var(--ev-radius-lg);
	background: var(--ev-paper);
}

.dsairc-map iframe {
	display: block;
	width: 100%;
	height: clamp(280px, 34vw, 400px);
	border: 0;
}

.dsairc-map-facts {
	margin-top: 24px;
}

.dsairc-map-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}


/* ---------------------------------------------------------
   404
   --------------------------------------------------------- */

.dsairc-404 .dsairc-section-title {
	margin: 8px 0 12px;
}

.dsairc-404-links {
	margin-top: 32px;
	max-width: 855px;
}

.dsairc-404-links a.ev-list-title {
	color: var(--ev-navy);
	text-decoration: none;
}

.dsairc-404-links a.ev-list-title:hover {
	color: var(--ev-blue);
}

/* Scoped past body.dsairc-detail .dsairc-shell, which clears max-width. */
body.dsairc-detail .dsairc-404-search {
	max-width: 560px;
	margin-top: 40px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {
	.dsairc-research-grid,
	.dsairc-faq-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.dsairc-publication {
		position: static;
	}

	.dsairc-principles-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.dsairc-about-split,
	.dsairc-person-layout {
		grid-template-columns: minmax(0, 1fr);
	}



	.dsairc-principles-media {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.dsairc-principles-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.dsairc-people-grid,
	.dsairc-people-grid.is-compact {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
}