/**
 * The roster layout: the chamber's own member list and the two profession lists
 * (page-ch-members.php, page-arm-architects.php, page-arm-constructors.php).
 *
 * Everything here is scoped under [data-arm-layout="roster"] — the attribute
 * header.php stamps on <main> for these documents — so these rules can only
 * ever touch these pages. Editing them cannot restyle the home page.
 *
 * Scoped to the layout rather than to one document precisely because three
 * documents share it; see Editor::ROSTER_LAYOUT.
 *
 * Loaded only on those pages (see functions.php).
 */

/* -------------------------------------------------------------- hero layout */

/* Shared right offset: brand, title and the accent band all line up on it. */
[data-arm-layout="roster"] .arm-hero {
	--hero-inset: 28%;
}

/* Translucent white column hung 20px off the right corner of the brand/title;
   painted over the photo, under the text (z-index below content). */
[data-arm-layout="roster"] .arm-hero::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(100% - var(--hero-inset) + 20px);
	width: clamp(80px, 7vw, 140px);
	background: rgba(255, 255, 255, 0.22);
	z-index: 0;
	pointer-events: none;
}

/* z-index raises the content above the band. No `position` on the top strip,
   or it would become the brand's containing block and break the offset. */
[data-arm-layout="roster"] .arm-hero__top {
	z-index: 1;
}

/* Title right-aligned to the same inset as the brand above it. */
[data-arm-layout="roster"] .arm-hero__inner {
	z-index: 1;
	max-width: none;
	justify-content: flex-end;
	padding: 40px var(--hero-inset) 0 20px;
}

[data-arm-layout="roster"] .arm-hero__title {
	max-width: 900px;
	text-align: right;
	font-size: clamp(34px, 5vw, 70px);
}

/* Brand anchored by its right edge (the logo, its last child, sits flush). */
[data-arm-layout="roster"] .arm-hero__brand {
	--brand-fs: clamp(20px, 3.1vw, 58px);
	position: absolute;
	top: clamp(56px, 15%, 140px);
	right: var(--hero-inset);
}

@media (max-width: 780px) {
	/* Stacked: the inset-anchored band and absolute brand no longer apply. */
	[data-arm-layout="roster"] .arm-hero::after {
		display: none;
	}

	[data-arm-layout="roster"] .arm-hero__brand {
		position: static;
		right: auto;
		margin-top: 6px;
		align-self: flex-end;
	}

	[data-arm-layout="roster"] .arm-hero__inner {
		justify-content: flex-end;
		padding: 24px 20px 0;
	}

	[data-arm-layout="roster"] .arm-hero__title {
		text-align: right;
	}
}