/* ---------------------------------------------------------------------------
   About / leadership  —  pattern agenda/about
   Ports `.about` from marketing docs/index.html. The mockup's grid
   (260px / 1fr, gap 46px, centred) is expressed with core columns, so only the
   portrait, heading scale and credential pills need CSS here.
--------------------------------------------------------------------------- */
.agenda-about .about-grid {
	align-items: center;
}

/* Round portrait. className lands on the <figure>, the mockup styled the <img>. */
.agenda-about .portrait {
	margin: 0;
}
.agenda-about .portrait img {
	display: block;
	width: 220px;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	border: 10px solid #fff;
	box-shadow: var(--shadow);
}

.agenda-about h2 {
	font-size: 2.5rem;
	line-height: 1.1;
	margin: 8px 0 14px;
}

/* Credential pills. The mockup used spans inside .credentials; paragraphs with
   .credential carry the same look (spans are not allowed in block paragraphs). */
.agenda-about .credentials {
	margin-top: 20px;
}
.agenda-about .credential {
	margin: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 12px;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.3;
}

@media (max-width: 900px) {
	/* Mockup collapses .about-grid one breakpoint above core's 781px stack. */
	.agenda-about .about-grid {
		flex-wrap: wrap;
		text-align: left;
	}
	.agenda-about .about-grid > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 720px) {
	.agenda-about .portrait img {
		width: 180px;
	}
}

/* "Meet Dennis …" link under the credential pills (v2 mockup) */
.agenda-about .about-link { margin: 20px 0 0; }