/*
 * About Bennelongia page — hero + dynamic content sections rendered from
 * the "About us page" field group's about_sections repeater (see
 * template-parts/about/about-hero.php and about-sections.php).
 *
 * Deliberately independent of reports.css/publications.css/bn-publications.css
 * — same design language (fonts, colours, radii) as the rest of the site,
 * but no shared selectors, so this page can never collide with those.
 */

.about-hero,
.about-section {
	--ab-font: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ab-heading: #030712;
	--ab-body: #364153;
	--ab-green: #7FB04F;
	--ab-cream: #FCECD8;
	--ab-white-band: #F7F7F8;
	--ab-border: #F1F1F3;
	--ab-max-width: 1704px;
}

/* =============================================================================
   Hero
   ============================================================================= */

.about-hero {
	position: relative;
	max-width: 1880px;
	height: 400px;
	margin: 0 auto;
	border-radius: 20px;
	overflow: hidden;
	background-color: #1B250E;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}

.about-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
}

.about-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--ab-max-width);
	margin: 0 auto;
	padding: 0 40px;
}

.about-hero__title {
	margin: 0;
	font-family: var(--ab-font);
	font-size: 52px;
	font-weight: 600;
	line-height: 60px;
	color: #FFFFFF;
}

/* =============================================================================
   Content sections
   ============================================================================= */

.about-section {
	max-width: var(--ab-max-width);
	margin: 40px auto 0;
	padding: 0 24px;
}

/* Invertebrate Taxonomy page only (see
   template-parts/taxonomy/taxonomy-content.php) — this reused .about-section
   card sits directly under that page's own hero, where the shared 40px
   inter-section rhythm above reads as too tight against a full-bleed hero
   image; giving it equal top/bottom spacing here is scoped to this one
   instance so the About Bennelongia page's own section rhythm is untouched. */
.taxonomy-content-section {
	margin-top: 60px;
	margin-bottom: 60px;
}

/* --- Alternating image + text card --- */

.about-section--split .about-section__inner {
	display: flex;
	align-items: center;
	gap: 60px;
	border-radius: 20px;
	padding: 40px;
}

.about-section--image-left .about-section__inner {
	flex-direction: row-reverse;
}

.about-section--bg-cream .about-section__inner {
	background: var(--ab-cream);
}

.about-section--bg-white .about-section__inner {
	background: var(--ab-white-band);
}

.about-section--bg-blue .about-section__inner {
	background: linear-gradient(135deg, #C0E4F7 0%, #F1F9FE 100%);
}

.about-section__text {
	flex: 1 1 0;
	min-width: 0;
}

.about-section__media {
	flex: 1 1 0;
	min-width: 0;
}

.about-section__media img {
	display: block;
	width: 100%;
	height: 350px;
	object-fit: cover;
	border-radius: 20px;
}

.about-section__heading {
	margin: 0 0 24px;
	font-family: var(--ab-font);
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	color: var(--ab-heading);
}

.about-section__body {
	font-family: var(--ab-font);
	font-size: 16px;
	line-height: 24px;
	color: var(--ab-body);
}

.about-section__body p + p {
	margin-top: 16px;
}

.about-section__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	color: var(--ab-green);
	font-family: var(--ab-font);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

.about-section__button:hover,
.about-section__button:focus-visible {
	text-decoration: underline;
	outline: none;
}

/* --- Wide no-image band (e.g. "Bennelongia Expertise") --- */

.about-section--band .about-section__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 60px;
	border: 1px solid var(--ab-border);
	border-radius: 20px;
	padding: 60px;
}

.about-section--band-blue .about-section__inner {
	background: linear-gradient(135deg, #C0E4F7 0%, #F1F9FE 100%);
}

.about-section--band-cream .about-section__inner {
	background: var(--ab-cream);
	border-color: transparent;
}

.about-section--band-white .about-section__inner {
	background: var(--ab-white-band);
	border-color: transparent;
}

.about-section--band .about-section__heading {
	flex: 0 1 260px;
	max-width: 260px;
	margin-bottom: 0;
	font-size: 32px;
	line-height: 40px;
}

.about-section--band .about-section__body {
	flex: 2 1 480px;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 1400px) {
	.about-hero {
		height: 320px;
	}

	.about-hero__title {
		font-size: 40px;
		line-height: 48px;
	}
}

@media (max-width: 1024px) {
	.about-hero {
		height: 260px;
		border-radius: 16px;
		margin-left: 24px;
		margin-right: 24px;
	}

	.about-hero__title {
		font-size: 32px;
		line-height: 40px;
	}

	.about-section--split .about-section__inner,
	.about-section--image-left .about-section__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 24px;
	}

	.about-section__media img {
		height: 260px;
	}

	.about-section--band .about-section__inner {
		flex-direction: column;
		gap: 20px;
		padding: 32px;
	}

	/* .about-section__heading's desktop flex-basis (260px) controls WIDTH in
	   the row layout above, but the same value would control HEIGHT once
	   .about-section--band switches to flex-direction: column here — forcing
	   a tall empty box around the heading and pushing the body text far
	   below it. Reset to a natural, content-sized height in column mode. */
	.about-section--band .about-section__heading {
		flex: 0 0 auto;
		max-width: 100%;
	}
}

@media (max-width: 640px) {
	.about-hero {
		margin-left: 16px;
		margin-right: 16px;
		height: 200px;
		border-radius: 12px;
	}

	.about-hero__inner {
		padding: 0 20px;
	}

	.about-hero__title {
		font-size: 26px;
		line-height: 32px;
	}

	.about-section {
		margin-top: 24px;
		padding: 0 16px;
	}

	.about-section--split .about-section__inner {
		padding: 20px;
		border-radius: 14px;
	}

	.about-section__media img {
		height: 200px;
		border-radius: 14px;
	}

	.about-section--band .about-section__inner {
		padding: 20px;
		border-radius: 14px;
	}

	.about-section--band .about-section__heading {
		font-size: 24px;
		line-height: 32px;
	}

	.about-section__heading {
		font-size: 22px;
		line-height: 30px;
	}
}