/*
 * Author promo band — Figma 216:2401.
 *
 * The panel is 420px tall but the portrait is 445px, hanging 25px past it top
 * and bottom, so the section reserves that overhang rather than clipping it.
 */

.author-band {
	padding: 60px var(--gutter-mobile);
}

.author-band__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: var(--container);
	margin: 0 auto;
	padding: 40px;
	border-radius: var(--radius-lg);
	background: var(--color-neutral-1);
}

.author-band__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

.author-band__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.author-band__name {
	margin: 0;
	color: var(--color-neutral-7);
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: var(--h2-weight);
	line-height: var(--h2-lh);
}

.author-band__desc {
	color: var(--color-neutral-4);
	font-size: var(--body-main-size);
	font-weight: var(--body-main-weight);
	line-height: var(--body-main-lh);
}

.author-band__photo {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.author-band__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 421 / 445;
	object-fit: cover;
	object-position: top;
}

/*
 * Glass card, as Figma draws it here — this one sits on the slate panel, not
 * over a photo, so 7% white with a blur stays legible.
 */
.author-band__quote {
	display: flex;
	flex-direction: column;
	gap: 31px;
	margin: 0;
	padding: 40px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(35px);
	-webkit-backdrop-filter: blur(35px);
}

/* Flat SVG, so it is forced white rather than shipping a second file. */
.author-band__quote img {
	width: 16.289px;
	height: 12.712px;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

.author-band__quote-text {
	color: var(--color-neutral-7);
	font-size: var(--body-main-size);
	font-weight: 500;
	line-height: 1.4;
}

.author-band__quote-by {
	/* neutral-3 sinks into the slate panel. */
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: -0.12px;
}

@media (min-width: 1024px) {
	.author-band { padding: 30px var(--gutter) 30px; }
}

/*
 * The overlapping composition is laid out at absolute x positions across a
 * 1283px band, so it only holds once the container is at full width. Below
 * that the stacked layout stays.
 */
@media (min-width: 1400px) {

	.author-band__panel {
		display: block;
		height: 420px;
		margin-block: 25px;
		padding: 0;
	}

	.author-band__content {
		position: absolute;
		left: 40px;
		top: 40px;
		width: 544px;
	}

	.author-band__name { font-size: 32px; }

	/* 445px tall against a 420px panel — 25px of overhang at each edge. */
	.author-band__photo {
		position: absolute;
		left: 611px;
		top: -25px;
		width: 421px;
		height: 445px;
		border-radius: 0;
	}

	.author-band__photo img { height: 100%; aspect-ratio: auto; }

	.author-band__quote {
		position: absolute;
		left: 982px;
		top: 57px;
		width: 301px;
		height: 305px;
		padding: 59px 48px 58px;
	}
}

/*
 * Stacked layout (below the 1400px composition). The portrait is a transparent
 * cut-out drawn to overhang the desktop panel, so here it is shown whole and
 * centred rather than cropped to a frame it was never cut for, and the panel
 * tightens up so the band is not a full screen of padding.
 */
@media (max-width: 1399px) {
	.author-band__photo { overflow: visible; }

	.author-band__photo img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 340px;
		margin-inline: auto;
		aspect-ratio: auto;
		object-fit: contain;
	}

	/* 7% white reads as haze at this size; a touch more keeps the card present. */
	.author-band__quote { background: rgba(255, 255, 255, 0.12); }
}

@media (max-width: 767px) {
	.author-band__panel { gap: 30px; padding: 24px; }
	.author-band__content { gap: 30px; }
	.author-band__quote { padding: 28px 24px; }
}

/*
 * The cut-out is meant to stand on the quote card, so the column gap between
 * the two is cancelled and the figure meets the card edge to edge.
 */
@media (max-width: 1399px) {
	.author-band__photo { margin-bottom: -30px; }

}

/* The article page adds a second, secondary button beside the CTA. */
.author-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}