/*
Theme Name: opendoorslowly
Theme URI: https://opendoorslowly.com
Author: Stephen Wahl
Description: Block theme for the opendoorslowly | stephen wahl portfolio. Black canvas, image-led tiles and banners, condensed type.
Version: 0.1.6
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ods-wahl
*/

:root {
	--ods-side: clamp(1rem, 2.9vw, 3.3rem);
	--ods-gap: clamp(1rem, 3vw, 3.4rem);
	--ods-charcoal: #262626;
}

html { background: #000; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Header ---------------------------------------------------------------- */
.ods-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(0, 0, 0, 0.9);
}
body.home .ods-site-header { background: var(--ods-charcoal); }
.admin-bar .ods-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ods-site-header { top: 46px; } }

.ods-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(0.75rem, 1.9vw, 1.9rem) var(--ods-side);
}
.ods-header > * { margin: 0; }
.ods-logo { display: block; line-height: 0; }
.ods-logo img { display: block; width: clamp(170px, 29vw, 525px); height: auto; }

.ods-nav { display: flex; gap: clamp(0.9rem, 1.6vw, 1.75rem); }
.ods-nav a {
	font-weight: 300;
	font-size: clamp(1.1rem, 1.41vw, 1.65rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
}
.ods-nav a:hover,
.ods-nav a.is-current { border-bottom-color: #fff; }

/* Tiles (child-page index, 4 up) ------------------------------------------ */
.ods-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ods-gap);
	padding: clamp(1.5rem, 3.5vw, 4rem) var(--ods-side) clamp(1rem, 2.5vw, 3rem);
}
@media (max-width: 999px) { .ods-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .ods-tiles { grid-template-columns: 1fr; } }

.ods-tile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #111;
	color: #fff;
	text-decoration: none;
}
.ods-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.72);
	transition: filter 0.35s ease;
}
.ods-tile:hover .ods-tile__img,
.ods-tile:focus-visible .ods-tile__img { filter: brightness(0.95); }
.ods-tile__title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.5rem;
	text-align: center;
	font-size: clamp(1.5rem, 2.3vw, 2.6rem);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: 0.01em;
}

/* Banners (Work landing, full-width stacked) ------------------------------- */
.ods-banners {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3.6vw, 4.1rem);
	padding: clamp(0.6rem, 1vw, 1.2rem) 6.9% 0;
}
.ods-banner {
	position: relative;
	display: block;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: #111;
	text-decoration: none;
}
.ods-banner__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The section title is part of each banner image, so the text is kept for screen readers only. */
.ods-banner__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* YouTube looping background ---------------------------------------------- */
.ods-ytbg {
	position: relative;
	overflow: hidden;
	container-type: size;
	aspect-ratio: var(--ods-ratio, 16 / 9);
	background: #000;
}
@media (max-width: 700px) { .ods-ytbg { aspect-ratio: var(--ods-ratio-m, 16 / 9); } }
.ods-ytbg iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	transform: translate(-50%, -50%) scale(var(--ods-zoom, 1.08));
	border: 0;
	pointer-events: none;
}
.ods-ytbg__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	pointer-events: none;
	color: #fff;
}
.ods-ytbg__kicker { font-size: clamp(0.9rem, 1.1vw, 1.25rem); font-weight: 300; margin: 0; }
.ods-ytbg__title { font-size: clamp(1.75rem, 2.6vw, 3rem); font-weight: 300; margin: 0; line-height: 1.1; }
/* Hidden until the player reports it is playing (script adds .is-armed, then .is-playing), so YouTube's poster and play button never show. */
.ods-ytbg.is-armed iframe { opacity: 0; transition: opacity 0.5s ease; }
.ods-ytbg.is-armed.is-playing iframe { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ods-ytbg iframe { display: none; } }

/* Embeds side by side, edge to edge ---------------------------------------- */
.ods-embeds { gap: 0 !important; margin: 0 !important; }
.ods-embeds .wp-block-column { margin: 0; }
.ods-embeds figure { margin: 0; }

/* Home: white stage --------------------------------------------------------- */
.ods-stage-white { background: #fff; color: #000; }
.ods-stage-white img { display: block; margin-inline: auto; height: auto; }

/* Home fills one screen under the header: white stage grows, video strip sits at the bottom. */
:root { --ods-header-h: calc(clamp(0.75rem, 1.9vw, 1.9rem) * 2 + clamp(170px, 29vw, 525px) * 0.0934); }
.admin-bar { --ods-admin-h: 32px; }
@media (max-width: 782px) { .admin-bar { --ods-admin-h: 46px; } }
.ods-home {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--ods-header-h) - var(--ods-admin-h, 0px));
	min-height: calc(100dvh - var(--ods-header-h) - var(--ods-admin-h, 0px));
}
.ods-home > * { margin-block: 0 !important; }
.ods-home .ods-stage-white {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Generous white above and below; scales with the wrench so its size and proportions never change. */
	padding: clamp(3rem, 9vw, 11rem) var(--ods-side);
}
.ods-home .ods-stage-white .wp-block-image { margin: 0; }
.ods-home .ods-stage-white img { width: min(68vw, 100%); max-width: 100%; height: auto; }
.ods-home .ods-ytbg,
.ods-home .ods-strip { flex: 0 0 auto; }

/* Self-hosted video strip: no controls, cropped to fill, centered. */
.ods-strip { position: relative; overflow: hidden; background: #000; }
.ods-strip video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}
.ods-strip video::-webkit-media-controls,
.ods-strip video::-webkit-media-controls-panel,
.ods-strip video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
@media (prefers-reduced-motion: reduce) { .ods-strip video { display: none; } }

/* Galleries (placeholder layout until the real gallery pages are reviewed) --- */
.wp-block-gallery.ods-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: var(--ods-gap);
	padding: clamp(1rem, 3vw, 3.5rem) var(--ods-side);
}
.wp-block-gallery.ods-gallery > figure.wp-block-image {
	width: auto !important;
	margin: 0;
	flex: none;
}
.wp-block-gallery.ods-gallery img { display: block; width: 100%; height: auto; }
@media (max-width: 700px) { .wp-block-gallery.ods-gallery { grid-template-columns: 1fr; } }

/* Footer -------------------------------------------------------------------- */
.ods-footer {
	padding: clamp(2rem, 5vw, 5.5rem) var(--ods-side) clamp(2rem, 6vw, 6rem);
	text-align: center;
}
.ods-footer__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--source-code-pro);
	font-weight: 400;
	font-size: clamp(0.8rem, 0.9vw, 1rem);
	color: #fff;
}