/* ==========================================================================
   Veterans landing page (/veterans/), JT 2026-10-30. Loaded only by page-veterans.php,
   after main.css, so nothing here can touch the other pages.
   Hero (from JT's mockup): small H1 line, the offer headline, then a large video thumbnail
   with the animated play button. Background figure in the image's right third.
   ========================================================================== */

/* Hero words in brand green (set in page-veterans.php) */
.landing-hero--veterans .hl { color: var(--zen-blue); }
.landing-hero--veterans .hl.hl--green { color: var(--zen-green); }

/* Headline uses the site's shared headline tracking (letter-spacing) from main.css. */
/* Phones: copy on the dark top, the figure image below it (shared .landing-hero behavior) */
.landing-hero--veterans { --hero-overlap: 0px; --hero-fade: 60px; }

.vet-hero__copy { max-width: 640px; }
.landing-hero--veterans .home-hero__h1 { font-weight: 600; }
.vet-hero__title {
	margin-top: 14px;
	font-size: clamp(1.15rem, 5.2vw, 2.2rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--zen-white);
}

/* The thumbnail: looks like an embedded video; the whole thing opens the video pop-up.
   No CSS border: the image has its own green frame (JT, 2026-11-01). */
.vet-thumb {
	position: relative;
	display: block;
	margin-top: 24px;
	border-radius: 6px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vet-thumb__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.vet-thumb__img--missing {
	display: grid;
	place-items: center;
	background: var(--zen-midnight);
}
/* Play button dead center; the 2026-11-01 thumbnail is designed for it (JT) */
.vet-thumb__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26%;
	height: auto;
	transform: translate(-50%, -50%);
	pointer-events: none;
	transition: transform 0.25s ease;
}
.vet-thumb:hover,
.vet-thumb:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 28px rgba(126, 211, 33, 0.35);
}
.vet-thumb:hover .vet-thumb__play,
.vet-thumb:focus-visible .vet-thumb__play { transform: translate(-50%, -50%) scale(1.08); }
.vet-thumb:focus-visible { outline: 2px solid var(--zen-white); outline-offset: 4px; }
.vet-thumb__note { margin-top: 10px; }

/* Tablets (768–1099px): stacked like phones (copy on top, the full photo under it), so the copy
   can never sit on the figure. Undoes the shared overlay layout from main.css for this page only. */
@media (min-width: 768px) and (max-width: 1099px) {
	.landing-hero--veterans { display: flex; min-height: 0; }
	.landing-hero--veterans .landing-hero__inner { padding-block: 48px 24px; }
	.landing-hero--veterans .landing-hero__media { position: static; z-index: auto; }
	.landing-hero--veterans .landing-hero__media img {
		height: auto;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--hero-fade));
		mask-image: linear-gradient(to bottom, transparent 0, #000 var(--hero-fade));
	}
	.landing-hero--veterans .landing-hero__media::after { content: none; }
	.landing-hero--veterans .landing-hero__copy.vet-hero__copy { max-width: 640px; }
}

/* Desktop (1100px+): photo behind, copy lined up with the logo. The figure starts at about 54% of the
   width (his feet; higher up he is further right), so the column ends at 50% of the screen at every
   width. The headline is sized to the column (cqi = 1% of its width) so it always fits on one line. */
@media (min-width: 1100px) {
	.landing-hero--veterans .landing-hero__copy.vet-hero__copy {
		max-width: calc(50vw - max(0px, (100vw - var(--max-width)) / 2) - var(--gutter));
		container-type: inline-size;
	}
	.landing-hero--veterans .vet-hero__title { font-size: calc(100cqi / 21.5); letter-spacing: 0.12em; white-space: nowrap; }
	.landing-hero--veterans .landing-hero__media img { object-position: 100% 50%; }
	.landing-hero--veterans .landing-hero__media::after {
		background: linear-gradient(90deg, rgba(5, 7, 13, 0.75) 0%, rgba(5, 7, 13, 0.45) 40%, rgba(5, 7, 13, 0) 56%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vet-thumb, .vet-thumb__play { transition: none; }
	.vet-thumb:hover, .vet-thumb:focus-visible { transform: none; }
}

/* What's actually happening (Structure / Chemistry / Emotions). Under 900px: stacked rows, glass-cylinder image
   left and text right, thin rules between rows. Each part's color (--part-color) is on its title; the small label is soft gray. */
.landing--veterans .section--photo-bg { background-color: var(--zen-near-black); }
.vet-parts {
	max-width: 900px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}
.vet-part {
	display: grid;
	grid-template-columns: 96px 1fr;
	column-gap: 18px;
	align-items: center;
	padding: 28px 0;
}
.vet-part + .vet-part { border-top: 1px solid var(--rule); }
.vet-part:first-child { padding-top: 0; }
.vet-part:last-child { padding-bottom: 0; }
.vet-part__img { display: block; width: 100%; height: auto; }
.vet-part__label {
	margin: 0 0 8px;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--text-soft);
}
.vet-part__title {
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.35;
	color: var(--part-color);
}
.vet-part__text p:last-child {
	margin-top: 6px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--text-soft);
}
.vet-part__text strong { font-weight: 600; color: var(--zen-white); }
/* Desktop: three equal columns, cylinder centered on top, text centered below; thin vertical rules between columns.
   Also used by Step 2's parts (no images). */
@media (min-width: 900px) {
	.vet-parts { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 64px; max-width: none; }
	.vet-part { position: relative; display: block; padding: 0; text-align: center; } /* centered (JT, 2026-11-02) */
	/* the divider sits in the middle of the gap, so all three columns get the same width */
	.vet-part + .vet-part { border-top: 0; }
	.vet-part + .vet-part::before { content: ""; position: absolute; top: 0; bottom: 0; left: -32px; border-left: 1px solid var(--rule); }
	.vet-part__img { width: 170px; margin: 0 auto 28px; }
	.vet-part__label { font-size: 0.8rem; }
	.vet-part__title { font-size: 1.35rem; }
	.vet-part__text p:last-child { font-size: 1rem; }
}
/* Step 2's three parts: the same rows and columns, without images */
.steps__body .vet-parts--plain { margin-top: 20px; }
.vet-parts--plain .vet-part { grid-template-columns: 1fr; }
.vet-happening__after { margin-top: 40px; }

/* November offer band */
.vet-offer { text-align: center; }
.vet-offer__inner { max-width: 820px; }
.vet-offer .gradient-rule { margin-inline: auto; }
.vet-offer__title { font-size: clamp(1.4rem, 4.4vw, 2.4rem); }
.vet-offer__action { margin-top: 28px; }