/* CDC Build child theme: single project pages only (loaded on project singles).
   Split from site.css: this host's upload scanner refuses CSS files over about 16KB. */

/* ==========================================================================
   Single project (template-parts/project)
   Printed from PHP, so Elementor's global classes are not loaded for it (it
   only prints the classes its own documents use). These pj- rules mirror the
   ph-split, section, wrap, editorial, index and kicker classes value for
   value, from the same variables. Change one, change the other.
   Breakpoints follow Elementor's: tablet 1024px and below, mobile 767px.
   ========================================================================== */

/* Head: the light split band, photo to the right edge */
.cdc-project .pj-head {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch;
	background: var(--stone, #f1f3f4); overflow: clip;
}
.cdc-project .pj-head--solo { grid-template-columns: minmax(0, 1fr); }
.cdc-project .pj-head__body {
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(2.75rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem) clamp(2.75rem, 6vw, 5.5rem) var(--bleed-inset, clamp(1.25rem, 4vw, 4rem));
}
.cdc-project .pj-head__media { position: relative; min-height: clamp(260px, 44svh, 500px); background: var(--ink-lift, #18222a); }
.cdc-project .pj-head__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* An architect's drawing in place of a photo: whole, on white, never cropped */
.cdc-project .pj-head__media.is-drawing { background: #fff; }
.cdc-project .pj-head__media.is-drawing img { object-fit: contain; padding: clamp(1rem, 3vw, 2.5rem); }
@media (max-width: 1024px) {
	.cdc-project .pj-head { grid-template-columns: minmax(0, 1fr); }
	.cdc-project .pj-head__body { padding: clamp(2.75rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3.5rem); }
}

.cdc-project .pj-crumbs {
	display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.75rem; padding: 0; list-style: none;
	font-family: var(--font-head, "Montserrat"), sans-serif; font-size: .6875rem; font-weight: 700;
	line-height: 1.72; letter-spacing: .16em; text-transform: uppercase; color: var(--mute, #616d75);
}
.cdc-project .pj-crumbs li + li::before { content: "/"; margin-right: .6rem; color: var(--line-strong, #c9d1d6); }
.cdc-project .pj-crumbs a { color: var(--mute, #616d75); text-decoration: none; transition: color .2s; }
.cdc-project .pj-crumbs a:hover { color: var(--accent-deep, #00707f); }

.cdc-project .pj-rule {
	width: clamp(56px, 9vw, 110px); height: 3px; margin: 0 0 clamp(1.35rem, 2.5vw, 2rem);
	background: var(--accent, #00dbf4);
}
.cdc-project .pj-kicker {
	margin: 0 0 1.35rem;
	font-family: var(--font-head, "Montserrat"), sans-serif; font-size: .75rem; font-weight: 700;
	letter-spacing: .2em; text-transform: uppercase; color: var(--accent-deep, #00707f);
}
.cdc-project .pj-title {
	margin: 0; font-size: var(--fs-display, clamp(1.9375rem, 3.9vw, 3.125rem));
	letter-spacing: -0.025em; text-wrap: balance;
}

/* Sections after the head, white then light grey in turn */
.cdc-project .pj-section { padding: var(--section-y, clamp(4.5rem, 10vw, 9rem)) 0; background: #fff; }
.cdc-project .pj-section--stone { background: var(--stone, #f1f3f4); }
.cdc-project .pj-wrap {
	width: 100%; max-width: var(--wrap, 1320px); margin-inline: auto;
	padding-inline: var(--gutter, clamp(1.25rem, 4vw, 4rem));
}
.cdc-project .pj-editorial { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(1.5rem, 4vw, 4rem); }
@media (max-width: 1024px) {
	.cdc-project .pj-editorial { grid-template-columns: minmax(0, 1fr); }
}
.cdc-project .pj-section-head { margin: 0 0 var(--head-gap, clamp(2.75rem, 5vw, 4rem)); }
.cdc-project .pj-section-head > h2 { margin: 0; }

/* Section label: a square, the label, then a hairline ending in a square */
.cdc-project .pj-index {
	display: flex; align-items: center; gap: .8rem; margin: 0 0 1.5rem;
	font-family: var(--font-head, "Montserrat"), sans-serif; font-size: .75rem; font-weight: 700;
	line-height: 1.72; letter-spacing: .2em; text-transform: uppercase; color: var(--mute, #616d75);
}
.cdc-project .pj-editorial .pj-index { margin-bottom: 0; }
.cdc-project .pj-index::before {
	content: ""; flex: 0 0 auto; width: 10px; height: 10px; background: var(--accent, #00dbf4);
}
.cdc-project .pj-index::after {
	content: ""; flex: 1 1 auto; height: 10px;
	background:
		linear-gradient(var(--line-strong, #c9d1d6), var(--line-strong, #c9d1d6)) left center / calc(100% - 10px) 1px no-repeat,
		linear-gradient(var(--line-strong, #c9d1d6), var(--line-strong, #c9d1d6)) right center / 10px 10px no-repeat;
}

/* Facts beside the title, label left and value right */
.cdc-project .facts { display: grid; margin: clamp(1.5rem, 2.4vw, 2rem) 0 0; }
.cdc-project .facts > div {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem;
	padding: .55rem 0; border-top: 1px solid var(--line-strong, #c9d1d6);
}
.cdc-project .facts > div:last-child { border-bottom: 1px solid var(--line-strong, #c9d1d6); }
.cdc-project .facts dt {
	font-family: var(--font-head, "Montserrat"), sans-serif; font-size: .6875rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: var(--mute, #616d75);
}
.cdc-project .facts dd {
	margin: 0; text-align: right;
	font-family: var(--font-head, "Montserrat"), sans-serif; font-size: .9375rem; font-weight: 600;
	color: var(--ink, #0e1418);
}

/* Overview copy: the first paragraph large, as the homepage's editorial intro */
.cdc-project .overview > * { margin: 0 0 1.2em; }
.cdc-project .overview > :last-child { margin-bottom: 0; }
.cdc-project .overview > :first-child {
	margin-bottom: 1.4rem;
	font-family: var(--font-head, "Montserrat"), sans-serif; font-weight: 600;
	font-size: var(--fs-intro, clamp(1.375rem, 2.7vw, 2.125rem)); line-height: 1.32;
	letter-spacing: -0.018em; color: var(--ink, #0e1418);
}
.cdc-project .overview > p + p { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); }

/* Gallery: every frame 16:9, the same as a project film */
.cdc-project .gallery { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
	.cdc-project .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cdc-project .gallery .is-feature { grid-column: 1 / -1; }
}
.cdc-project .gallery li, .cdc-project .gallery figure { margin: 0; }
.cdc-project .gallery img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cdc-project .gallery figcaption {
	padding-top: .8rem; font-style: normal;
	font-family: var(--font-head, "Montserrat"), sans-serif; font-size: .6875rem; font-weight: 700;
	line-height: 1.72; letter-spacing: .14em; text-transform: uppercase; color: var(--mute, #616d75);
}

/* Film: our poster and play mark until pressed, then the YouTube player */
.cdc-project .film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink, #0e1418); }
.cdc-project .film img, .cdc-project .film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; aspect-ratio: auto; }
.cdc-project .film::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(14, 20, 24, .08), rgba(14, 20, 24, .42));
}
.cdc-project .film__play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; }
.cdc-project .film__play svg { width: clamp(56px, 6.5vw, 80px); height: auto; transition: transform .25s ease; }
.cdc-project .film__play circle { fill: var(--accent, #00dbf4); }
.cdc-project .film__play path { fill: var(--ink, #0e1418); }
.cdc-project a.film__play:hover svg, .cdc-project a.film__play:focus-visible svg { transform: scale(1.08); }
.cdc-project a.film__play:focus-visible { outline: 2px solid var(--accent, #00dbf4); outline-offset: -6px; }
.cdc-project .film.is-playing img, .cdc-project .film.is-playing .film__play, .cdc-project .film.is-playing::after { display: none; }

/* Previous and next */
.cdc-project .project-nav {
	display: grid; gap: 1px;
	background: var(--ink-seam, #384148); border-top: 1px solid var(--ink-line, rgba(255,255,255,.14));
}
@media (min-width: 768px) {
	.cdc-project .project-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cdc-project .project-nav a:last-child { text-align: right; }
}
.cdc-project .project-nav a {
	display: block; padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3rem);
	background: var(--ink, #0e1418); color: rgba(255, 255, 255, .7); text-decoration: none;
	transition: background-color .25s ease;
}
.cdc-project .project-nav a:hover { background: var(--ink-lift, #18222a); color: #fff; }
.cdc-project .project-nav__dir {
	display: block; margin-bottom: .7rem;
	font-family: var(--font-head, "Montserrat"), sans-serif; font-size: .6875rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: var(--accent, #00dbf4);
}
.cdc-project .project-nav__name {
	display: block;
	font-family: var(--font-head, "Montserrat"), sans-serif; font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.cdc-project .film__play svg, .cdc-project .project-nav a { transition: none; }
}