/**
 * NovaBP Tax Advisor — Section 3, Our Team
 *
 * Figma reference: node 319:2710 — a centred 800px header over a row inset 140px
 * (319:2719) holding 400px adviser portraits with frosted name plates, closed by
 * the navy pull-quote panel 319:2741.
 */

.nova-tax-team {
	background-color: var(--nova-tax-white);
}

.nova-tax-team__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}

.nova-tax-team__header {
	--nova-tax-header-max: 800px;
}

/*
 * `align-items: stretch` is what lets the quote panel match the portraits: the
 * Figma row is centre-aligned but the panel is set to fill vertically, and
 * stretching every child gets that without special-casing the panel.
 */
/*
 * The inset arrives as a custom property rather than being set directly by the
 * widget's control. Elementor's per-page CSS outscores this stylesheet and has
 * no 1280px breakpoint of its own, so if it wrote `padding-inline` here it would
 * hold that value straight through the 1280 block below. Feeding a property
 * instead leaves the padding itself owned by these media queries.
 */
.nova-tax-team__row {
	display: flex;
	align-items: stretch;
	gap: 24px;
	width: 100%;
	padding-inline: var(--nova-tax-team-row-inset, 140px);
}

/* ---------------------------------------------------------------------------
 * Adviser card
 * ------------------------------------------------------------------------ */

/*
 * The portrait is a background rather than an <img> because the plate has to sit
 * over it and the frame crops rather than scales — `cover` on a fixed-height box
 * reproduces the Figma crop at any column width.
 */
/*
 * The card holds the 317x400 portrait frame's shape at every width instead of a
 * fixed height: once the row wraps two-up the columns get wider, and against a
 * fixed height that turned the portrait crop steadily squatter than the design.
 *
 * Written width-over-height because that is the order CSS `aspect-ratio` takes —
 * the frame is 400 tall by 317 wide, so the value reads inverted to the figures.
 *
 * `align-self` is what lets it hold: the row stretches its children, and a
 * stretched item's height wins over the one the ratio computes. The quote panel
 * beside it still stretches, so it goes on matching the portraits' height.
 */
.nova-tax-team__member {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-self: flex-start;
	justify-content: flex-end;
	min-width: 0;
	aspect-ratio: 317 / 400;
	min-height: var(--nova-tax-team-card-height, 0);

	/*
	 * A long bio makes the plate taller than the card's 8px inset allows; without
	 * this it prints past the rounded corners instead of being clipped by them.
	 */
	overflow: hidden;
	padding: 8px;
	background-image: var(--nova-tax-team-photo, none);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-color: var(--nova-tax-surface);
	border-radius: 12px;
}

/*
 * `backdrop-filter` needs a translucent background to have anything to blur —
 * the plate colour is deliberately rgba, not a solid, so the portrait shows
 * faintly through it as in the design.
 */
.nova-tax-team__plate {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background-color: rgb(255 255 255 / 0.96);
	border-radius: 12px;
	backdrop-filter: blur(2px);
}

.nova-tax-team__identity {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nova-tax .nova-tax-team__name {
	font-family: var(--nova-tax-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-heading);
}

.nova-tax-team__role {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--nova-tax-body);
}

.nova-tax-team__rule {
	display: block;
	flex: 0 0 auto;
	width: 40px;
	height: 2px;
	background-color: var(--nova-tax-green);
}

/*
 * Clamped to two lines so every plate is the same depth regardless of bio
 * length, and opened on hover.
 *
 * `-webkit-line-clamp` needs all three of `display: -webkit-box`,
 * `-webkit-box-orient: vertical` and `overflow: hidden` together — drop any one
 * and the clamp is ignored. It is still the only cross-browser way to clamp by
 * line count; the standard `line-clamp` shorthand is not widely supported yet.
 */
.nova-tax-team__bio {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--nova-tax-lede);
}

/*
 * `focus-within` alongside hover so the bio also opens for a keyboard user
 * tabbing through the card. The clamp value is not animatable, so this is a
 * straight swap rather than a transition.
 */
.nova-tax-team__member:hover .nova-tax-team__bio,
.nova-tax-team__member:focus-within .nova-tax-team__bio {
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* ---------------------------------------------------------------------------
 * Quote panel
 * ------------------------------------------------------------------------ */

.nova-tax-team__quote {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	overflow: hidden;
	padding: 8px;
	background-color: var(--nova-tax-primary);
	border-radius: 12px;
}

/*
 * Oversized quote mark bled off the panel's top-right, drawn behind the copy.
 * The artwork carries its own 4px stroke; opacity comes from here so the colour
 * control stays a plain colour.
 */
.nova-tax-team__quote-glyph {
	position: absolute;
	inset-block-start: 20px;
	inset-inline-start: 185px;
	width: 117px;
	height: 82px;
	color: var(--nova-tax-green);
	opacity: 0.2;
	pointer-events: none;
}

.nova-tax-team__quote-body {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	padding: 20px;
}

.nova-tax-team__quote-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nova-tax-team__quote-lead {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.99);
}

.nova-tax-team__quote-sub {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.9);
}

.nova-tax-team__quote-attr {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.99);
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

/*
 * Three columns inside a 140px inset leaves each one too narrow below 1280px, so
 * the inset is dropped and the row wraps two-up — two portraits on the first
 * line, the pull quote filling the second.
 */
@media (max-width: 1280px) {
	.nova-tax-team__row {
		flex-wrap: wrap;
		padding-inline: 0;
	}

	/*
	 * `calc` rather than a percentage so the 24px gap is subtracted rather than
	 * added on top of it.
	 */
	.nova-tax-team__member,
	.nova-tax-team__quote {
		flex: 1 1 calc(50% - 12px);
	}

	/*
	 * The quote mark is placed 185px from the left against the panel's designed
	 * 317px width. Once the panel spans the row that lands it mid-panel instead
	 * of bled off the corner, so it re-anchors to the right edge.
	 */
	.nova-tax-team__quote-glyph {
		inset-inline-start: auto;
		inset-inline-end: 12px;
	}
}

@media (max-width: 1024px) {
	.nova-tax-team__inner {
		gap: 48px;
	}

	.nova-tax-team__quote-lead {
		font-size: 24px;
	}
}

@media (max-width: 767px) {
	.nova-tax-team__inner {
		gap: 32px;
	}

	.nova-tax-team__row {
		flex-direction: column;
		gap: 16px;
	}

	.nova-tax-team__member,
	.nova-tax-team__quote {
		flex: 1 1 auto;
		width: 100%;
	}

	.nova-tax-team__quote-body {
		padding: 16px;
	}

	.nova-tax-team__quote-lead {
		font-size: 22px;
	}

	.nova-tax-team__quote-sub {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Split header — the Home frame
 *
 * The Tax Advisor frame centres the header inside an 800px measure. Home
 * (26:9604) sets it as a full-measure row instead: title on the left, lede in a
 * 520px column on the right, the pair sitting on a shared baseline.
 *
 * The row itself comes from `.nova-tax-header--split` in `novabp-tax-base`; what
 * is needed here is releasing the cap and the centring that `__inner` applies to
 * every child.
 * ------------------------------------------------------------------------ */

.nova-tax-team__header.nova-tax-header--split {
	--nova-tax-header-max: none;
	--nova-tax-header-split-gap: 20px;

	align-self: stretch;
}

/* Figma draws the lede column at 520px against a 1280px measure. */
.nova-tax-team__header.nova-tax-header--split .nova-tax-header__lede {
	flex: 0 1 520px;
}

@media (max-width: 767px) {

	/*
	 * `novabp-tax-base` unwinds `--split` into a stack at this break. The basis
	 * has to go with it: in a column it would resolve against the height and pin
	 * the lede to 520px tall.
	 */
	.nova-tax-team__header.nova-tax-header--split .nova-tax-header__lede {
		flex-basis: auto;
	}
}