/*
 * FRENKEL — single project (hero, intro, section rule). Cards/grid/related live in archive.css.
 */

.single-portfolio{
	background: #FEFEFE;
}
/*
 * Hero runs under the transparent sticky header (design: header floats over it).
 *
 * The still image is a background on this element rather than an <img> in a
 * wrapper: the box owns its own size, so there is no inner element to keep in
 * sync, no object-fit, and the tint and the title are simply layers on top of
 * it. --cf-hero-image is set inline per post (see frenkel_hero_background_attr).
 */
.cf-project__hero {
	position: relative;
	margin-block-start: calc(var(--cf-header-h) * -1);
	/*
	 * inline-size must be pinned. With aspect-ratio and a min-block-size, an
	 * indefinite width gets inflated to satisfy the ratio: on a phone the
	 * min-height wins (~620px), and 620 x 21/9 is a ~1450px-wide box running
	 * off the right edge. The width is only indefinite when something upstream
	 * makes this a flex item, which is why the hero looks fine on desktop —
	 * there the ratio alone already produces a tall enough box.
	 */
	inline-size: 100%;
	max-inline-size: 100%;
	aspect-ratio: 21 / 9;
	min-block-size: min(78vh, 760px);
	overflow: hidden;
	background-image: var(--cf-hero-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* The title block is laid out, not absolutely placed: it sits at the
	   bottom of the hero and centres in the remaining width. The tint and the
	   video layer stay absolute, so they are out of this flow and still cover
	   the whole box — an absolute child's containing block is the padding box,
	   which the 5% below does not inset. */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	padding: 5%;
}
/*
 * Only printed for a video hero — a still needs no element at all. It fills the
 * hero box and keeps container-type so the iframe's cq units still measure this
 * box. The background image stays visible behind it as the poster frame.
 */
.cf-project__hero-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	container-type: size;
}
.cf-project__hero-media img,
.cf-project__hero-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/*
 * Brand wash over the hero media only. Elementor's global primary, so it
 * tracks the kit instead of hard-coding a second copy of the colour;
 * --cf-dark is the fallback for any context where the kit stylesheet isn't
 * loaded (without one, an undefined custom property makes the whole
 * declaration invalid and the tint silently disappears).
 *
 * z-index: 1 lifts it over the background image and over the video layer, both
 * of which paint below it. The title block carries z-index: 2, so it stays
 * clear of the wash.
 */
.cf-project__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--e-global-color-primary, var(--cf-dark));
	opacity: var(--cf-hero-tint, .35);
	pointer-events: none;
}
/* An iframe can't object-fit, so the 16:9 player is sized to *cover* the hero
   box and the overflow is cropped. Sizing uses container query units, which
   measure the hero box itself — vw/vh would be wrong as soon as the hero's
   height is clamped rather than a share of the viewport.
   `max-width: none` overrides the parent theme's global iframe max-width,
   which would otherwise stop the player growing past the box. */
iframe.cf-project__hero-video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	max-width: none;
	pointer-events: none; /* decorative background — no stray clicks */

	/* Fallback for browsers without container units: assume a full-width hero. */
	width: max(100%, 177.78vh);
	height: max(100%, 56.25vw);

	width: max(100cqw, 100cqh * 16 / 9);
	height: max(100cqh, 100cqw * 9 / 16);
}
.cf-project__hero-overlay {
	/* In flow, so the hero's align-items / justify-content actually place it.
	   `relative` rather than `static` because z-index only applies to a
	   positioned box — without it the tint would paint over the title. */
	position: relative;
	/* Above the tint (z-index: 1). Explicit rather than left to source order,
	   so the wash darkens the photo and never the title. */
	z-index: 2;
	text-align: left;
	color: var(--cf-cream);
	/* No shading: the gradient was clipped to the container width and read as
	   a band across the middle of the hero rather than an edge-to-edge wash. */
}
/* Date + client — on the hero image, below the subtitle. */
.cf-project__herometa {
	margin: 2rem 0 0;
	display: grid;
	gap: .35rem;
	font-family: var(--cf-font-latin);
	font-size: var(--cf-small);
	letter-spacing: .18em;
	text-transform: uppercase;
}
.cf-project__herometa-row {
	display: flex;
	gap: .75em;
}
.cf-project__herometa dt,
.cf-project__herometa dd { margin: 0; }
.cf-project__hero-overlay .cf-project__herometa {
	color: var(--cf-cream);
	opacity: .85;
}
.cf-project__plainhead .cf-project__herometa { opacity: .55; }

.cf-project__title {
	margin: 0;
	max-width: 18ch;
	line-height: 1;
	letter-spacing: .01em;
}
.cf-project__hero-overlay .cf-project__title { color: var(--cf-cream); }
.cf-project__subtitle {
	margin-block-start: 1.25rem;
	max-width: 46ch;
	font-family: var(--cf-font-display);
	font-size: var(--cf-subtitle);
	line-height: 1.7;
}
.cf-project__hero-overlay .cf-project__subtitle {
	color: var(--cf-cream);
	opacity: .9;
}

.cf-project__plainhead { margin-block: var(--cf-section-y) 0; }

.cf-breadcrumb {
	margin-block: 1.25rem;
	font-size: var(--cf-small);
	opacity: .8;
}
.cf-section--text .cf-text{
	background: #ffffff;
}
/* --- Media rhythm: everything stays inside the container, hairline gaps --- */
.cf-project .cf-section--image,
.cf-project .cf-section--gallery,
.cf-project .cf-section--video,
.cf-project .cf-section--product_tagged_image {
	margin-block: var(--cf-media-gap);
}
/* "Full width" in the admin → the image bleeds to the screen edges
   (breakout itself lives on .cf-image--full in sections.css). The caption
   stays in the reading column so it doesn't hug the viewport edge. */
.cf-project .cf-image--full .cf-image__caption {
	width: 100%;
	max-width: var(--cf-container);
	margin-inline: auto;
	padding-inline: var(--cf-gutter);
}
.cf-project .cf-image img,
.cf-project .cf-gallery__link img {
	width: 100%;
}
/* Paired images sit side by side with the same hairline gap. */
.cf-project .cf-gallery { --cf-gap: var(--cf-media-gap); }

/* A marker reintroduces air above its media group. */
.cf-project .cf-section:has(> .cf-section__marker) {
	padding-block-start: var(--cf-section-y);
	margin-block: 0;
}

/* One unbroken centre rule for the whole body: drawn on the .cf-sections
   wrapper, so it runs from the first section to the last without breaking
   between them. It sits behind the content (z-index: -1) and therefore shows
   only in the gaps around the images. */
.cf-project .cf-sections {
	position: relative;
	box-shadow:  0 0 30px color-mix(in srgb, var(--cf-dark) 12%, transparent);
	background: #ffffff;
	padding-bottom: 60px;
}
/* Short horizontal tick where each marker meets the centre rule. */
.cf-project .cf-section:first-child .cf-section__marker::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 50%;
	inline-size: 24px;
	block-size: 1px;
	background: var(--cf-dark);
	transform: translateX(50%);
}
.cf-project .cf-sections::before {
	content: "";
	position: absolute;
	inset-block-start: var(--cf-section-y);
	inset-block-end: 0;
	inset-inline-start: 50%;
	translate: -.5px;
	inline-size: 1px;
	background: var(--cf-dark);
	pointer-events: none;
}

@media (max-width: 782px) {
	/* Background images get no srcset, so swap to the smaller file by hand.
	   Falls back to the full-size one if the post has only that. */
	.cf-project__hero {
		background-image: var(--cf-hero-image-sm, var(--cf-hero-image, none));
	}
	.cf-project .cf-gallery:not(.cf-gallery--slider) { grid-template-columns: 1fr; }
	/* Single-column layout: no index column, so no rule. */
	.cf-project .cf-sections::before,
	.cf-project .cf-section__marker::before { display: none; }
}