/* =========================================================================
   Article Body (TOA) — block styles
   Colours from Figma: section bg #fff, sidebar author name pink #FF3F8F,
   body text dark grey, section headings dark purple, numbered
   sub-headings a slightly lighter purple, pink underline bar under the
   author card, share icons on pink/dark/yellow brand-palette squares.
   ========================================================================= */

.toa-ab {
	--toa-purple:     var(--wp--preset--color--brand-purple, #410064);
	--toa-pink:       var(--wp--preset--color--brand-pink, #ff3f8f);
	--toa-yellow:     #fecd50;
	--toa-body-text:  #4e4e4e;

	background: #fff;
	color: var(--toa-body-text);
	padding-block: clamp(2rem, 5vw, 3.5rem);
	padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.toa-ab__inner {
	max-width: 1080px;
	margin-inline: auto;
	display: flex;
	align-items: flex-start;
	gap: clamp(2rem, 4vw, 3.5rem);
}

/* Sidebar */
.toa-ab__sidebar {
	flex: 0 0 220px;
	position: sticky;
	top: 2rem;
}
.toa-ab__author-photo {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 2px;
}
.toa-ab__author-name {
	margin: 0.75rem 0 0;
	color: var(--toa-pink);
	font-family: var(--wp--preset--font-family--heading, "Poppins", system-ui, sans-serif);
	font-weight: 700;
	font-size: 0.9375rem;
}
.toa-ab__author-bio {
	margin: 0.5rem 0 0;
	font-family: var(--Typography-family-body, var(--wp--preset--font-family--body, "Sora", system-ui, sans-serif));
	font-size: 0.8125rem;
	line-height: 1.5;
}
.toa-ab__author-underline {
	display: block;
	width: 100%;
	height: 6px;
	margin-top: 1rem;
	background: var(--toa-pink);
}

.toa-ab__share {
	margin-top: 2.5rem;
}
.toa-ab__share-label {
	margin: 0 0 0.75rem;
	color: var(--toa-purple);
	font-weight: 700;
	font-size: 0.875rem;
}
.toa-ab__share-icons {
	display: flex;
	gap: 0.5rem;
}
.toa-ab__share-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 4px;
}
.toa-ab__share-icon svg {
	width: 16px;
	height: 16px;
}
.toa-ab__share-icon--pink   { background: var(--toa-pink); }
.toa-ab__share-icon--dark   { background: var(--toa-purple); }
.toa-ab__share-icon--yellow { background: var(--toa-yellow); }
.toa-ab__share-icon--yellow svg path,
.toa-ab__share-icon--yellow svg rect,
.toa-ab__share-icon--yellow svg circle {
	fill: var(--toa-purple);
}

/* Main content column */
.toa-ab__content {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 700px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.toa-ab__heading {
	margin: 1.5rem 0 0.25rem;
	color: var(--toa-purple);
	font-family: var(--wp--preset--font-family--heading, "Poppins", system-ui, sans-serif);
	font-weight: 700;
	line-height: 1.3;
}
.toa-ab__heading--h2 {
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
}
.toa-ab__heading--h3 {
	margin-top: 1.25rem;
	color: var(--primary-purple-purple-900, #410064);
	font-family: var(--Typography-family-body, var(--wp--preset--font-family--body, "Sora", system-ui, sans-serif));
	font-size: var(--Typography-size-h6, 22px);
	font-style: normal;
	font-weight: 400;
}

.toa-ab__body {
	margin: 0;
	font-family: var(--Typography-family-body, var(--wp--preset--font-family--body, "Sora", system-ui, sans-serif));
	font-size: 0.9375rem;
	line-height: 1.65;
}

.toa-ab__list {
	margin: 0;
	padding-left: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-family: var(--Typography-family-body, var(--wp--preset--font-family--body, "Sora", system-ui, sans-serif));
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Plain paragraph section — same body text style, just no heading above it */
.toa-ab__section--paragraph {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Divider — same pink bar used under the author sidebar card, droppable
   anywhere in the content flow via its own section type. */
.toa-ab__divider {
	display: block;
	width: 100%;
	height: 6px;
	margin: 0.5rem 0;
	background: var(--toa-pink);
}

/* Captioned image */
.toa-ab__section--image {
	margin: 0.5rem 0;
}
.toa-ab__section--image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}
.toa-ab__section--image figcaption {
	margin-top: 0.5rem;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--toa-body-text);
}

/* Pull quote */
.toa-ab__section--quote {
	margin: 1rem 0;
	padding: 0;
}
.toa-ab__quote-mark {
	display: block;
	width: 28px;
	height: 21px;
}
.toa-ab__quote-mark--close {
	margin-top: 0.75rem;
}
.toa-ab__quote-text {
	margin: 0.75rem 0;
	color: #414141;
	font-family: var(--Typography-family-body, var(--wp--preset--font-family--body, "Sora", system-ui, sans-serif));
	font-weight: 700;
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	line-height: 1.35;
}
.toa-ab__quote-attribution {
	display: flex;
	flex-direction: column;
	font-size: 0.875rem;
}
.toa-ab__quote-name {
	color: #414141;
	font-weight: 700;
}
.toa-ab__quote-role {
	color: #414141;
	font-weight: 400;
}

/* Stack sidebar above content on narrower screens */
@media (max-width: 780px) {
	.toa-ab__inner {
		flex-direction: column;
	}
	.toa-ab__sidebar {
		position: static;
		flex: none;
		width: 100%;
		max-width: 260px;
	}
	.toa-ab__content {
		max-width: 100%;
	}
}