/* ==========================================================================
   Homepage Template — homepage-template.css
   Masonry grid of "Featured" posts. Shares the visual language of
   awards-template.css / press-template.css.
   Scoped to #content.site-content so it doesn't leak into the rest of the theme.
   ========================================================================== */

/* body/#page default to a light background; without this, pulling past the
   top or bottom edge (mobile overscroll/rubber-band) flashes that light
   color instead of the page's own dark ground. Scoped to this template only. */
body.page-template-homepage-template {
	background-color: #0a0a0a;
}

/* ---------- Full-bleed header overlay (homepage only) ----------
   Mirrors dev.santiagoborja.com: the header floats transparently over
   the hero image (so the photo runs up under the nav) and only gains a
   solid, blurred backdrop once the page has scrolled past the hero.
   #masthead has no base position rule in the parent theme, so this is a
   safe, template-scoped override — see functions.php for the matching
   dequeue of the parent's own sticky-header script, which would otherwise
   fight this fixed positioning. */
body.page-template-homepage-template #masthead {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 500;
}

body.page-template-homepage-template #sticky-header {
	/* #masthead itself is already fixed above; sticky positioning on this
	   child would be redundant and CSS position:sticky needs an unambiguous
	   scrolling context, so opt out explicitly. */
	position: static;
	background-color: transparent;
	transition: background-color 0.4s ease;
}

body.page-template-homepage-template #masthead.is-homepage-scrolled #sticky-header {
	background-color: rgba(8, 8, 8, 0.95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* header.php already opens #content.site-content; this template opens a
   second, nested one inside it (for the same reason noted on the about
   template) — .hero needs to sit flush at the very top for the fixed,
   initially-transparent header above to work. The parent theme's own
   #content rule sets padding: 60px 0, so it has to be zeroed explicitly
   here (not just left unset) on BOTH nested divs, or it leaks back in on
   whichever one this rule doesn't otherwise touch. Background/color/font
   stay on this same bare selector so both divs paint dark (no light flash
   at the very top/bottom edges); the actual bottom breathing room is
   scoped to .homepage-page alone so it isn't doubled by both nested divs
   matching the same rule. */
#content.site-content {
	--paper: #0a0a0a;
	--ink: #f2f0ec;
	--ink-soft: #8c887f;
	--line: #242423;

	background: var(--paper);
	color: var(--ink);
	font-family: 'Instrument Sans', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	padding: 0;
}

#content.site-content.homepage-page {
	padding-bottom: 4rem;
}

#content.site-content * {
	box-sizing: border-box;
}

#content.site-content .wrap {
	width: 100%;
	margin: 0 auto;
	padding: 0 2.5vw;
}

#content.site-content ::selection {
	background: var(--ink);
	color: var(--paper);
}

#content.site-content a:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 4px;
}

#content.site-content .content-area {
	/* padding-top: 5vh; */
}

/* ---------- Full-bleed hero ----------
   Deliberately off-brand from the rest of the homepage (blue accent,
   italic Playfair Display) to match dev.santiagoborja.com's hero exactly.
   Tokens are scoped to .hero so they don't leak into --gold/--ink below. */

#content.site-content .hero {
	--hero-bg: #080808;
	--hero-white: #ffffff;
	--hero-text-dim: #777777;
	--hero-accent: #3b82f6;
	--hero-font-serif: 'Playfair Display', Georgia, serif;
	--hero-font-sans: 'Inter', system-ui, sans-serif;
	--hero-ease: cubic-bezier(0.16, 1, 0.3, 1);

	position: relative;
	height: 100dvh;
	min-height: 600px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--hero-bg);
	font-family: var(--hero-font-sans);
}

#content.site-content .hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 8, 8, 0.95) 0%, rgba(8, 8, 8, 0.3) 50%, rgba(8, 8, 8, 0.1) 100%);
	z-index: 1;
}

#content.site-content .hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
	transform: scale(1.05);
	transition: transform 8s var(--hero-ease);
}

#content.site-content .hero:hover .hero__bg {
	transform: scale(1);
}

#content.site-content .hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
	padding-bottom: clamp(3rem, 8vh, 6rem);
}

#content.site-content .hero__eyebrow {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--hero-accent);
	margin-bottom: 1rem;
}

#content.site-content .hero__title {
	font-family: var(--hero-font-serif);
	font-size: clamp(3rem, 10vw, 8rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1;
	color: var(--hero-white);
	margin: 0 0 1.5rem;
	max-width: 14ch;
}

#content.site-content .hero__tagline {
	font-size: clamp(0.9rem, 2vw, 1.05rem);
	color: var(--hero-text-dim);
	max-width: 40ch;
	margin: 0 0 2.5rem;
	font-weight: 300;
}

#content.site-content .hero__cta {
	display: inline-block;
	padding: 0.85rem 2rem;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--hero-white);
	border: 1px solid var(--hero-white);
	transition: background-color 0.3s ease, color 0.3s ease;
}

#content.site-content .hero__cta:hover {
	background: var(--hero-white);
	color: var(--hero-bg);
}

#content.site-content .hero__scroll {
	position: absolute;
	right: clamp(1.5rem, 5vw, 4rem);
	bottom: clamp(3rem, 8vh, 6rem);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.65rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hero-text-dim);
	writing-mode: vertical-rl;
}

#content.site-content .hero__scroll::before {
	content: '';
	width: 1px;
	height: 60px;
	background: var(--hero-text-dim);
	display: block;
}

@media (max-width: 600px) {
	#content.site-content .hero__scroll {
		display: none;
	}
}

/* ---------- Optional hero / intro content from the page editor ---------- */

#content.site-content .hero-content {
	margin: 0 0 6vh;
	text-align: center;
	color: var(--ink-soft);
	line-height: 1.7;
}

#content.site-content .hero-content > *:first-child {
	margin-top: 0;
}

/* ---------- Empty state ---------- */

#content.site-content .empty-state {
	text-align: center;
	color: var(--ink-soft);
	padding: 4rem 0;
}

/* ---------- Masonry grid ---------- */

#content.site-content .masonry-grid {
	column-count: 3;
	column-gap: 0.875rem;
}

@media (min-width: 1600px) {
	#content.site-content .masonry-grid {
		column-count: 4;
	}
}

@media (max-width: 980px) {
	#content.site-content .masonry-grid {
		column-count: 2;
	}
}

@media (max-width: 600px) {
	#content.site-content .masonry-grid {
		column-count: 1;
	}
}

#content.site-content .grid-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 0.875rem;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

#content.site-content .grid-item.is-visible {
	opacity: 1;
	transform: none;
}

#content.site-content .grid-card {
	position: relative;
	display: block;
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	background: #111110;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

#content.site-content .grid-card:hover {
	border-color: rgba(242, 240, 236, 0.35);
	transform: translateY(-3px);
}

/* image keeps its natural aspect ratio, capped so no single card runs away */
#content.site-content .image-container {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	max-height: 640px;
}

#content.site-content .grid-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 640px;
	object-fit: cover;
	filter: saturate(0.86) contrast(1.05) brightness(0.92);
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
}

/* subtle darken-on-hover, no text ever sits on top of it */
#content.site-content .image-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: rgba(10, 10, 10, 0.12);
	opacity: 0;
	transition: opacity 0.4s ease;
}

#content.site-content .grid-card:hover .image-overlay {
	opacity: 1;
}

#content.site-content .grid-card:hover .grid-image {
	transform: scale(1.04);
	filter: saturate(1) contrast(1.03) brightness(0.98);
}

/* ---------- Fine Art Prints ---------- */

#content.site-content .fine-art-prints {
	position: relative;
	margin-top: 5vh;
	overflow: hidden;
	border-radius: 6px;
	isolation: isolate;
}

#content.site-content .prints-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: #15130f;
	background-image:
		radial-gradient(120% 140% at 15% 15%, rgba(212, 175, 55, 0.16), transparent 55%),
		radial-gradient(120% 140% at 85% 85%, rgba(212, 175, 55, 0.08), transparent 55%),
		var(--prints-bg, none);
	background-size: cover;
	background-position: center;
	filter: saturate(0.9) contrast(1.05) brightness(0.65);
	transform: scale(1.02);
}

#content.site-content .fine-art-prints::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(6, 5, 4, 0.55) 0%, rgba(6, 5, 4, 0.78) 55%, rgba(6, 5, 4, 0.92) 100%);
}

#content.site-content .prints-content {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(3.5rem, 9vw, 6.5rem) 1.5rem;
	text-align: center;
}

#content.site-content .prints-eyebrow {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #d4af37;
	margin: 0 0 1.1rem;
}

#content.site-content .prints-eyebrow::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: 1px;
	margin: 1rem auto 0;
	background: #d4af37;
	opacity: 0.6;
}

#content.site-content .prints-heading {
	font-family: 'Archivo', Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: clamp(1.9rem, 4.6vw, 3.1rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 1.25rem;
}

#content.site-content .prints-copy {
	font-size: 1rem;
	line-height: 1.75;
	color: rgba(242, 240, 236, 0.78);
	margin: 0 auto 2rem;
	max-width: 46ch;
}

#content.site-content .prints-features {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(242, 240, 236, 0.6);
}

#content.site-content .prints-features li {
	position: relative;
	padding-left: 1.1rem;
}

#content.site-content .prints-features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #d4af37;
	transform: translateY(-50%);
}

#content.site-content .prints-features li:first-child {
	padding-left: 0;
}

#content.site-content .prints-features li:first-child::before {
	display: none;
}

#content.site-content .prints-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 2.25rem;
	border: 1px solid #d4af37;
	border-radius: 2px;
	color: var(--ink);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

#content.site-content .prints-cta .arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}

#content.site-content .prints-cta:hover {
	background-color: #d4af37;
	color: #15130f;
	transform: translateY(-2px);
}

#content.site-content .prints-cta:hover .arrow {
	transform: translateX(3px);
}

@media (max-width: 600px) {
	#content.site-content .prints-content {
		padding: 3.25rem 1.25rem;
	}

	#content.site-content .prints-features {
		flex-direction: column;
		gap: 0.5rem;
	}

	#content.site-content .prints-features li {
		padding-left: 0;
	}

	#content.site-content .prints-features li::before {
		display: none;
	}
}

/* ---------- Featured In ---------- */

#content.site-content .featured-in {
	margin-top: 5vh;
	padding-top: 5vh;
	border-top: 1px solid var(--line);
	text-align: center;
}

#content.site-content .featured-in-label {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 0 0 2.25rem;
}

#content.site-content .featured-in-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

#content.site-content .featured-in-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 190px;
	height: 88px;
	padding: 1rem 1.5rem;
	background: var(--ink);
	border-radius: 6px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#content.site-content .featured-in-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

#content.site-content .featured-in-logo:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

@media (max-width: 600px) {
	#content.site-content .featured-in-logo {
		width: 140px;
		height: 66px;
		padding: 0.75rem 1.1rem;
	}
}

/* ---------- Responsive ---------- */

@media (prefers-reduced-motion: reduce) {
	#content.site-content * {
		transition: none !important;
	}

	#content.site-content .grid-item {
		opacity: 1;
		transform: none;
	}
}