/*
 * WP 02 — simple project pages (/portfolio/<slug>/), prefix w2pj-.
 * Figma: "WP 02 - Portfolio Pages" → wp2/project-page 477:1510
 *   desktop 477:1344 (1920), mobile 477:1431 (440).
 * Markup: theme/inc/w2-projects.php (workingprint_w2_project_build()).
 */

/* ---------- 01 · body: thumbnail + text (477:1362) ---------- */
.w2pj-body__in { display: flex; align-items: flex-start; gap: calc(80 * var(--u)); padding-top: calc(110 * var(--u)); padding-bottom: calc(120 * var(--u)); }
.w2pj-body__in > * { margin: 0 !important; }
.w2 figure.w2pj-thumb { flex: none; width: calc(1000 * var(--u)); aspect-ratio: 4 / 3; box-sizing: border-box; border: 1px solid var(--c-black); overflow: hidden; background: #c4c4c4; }
.w2pj-text { flex: 0 1 calc(680 * var(--u)); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(26 * var(--u)); }
.w2pj-text > * { margin: 0 !important; }

.w2pj-crumb { --fs: 13; }
.w2pj-crumb a { transition: color .2s ease; }
.w2pj-crumb a:hover { color: var(--c-pink); }
.w2pj-title { --fs: 130; line-height: .88; width: 100%; overflow-wrap: anywhere; }
.w2pj-summary { --fs: 28; line-height: 1.35; }
.w2pj-disc { --fs: 14; letter-spacing: .8px; line-height: 1.3; color: var(--c-pink); }
.w2pj-rule { color: var(--c-black); }

.w2pj-block { display: flex; flex-direction: column; gap: calc(8 * var(--u)); width: 100%; }
.w2pj-block > * { margin: 0 !important; }
.w2pj-block .w2-label, .w2pj-meta__label { --fs: 13; }
.w2pj-about, .w2pj-did { --fs: 20; line-height: 1.6; }
.w2pj-did { line-height: 1.7; }

.w2pj-meta { display: flex; gap: calc(40 * var(--u)); }
.w2pj-meta > * { margin: 0 !important; }
.w2pj-meta__item { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.w2pj-meta__item > * { margin: 0 !important; }
.w2pj-meta__label { --fs: 11; --fmin: 10px; }
.w2pj-meta__val { font-family: var(--f-body); font-weight: 500; font-size: max(15px, calc(18 * var(--u))); line-height: 1.2; }
.w2pj-meta__val a { border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; }
.w2pj-meta__val a:hover { color: var(--c-pink); border-bottom-color: currentColor; }
.logged-in .w2pj-meta__item.is-placeholder, .logged-in .w2pj-meta.is-placeholder, .editor-styles-wrapper .w2pj-meta.is-placeholder { display: flex !important; }

/* ---------- 02 · Selected work (481:6977) ---------- */
.w2pj-gal__in { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding-top: calc(100 * var(--u)); padding-bottom: calc(120 * var(--u)); }
.w2pj-gal__in > * { margin: 0 !important; }
.w2pj-gal__head { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding-bottom: calc(24 * var(--u)); }
.w2pj-gal__head > * { margin: 0 !important; }
.w2pj-gal__label { --fs: 13; color: var(--c-pink); }
.w2pj-gal__title { --fs: 72; line-height: .88; }
.w2pj-row { display: flex; justify-content: center; gap: calc(24 * var(--u)); }
.w2pj-row > * { margin: 0 !important; }
.w2 figure.w2pj-shot { flex: none; overflow: hidden; background: #eee; }
.w2 figure.w2pj-shot img { transition: transform .5s ease; }
.w2 figure.w2pj-shot:hover img { transform: scale(1.025); }
.w2 figure.w2pj-shot.is-a { width: calc(1760 * var(--u)); aspect-ratio: 1760 / 990; }
.w2 figure.w2pj-shot.is-b, .w2 figure.w2pj-shot.is-d { width: calc(570 * var(--u)); aspect-ratio: 570 / 860; }
.w2 figure.w2pj-shot.is-c, .w2 figure.w2pj-shot.is-e { width: calc(868 * var(--u)); aspect-ratio: 868 / 488; }

/* ---------- 03 · prev / next (477:1401) ---------- */
.w2pj-pn__in { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-top: calc(56 * var(--u)); padding-bottom: calc(56 * var(--u)); }
.w2pj-pn__in > * { margin: 0 !important; }
.w2pj-pn__item { display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-width: 0; }
.w2pj-pn__item > * { margin: 0 !important; }
.w2pj-pn__item.is-next { align-items: flex-end; text-align: right; }
.w2pj-pn__label { --fs: 12; letter-spacing: 1px; line-height: 1.3; color: var(--c-yellow); }
.w2pj-pn__name { --fs: 64; line-height: 1.2; }
.w2pj-pn__name a { transition: color .2s ease; }
.w2pj-pn__name a:hover { color: var(--c-yellow); }

/* ---------- mobile (477:1431, 440 wide) ---------- */
@media (max-width: 899px) {
	/* thumbnail moves into the text column, after the disciplines line */
	.w2pj-body__in { flex-direction: column; gap: calc(18 * var(--u)); padding-top: calc(36 * var(--u)); padding-bottom: calc(56 * var(--u)); }
	.w2pj-text { display: contents; }
	.w2pj-text > * { order: 6; }
	.w2pj-text > .w2pj-crumb { order: 1; }
	.w2pj-text > .w2pj-title { order: 2; }
	.w2pj-text > .w2pj-summary { order: 3; }
	.w2pj-text > .w2pj-disc { order: 4; }
	.w2 figure.w2pj-thumb { order: 5; width: 100%; }
	.w2pj-crumb { --fs: 11; }
	.w2pj-title { --fs: 72; }
	.w2pj-summary { --fs: 21; --fmin: 17px; }
	.w2pj-disc { --fs: 12; }
	.w2pj-block .w2-label, .w2pj-meta__label { --fs: 11; }
	.w2pj-about, .w2pj-did { --fs: 17; }
	.w2pj-meta__val { font-size: calc(16 * var(--u)); }
	.w2pj-btns { flex-direction: column; gap: calc(12 * var(--u)); width: 100%; }
	.w2pj-btns .w2-btn { width: 100%; }
	.w2pj-btns .w2-btn .wp-block-button__link { width: 100%; height: calc(64 * var(--u)); justify-content: space-between; font-size: calc(18 * var(--u)); }

	.w2pj-gal__in { gap: calc(12 * var(--u)); padding-top: calc(48 * var(--u)); padding-bottom: calc(64 * var(--u)); }
	.w2pj-gal__head { gap: calc(8 * var(--u)); padding-bottom: calc(12 * var(--u)); }
	.w2pj-gal__label { --fs: 11; }
	.w2pj-gal__title { --fs: 48; }
	.w2pj-row { flex-wrap: wrap; gap: calc(12 * var(--u)); }
	.w2 figure.w2pj-shot.is-a, .w2 figure.w2pj-shot.is-c, .w2 figure.w2pj-shot.is-e { width: 100%; aspect-ratio: 392 / 220; }
	.w2 figure.w2pj-shot.is-b, .w2 figure.w2pj-shot.is-d { width: calc(190 * var(--u)); aspect-ratio: 190 / 287; }

	.w2pj-pn__in { flex-direction: column; gap: calc(20 * var(--u)); padding-top: calc(36 * var(--u)); padding-bottom: calc(36 * var(--u)); }
	.w2pj-pn__item.is-next { align-items: flex-start; text-align: left; }
	.w2pj-pn__name { --fs: 40; }
}