/*
============================================================
  ARCA STUDIO — Project (Case Study) Styles
  Additive layer for the Single Project & Project Archive
  templates. Reuses the design tokens defined in theme.css
  (--a-*), so it inherits the ARCA palette, type & spacing.
============================================================
*/

/* ---------- HERO ---------- */
.s-project-hero {
	width: 100%;
	margin: 0;
	overflow: hidden;
}
.s-project-hero__media {
	width: 100%;
	height: 78vh;
	min-height: 420px;
	max-height: 860px;
	overflow: hidden;
}
.s-project-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- TITLE + FACTS ---------- */
.s-project-head {
	text-align: center;
	max-width: 820px;
	margin: 0 auto var(--a-12);
}
.s-project-title {
	margin-top: 0.5rem;
}
.s-project-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--a-8);
	padding-top: var(--a-8);
	border-top: 1px solid var(--a-beige, #DDD3C4);
}
.s-fact {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.s-fact__label {
	font-family: 'Jost', -apple-system, sans-serif;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--a-taupe, #9B9184);
}
.s-fact__value {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.375rem;
	line-height: 1.3;
	color: var(--a-charcoal, #2C2A28);
}

/* ---------- OVERVIEW ---------- */
.s-project-overview {
	margin-inline: auto;
}

/* ---------- GALLERY ---------- */
.s-project-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--a-4, 1rem);
}
.s-project-gallery__item {
	margin: 0;
	overflow: hidden;
	border-radius: var(--a-radius-md, 2px);
	aspect-ratio: 4 / 3;
	background: var(--a-sand, #E9E1D4);
}
.s-project-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.s-project-gallery__item:hover img {
	transform: scale(1.04);
}
/* Feature the first gallery image full-width for editorial rhythm. */
.s-project-gallery__item:first-child {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 7;
}

/* ---------- RESULTS ---------- */
.s-project-results {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--a-8);
	text-align: center;
}
.s-result {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--a-6, 1.5rem) var(--a-4, 1rem);
}
.s-result__figure {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 3.25rem;
	line-height: 1;
	color: var(--a-charcoal, #2C2A28);
}
.s-result__label {
	font-family: 'Jost', -apple-system, sans-serif;
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--a-taupe, #9B9184);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
	.s-project-facts { grid-template-columns: repeat(2, 1fr); gap: var(--a-6, 1.5rem); }
	.s-project-results { grid-template-columns: 1fr; gap: var(--a-4, 1rem); }
}
@media (max-width: 640px) {
	.s-project-hero__media { height: 58vh; min-height: 320px; }
	.s-project-facts { grid-template-columns: 1fr; }
	.s-project-gallery { grid-template-columns: 1fr; }
	.s-project-gallery__item,
	.s-project-gallery__item:first-child { aspect-ratio: 4 / 3; grid-column: auto; }
	.s-fact { text-align: center; align-items: center; }
	.s-project-head { text-align: center; }
}

/*
============================================================
  ARCA STUDIO — Project Archive Card (fallback guarantee)
  Mirrors the original .s-project-card rules from theme.css
  so the Category · Location · Year overline and the project
  title always render correctly on the Projects archive,
  even if a cached or older theme.css is served. Values are
  identical to the original; tokens include literal fallbacks.
============================================================
*/

/* Card is a transparent, editorial tile (matches original). */
.s-project-card {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
.s-project-card:hover { transform: none; box-shadow: none; }

/* Image: portrait 4:5, gentle zoom on hover (matches original). */
.s-project-card .s-card__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 0;
}
.s-project-card .s-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--a-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.s-project-card:hover .s-card__media img { transform: scale(1.03); }

/* Body: left-aligned text block beneath the image (matches original). */
.s-project-card .s-card__body {
	padding: var(--a-4, 1rem) 0 0;
	text-align: left;
	background: transparent;
}

/* Overline — Category · Location · Year. */
.s-project-card .s-card__body .s-overline {
	display: inline-block;
	font-family: var(--a-font-body, 'Jost', -apple-system, sans-serif);
	font-size: var(--a-overline, 0.75rem);
	font-weight: 500;
	letter-spacing: var(--a-tracking-overline, 0.32em);
	text-transform: uppercase;
	color: var(--a-taupe, #9B9184);
	margin-bottom: var(--a-4, 1rem);
}

/* Title — Cormorant Garamond, 1.5rem, matching the original card. */
.s-project-card .s-card__body h3 {
	font-family: var(--a-font-display, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	margin-top: 0.3rem;
	margin-bottom: 0.8rem;
	color: var(--a-charcoal, #2C2A28);
}
.s-project-card .s-card__body h3 a { color: inherit; text-decoration: none; }

/* "View project" underline link. */
.s-project-card .s-card__body .s-link-underline {
	position: relative;
	font-family: var(--a-font-body, 'Jost', -apple-system, sans-serif);
	font-size: var(--a-overline, 0.75rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--a-charcoal, #2C2A28);
	padding-bottom: 3px;
	text-decoration: none;
}

/*
============================================================
  ARCA STUDIO — Previous / Next Navigation
  Used on Single Project and Single Post. Reuses ARCA tokens.
============================================================
*/
.s-project-nav {
	padding: var(--a-12, 3rem) 0;
	border-top: 1px solid var(--a-beige, #DDD3C4);
	background: var(--a-surface, #FCFAF6);
}
.s-project-nav__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--a-8, 2rem);
	align-items: start;
}
.s-project-nav__cell--next { text-align: right; }
.s-project-nav__cell a {
	display: inline-flex;
	flex-direction: column;
	gap: 0.5rem;
	text-decoration: none;
}
.s-project-nav__cell--next a { align-items: flex-end; }
.s-project-nav__cell .s-overline {
	color: var(--a-taupe, #9B9184);
	margin-bottom: 0;
}
.s-project-nav__title {
	font-family: var(--a-font-display, 'Cormorant Garamond', Georgia, serif);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--a-charcoal, #2C2A28);
	transition: color 0.3s var(--a-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
.s-project-nav__cell a:hover .s-project-nav__title { color: var(--a-taupe, #9B9184); }

@media (max-width: 640px) {
	.s-project-nav__grid { grid-template-columns: 1fr; gap: var(--a-6, 1.5rem); }
	.s-project-nav__cell--next,
	.s-project-nav__cell--next a { text-align: left; align-items: flex-start; }
}