/*
 * About page — every idia/about-* pattern's CSS lives in this one file
 * (idia-about-hero, idia-about-story, idia-about-experience, idia-about-process,
 * idia-about-logo-wall, idia-about-foundation, idia-about-team), the same
 * one-file-per-page convention contact.css and projects.css already use for
 * their own page-owned patterns. Only enqueued on the About page — see
 * maybe_enqueue_about_page() in functions.php — and unconditionally in the
 * editor's add_editor_style() array per AGENTS.md §12a.
 *
 * Breakpoints match every other section file on this theme: 991 / 767 / 479,
 * mirroring style.css's own spacing-scale steps.
 */

/* ---- Rail for every align:full section's CONTAINER ----
   Six of the seven About sections (all but idia-about-hero, which uses a
   different chassis — see about-hero's own comment) follow the same
   WRAPPER > CONTAINER > CONTENT shape work.css/projects.css/blogs.css/
   pricing.css/faq.css already document at length: WRAPPER is align:full with
   layout:constrained, so WordPress's own has-global-padding de-dup rule
   (`.has-global-padding :where(:not(.alignfull.is-layout-flow) >
   .has-global-padding...)  { padding: 0 }`) zeroes CONTAINER's auto-applied
   root padding, because WRAPPER is alignfull+is-layout-CONSTRAINED, not
   alignfull+is-layout-FLOW, so core's own `:not(.alignfull.is-layout-flow)`
   exception does not cover it. Measured live before this rule: every
   __container below computed padding-left/right: 0 and its content sat at
   x=0 rather than x=32/20.

   Fix is the same literal CSS rule work.css's own header comment documents:
   read --wp--custom--rail directly, !important to win the specificity tie
   against core's own zero-padding de-dup rule (core's stylesheet prints
   AFTER this enqueued file). Not a compensating-padding hack per AGENTS.md
   §8.1a — it is the theme's own established, sanctioned counter to this
   specific WordPress mechanism, already used by six other sections on this
   site before this file existed. */
.idia-about-story__container,
.idia-about-experience__container,
.idia-about-process__container,
.idia-about-logo-wall__container,
.idia-about-foundation__container,
.idia-about-team__container {
	padding-left: var(--wp--custom--rail) !important;
	padding-right: var(--wp--custom--rail) !important;
}

/* ---- About Hero (idia-about-hero) ----------------------------------- */

.idia-about-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.idia-about-hero__inner {
	width: 100%;
}

.idia-about-hero__title-fallback {
	display: none;
}

/* The reference's .hero-title-block.about is max-width:none inside a
   centred parent (.hero-content-block.about, align-items:center) — the
   parent's centring shrinks its children to content by default, so this
   child opts back out to full width with align-self:stretch, matching
   .idia-about-hero__bottom below. Each h1 line still centres itself via
   this element's own text-align/align-items, which is unaffected by the
   width change. */
.idia-about-hero__title-decorative {
	align-self: stretch;
	text-align: center;
	align-items: center;
	margin-top: var(--wp--preset--spacing--24);
}

.idia-about-hero__title-line {
	margin: 0;
}

.idia-about-hero__title-center {
	justify-content: center;
}

.idia-about-hero__title-image img {
	display: block;
	border-radius: var(--wp--custom--radius--24);
	object-fit: cover;
}

/* Bottom row: mono family, uppercase, main-accent colour (#9d9d9d) —
   matches the reference's .hero-bottom-wrapper exactly. margin-top 164px has
   no spacing token (the scale runs …120, 160, 196… with nothing at 164) — using
   spacing|160 here (4px short of the reference at desktop) and reporting the
   gap rather than inlining 164px or adding a one-off token for a single 4px
   difference. spacing|160 steps 160/120/100/80 (AGENTS.md §8.4); the ≤479
   value lands exactly on the reference's own 80px margin-top at that
   breakpoint, so the 4px shortfall exists only at 1440/991/767.

   The reference's .hero-bottom-wrapper is width:100% inside the same centred
   parent as the title block above — align-self:stretch opts this row out of
   the parent's shrink-to-content centring so its two children land at the
   row's true left and right edges via justify-content, rather than at the
   edges of a content-sized box floating in the centre. */
.idia-about-hero__bottom {
	align-self: stretch;
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
}

/* Specificity note: WordPress's own `.is-layout-flex > :is(*, div) { margin:
   0; }` (core base layout styles) scores (0,2,0) — a class plus an :is()
   pseudo-class — which beats a plain `.idia-about-hero__bottom { margin-top:
   ... }` at (0,1,0) regardless of source order, since this element is a flex
   child of .idia-about-hero__inner. Same fix as the title-decorative
   display:none rule below (body-prefixed for the same reason); here the
   parent class is prefixed onto its own child instead, which is enough to
   win without a body prefix. Confirmed via inspect_design: without this,
   margin-top computed 0px despite the rule above setting it. */
.idia-about-hero__inner .idia-about-hero__bottom {
	margin-top: var(--wp--preset--spacing--160);
}

.idia-about-hero__bottom-text {
	color: var(--wp--preset--color--main-accent);
	margin: 0;
}

@media (max-width: 991px) {
	/* Specificity note: WordPress's own `body .is-layout-flex { display:
	   flex; }` (core base layout styles) has specificity (0,1,1) — one class
	   plus the `body` element — which beats a plain `.idia-about-hero__title-
	   decorative { display: none; }` rule at (0,1,0), regardless of media
	   query or source order. `body` prefixed here purely to match that
	   specificity and win the cascade; not a hack, the minimum needed to
	   override a core rule that always wins otherwise. Confirmed via
	   inspect_design: without this prefix the decorative row still computed
	   display:flex at 390px width, stacking on top of the fallback heading. */
	body .idia-about-hero__title-decorative {
		display: none;
	}

	.idia-about-hero__title-fallback {
		display: block;
		text-align: center;
	}
}

@media (max-width: 479px) {
	.idia-about-hero__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--8);
	}
}

/* ---- Our Story (idia-about-story) ------------------------------------ */

.idia-about-story {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.idia-about-story__content-block {
	display: flex;
	justify-content: space-between;
}

.idia-about-story__left-block {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

/* 148px padding-top has no spacing token either (the scale has 120 and
   160, nothing at 148) — using spacing|120 (28px short) rather than
   inlining or adding a token for one section's author byline. Reported. */
.idia-about-story__author-wrapper {
	display: flex;
	align-items: center;
}

.idia-about-story__author-images {
	display: flex;
	align-items: center;
}

.idia-about-story__author-image img {
	display: block;
	width: 36px;
	height: 36px;
	object-fit: cover;
}

.idia-about-story__author-image:last-child img {
	margin-left: -10px;
	border-radius: var(--wp--custom--radius--16);
	position: relative;
	z-index: -1;
}

.idia-about-story__author-image:first-child img {
	border-radius: var(--wp--preset--border-radius--full);
	position: relative;
	z-index: -1;
}

@media (max-width: 991px) {
	.idia-about-story__content-block {
		flex-direction: column;
	}

	.idia-about-story__author-wrapper {
		padding-top: var(--wp--preset--spacing--48) !important;
	}
}

/* ---- Experience Highlight (idia-about-experience) --------------------- */

.idia-about-experience__block {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.idia-about-experience__title-block {
	text-align: center;
	align-items: center;
}

.idia-about-experience__title-center {
	justify-content: center;
}

.idia-about-experience__title-image img {
	display: block;
	border-radius: var(--wp--custom--radius--12);
	width: 80px;
	height: 60px;
	object-fit: cover;
}

.idia-about-experience__title-fallback {
	display: none;
}

/* max-width 922px has no measure token (the closest, section-title at
   1000px, is 78px wider) — kept as a grid-level constraint via a CSS rule
   rather than an .is-measure-* class, and reported as an untokened value. */
.idia-about-experience__showcase {
	max-width: 922px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.idia-about-experience__showcase-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--24);
	object-fit: cover;
}

@media (max-width: 991px) {
	/* Same specificity fix as idia-about-hero__title-decorative above — see
	   that rule's comment for why `body` is required here. */
	body .idia-about-experience__title-block {
		display: none;
	}

	.idia-about-experience__title-fallback {
		display: block;
		text-align: center;
	}
}

@media (max-width: 767px) {
	.idia-about-experience__showcase {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 479px) {
	.idia-about-experience__title-image img {
		display: none;
	}

	.idia-about-experience__showcase-image img {
		height: 180px;
		aspect-ratio: auto;
	}
}

/* ---- Process (idia-about-process) ------------------------------------- */

/* .is-surface-card supplies the 16px inset, 24px radius and overflow:hidden
   (style.css) — this file only adds the dark fill and vertical padding the
   reference's .process-bg-wrapper carries on top of that shared chassis. */
.idia-about-process__card {
	background-color: var(--wp--preset--color--main);
}

.idia-about-process__title-block {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.idia-about-process__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.idia-about-process__card-item {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--16);
}

.idia-about-process__card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.idia-about-process__card-icon img {
	display: block;
}

@media (max-width: 991px) {
	.idia-about-process__title-block {
		flex-direction: column;
		align-items: flex-start;
	}

	.idia-about-process__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 479px) {
	.idia-about-process__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Logo Wall (idia-about-logo-wall) ---------------------------------- */

.idia-about-logo-wall__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.idia-about-logo-wall__card {
	background-color: var(--wp--preset--color--tertiary);
	border-radius: var(--wp--custom--radius--16);
	display: flex;
	align-items: center;
	justify-content: center;
	/* 10rem / 2rem / 1rem reproduced with spacing presets: 10rem = 160px has
	   an exact preset (spacing|160); 2rem = 32px and 1rem = 16px both have
	   exact presets too (spacing|32, spacing|16). All three map cleanly —
	   nothing to report as untokened here, unlike the hero/story/experience
	   sections above. */
	height: var(--wp--preset--spacing--160);
	padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--16);
}

.idia-about-logo-wall__mask {
	/* 3rem = 48px — spacing|48 covers this exactly. */
	max-height: var(--wp--preset--spacing--48);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.idia-about-logo-wall__mask img {
	max-height: var(--wp--preset--spacing--48);
	display: block;
}

@media (max-width: 767px) {
	.idia-about-logo-wall__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- Foundation (idia-about-foundation) -------------------------------- */

.idia-about-foundation__block {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
	position: relative;
}

.idia-about-foundation__spacer {
	height: 680px;
	flex: 1;
}

.idia-about-foundation__content {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
	max-width: 500px;
}

.idia-about-foundation__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
}

.idia-about-foundation__panes {
	position: relative;
}

.idia-about-foundation__pane {
	width: 100%;
}

.idia-about-foundation__pane[hidden] {
	display: none;
}

.idia-about-foundation__pane img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--wp--custom--radius--16);
	object-fit: cover;
}

.idia-about-foundation__menu {
	display: flex;
	flex-direction: column;
}

.idia-about-foundation__tab {
	border-top: 1px solid var(--wp--preset--color--border-light);
	padding-top: var(--wp--preset--spacing--16);
	padding-bottom: var(--wp--preset--spacing--16);
	background: none;
	border-left: none;
	border-right: none;
	border-bottom: none;
	text-align: left;
	width: 100%;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

.idia-about-foundation__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--main);
	outline-offset: 2px;
}

.idia-about-foundation__tab-heading {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--12);
}

.idia-about-foundation__tab-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* Answer text is collapsed to zero height when its tab is inactive, rather
   than display:none, so the eased-height mechanism (about-tabs.js, adapted
   from assets/js/faq-accordion.js) has something to transition — same
   technique the FAQ accordion already uses on .idia-faq__answer. */
.idia-about-foundation__tab-description {
	overflow: hidden;
	height: 0;
	margin: 0;
	color: var(--wp--preset--color--secondary);
}

.idia-about-foundation__tab[aria-selected="true"] .idia-about-foundation__tab-description {
	height: auto;
}

@media (max-width: 991px) {
	.idia-about-foundation__block {
		flex-direction: column;
		align-items: flex-start;
	}

	.idia-about-foundation__spacer {
		display: none;
	}

	.idia-about-foundation__content {
		max-width: none;
		align-items: flex-start;
	}

	.idia-about-foundation__tabs {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 479px) {
	.idia-about-foundation__spacer {
		display: none;
	}
}

/* ---- Team (idia-about-team) --------------------------------------------- */

.idia-about-team {
	overflow: hidden;
}

.idia-about-team__title-block {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.idia-about-team__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.idia-about-team__card {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--16);
}

.idia-about-team__card-stat,
.idia-about-team__card-cta {
	background-color: var(--wp--preset--color--tertiary);
	padding: var(--wp--preset--spacing--24);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.idia-about-team__card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* backdrop-filter has no token in this theme's vocabulary — flagged in the
   task report as a new visual primitive needing Tobi's approval. Used here
   because the reference's team-card overlay is illegible without it (name
   and role sit directly over an unpredictable photograph). */
.idia-about-team__card-info {
	position: absolute;
	inset: 0;
	padding: var(--wp--preset--spacing--24);
	background-color: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--wp--preset--color--base);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.idia-about-team__card-name {
	margin: 0;
}

.idia-about-team__card-role {
	margin: 0;
}

.idia-about-team__card-divider {
	width: 100%;
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.idia-about-team__card-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
}

.idia-about-team__card-social a {
	color: var(--wp--preset--color--base);
}

.idia-about-team__card-social a:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

@media (max-width: 991px) {
	.idia-about-team__title-block {
		flex-direction: column;
		align-items: flex-start;
	}

	.idia-about-team__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 767px) {
	.idia-about-team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 479px) {
	.idia-about-team__grid {
		display: flex;
		flex-direction: column;
	}
}