/*
 * PAHAL — components.
 *
 * Square corners, hairline rules, motion that settles rather than stops.
 * Nothing here uses a border-radius above 2px: rounded corners are the single
 * fastest way to make an institution look like a startup.
 */

/* ---- Buttons ----------------------------------------------------- */

.pahal-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3.25rem;
	padding: 1rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--pahal-radius);
	font-family: var(--pahal-font-sans);
	font-size: var(--pahal-text-s);
	font-weight: 500;
	letter-spacing: var(--pahal-track-button);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	transition:
		background-color var(--pahal-duration-fast) var(--pahal-ease-out),
		color var(--pahal-duration-fast) var(--pahal-ease-out),
		border-color var(--pahal-duration-fast) var(--pahal-ease-out);
}

.pahal-btn .pahal-icon {
	flex: none;
	transition: transform var(--pahal-duration-menu) var(--pahal-ease);
}

.pahal-btn:hover .pahal-icon { transform: translateX(0.25rem); }

.pahal-btn--primary { background-color: var(--pahal-terracotta); color: var(--pahal-white); }
.pahal-btn--primary:hover,
.pahal-btn--primary:focus-visible { background-color: var(--pahal-pine-deep); color: var(--pahal-white); }

.pahal-btn--secondary {
	background-color: transparent;
	border-color: var(--pahal-rule-strong);
	color: var(--pahal-text-heading);
}

.pahal-btn--secondary:hover,
.pahal-btn--secondary:focus-visible {
	background-color: var(--pahal-pine-deep);
	border-color: var(--pahal-pine-deep);
	color: var(--pahal-sand);
}

/*
 * On dark, terracotta drops to 2.4:1 against pine-deep. The primary button
 * inverts to a sand fill with a pine label (13:1) rather than being tinted
 * and hoped for.
 */
.pahal-on-dark .pahal-btn--primary { background-color: var(--pahal-sand); color: var(--pahal-pine-black); }
.pahal-on-dark .pahal-btn--primary:hover,
.pahal-on-dark .pahal-btn--primary:focus-visible { background-color: var(--pahal-terracotta-light); color: var(--pahal-pine-black); }

.pahal-on-dark .pahal-btn--secondary { border-color: var(--pahal-rule-strong); color: var(--pahal-sand); }
.pahal-on-dark .pahal-btn--secondary:hover,
.pahal-on-dark .pahal-btn--secondary:focus-visible { background-color: var(--pahal-sand); border-color: var(--pahal-sand); color: var(--pahal-pine-black); }

.pahal-btn--large { min-height: 3.75rem; padding: 1.15rem 2.25rem; font-size: var(--pahal-text-body); }

/*
 * Text action. The underline is drawn as a background so it can animate its
 * width — a rule that grows reads as intent, a rule that appears reads as CSS.
 */
.pahal-btn--text {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: auto;
	padding: 0.35rem 0;
	background: none;
	border: 0;
	color: var(--pahal-accent-text);
	font-family: var(--pahal-font-sans);
	font-size: var(--pahal-text-s);
	font-weight: 500;
	letter-spacing: var(--pahal-track-button);
	text-decoration: none;
	cursor: pointer;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-size var(--pahal-duration-menu) var(--pahal-ease), color var(--pahal-duration-fast) var(--pahal-ease-out);
}

/*
 * On touch, a standalone text action becomes a full-size target. Left dense on
 * pointer devices, where 44px of padding around a text link just looks loose.
 */
@media (pointer: coarse) {
	.pahal-btn--text { min-height: 2.75rem; }
}

.pahal-btn--text:hover { color: var(--pahal-pine-deep); background-size: 0% 1px; }
.pahal-on-dark .pahal-btn--text:hover { color: var(--pahal-white); }
.pahal-btn--text .pahal-icon { transition: transform var(--pahal-duration-menu) var(--pahal-ease); }
.pahal-btn--text:hover .pahal-icon { transform: translateX(0.25rem); }

/* ---- Cards ------------------------------------------------------- */

/*
 * No box. A card is a photograph, a hairline and some type — the border-and-
 * shadow card is the most template-looking object on the web.
 *
 * The heading carries the link so screen readers get meaningful link text; a
 * stretched ::after gives pointer users the whole card as a target.
 */
.pahal-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--pahal-space-xs);
	padding-top: var(--pahal-space-xs);
	border-top: 1px solid var(--pahal-rule);
	background: none;
}

.pahal-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--pahal-sand-deep);
	order: -1;
	margin-bottom: var(--pahal-space-2xs);
}

.pahal-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--pahal-duration-slow) var(--pahal-ease), filter var(--pahal-duration-slow) var(--pahal-ease);
}

.pahal-card:hover .pahal-card__media img { transform: scale(1.04); }

.pahal-card__meta {
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-text-soft);
}

.pahal-card__title {
	margin: 0;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-heading-l);
	font-weight: 500;
	line-height: var(--pahal-leading-heading);
	letter-spacing: var(--pahal-track-heading);
}

.pahal-card__title a {
	color: var(--pahal-text-heading);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size var(--pahal-duration-menu) var(--pahal-ease);
}

.pahal-card:hover .pahal-card__title a { background-size: 100% 1px; }
.pahal-card__title a::after { content: ""; position: absolute; inset: 0; }

.pahal-card__excerpt { margin: 0; font-size: var(--pahal-text-s); line-height: 1.6; color: var(--pahal-text-soft); }

/* ---- Impact metric ----------------------------------------------- */

/*
 * A statistic should be a typographic event, not a table cell. Playfair at
 * display size, tabular so the counter cannot jitter, with the basis line
 * printed beneath it as part of the component — a figure with no stated
 * source is exactly how "0K+ Members Worldwide" ships.
 */
.pahal-metric { display: flex; flex-direction: column; gap: var(--pahal-space-2xs); }

.pahal-metric__value {
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-metric);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--pahal-text-heading);
	font-variant-numeric: tabular-nums lining-nums;
}

.pahal-metric__label {
	font-family: var(--pahal-font-sans);
	font-size: var(--pahal-text-heading-s);
	font-weight: 500;
	line-height: 1.35;
	color: var(--pahal-accent);
}

.pahal-metric__basis {
	max-width: 30ch;
	padding-top: var(--pahal-space-2xs);
	border-top: 1px solid var(--pahal-rule);
	font-size: var(--pahal-text-s);
	line-height: 1.5;
	color: var(--pahal-text-soft);
}

/* ---- Editorial index rows (Our Work) ------------------------------- */

/*
 * Motion note — this is the section that read as unfinished.
 *
 * The row used to animate `padding-inline` on hover. Padding is a layout
 * property: every frame of that transition re-ran layout on a four-track grid
 * and re-wrapped the description, so the row arrived in visible steps and the
 * text jumped between line breaks. It was not a slow transition; it was a
 * transition the browser could not run on the compositor at all.
 *
 * The inset is now permanent — the row is always padded and the strip is pulled
 * back out by the same amount, so the type still aligns with the container at
 * rest. Hover animates only opacity and transform, both of which composite, and
 * the row's box never changes size, so nothing can re-wrap.
 */
.pahal-rows { border-top: 1px solid var(--pahal-rule); }

.pahal-row {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: var(--pahal-space-s);
	padding-block: var(--pahal-space-s);
	border-bottom: 1px solid var(--pahal-rule);
}

@media (min-width: 64em) {
	.pahal-rows { margin-inline: calc(var(--pahal-space-s) * -1); }

	.pahal-row {
		grid-template-columns: 4rem 1fr 1.4fr auto;
		padding-block: var(--pahal-space-m);
		padding-inline: var(--pahal-space-s);
	}
}

/*
 * isolation on the row is what makes this fill visible at all. Without it the
 * pseudo-element sits at z-index -1 in the ROOT stacking context, which paints
 * before the section's own background-color — so the highlight was drawn and
 * then covered by the sand band it was supposed to sit on.
 */
.pahal-row::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--pahal-hover-fill);
	opacity: 0;
	z-index: -1;
	transition: opacity var(--pahal-duration-menu) var(--pahal-ease-out);
}

/* The accent edge that gives the fill a leading edge rather than a soft wash. */
.pahal-row::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 2px;
	background-color: var(--pahal-accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--pahal-duration-menu) var(--pahal-ease);
	z-index: -1;
}

.pahal-row:hover::before,
.pahal-row:focus-within::before { opacity: 1; }

.pahal-row:hover::after,
.pahal-row:focus-within::after { transform: scaleY(1); }

.pahal-row__num {
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--pahal-track-eyebrow);
	color: var(--pahal-accent-text);
}

.pahal-row__title {
	margin: 0;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-display-s);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: var(--pahal-track-heading);
	color: var(--pahal-text-heading);
}

.pahal-row__title a { color: inherit; text-decoration: none; }
.pahal-row__title a::after { content: ""; position: absolute; inset: 0; }

.pahal-row__desc { margin: 0; font-size: var(--pahal-text-s); line-height: 1.6; color: var(--pahal-text-soft); }

@media (max-width: 63.999em) { .pahal-row__desc { grid-column: 2 / -1; } }

/*
 * The whole row group slides, together, on one composited transform. Moving the
 * cells individually would let them arrive at fractionally different times.
 */
.pahal-row__num,
.pahal-row__title,
.pahal-row__desc { transition: transform var(--pahal-duration-menu) var(--pahal-ease); }

@media (min-width: 64em) {
	.pahal-row:hover .pahal-row__num,
	.pahal-row:hover .pahal-row__title,
	.pahal-row:hover .pahal-row__desc,
	.pahal-row:focus-within .pahal-row__num,
	.pahal-row:focus-within .pahal-row__title,
	.pahal-row:focus-within .pahal-row__desc { transform: translateX(0.5rem); }
}

.pahal-row__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem; height: 2.75rem;
	flex: none;
	color: var(--pahal-accent-text);
	transition: transform var(--pahal-duration-menu) var(--pahal-ease);
}

.pahal-row:hover .pahal-row__arrow,
.pahal-row:focus-within .pahal-row__arrow { transform: translateX(0.35rem); }

@media (max-width: 63.999em) { .pahal-row__arrow { display: none; } }

/* ---- Figures ------------------------------------------------------ */

.pahal-figure { margin: 0; }
.pahal-figure img { width: 100%; }

/*
 * Captions are sentence case at reading size. The uppercase, letter-spaced,
 * accent-coloured version shouted louder than the photograph it described and
 * wrapped onto two lines.
 */
.pahal-figure figcaption {
	margin-top: var(--pahal-space-xs);
	padding-left: var(--pahal-space-2xs);
	border-left: 1px solid var(--pahal-rule);
	font-size: var(--pahal-text-s);
	line-height: 1.5;
	color: var(--pahal-text-soft);
}

/*
 * Scrim for type over photography. A pine-tinted gradient, not a black wash:
 * black kills the warmth of the image and still reads as a template. The
 * stops are tuned until measured contrast passes, not until it looks right.
 */
.pahal-scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgb(6 29 26 / 92%) 0%, rgb(6 29 26 / 72%) 32%, rgb(6 29 26 / 34%) 62%, rgb(6 29 26 / 12%) 100%),
		linear-gradient(to right, rgb(6 29 26 / 55%) 0%, rgb(6 29 26 / 10%) 60%, transparent 100%);
	pointer-events: none;
}

/* ---- Neutral note --------------------------------------------------- */

/*
 * Public-facing. States plainly that a figure is not yet published, and reads
 * as finished copy rather than as a production warning.
 */
.pahal-note {
	max-width: 52ch;
	padding-left: var(--pahal-space-s);
	border-left: 1px solid var(--pahal-accent);
	font-size: var(--pahal-text-s);
	line-height: 1.6;
	color: var(--pahal-text-soft);
}

/* ---- Editors-only marker -------------------------------------------- */

/*
 * Never shown to the public — pahal_content_required() returns early unless
 * the viewer can edit posts. Styled to be unmistakably an internal note so it
 * is never confused for site content by the person who can act on it.
 */
.pahal-required {
	display: flex;
	align-items: baseline;
	gap: var(--pahal-space-2xs);
	max-width: 60ch;
	padding: var(--pahal-space-2xs) var(--pahal-space-xs);
	background-color: color-mix(in srgb, var(--pahal-terracotta) 10%, transparent);
	border-left: 2px dashed var(--pahal-accent);
	font-size: var(--pahal-text-s);
	line-height: 1.55;
	color: var(--pahal-text-soft);
}

.pahal-required__tag {
	flex: none;
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-accent-text);
}

/* ---- Reveal --------------------------------------------------------- */

/*
 * Default state is VISIBLE. The script ARMS elements, so content is never
 * hidden behind a script that failed to load.
 */
.pahal-reveal--armed {
	opacity: 0;
	transform: translateY(1.75rem);
	transition:
		opacity var(--pahal-duration-slow) var(--pahal-ease-out),
		transform var(--pahal-duration-slow) var(--pahal-ease);
}

.pahal-reveal--armed.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.pahal-reveal--armed { opacity: 1; transform: none; }
}

/* ---- Pagination ------------------------------------------------------ */

.pahal-main .wp-block-query-pagination,
.pahal-main .navigation.pagination {
	display: flex;
	gap: var(--pahal-space-2xs);
	margin-top: var(--pahal-space-xl);
	padding-top: var(--pahal-space-s);
	border-top: 1px solid var(--pahal-rule);
	font-size: var(--pahal-text-s);
}

.pahal-main .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.5rem;
	text-decoration: none;
	color: var(--pahal-text-soft);
}

.pahal-main .page-numbers.current { color: var(--pahal-white); background-color: var(--pahal-pine-deep); }
.pahal-main a.page-numbers:hover { color: var(--pahal-accent-text); }