/**
 * Empathysites Portfolio — single project styles.
 *
 * Ported from the Claude Design "Oura-minimal" comp. Colours map to the child
 * theme's :root tokens where they line up, with the comp's exact values as
 * fallbacks so this renders correctly even before/without the theme tokens.
 *
 * Fonts (Hanken Grotesk + Cormorant) are loaded by the THEME, not here.
 * This file only references them by name.
 */

.es-portfolio-single,
.es-portfolio-archive,
.es-portfolio-archive-cta {
	/* Working colours */
	--esp-ink:        var(--es-ink, #283226);
	--esp-accent:     var(--es-accent, #5e7e64);
	--esp-sage:       #8fa68c;   /* lighter sage: dots, accents on dark */

	/* Surfaces */
	--esp-page:       var(--es-paper, #fbf8f0); /* portfolio page ground */
	--esp-card:       #f2efe7;   /* card image backdrop */
	--esp-fill:       var(--es-fill, #e3e7db);  /* Pale Sage — tag fills */
	--esp-more-bg:    #f0ede4;   /* More practices band — a quiet step down */
	--esp-cta-text:   #f6f3ea;   /* text on the dark CTA */
	--esp-cta-accent: #afc39c;   /* italic accent on the dark CTA */
	--esp-cta-eye:    #9db295;   /* eyebrow on the dark CTA */

	/* Text */
	--esp-eyebrow:    #6e7d67;
	--esp-muted:      #6b7268;   /* readable muted body/subhead text */
	--esp-label:      #8e9684;
	--esp-pill-text:  #3f4a3c;

	/* Lines */
	--esp-hairline:   rgba(94, 126, 100, 0.2);
	--esp-pill-line:  rgba(94, 126, 100, 0.28);
	--esp-ghost-line: rgba(40, 50, 38, 0.32);

	background: var(--esp-page);
	color: var(--esp-ink);
	font-family: 'Hanken Grotesk', sans-serif;
}

.es-portfolio-single em,
.es-portfolio-archive em,
.es-portfolio-archive-cta em {
	font-family: 'Cormorant', Georgia, serif;
	font-style: italic;
	font-weight: 400;
}

/* The Beaver Builder theme gives .fl-content a 40px top/bottom margin at
   >=992px. The theme's own rule zeroes only the TOP on singles, leaving a 40px
   bottom margin that opens a cream gap between the full-bleed portfolio CTA and
   the footer. Zero the bottom too, scoped to portfolio singles. */
.single-es_portfolio .fl-content {
	margin-bottom: 0;
}

/* Same fix for the archive page (a Page, so it needs its own selector). */
.page-template-es-portfolio-archive .fl-content {
	margin-bottom: 0;
}

/* ================= HERO ================= */

.es-portfolio-hero {
	background: var(--esp-page);
	padding: clamp(28px, 5vh, 56px) clamp(20px, 5vw, 56px) clamp(72px, 12vh, 140px);
}

.es-portfolio-backlink {
	display: inline-block;
	max-width: 1180px;
	margin: 0 auto clamp(48px, 7vh, 80px);
	font-size: 15px;
	font-weight: 400;
	color: var(--esp-accent);
	text-decoration: none;
}

.es-portfolio-backlink:hover,
.es-portfolio-backlink:focus {
	color: var(--esp-ink);
	text-decoration: none;
}

.es-portfolio-hero-grid {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.es-portfolio-eyebrow {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--esp-eyebrow);
	margin: 0 0 28px;
}

.es-portfolio-mid {
	opacity: 0.6;
}

.es-portfolio-title {
	font-weight: 400;
	font-size: clamp(38px, 5.6vw, 50px);
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: var(--esp-ink);
	margin: 0 0 28px;
}

.es-portfolio-tagline {
	font-family: 'Cormorant', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(21px, 2.5vw, 32px);
	line-height: 1.4;
	color: var(--esp-accent);
	margin: 0 0 clamp(38px, 6vh, 56px);
}

.es-portfolio-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Screenshot locked to 4:3 */

.es-portfolio-hero-shot {
	margin: 0;
}

.es-portfolio-shot-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 3;
	overflow: hidden;
	border-radius: 20px;
	background: var(--esp-card);
	box-shadow: 0 24px 52px -24px rgba(40, 50, 38, 0.22);
}

.es-portfolio-shot-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

@supports not (aspect-ratio: 1) {
	.es-portfolio-shot-frame { height: 0; padding-bottom: 60%; }
}

/* ================= BUTTONS ================= */

.es-portfolio-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: 'Hanken Grotesk', sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1;
	border-radius: 100px;
	padding: 14px 30px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.es-portfolio-btn-icon {
	width: 1.05em;
	height: 1.05em;
	flex-shrink: 0;
}

.es-portfolio-btn-primary,
.es-portfolio-btn-primary:visited {
	background: var(--esp-ink);
	color: var(--esp-page);
	border: 1px solid var(--esp-ink);
}

.es-portfolio-btn-primary:hover,
.es-portfolio-btn-primary:focus {
	transform: translateY(-1px);
	color: var(--esp-page);
	text-decoration: none;
}

.es-portfolio-btn-ghost,
.es-portfolio-btn-ghost:visited {
	background: transparent;
	color: var(--esp-ink);
	border: 1px solid var(--esp-ghost-line);
}

.es-portfolio-btn-ghost:hover,
.es-portfolio-btn-ghost:focus,
.es-portfolio-btn-ghost:focus-visible,
.es-portfolio-btn-ghost:active {
	background: transparent !important;
	box-shadow: none !important;
	border-color: var(--esp-ink);
	color: var(--esp-ink);
	text-decoration: none;
}

.es-portfolio-btn-invert,
.es-portfolio-btn-invert:visited {
	background: var(--esp-page);
	color: var(--esp-ink);
	border: 1px solid var(--esp-page);
	font-size: 17px;
	padding: 16px 38px;
}

.es-portfolio-btn-invert:hover,
.es-portfolio-btn-invert:focus {
	transform: translateY(-1px);
	color: var(--esp-ink);
	text-decoration: none;
}

/* ================= SPEC BAND ================= */

.es-portfolio-specs {
	background: var(--esp-page);
	padding: 0 clamp(20px, 5vw, 56px) clamp(72px, 12vh, 132px);
}

.es-portfolio-specs-inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* Each row: label on the left, content on the right. */
.es-portfolio-specrow {
	display: grid;
	grid-template-columns: minmax(150px, 220px) 1fr;
	gap: clamp(24px, 5vw, 64px);
	align-items: start;
	padding: clamp(32px, 4.5vh, 48px) 0;
}

/* Continuous rule between consecutive rows (only when a row follows another). */
.es-portfolio-specrow + .es-portfolio-specrow {
	border-top: 1px solid var(--esp-hairline);
}

.es-portfolio-label {
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--esp-label);
	margin: 0;
	padding-top: 6px; /* optical align with first line of content */
}

.es-portfolio-specrow-content {
	min-width: 0;
}

/* Single-value row content (Location, Sessions). */
.es-portfolio-fact-value {
	font-weight: 300;
	font-size: 17px;
	line-height: 1.4;
	color: var(--esp-ink);
	margin: 0;
}

.es-portfolio-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.es-portfolio-pill {
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
	color: var(--esp-ink);
	background: var(--esp-fill);
	border-radius: 8px;
	padding: 9px 15px;
}

/* Services now lay out horizontally, wrapping. */
.es-portfolio-services {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}

.es-portfolio-services li {
	display: flex;
	gap: 10px;
	align-items: baseline;
	font-weight: 300;
	font-size: 17px;
	color: var(--esp-ink);
}

.es-portfolio-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--esp-sage);
	flex-shrink: 0;
	transform: translateY(-3px);
}

/* "Included with every site" line — sits under the services, in the same
   content column, in the sans body font (never the serif italic). */
.es-portfolio-included {
	margin: clamp(18px, 3vh, 26px) 0 0;
	font-family: 'Hanken Grotesk', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.5;
	color: var(--esp-label);
}

@media screen and (max-width: 640px) {
	.es-portfolio-specrow {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.es-portfolio-label {
		padding-top: 0;
	}
}

/* ================= STORY ================= */

.es-portfolio-story {
	background: var(--esp-page);
	padding: 0 clamp(20px, 5vw, 56px) clamp(100px, 14vh, 172px);
}

.es-portfolio-story-grid {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.7fr 1.3fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}

.es-portfolio-h2 {
	font-weight: 400;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.08;
	letter-spacing: -0.035em;
	color: var(--esp-ink);
	margin: 0;
}

.es-portfolio-h2 em {
	color: var(--esp-accent);
	font-size: 1.25em;
}

.es-portfolio-prose {
	font-weight: 300;
	font-size: clamp(17px, 1.35vw, 19px);
	line-height: 1.7;
	color: var(--esp-ink);
}

.es-portfolio-prose p { margin: 0 0 1.1em; }
.es-portfolio-prose p:last-child { margin-bottom: 0; }
.es-portfolio-prose a { color: var(--esp-accent); }

/* ================= FREEFORM ================= */

.es-portfolio-freeform {
	background: var(--esp-page);
	padding: 0 clamp(20px, 5vw, 56px) clamp(40px, 8vh, 80px);
}

.es-portfolio-freeform-inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* ================= MORE PRACTICES ================= */

.es-portfolio-more {
	background: var(--esp-more-bg);
	padding: clamp(82px, 11vh, 122px) clamp(20px, 5vw, 56px) clamp(88px, 12vh, 138px);
}

.es-portfolio-more-inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* Smaller than the story heading so this section reads as secondary. */
.es-portfolio-more .es-portfolio-h2 {
	font-size: clamp(22px, 2.4vw, 30px);
}

.es-portfolio-more-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: clamp(34px, 5vh, 56px);
}

.es-portfolio-seeall {
	font-weight: 400;
	font-size: 15px;
	white-space: nowrap;
	color: var(--esp-accent);
	text-decoration: none;
}

.es-portfolio-seeall:hover,
.es-portfolio-seeall:focus {
	color: var(--esp-ink);
	text-decoration: none;
}

.es-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(24px, 3vw, 40px);
}

.es-portfolio-card,
.es-portfolio-card:visited {
	display: block;
	text-decoration: none;
	color: var(--esp-ink);
}

/* No underline on hover, on the card or its inner text lines. */
.es-portfolio-card:hover,
.es-portfolio-card:focus {
	text-decoration: none;
}

.es-portfolio-card-media {
	display: block;
	position: relative;
	aspect-ratio: 5 / 3;
	overflow: hidden;
	border-radius: 16px;
	background: var(--esp-card);
}

.es-portfolio-card-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

@supports not (aspect-ratio: 1) {
	.es-portfolio-card-media { height: 0; padding-bottom: 60%; }
}

.es-portfolio-card-body {
	display: block;
	padding: 16px 2px 0;
}

.es-portfolio-card-title {
	display: block;
	font-weight: 400;
	font-size: clamp(16px, 1.5vw, 19px);
	letter-spacing: -0.025em;
	color: var(--esp-ink);
	line-height: 1.15;
}

/* Practice type in caps under the card title (Kat's correction) */
.es-portfolio-card-practice {
	display: block;
	margin-top: 8px;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--esp-label);
}

/* ================= FINAL CTA ================= */

.es-portfolio-cta {
	position: relative;
	overflow: hidden;
	scroll-margin-top: 64px;
	background: var(--esp-ink);
	color: var(--esp-cta-text);
	padding: clamp(88px, 14vh, 164px) clamp(20px, 5vw, 56px);
	text-align: center;
}

.es-portfolio-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 70% at 50% 0%, rgba(143, 166, 140, 0.14), transparent 62%),
		radial-gradient(46% 56% at 88% 92%, rgba(143, 166, 140, 0.12), transparent 64%);
}

.es-portfolio-cta-inner {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.es-portfolio-cta-eyebrow {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--esp-cta-eye);
	margin: 0 0 26px;
}

.es-portfolio-cta-heading {
	font-weight: 400;
	font-size: clamp(30px, 4.4vw, 45px);
	line-height: 1.2;
	letter-spacing: -0.035em;
	color: var(--esp-cta-text);
	margin: 0 0 22px;
}

.es-portfolio-cta-heading em {
	color: var(--esp-cta-accent);
	font-size: 1.25em;
}

.es-portfolio-cta-text {
	font-weight: 300;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.6;
	color: var(--esp-cta-text);
	max-width: 560px;
	margin: 0 auto 34px;
	opacity: 0.92;
}

/* ================= RESPONSIVE ================= */

@media screen and (max-width: 900px) {
	.es-portfolio-hero-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.es-portfolio-hero-shot { order: -1; }

	.es-portfolio-story-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.es-portfolio-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 600px) {
	.es-portfolio-grid { grid-template-columns: 1fr; }
	.es-portfolio-more-head { flex-direction: column; gap: 8px; }
}


/* ================= ARCHIVE ================= */

.es-portfolio-archive {
	background: var(--esp-page);
	padding: clamp(40px, 7vh, 88px) clamp(20px, 5vw, 56px) clamp(72px, 11vh, 120px);
	font-family: 'Hanken Grotesk', sans-serif;
	color: var(--esp-ink);
}

.es-portfolio-archive-inner {
	max-width: 1180px;
	margin: 0 auto;
}

/* ---- Hero (left aligned) ---- */

.es-portfolio-archive-hero {
	margin-bottom: clamp(56px, 9vh, 96px);
}

@media screen and (min-width: 900px) {
	.es-portfolio-archive-hero {
		max-width: 50%;
	}
}

.es-portfolio-archive-eyebrow {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--esp-eyebrow);
	margin: 0 0 clamp(16px, 2.4vh, 22px);
}

.es-portfolio-archive-title {
	font-weight: 400;
	font-size: clamp(34px, 5.6vw, 48px);
	line-height: 1.08;
	letter-spacing: -0.035em;
	color: var(--esp-ink);
	margin: 0 0 16px;
}

.es-portfolio-archive-title em {
	color: var(--esp-accent);
	font-size: 1.18em;
}

.es-portfolio-archive-subhead {
	font-weight: 300;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.5;
	color: var(--esp-muted);
	margin: 0;
}

/* ---- Filter bar (hairline top + bottom, pills left, count right) ---- */

.es-portfolio-filterbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 3vw, 32px);
	flex-wrap: wrap;
	border-top: 1px solid var(--esp-hairline);
	border-bottom: 1px solid var(--esp-hairline);
	padding: clamp(18px, 2.6vh, 24px) 0;
	margin-bottom: clamp(36px, 6vh, 64px);
}

.es-portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.es-portfolio-filter {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 1px solid var(--esp-pill-line);
	border-radius: 100px;
	padding: 9px 20px;
	cursor: pointer;
	font-family: 'Hanken Grotesk', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1;
	color: var(--esp-muted);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.es-portfolio-filter:hover,
.es-portfolio-filter:focus,
.es-portfolio-filter:focus-visible,
.es-portfolio-filter:active {
	background: none !important;
	box-shadow: none !important;
	color: var(--esp-ink);
	border-color: var(--esp-accent);
}

.es-portfolio-filter.is-active {
	color: var(--esp-ink);
	border-color: var(--esp-accent);
}

.es-portfolio-filter.is-active::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 9px;
	border-radius: 50%;
	background: var(--esp-accent);
	vertical-align: middle;
}

.es-portfolio-count {
	font-weight: 400;
	font-size: 15px;
	color: var(--esp-muted);
	white-space: nowrap;
}

/* ---- Grid: two across, generous horizontal gap ---- */

.es-portfolio-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(72px, 10vh, 104px) clamp(36px, 4vw, 60px);
}

.es-portfolio-archive-grid .es-portfolio-card-title {
	font-size: clamp(18px, 1.6vw, 22px);
}

/* Subtle lift so pale screenshots don't dissolve into the cream background.
   Scoped to the archive so "More practices" stays intentionally flat. */
.es-portfolio-archive-grid .es-portfolio-card-media {
	box-shadow: 0 20px 44px -22px rgba(40, 50, 38, 0.20);
}

/* ---- Load more + count ---- */

.es-portfolio-archive-more {
	text-align: center;
	margin-top: clamp(44px, 7vh, 72px);
}

.es-portfolio-showing {
	margin: clamp(16px, 2.4vh, 22px) 0 0;
	font-weight: 400;
	font-size: 14px;
	color: var(--esp-muted);
}

.es-portfolio-archive-empty {
	text-align: center;
	margin: clamp(32px, 5vh, 48px) 0 0;
	font-weight: 300;
	color: var(--esp-muted);
}

/* ---- Bottom CTA bar (dark forest band, centered) ---- */

.es-portfolio-archive-cta {
	position: relative;
	overflow: hidden;
	background: var(--esp-ink);
	color: var(--esp-cta-text);
	padding: clamp(72px, 13vh, 140px) clamp(20px, 5vw, 56px);
	text-align: center;
}

.es-portfolio-archive-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 70% at 50% 0%, rgba(143, 166, 140, 0.14), transparent 62%),
		radial-gradient(46% 56% at 88% 92%, rgba(143, 166, 140, 0.12), transparent 64%);
}

.es-portfolio-archive-cta-inner {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.es-portfolio-archive-cta-eyebrow {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--esp-cta-eye);
	margin: 0 0 clamp(20px, 3vh, 28px);
}

.es-portfolio-archive-cta-heading {
	font-weight: 400;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.035em;
	color: var(--esp-cta-text);
	margin: 0 0 clamp(30px, 4.5vh, 40px);
}

.es-portfolio-archive-cta-heading em {
	color: var(--esp-cta-accent);
	font-size: 1.25em;
}

/* Beige button that brightens to white on hover. */
.es-portfolio-archive-cta .es-portfolio-btn-invert {
	background: #f0ede4;
	border-color: #f0ede4;
	color: var(--esp-ink);
}

.es-portfolio-archive-cta .es-portfolio-btn-invert:hover,
.es-portfolio-archive-cta .es-portfolio-btn-invert:focus {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--esp-ink);
}

/* ---- Responsive ---- */

@media screen and (max-width: 980px) {
	.es-portfolio-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 640px) {
	.es-portfolio-archive-grid {
		grid-template-columns: 1fr;
	}
}