/* ======================================================================
   OVAstudio — main.css
   ----------------------------------------------------------------------
   Refined-minimal aesthetic. Generous whitespace, image-led, editorial.
   No CSS framework: native CSS Grid, flexbox, custom properties.

   Sections:
     1. Tokens (custom properties)
     2. Reset & base
     3. Layout primitives (top bar, header, footer)
     4. Navigation & dropdown
     5. Language switcher
     6. Homepage 3-image grid
     7. Project archive
     8. Single project
     9. Generic pages
    10. Utilities & accessibility
    11. Responsive
   ====================================================================== */


/* ----- 1. Tokens ----- */
:root {
	/* Type — REPLACE these with your brand fonts when you send them.
	   Keep `--font-sans` and `--font-display` as the public knobs and the
	   rest of the CSS will pick them up automatically. */
	--font-sans:    "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: "GT Sectra", "Söhne", system-ui, serif;

	/* Type scale — restrained. */
	--fs-xs:   0.75rem;   /* 12px */
	--fs-sm:   0.8125rem; /* 13px */
	--fs-base: 0.9375rem; /* 15px */
	--fs-md:   1.0625rem; /* 17px */
	--fs-lg:   1.375rem;  /* 22px */
	--fs-xl:   2rem;      /* 32px */

	--lh-tight: 1.2;
	--lh-base:  1.55;
	--lh-loose: 1.7;

	--fw-regular: 400;
	--fw-medium:  500;
	--fw-bold:    700;

	/* Color */
	--c-bg:        #ffffff;
	--c-fg:        #1a1a1a;
	--c-fg-muted:  #4a4a4a;
	--c-fg-subtle: #8a8a8a;
	--c-line:      #e6e6e6;
	--c-bar:       #000000;

	/* Card frame palette — matches the mockup's seasonal cards. */
	--c-frame-blue:  #d8e3ec;
	--c-frame-rose:  #c9a89a;
	--c-frame-amber: #d9b462;
	--c-frame-sage:  #b8c2a8;
	--c-frame-stone: #e8e4dd;

	/* Spacing scale (8px base) */
	--space-1:  0.5rem;
	--space-2:  1rem;
	--space-3:  1.5rem;
	--space-4:  2rem;
	--space-5:  3rem;
	--space-6:  4rem;
	--space-7:  6rem;
	--space-8:  8rem;

	/* Layout */
	--container-max: 1440px;
	--header-h:      120px;   /* top bar (33px) + header (~87px). */
	--bar-h:         33px;
	--gutter:        clamp(1.25rem, 4vw, 3.5rem);
	--card-frame-pad: clamp(1rem, 2vw, 1.75rem);

	/* Motion */
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur-fast: 180ms;
	--dur-med:  280ms;
	--dur-slow: 420ms;
}

/* ----- 2. Reset & base ----- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-fg);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: var(--fw-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern", "liga", "calt";
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
img { -webkit-user-drag: none; user-select: none; }

a {
	color: inherit;
	text-decoration: none;
	transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.6; }

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }


/* ----- 3. Layout primitives ----- */

/* Decorative top bar — the black band at the top of every screen in the mockups. */
.top-bar {
	height: var(--bar-h);
	background: var(--c-bar);
	position: sticky;
	top: 0;
	z-index: 60;
}

.site-header {
	background: var(--c-bg);
	padding: var(--space-4) var(--gutter);
	position: relative;
	z-index: 50;
}

.site-header__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-3);
}

/* Brand */
.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-weight: var(--fw-medium);
	font-size: var(--fs-md);
	letter-spacing: -0.01em;
	color: var(--c-fg);
}
.brand:hover { opacity: 1; }
.brand__mark { display: inline-block; }
.brand img { max-height: 32px; width: auto; }

/* Footer */
.site-footer {
	margin-top: auto;
	background: var(--c-bg);
}

.site-footer__inner {
	padding: var(--space-3) var(--gutter);
	max-width: var(--container-max);
	margin-inline: auto;
}

.inquiry-link {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-fg);
	display: inline-block;
}

.site-footer__bar {
	height: var(--bar-h);
	background: var(--c-bar);
}


/* ----- 4. Navigation & dropdown ----- */

.site-nav {
	display: flex;
	align-items: center;
	justify-self: center;
}

.site-nav__list {
	display: flex;
	gap: clamp(1.25rem, 4vw, 4rem);
	align-items: center;
	margin: 0;
	padding: 0;
}

.site-nav__list > .menu-item {
	position: relative;
}

.site-nav__list > .menu-item > a {
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	color: var(--c-fg);
	white-space: nowrap;
	padding: 0.5rem 0;
	display: inline-block;
}

/* Active / current state */
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-parent > a {
	font-weight: var(--fw-medium);
}

/* Dropdown panels */
.site-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 220px;
	background: var(--c-bg);
	padding: var(--space-3) var(--space-3);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: center;
	z-index: 40;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--dur-med) var(--ease-out),
		transform var(--dur-med) var(--ease-out),
		visibility var(--dur-med) var(--ease-out);
}

.site-nav .sub-menu a {
	font-size: var(--fs-sm);
	color: var(--c-fg-muted);
	white-space: nowrap;
}

/* Open on hover (desktop) */
@media (hover: hover) and (pointer: fine) {
	.site-nav .menu-item.has-dropdown:hover > .sub-menu,
	.site-nav .menu-item.has-dropdown:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
	}
}

/* JS-driven open class (works on touch & desktop) */
.site-nav .menu-item.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* Hamburger toggle — hidden on desktop, shown on mobile. */
.site-nav__toggle {
	display: none;
	width: 28px;
	height: 28px;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	align-items: center;
}
.site-nav__toggle-bar {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--c-fg);
	transition: transform var(--dur-fast) var(--ease-out);
}


/* ----- 5. Language switcher ----- */

.site-header__lang { justify-self: end; }

.lang-switcher {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
}

.lang-switcher__item a {
	font-size: var(--fs-base);
	color: var(--c-fg-subtle);
	transition: color var(--dur-fast) var(--ease-out);
}

.lang-switcher__item.is-active a,
.lang-switcher__item a:hover {
	color: var(--c-fg);
	opacity: 1;
}

.lang-switcher__sep {
	color: var(--c-fg-subtle);
	user-select: none;
}


/* ----- 6. Homepage 3-image grid ----- */

.home-grid {
	max-width: var(--container-max);
	margin: var(--space-4) auto var(--space-6);
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 2.5rem);
}

.home-card {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	transition: transform var(--dur-med) var(--ease-out);
}
.home-card:hover { opacity: 1; transform: translateY(-2px); }

.home-card__frame {
	width: 100%;
	height: 100%;
	padding: var(--card-frame-pad);
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Frame color variants — map to ACF select. */
.home-card--blue  .home-card__frame { background: var(--c-frame-blue); }
.home-card--rose  .home-card__frame { background: var(--c-frame-rose); }
.home-card--amber .home-card__frame { background: var(--c-frame-amber); }
.home-card--sage  .home-card__frame { background: var(--c-frame-sage); }
.home-card--stone .home-card__frame { background: var(--c-frame-stone); }
.home-card--none  .home-card__frame { background: transparent; padding: 0; }

.home-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
}

.home-grid__empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--c-fg-subtle);
	padding: var(--space-7) 0;
}


/* ----- 7. Project archive ----- */

.archive {
	max-width: var(--container-max);
	margin: var(--space-4) auto var(--space-6);
	padding: 0 var(--gutter);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.archive-row--single .archive-card {
	display: block;
	width: min(75%, 1100px);
	margin-inline: auto;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.archive-row--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}
.archive-row--pair .archive-card {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.archive-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease-out);
}
.archive-card:hover .archive-card__image {
	transform: scale(1.02);
}

.archive__empty {
	text-align: center;
	color: var(--c-fg-subtle);
	padding: var(--space-7) 0;
}


/* ----- 8. Single project ----- */

.project-detail {
	max-width: var(--container-max);
	margin: var(--space-4) auto var(--space-6);
	padding: 0 var(--gutter);
}

.project-detail__layout {
	display: grid;
	grid-template-columns: minmax(240px, 1fr) 2.2fr;
	gap: var(--space-5);
	align-items: stretch;
}

.project-detail__sidebar {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: var(--space-3);
	max-width: 28rem;
}

.project-detail__heading {
	margin-bottom: var(--space-3);
}

.project-detail__title {
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	margin-bottom: 0.25rem;
	letter-spacing: -0.01em;
}

.project-detail__architect {
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: var(--c-fg);
	margin: 0;
}

.project-detail__description {
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
	color: var(--c-fg);
	margin-bottom: var(--space-3);
}

.project-meta {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-base);
}
.project-meta__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.25rem;
}
.project-meta__label {
	margin: 0;
	font-weight: var(--fw-bold);
}
.project-meta__value {
	margin: 0;
	color: var(--c-fg);
}

.project-detail__hero {
	overflow: hidden;
}
.project-detail__image {
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
}

/* Stackable content rows below the top section.
   Each row picks its own layout via ACF Flexible Content. */
.project-rows {
	margin-top: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.project-row {
	margin: 0;
}

/* 1 image — full width within the container */
.project-row--single-image .project-row__image {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.project-row__caption {
	margin-top: var(--space-1);
	font-size: var(--fs-sm);
	color: var(--c-fg-subtle);
	line-height: var(--lh-base);
}

/* 2 images */
.project-row--two-images {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}

/* 3 images */
.project-row--three-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
}

/* Cells inside multi-image rows */
.project-row__cell {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.project-row__cell .project-row__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Video row */
.project-row--video {
	width: 100%;
}
.project-row__video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.project-row__video-embed iframe,
.project-row__video-embed video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}
.project-row__video-file {
	width: 100%;
	height: auto;
	display: block;
	background: #000;
}

/* Text row */
.project-row--text {
	padding: var(--space-3) 0;
}
.project-row__text {
	max-width: 60ch;
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--c-fg);
}
.project-row__text p { margin-bottom: 1.25em; }
.project-row__text p:last-child { margin-bottom: 0; }
.project-row__text a {
	border-bottom: 1px solid currentColor;
}
.project-row--text-left .project-row__text {
	margin-left: 0;
}
.project-row--text-center .project-row__text {
	margin-inline: auto;
	text-align: center;
}


/* ----- 9. Generic pages ----- */

.page-content {
	max-width: var(--container-max);
	margin: var(--space-4) auto var(--space-6);
	padding: 0 var(--gutter);
}
.page-content__inner {
	max-width: 60ch;
}
.page-content__eyebrow {
	font-size: var(--fs-sm);
	color: var(--c-fg-subtle);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 var(--space-1);
}
.page-content__title {
	font-size: var(--fs-xl);
	margin-bottom: var(--space-3);
	letter-spacing: -0.02em;
}
.page-content__body {
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--c-fg);
}
.page-content__body p { margin-bottom: 1.25em; }
.page-content__body a {
	border-bottom: 1px solid currentColor;
}
.page-content__featured {
	margin-top: var(--space-5);
}


/* ----- 10. Utilities & accessibility ----- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--c-fg);
	color: var(--c-bg);
	clip: auto !important;
	clip-path: none;
	display: block;
	font-size: var(--fs-sm);
	height: auto;
	left: 1rem;
	padding: 0.5rem 1rem;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
	left: -9999px;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
	z-index: 1000;
}

:focus-visible {
	outline: 2px solid var(--c-fg);
	outline-offset: 3px;
}


/* ----- 11. Responsive ----- */

@media (max-width: 960px) {
	:root {
		--gutter: 1.25rem;
	}

	.site-header__inner {
		grid-template-columns: auto 1fr auto;
	}

	.site-nav__toggle { display: inline-flex; order: 3; }
	.site-header__lang { order: 2; justify-self: end; }
	.site-header__brand { order: 1; }
	.site-nav { order: 4; }

	/* Mobile menu — full panel below header */
	.site-nav__list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--c-bg);
		padding: var(--space-3) var(--gutter) var(--space-4);
		border-top: 1px solid var(--c-line);
	}
	.site-nav.is-open .site-nav__list { display: flex; }
	.site-nav__list > .menu-item > a {
		display: block;
		padding: 0.75rem 0;
		font-size: var(--fs-md);
		border-bottom: 1px solid var(--c-line);
	}
	.site-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		padding: var(--space-1) 0 var(--space-2) var(--space-2);
		display: none;
		text-align: left;
	}
	.site-nav .menu-item.is-open > .sub-menu { display: flex; }
	.site-nav .sub-menu a { font-size: var(--fs-sm); padding: 0.4rem 0; }

	/* Homepage stacks */
	.home-grid {
		grid-template-columns: 1fr;
	}

	/* Archive pairs collapse */
	.archive-row--pair { grid-template-columns: 1fr; }
	.archive-row--single .archive-card { width: 100%; }

	/* Project detail stacks */
	.project-detail__layout {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
	.project-detail__hero { order: -1; }   /* image first on mobile */

	/* Project rows collapse to single column on mobile */
	.project-row--two-images,
	.project-row--three-images {
		grid-template-columns: 1fr;
	}
	.project-rows { gap: var(--space-4); }
}

@media (max-width: 480px) {
	:root {
		--bar-h: 24px;
		--fs-xl: 1.75rem;
	}
	.site-header { padding: var(--space-3) var(--gutter); }
}

/* Reduced motion — respect users who don't want animation. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}