/*
 * WP 02 — Portfolio page (/portfolio/) and project type archives (/work/<type>/).
 * Figma: "Portfolio — Desktop" 452:866 (1920 wide), "Portfolio — Mobile" 455:1311 (440 wide).
 * Sizes are Figma px × var(--u) (see wp2.css). Prefix: w2p-.
 */

/* ---------- 01 · hero (452:884 / 455:1322) ---------- */
.w2p-hero { overflow-x: clip; }
.w2.w2p-hero { color: var(--c-white); background: linear-gradient(var(--c-black) 0 calc(640 * var(--u)), var(--c-white) 0) !important; }
.w2p-hero > .w2-in { padding-top: calc(72 * var(--u)); padding-bottom: calc(79 * var(--u)); }
:where(.w2p-hero .w2-in) > * { margin: 0 !important; position: relative; z-index: 1; }
.w2p-hero__collage { position: absolute !important; z-index: 0 !important; left: calc(994 * var(--u)); top: calc(9 * var(--u)); width: calc(996 * var(--u)); height: calc(699 * var(--u)); }
.w2p-hero__collage img { object-fit: contain !important; }
.w2p-hero__label { --fs: 14; }
.w2p-hero__title { --fs: 250; line-height: .7; margin-top: calc(137 * var(--u)) !important; mix-blend-mode: difference; z-index: 2 !important; }
.w2p-hero__intro { --fs: 22; max-width: calc(575 * var(--u)); margin-top: calc(68 * var(--u)) !important; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.w2p-hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: calc(136 * var(--u)) !important; color: var(--c-black); }
:where(.w2p-hero__bar) > * { margin: 0 !important; }
.w2p-filters { flex-wrap: wrap; }
.w2p-hero__count { --fs: 13; letter-spacing: .8px; white-space: nowrap; color: rgba(0, 0, 0, .6); }
.w2p-hero hr.w2p-hero__rule { margin-top: calc(48 * var(--u)) !important; color: var(--c-black); }
/* the "4 featured + 15 more" count only describes /portfolio/ */
.tax-project_type .w2p-hero__count { display: none; }

/* ---------- 02–05 · featured case studies (452:909 …) ---------- */
.w2p-feat > .w2-in { display: grid; grid-template-columns: calc(180 * var(--u)) calc(920 * var(--u)) calc(80 * var(--u)) calc(580 * var(--u)); align-items: start; padding-top: calc(110 * var(--u)); }
.w2p-feat.is-art-right > .w2-in { grid-template-columns: calc(580 * var(--u)) calc(80 * var(--u)) calc(920 * var(--u)) calc(180 * var(--u)); }
:where(.w2p-feat .w2-in) > * { margin: 0 !important; grid-row: 1; }
.w2p-feat__side { --fs: 130; grid-column: 1; margin: calc(10 * var(--u)) 0 0 calc(16 * var(--u)) !important; writing-mode: vertical-rl; transform: rotate(180deg); line-height: .85; white-space: nowrap; }
.w2p-feat.is-art-right .w2p-feat__side { grid-column: 4; justify-self: end; margin: calc(10 * var(--u)) calc(16 * var(--u)) 0 0 !important; transform: none; }
.w2p-feat__art { grid-column: 2; width: calc(920 * var(--u)); height: calc(760 * var(--u)); margin-top: calc(10 * var(--u)) !important; }
.w2p-feat.is-art-right .w2p-feat__art { grid-column: 3; }
.w2p-feat__text { grid-column: 4; display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--u)); }
.w2p-feat.is-art-right .w2p-feat__text { grid-column: 1; }
:where(.w2p-feat__text) > *, :where(.w2p-feat__text .wp-block-group) > * { margin: 0 !important; }
.w2p-feat__title { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.w2p-feat__num { --fs: 120; line-height: .8; }
.w2p-feat__name { --fs: 88; line-height: .9; }
.w2p-feat__name a { color: inherit; text-decoration: none; transition: color .2s ease; }
.w2p-feat__name a:hover { color: var(--c-pink); }
.w2p-feat__desc { --fs: 20; max-width: calc(580 * var(--u)); line-height: 1.55; }
.w2p-feat__text .w2-rule { width: calc(580 * var(--u)); }
.w2p-feat__meta { display: flex; gap: calc(40 * var(--u)); }
.w2p-feat__fact, .w2p-feat__result { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.w2p-feat__k { --fs: 12; letter-spacing: 1px; line-height: 1.3; color: rgba(0, 0, 0, .55); }
.w2p-feat__v { margin: 0; font-family: var(--f-body); font-weight: 500; font-size: max(14px, calc(17 * var(--u))); line-height: 1.2; white-space: nowrap; }
.w2p-feat__result { gap: calc(8 * var(--u)); color: var(--c-pink); }
.w2p-feat__result .w2p-feat__k { --fs: 13; color: inherit; }
.w2p-feat__res { --fs: 15; max-width: calc(580 * var(--u)); letter-spacing: 0; line-height: 1.6; text-transform: none; }
.w2p-feat .w2-btns { margin: 0; }

/* ---------- 06 · everything else (452:1051) ---------- */
.w2p-more > .w2-in { padding-bottom: calc(140 * var(--u)); }
:where(.w2p-more .w2-in) > * { margin: 0 !important; }
.w2p-more__head { display: grid; grid-template-columns: 1fr calc(620 * var(--u)); column-gap: 40px; align-items: start; }
:where(.w2p-more__head) > * { margin: 0 !important; }
.w2p-more__label { grid-column: 1 / -1; margin-top: calc(99 * var(--u)) !important; }
.w2p-more__title { --fs: 140; grid-column: 1; margin-top: calc(22 * var(--u)) !important; line-height: .85; }
.w2p-more__text { --fs: 22; grid-column: 2; margin-top: calc(30 * var(--u)) !important; line-height: 1.55; }
.w2p-more__text p { margin: 0; }
.w2p-more.is-type .w2p-more__label { margin-top: calc(100 * var(--u)) !important; }
.w2p-query { margin-top: calc(101 * var(--u)) !important; }
.w2p-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(24 * var(--u)); row-gap: calc(64 * var(--u)); margin: 0 !important; padding: 0; list-style: none; }
:where(.w2p-grid) > li { margin: 0 !important; }
.w2p-empty { --fs: 22; }
.w2p-empty a { text-decoration: underline; }

/* card (wp2/project-card 448:762) */
.w2p-card { position: relative; display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
:where(.w2p-card) > * { margin: 0 !important; }
.w2p-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #ededed; }
:where(.w2p-card__media) > * { margin: 0 !important; }
.w2p-card__img { width: 100%; height: 100%; }
.w2p-card__img a { display: block; height: 100%; }
.w2p-card__img img { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform .5s ease; }
.w2p-card__brief {
	position: absolute; inset: 0; display: flex; align-items: flex-end; box-sizing: border-box; padding: calc(28 * var(--u));
	background: linear-gradient(to top, rgba(0, 0, 0, .86) 0, rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, .15) 100%); color: var(--c-white);
	font-family: var(--f-body); font-size: max(14px, calc(19 * var(--u))); line-height: 1.5;
	opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.w2p-card__brief p { margin: 0; }
.w2p-card__brief .wp-block-post-excerpt__more-text { display: none; }
.w2p-card__cap { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding-right: calc(80 * var(--u)); }
:where(.w2p-card__cap) > * { margin: 0 !important; }
.w2p-card__cap::after {
	content: ""; position: absolute; right: 0; bottom: calc(4 * var(--u)); width: max(40px, calc(56 * var(--u))); height: max(9px, calc(12 * var(--u)));
	background: currentColor; -webkit-mask: url("../img/arrow.svg") center / 100% 100% no-repeat; mask: url("../img/arrow.svg") center / 100% 100% no-repeat;
	transition: transform .25s ease;
}
.w2p-card__title { --fs: 34; --fmin: 24px; letter-spacing: .5px; line-height: 1.15; }
.w2p-card__title a { color: inherit; text-decoration: none; }
.w2p-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card is the link */
.w2p-card__types { --fs: 13; position: relative; z-index: 2; letter-spacing: .4px; line-height: 1.3; color: #595959; }
.w2p-card__types a { color: inherit; text-decoration: none; }
.w2p-card__types a:hover { color: var(--c-black); text-decoration: underline; }
.w2p-card__types .wp-block-post-terms__separator { white-space: pre; }
.w2p-card:hover .w2p-card__img img, .w2p-card:focus-within .w2p-card__img img { transform: scale(1.04); }
.w2p-card:hover .w2p-card__brief, .w2p-card:focus-within .w2p-card__brief { opacity: 1; transform: none; }
.w2p-card:hover .w2p-card__cap::after { transform: translateX(6px); }
.w2p-card:hover .w2p-card__title { color: var(--c-pink); }
@media (hover: none) { .w2p-card__brief { display: none; } }

/* ---------- 07 · AI band (452:1339) ---------- */
.w2p-ai { background: var(--c-yellow); color: var(--c-black); }
.w2p-ai > .w2-in { display: grid; grid-template-columns: calc(380 * var(--u)) 1fr auto; align-items: start; min-height: calc(460 * var(--u)); padding-top: calc(100 * var(--u)); padding-bottom: calc(72 * var(--u)); box-sizing: border-box; }
:where(.w2p-ai .w2-in) > * { margin: 0 !important; }
.w2p-ai__mark { --fs: 300; line-height: .87; margin-top: calc(-4 * var(--u)) !important; }
.w2p-ai__main { display: flex; flex-direction: column; gap: 0; padding-top: calc(10 * var(--u)); }
:where(.w2p-ai__main) > * { margin: 0 !important; }
.w2p-ai__head { --fs: 84; max-width: calc(1000 * var(--u)); line-height: .92; }
.w2p-ai__text { --fs: 22; max-width: calc(760 * var(--u)); margin-top: calc(56 * var(--u)) !important; line-height: 1.55; }
.w2p-ai__btns { padding-top: calc(15 * var(--u)); margin-right: calc(15 * var(--u)) !important; }

/* ---------- mobile (455:1311, 440 wide) ---------- */
@media (max-width: 899px) {
	/* hero */
	.w2.w2p-hero { background: linear-gradient(var(--c-black) 0 calc(370 * var(--u)), var(--c-white) 0) !important; }
	.w2p-hero > .w2-in { padding-top: calc(32 * var(--u)); padding-bottom: calc(19 * var(--u)); }
	.w2p-hero__flowers { position: absolute !important; z-index: 0 !important; left: calc(300 * var(--u)); top: calc(8 * var(--u)); width: calc(144 * var(--u)); height: calc(106 * var(--u)); }
	.w2p-hero__label { --fs: 12; }
	.w2p-hero__title { --fs: 76; --fmin: 40px; line-height: .7; margin-top: calc(75 * var(--u)) !important; }
	.w2p-hero__intro { --fs: 17; max-width: none; margin-top: calc(52 * var(--u)) !important; }
	.w2p-hero__bar { flex-direction: column; align-items: stretch; gap: calc(22 * var(--u)); margin-top: calc(100 * var(--u)) !important; }
	.w2p-filters { flex-wrap: nowrap; gap: calc(10 * var(--u)); overflow-x: auto; margin-inline: calc(-1 * var(--gx)) !important; padding: 2px var(--gx); scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gx); }
	.w2p-filters::-webkit-scrollbar { display: none; }
	.w2p-filters > * { flex: none; scroll-snap-align: start; }
	.w2p-hero__count { --fs: 11; letter-spacing: .6px; white-space: pre; }
	.w2p-hero hr.w2p-hero__rule { margin-top: calc(28 * var(--u)) !important; }

	/* featured */
	.w2p-feat > .w2-in, .w2p-feat.is-art-right > .w2-in { display: flex; flex-direction: column; gap: calc(16 * var(--u)); padding-top: calc(28 * var(--u)); padding-bottom: calc(28 * var(--u)); }
	.w2p-hero + .w2p-feat > .w2-in { padding-top: calc(40 * var(--u)); }
	.w2p-feat:has(+ .w2p-more) > .w2-in { padding-bottom: calc(72 * var(--u)); }
	.w2p-feat__side, .w2p-feat.is-art-right .w2p-feat__side {
		margin: 0 !important; writing-mode: horizontal-tb; transform: none; justify-self: auto;
		font-family: var(--f-mono); font-weight: 500; font-size: max(11px, calc(12 * var(--u))); letter-spacing: 1px; line-height: 1.3; color: rgba(0, 0, 0, .6);
	}
	.w2p-feat__art { width: 100%; height: auto; aspect-ratio: 392 / 320; margin: 0 !important; }
	.w2p-feat__text { gap: calc(16 * var(--u)); width: 100%; }
	.w2p-feat__title { flex-direction: row; align-items: flex-end; gap: calc(14 * var(--u)); }
	.w2p-feat__num { --fs: 56; line-height: .85; }
	.w2p-feat__name { --fs: 44; line-height: .9; }
	.w2p-feat__desc { --fs: 17; max-width: none; }
	.w2p-feat__k { --fs: 11; }
	.w2p-feat__v { font-size: max(14px, calc(16 * var(--u))); }
	.w2p-feat__result { gap: calc(6 * var(--u)); margin-top: calc(-10 * var(--u)) !important; }
	.w2p-feat__result .w2p-feat__k { --fs: 11; }
	.w2p-feat__res { --fs: 14; }
	.w2p-feat .w2-btns, .w2p-feat .w2-btn { width: 100%; }
	.w2p-feat .w2-btn .wp-block-button__link { width: 100%; justify-content: space-between; font-size: max(14px, calc(18 * var(--u))); }

	/* everything else */
	.w2p-more > .w2-in { padding-top: calc(48 * var(--u)); padding-bottom: calc(72 * var(--u)); }
	.w2p-more.is-type > .w2-in { padding-top: 0; }
	.w2p-more__head { display: block; }
	.w2p-more__label { margin-top: calc(40 * var(--u)) !important; }
	.w2p-more__title { --fs: 72; margin-top: calc(40 * var(--u)) !important; }
	.w2p-more__text { --fs: 17; margin-top: calc(16 * var(--u)) !important; }
	.w2p-query { margin-top: calc(40 * var(--u)) !important; }
	.w2p-grid { grid-template-columns: 1fr; row-gap: calc(40 * var(--u)); }
	.w2p-card__title { --fs: 30; }
	.w2p-card__types { --fs: 13; }

	/* AI band */
	.w2p-ai > .w2-in { display: flex; flex-direction: column; gap: calc(20 * var(--u)); min-height: 0; padding-top: calc(56 * var(--u)); padding-bottom: calc(72 * var(--u)); }
	.w2p-ai__mark { --fs: 138; --fmin: 60px; margin: 0 !important; }
	.w2p-ai__main { padding: 0; gap: calc(20 * var(--u)); }
	.w2p-ai__head { --fs: 48; max-width: none; }
	.w2p-ai__text { --fs: 17; margin: 0 !important; }
	.w2p-ai__btns { padding: 0; margin: 0 !important; }
	.w2p-ai__btns, .w2p-ai__btns .w2-btn { width: 100%; }
	.w2p-ai__btns .wp-block-button__link { width: 100%; justify-content: space-between; font-size: max(14px, calc(18 * var(--u))); }
}

@media (prefers-reduced-motion: reduce) {
	.w2p-card__img img, .w2p-card__brief, .w2p-card__cap::after, .w2p-feat__name a { transition: none !important; }
	.w2p-card:hover .w2p-card__img img { transform: none; }
}