/* HDL Site Modules: Portfolio Overview
   Adapted from the supplied HDL service-page portfolio handover.
   Scoped to .hdl-po and designed to sit inside the existing Bricks page rhythm. */

.hdl-po {
	--hdl-po-ink: #4a4238;
	--hdl-po-body: #5a544c;
	--hdl-po-muted: #6a635a;
	--hdl-po-accent: #9a8c7a;
	--hdl-po-rule: #d2cbbf;
	--hdl-po-rule-strong: #c0b5a4;
	background: var(--primary-ultra-light, #f5f3f0);
	color: inherit;
	padding: clamp(64px, 7vw, 96px) clamp(20px, 4vw, 40px) clamp(72px, 8vw, 108px);
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}

/* Site surface system. Portfolio Overview uses the HDL default surface unless
   an alternate or standout surface is explicitly selected. */
.hdl-po--surface-default { background: var(--primary-ultra-light, #f5f3f0); }
.hdl-po--surface-alternate { background: var(--primary-trans-10, transparent); }
.hdl-po--surface-standout { background: var(--primary-light, #f5f3f0); }

.hdl-po *,
.hdl-po *::before,
.hdl-po *::after { box-sizing: border-box; }

/* Use the Bricks/site content width when it exists; otherwise retain the
   supplied handover width. */
.hdl-po__inner {
	width: 100%;
	max-width: var(--content-width, 1200px);
	margin-inline: auto;
}

.hdl-po__intro {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2.2vw, 26px);
	max-width: 900px;
}

.hdl-po__eyebrow,
.hdl-po__heading,
.hdl-po__lede,
.hdl-po__title,
.hdl-po__summary,
.hdl-po__body,
.hdl-po__meta { margin: 0; }

.hdl-po__eyebrow {
	/* Eyebrows are presentation labels, not headings. Keep the distinctive
	   uppercase treatment while inheriting the site's font family. */
	font-size: 14px;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #000;
}

.hdl-po__heading {
	/* Semantic H2: sizing, weight, line-height and tracking come from the
	   site's global H2 rules in Bricks. */
	color: inherit;
	text-wrap: pretty;
}

.hdl-po__lede {
	/* Semantic paragraph: inherit the global body typography. */
	max-width: 720px;
	color: inherit;
	text-wrap: pretty;
}

.hdl-po__grid {
	list-style: none;
	margin: clamp(48px, 5vw, 72px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(32px, 4vw, 56px);
	row-gap: 20px;
	align-items: stretch;
}

/* The column count follows the number of projects actually rendered. */
.hdl-po--count-1 .hdl-po__grid {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
}

.hdl-po--count-2 .hdl-po__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hdl-po__item {
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	border-top: 1px solid var(--hdl-po-rule);
	padding-top: 28px;
}

.hdl-po__title {
	/* Semantic H3: use the site's global H3 typography. */
	color: inherit;
	text-wrap: pretty;
}

.hdl-po__summary,
.hdl-po__body {
	/* Normal paragraphs: keep typography in sync with Bricks global body
	   styles rather than creating a second type scale inside the plugin. */
	color: inherit;
	text-wrap: pretty;
}

/* Project media now leads each card. */
.hdl-po__media {
	margin-top: 0;
	padding-top: 0;
	width: 100%;
	aspect-ratio: 800 / 590;
	overflow: hidden;
	background: rgba(0, 0, 0, .035);
}

.hdl-po__media-link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.hdl-po__media-link:focus-visible {
	outline: 3px solid var(--hdl-po-ink);
	outline-offset: -3px;
}

.hdl-po__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.hdl-po__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hdl-po-accent);
}

.hdl-po__sep { color: var(--hdl-po-rule-strong); }

.hdl-po__link,
.hdl-po__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	color: #8c7b66;
	text-decoration: none;
	text-transform: uppercase;
	transition: gap .2s ease, color .2s ease, border-color .2s ease;
}

.hdl-po__link { font-size: 13.5px; letter-spacing: .09em; }
.hdl-po__link:hover,
.hdl-po__link:focus-visible { gap: 16px; color: var(--hdl-po-ink); }

.hdl-po__footer { margin-top: clamp(48px, 5vw, 72px); }
.hdl-po__cta {
	gap: 14px;
	font-size: 15px;
	letter-spacing: .1em;
	border-bottom: 1px solid var(--hdl-po-rule-strong);
	padding-bottom: 12px;
}
.hdl-po__cta:hover,
.hdl-po__cta:focus-visible { gap: 22px; color: var(--hdl-po-ink); border-bottom-color: var(--hdl-po-ink); }
.hdl-po__arrow { font-size: 1.1em; line-height: 1; }
.hdl-po__link:focus-visible,
.hdl-po__cta:focus-visible { outline: 2px solid var(--hdl-po-ink); outline-offset: 4px; }

/* Modern browsers: let every project in the same visual row share the same
   title/summary/body/media/meta/link tracks. This keeps all images and footer
   details perfectly aligned even when Portfolio copy lengths differ. */
@supports (grid-template-rows: subgrid) {
	.hdl-po__item {
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		column-gap: 0;
		row-gap: 20px;
	}

	.hdl-po__media { grid-row: 1; margin-top: 0; padding-top: 0; }
	.hdl-po__title { grid-row: 2; }
	.hdl-po__summary { grid-row: 3; }
	.hdl-po__body { grid-row: 4; }
	.hdl-po__meta { grid-row: 5; }
	.hdl-po__link { grid-row: 6; }

	.hdl-po__title,
	.hdl-po__summary,
	.hdl-po__body,
	.hdl-po__media,
	.hdl-po__meta,
	.hdl-po__link { align-self: start; }
}

.hdl-po--empty { background: transparent; padding: 0; }
.hdl-po__builder-notice {
	padding: 18px;
	border: 1px dashed #9a8c7a;
	background: var(--primary-trans-10, #f5f3f0);
	color: #4a4238;
	font: inherit;
}

@media (max-width: 1024px) {
	.hdl-po__grid,
	.hdl-po--count-2 .hdl-po__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hdl-po--count-1 .hdl-po__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
	.hdl-po__grid,
	.hdl-po--count-2 .hdl-po__grid {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 18px;
	}

	.hdl-po__item { grid-row: span 6; }
	.hdl-po__footer { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.hdl-po__link,
	.hdl-po__cta { transition: none; }
}