/* ------------------------------------------------------------------ *
 * Home page: hero video, garden section, intro video.
 * Loaded only on the front page (see functions.php).
 * ------------------------------------------------------------------ */

.jp-sep {
	border: 0;
	height: 1px;
	margin: 0;
	background: var(--wp--preset--color--hairline);
}

/* Override WordPress's global block-gap (theme.json blockGap), which
   otherwise adds margin-top to these three top-level sections since
   wp:pattern inlines them as direct siblings with no wrapper. */
body .jp-hero,
body .jp-garden,
body .jp-intro,
body .jp-about-card,
body .jp-relate {
	margin-top: 0;
}

.jp-hero,
.jp-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
/* The intro/proof video is meant to fill the viewport dramatically; the
   hero isn't — its row should size to the square photo's own height at
   whatever width the column renders at, not a forced full-screen height
   (that forced height is what caused the letterboxing below/above the
   image in the first place). */
.jp-intro {
	min-height: 100dvh;
}

.jp-hero-media,
.jp-intro-media {
	position: relative;
	overflow: hidden;
	background: #141311;
}
/* The hero photo is a square composite whose four faces aren't centered
   identically within their quadrants — cropping it to fill a non-square
   column (object-fit: cover) can cut into whichever face sits closest
   to the column's long edge, and which edge that is flips depending on
   the viewport's own aspect ratio. Rather than cropping OR letterboxing
   it inside a forced-height column, let the column itself size to the
   image's own square aspect ratio — the file renders exactly as it is,
   no padding, no cropping. background is just a brief loading-state
   placeholder (sampled from the photo's own flat color) before the
   image paints. */
.jp-hero-media {
	background: #2F5D53;
}
.jp-hero-media img {
	position: static;
	width: 100%;
	height: auto;
	display: block;
}
.jp-hero-media video,
.jp-intro-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Play/pause control for the intro video — required whenever motion plays
   automatically for more than 5 seconds (WCAG 2.2.2, Pause/Stop/Hide). */
.jp-video-toggle {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 19, 17, 0.55);
	color: #fff;
	cursor: pointer;
}
.jp-video-toggle-pause { display: none; }
.jp-video-toggle[aria-pressed="true"] .jp-video-toggle-play { display: none; }
.jp-video-toggle[aria-pressed="true"] .jp-video-toggle-pause { display: block; }

.jp-hero-copy,
.jp-intro-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--wp--preset--color--base);
	padding: clamp(2rem, 6vw, 5rem);
}
.jp-hero-copy h1,
.jp-intro-text p.jp-intro-lead {
	margin: 0;
	max-width: 16ch;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: clamp(2rem, 4.6vw, 3.6rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}
.jp-intro-text p.jp-intro-body {
	margin: clamp(0.9rem, 2vw, 1.5rem) 0;
	max-width: 32ch;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.25rem, 2vw, 1.6875rem);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}
.jp-hero-sub {
	margin: clamp(0.9rem, 2vw, 1.5rem) 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}

/* Newsletter signup — posts to Kit (see the form's action attribute in
   patterns/home-video.php for the form-ID TODO). */
.jp-newsletter-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.jp-newsletter-form input {
	font: inherit;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	padding: 0.6rem 0.9rem;
	width: 15rem;
	max-width: 60vw;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 4px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
}
.jp-newsletter-form button {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	white-space: nowrap;
}

.jp-garden {
	position: relative;
	overflow: hidden;
	min-height: 50dvh;
}
.jp-garden-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}
.jp-garden-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jp-garden-copy {
	position: relative;
	z-index: 1;
	width: 50%;
	min-height: 50dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(2rem, 5vw, 4rem);
}
.jp-garden-copy h2 {
	margin: 0;
	max-width: 16ch;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: #FAFAF7;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.jp-garden-copy p {
	margin: clamp(0.75rem, 1.6vw, 1.25rem) 0 0;
	max-width: 32ch;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.25rem, 2vw, 1.6875rem);
	line-height: 1.5;
	color: #FAFAF7;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.jp-garden-copy p.jp-garden-cta-line {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	font-size: 1.1rem;
	font-weight: 600;
}
.jp-garden-copy .jp-garden-form {
	margin-top: 1rem;
}
.jp-garden-copy .jp-garden-form input {
	background: rgba(250, 250, 247, 0.92);
}

/* About Josef card — deliberately NOT full-bleed. A small bounded card,
   not another cinematic panel (see IDEAS.md's own note against stacking
   more full-screen sections). */
.jp-about-card {
	padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 2rem);
}
.jp-about-card-inner {
	display: grid;
	grid-template-columns: minmax(0, 18rem) 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: center;
	max-width: 52rem;
	margin: 0 auto;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 8px;
}
.jp-about-card-img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}
.jp-about-card-text h2 {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	color: var(--wp--preset--color--contrast);
}
.jp-about-card-text p {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}
.jp-about-card-link {
	display: inline-block;
	margin-top: 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.98rem;
	color: var(--wp--preset--color--primary);
}

/* Relatedness + community — the quiet closing block. Also not full-bleed. */
.jp-relate {
	padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 2rem);
	text-align: center;
}
.jp-relate-inner {
	max-width: 34rem;
	margin: 0 auto;
}
.jp-relate-quote {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.15rem, 2.2vw, 1.4rem);
	color: var(--wp--preset--color--primary);
}
.jp-relate-text {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}
.jp-relate-cta {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.98rem;
	padding: 0.65rem 1.4rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	border-radius: 4px;
}

@media (max-width: 780px) {
	.jp-about-card-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.jp-about-card-img {
		max-width: 16rem;
		margin: 0 auto;
	}


	.jp-hero,
	.jp-intro {
		display: block;
		height: auto;
		position: relative;
		min-height: 100dvh;
	}
	.jp-hero-media,
	.jp-intro-media {
		position: absolute;
		inset: 0;
		z-index: 0;
	}
	.jp-hero-copy,
	.jp-intro-text {
		position: relative;
		z-index: 1;
		min-height: 100dvh;
		padding: 2rem;
		background: rgba(20, 19, 17, 0.34);
	}
	.jp-hero-copy h1,
	.jp-intro-text p.jp-intro-lead,
	.jp-intro-text p.jp-intro-body {
		max-width: none;
		color: #FAFAF7;
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
	}
	.jp-hero-sub {
		color: #FAFAF7;
		text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
	}

	/* The hero photo is a 4-way face composite with no empty band to land
	   text on — overlaying the headline crosses a face wherever it sits.
	   Stack instead: full-width photo, then plain text below, no overlap,
	   no crop (natural square aspect ratio). Intro keeps the video's
	   full-bleed-with-overlay treatment above; only the hero is decoupled. */
	.jp-hero {
		min-height: 0;
	}
	.jp-hero-media {
		position: static;
		inset: auto;
	}
	.jp-hero-media img {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
	.jp-hero-copy {
		min-height: 0;
		padding: 2rem 1.5rem;
		background: none;
	}
	.jp-hero-copy h1,
	.jp-hero-sub {
		color: var(--wp--preset--color--contrast);
		text-shadow: none;
	}
	.jp-garden-copy {
		width: 100%;
	}
	.jp-home-notes .jp-card-grid {
		grid-template-columns: 1fr;
	}
}

/* Recent notes preview — intentionally duplicates (not loads) the card
   design from assets/css/notes.css's .jp-card-grid/.jp-entry-card, since
   that stylesheet also carries the /notes/ page's search+filter-rail CSS
   this preview doesn't need. Keep both in sync if the card design changes. */
.jp-home-notes {
	margin-top: 0;
}
.jp-home-notes .jp-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.25rem;
	margin-top: 1.5rem;
}
.jp-home-notes .jp-entry-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 6px;
	padding: 1.25rem;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.jp-home-notes .jp-entry-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 4px 14px rgba(30, 29, 27, 0.06);
}
.jp-home-notes .jp-card-date {
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.6rem;
}
.jp-home-notes .jp-card-title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.25;
	margin: 0 0 0.55rem;
	color: var(--wp--preset--color--contrast);
}
.jp-home-notes .jp-card-excerpt {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.75rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.jp-home-notes .jp-card-cats {
	font-size: 0.75rem;
	color: var(--wp--preset--color--primary);
}
.jp-home-notes-all {
	margin-top: 1.5rem;
	font-size: 0.9rem;
}