/**
 * Styles for the home page (front-page.php).
 *
 * Scoped under [data-arm-doc="home"] — the attribute header.php stamps on
 * <main> for this document — so these rules only ever touch the home page.
 * Loaded only on the front page (see functions.php).
 *
 * Layout: the logo is part of the background image (top-right). Content stays
 * inside the same .arm-container width as the header; the title sits on the
 * right and vertically centred, the contacts along the bottom, right-aligned.
 */

[data-arm-doc="home"] .arm-hero {
	position: relative;
	min-height: clamp(460px, 50vw, 680px);
	/* Centre the two .arm-container rows so their right edges (title, contacts)
	   line up on the same header-width column. */
	align-items: center;
}

/* Title: right side of the header-width container, vertically centred.
   order:1 keeps it above the contacts even though the contacts come first in
   the markup. */
[data-arm-doc="home"] .arm-hero__inner {
	order: 1;
	flex: 1;
	margin: 0;
	align-items: center;
	justify-content: flex-end;
	padding-top: 0;
}

[data-arm-doc="home"] .arm-hero__title {
	text-align: right;
	font-size: clamp(34px, 5vw, 72px);
}

/* Contacts: along the bottom of the container, aligned to the right so their
   right edge lines up with the title's. */
[data-arm-doc="home"] .arm-hero__top {
	order: 2;
	justify-content: flex-end;
}

/* With a slideshow the pager stacks above the contacts on the right, so the
   left of the band — where the pictures carry the chamber's mark — stays clear. */
[data-arm-doc="home"] .arm-hero--slides .arm-hero__top {
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

/* The slides pass under the words; the title needs an edge over any picture. */
[data-arm-doc="home"] .arm-hero--slides .arm-hero__title {
	text-shadow: 0 1px 12px rgba(255, 255, 255, 0.55);
}

/* Over busy stone the contacts sit on frosted pills, so they read on every
   picture. The pager stays bare: bright, heavy white ticks with a soft shadow. */
[data-arm-doc="home"] .arm-hero--slides .arm-hero__contact {
	padding: 5px 16px 5px 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 14px;
	font-weight: 600;
	color: var(--arm-darker);
	text-shadow: none;
}

[data-arm-doc="home"] .arm-hero--slides .arm-hero__contact-icon {
	width: 30px;
	height: 30px;
	font-size: 14px;
}

[data-arm-doc="home"] .arm-hero--slides .arm-contact-svg {
	width: 15px;
	height: 15px;
}

[data-arm-doc="home"] .arm-hero__tick::before {
	height: 4px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

[data-arm-doc="home"] .arm-hero__tick:hover::before {
	background: #fff;
}

[data-arm-doc="home"] .arm-hero__tick.is-active::before {
	height: 5px;
	background: rgba(255, 255, 255, 0.95);
}

[data-arm-doc="home"] .arm-hero__tick-fill {
	height: 5px;
	background: var(--arm-brown);
}

/* The pictures carry the chamber's mark on their left; a narrow screen shows
   only part of the width, so it is the left part that is kept, and the slow
   zoom is anchored there too so the mark never drifts off the edge. */
@media (max-width: 980px) {
	[data-arm-doc="home"] .arm-hero__slide-img {
		object-position: left center;
		transform-origin: left center;
	}
}

[data-arm-doc="home"] .arm-hero__contacts {
	justify-content: flex-end;
}

@media (max-width: 780px) {
	/* Title keeps filling the banner and stays vertically centred. */
	[data-arm-doc="home"] .arm-hero__inner {
		flex: 1;
		align-items: center;
	}

	/* Contacts pinned to the very bottom edge, still right-aligned. */
	[data-arm-doc="home"] .arm-hero__top {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: row;
		justify-content: flex-end;
		padding-bottom: 16px;
	}

	/* Narrow: the same stack, tighter. */
	[data-arm-doc="home"] .arm-hero--slides .arm-hero__top {
		flex-direction: column;
		align-items: flex-end;
		gap: 10px;
	}

	[data-arm-doc="home"] .arm-hero__tick {
		width: 20px;
	}

	[data-arm-doc="home"] .arm-hero__tick.is-active {
		width: 44px;
	}

	[data-arm-doc="home"] .arm-hero--slides .arm-hero__contact {
		font-size: 13px;
	}
}

/* ---------------------------------------------------------------- the feed */

/* A white rule above events and above the discussions, as in the design:
   the three live rows read as one run, divided rather than boxed. */
[data-arm-doc="home"] .arm-section--events,
[data-arm-doc="home"] .arm-section--discussions {
	position: relative;
}

[data-arm-doc="home"] .arm-section--events::before,
[data-arm-doc="home"] .arm-section--discussions::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: min(1180px, calc(100% - 32px));
	height: 3px;
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	transform: translateX(-50%);
}

/* ------------------------------------------------------------------ about */

/* Membership on the left, licensing on the right with its ring outside. */
[data-arm-doc="home"] .arm-about__actions {
	justify-content: space-between;
	gap: 24px;
}

[data-arm-doc="home"] .arm-about__action:nth-child(2) {
	flex-direction: row-reverse;
}

[data-arm-doc="home"] .arm-about__more {
	color: var(--arm-brown);
	text-decoration: none;
}

[data-arm-doc="home"] .arm-about__more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------- architects */

/* Each button sits centred in its cell, so on a phone — one column, wider
   than a button — the stack lines up under the title instead of hugging the
   left edge. */
[data-arm-doc="home"] .arm-architects__buttons {
	column-gap: clamp(40px, 12vw, 180px);
	justify-items: center;
}

@media (max-width: 600px) {
	[data-arm-doc="home"] .arm-about__actions {
		flex-direction: column;
		align-items: center;
	}

	[data-arm-doc="home"] .arm-about__action:nth-child(2) {
		flex-direction: row;
	}
}

/* The menu links to the home sections (#education, #environment): land them
   below the sticky header. */
[data-arm-doc="home"] .arm-section {
	scroll-margin-top: calc(var(--arm-header-h) + 12px);
}