/* ============================================================================
 * /jiujitsu/ — "Defend the Perimeter" seminar
 * ============================================================================
 * Brief: dark and cool, with more energy than /dinner. That page is a quiet
 * invitation; this is a free, public, open-to-anyone seminar, so it can be bolder.
 *
 * How that's expressed, without leaving the brand:
 *   - a SPLIT hero — the cut-out of the instructor is the subject, not a texture
 *   - a blue/teal radial wash behind him, picking up the alpha panel baked into
 *     the image so the asset and the CSS read as one object
 *   - teal for the "cool" accents (chips, dots, the free badge); ORANGE stays the
 *     only action colour. docs/brand-dark-theme.md §6: teal is an accent, orange
 *     is the action, and a page does not get its own palette for vibe.
 *   - the button KEEPS var(--btn-glow) — it is a brand property, not decoration,
 *     and flattening it on /dinner for "premium" reasons was recorded as wrong.
 *
 * Tokens only, no raw hex. Semantic aliases (--accent/--surface/--text) over hue
 * names, so a brand change stays a one-line edit in tokens.css.
 *
 * ⚠ THIS PAGE RUNS "nav": "site", SO ENFOLD'S STYLESHEET IS ON THE PAGE.
 * Two rules below exist only because of that; both were measured, not guessed:
 *   1. .learn-list li::before re-enables `content` with !important, because
 *      lp-components.css blanks the theme's absolutely-positioned marker.
 *   2. NOTHING here sets margin or padding on an <li>. lp-components.css forces
 *      `li { margin:0 !important; padding:0 !important }`, which is why /dinner's
 *      agenda `padding: 1.15rem 0` computes to 0px on the live page. Row rhythm
 *      is `gap` on the list; padding goes on a child.
 * ========================================================================= */

/* ---------- hero ---------------------------------------------------------- */

.copia-lp--jiujitsu .hero {
	/* Layer order, top to bottom:
	   1  a teal bloom low-left, the "cool" note
	   2  a blue wash behind where the figure sits, continuing the image's own panel
	   3  the base sunken surface, so the section is never transparent
	   --blue and --teal are decorative here only — never text (they fail contrast). */
	background:
		radial-gradient(70% 60% at 8% 92%, rgba(5, 165, 149, .16) 0%, transparent 62%),
		radial-gradient(80% 75% at 78% 18%, rgba(91, 102, 220, .30) 0%, transparent 66%),
		var(--surface-sunken);
	overflow: hidden;
}

/*
 * ONE ROW: copy left, figure right.
 *
 * The instructor block briefly lived here as a second row. That was a mistake worth recording:
 * the figure is capped by its grid column, so a second row grew the HERO (459px of copy ->
 * 813px) without growing the PICTURE (644px, unchanged), and the portrait ended up reading
 * small against a much taller section. It is its own section below the hero now, and the hero
 * is only as tall as the figure again.
 *
 * The columns lean toward the figure (.92fr / 1.08fr) because the photograph is the hook on
 * this page and the copy column does not need the width — the h1 is two short words.
 */
.copia-lp--jiujitsu .hero-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	min-height: min(660px, 84vh);
}

.copia-lp--jiujitsu .hero-copy { position: relative; z-index: 2; }

.copia-lp--jiujitsu .hero h1 {
	font-size: clamp(2.9rem, 7vw, 5.2rem);
	margin-bottom: 1.3rem;
	text-transform: uppercase;
	letter-spacing: -.02em;
}

.copia-lp--jiujitsu .hero .lede { max-width: 30rem; }

/* ---------- hero figure --------------------------------------------------- */
/*
 * The asset already carries an alpha-faded blue panel, so it needs no scrim and no
 * filter — it composites straight onto the dark ground. `height:auto` is REQUIRED:
 * the <img> carries width/height attributes, which are presentational hints and would
 * otherwise beat the CSS box and squash the portrait (README house rules).
 */
.copia-lp--jiujitsu .hero-figure {
	position: relative;
	justify-self: end;
	width: 100%;
	max-width: 34rem;
}

.copia-lp--jiujitsu .hero-figure img {
	width: 100%;
	height: auto;
	/* Lifts him off the ground without a hard edge — light coming off the figure,
	   the same idea as the button glow. */
	filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .55));
}

/* ---------- chips (hero tags + instructor credentials) -------------------- */
/*
 * ONE component, two uses. The hero tags and the instructor credentials sit in the same
 * hero, so they must read as the same object — they were a muted grey pill and a teal
 * rectangle, which looked like two unrelated widgets stacked six inches apart.
 *
 * No margin/padding on the <li> without !important: lp-components.css forces
 * `li { margin:0 !important; padding:0 !important }` to neutralise Enfold (README §10).
 * Layout comes from `gap` on the list.
 */
.copia-lp--jiujitsu .tags,
.copia-lp--jiujitsu .creds {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: 0;
}

.copia-lp--jiujitsu .tags { margin: 0 0 2rem; }
.copia-lp--jiujitsu .creds { margin: 1rem 0 1.1rem; }

.copia-lp--jiujitsu .tags li,
.copia-lp--jiujitsu .creds li {
	display: inline-flex;
	align-items: center;
	/* !important because lp-components.css zeroes li padding to neutralise Enfold. */
	padding: .38rem .85rem !important;
	border: 1px solid rgba(5, 165, 149, .35);
	background: rgba(5, 165, 149, .09);
	font-size: .82rem;
	font-weight: var(--label-weight);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--teal-lite);
}

.copia-lp--jiujitsu .hero-cta {
	flex-wrap: wrap;
	gap: 1rem 1.2rem;
}

.copia-lp--jiujitsu .cta-note {
	font-size: .86rem;
	color: var(--text-faint);
	letter-spacing: .02em;
}

/* ---------- instructor ---------------------------------------------------- */
/*
 * Its own section, directly ABOVE the essentials. Not in the hero: the figure is capped by
 * its grid column, so putting this beside it grew the hero without growing the picture and
 * the portrait read small. Tried and reverted — don't re-try it.
 *
 * Single column at --measure-ish width, matching how every other text block on the page
 * reads. Nested inside .wrap rather than being the .wrap, so it inherits the same left edge
 * as the hero, facts and learn sections instead of centring away from them (README §10).
 */
.copia-lp--jiujitsu .coach {
	background: var(--surface);
	border-top: 1px solid var(--line);
}

.copia-lp--jiujitsu .coach-inner { max-width: 46rem; }

.copia-lp--jiujitsu .coach-inner h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

/* ---------- the essentials ------------------------------------------------ */

.copia-lp--jiujitsu .facts {
	background: var(--surface);
	border-top: 1px solid var(--line);
}

.copia-lp--jiujitsu .facts-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.4rem, 3.5vw, 2.6rem);
}

.copia-lp--jiujitsu .fact {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--line-2);
}

.copia-lp--jiujitsu .fact-label {
	font-size: var(--label-size);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--text-faint);
}

.copia-lp--jiujitsu .fact-value {
	font-size: 1.12rem;
	font-weight: 400;
	color: var(--text);
	line-height: 1.35;
}

/* "Free" is the single strongest selling point on the page — let it carry the accent.
   Teal, not orange: orange is reserved for things you click. */
.copia-lp--jiujitsu .fact-value--free { color: var(--teal-lite); }

.copia-lp--jiujitsu .fact-sub {
	font-size: .88rem;
	color: var(--text-muted);
	transition: color .15s;
}

.copia-lp--jiujitsu a.fact-sub:hover { color: var(--teal-lite); }

/* ---------- what you'll learn --------------------------------------------- */

.copia-lp--jiujitsu .learn {
	background: var(--surface);
	border-top: 1px solid var(--line);
}

.copia-lp--jiujitsu .learn-grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.copia-lp--jiujitsu .learn-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }

/* Row rhythm lives HERE, on the list's gap — never on the li. */
.copia-lp--jiujitsu .learn-list {
	list-style: none;
	display: grid;
	gap: 1.35rem;
	margin: 0;
	padding: 0;
}

.copia-lp--jiujitsu .learn-list li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--text);
	border-bottom: 1px solid var(--line);
	/* padding on the ROW would be zeroed by lp-components; !important keeps the
	   breathing room under each rule. */
	padding-bottom: 1.35rem !important;
}

.copia-lp--jiujitsu .learn-list li:last-child { border-bottom: none; }

/*
 * The dot. `content` must be re-enabled with !important because lp-components.css sets
 * `content: none !important` on every .copia-lp li::before to kill Enfold's marker.
 * This selector is (0,2,1) vs its (0,1,1), so it wins.
 *
 * A plain CSS shape, NOT an inline-SVG data URI — WP Rocket's minifier mangles the
 * quotes and angle brackets in url() (CLAUDE.md §9). As a grid item it sits in normal
 * flow, so no absolute positioning is involved at all.
 */
.copia-lp--jiujitsu .learn-list li::before {
	content: '' !important;
	position: static !important;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--teal);
	/* aligns the dot to the centre of the first text line rather than its top */
	margin-top: .6em;
}

/* ---------- RSVP ---------------------------------------------------------- */

.copia-lp--jiujitsu .rsvp {
	background: var(--surface);
	border-top: 1px solid var(--line);
	text-align: center;
}

.copia-lp--jiujitsu .rsvp-inner { max-width: 33rem; }

.copia-lp--jiujitsu .rsvp h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }

/* centred column, so un-cap the inherited measure and the auto margins */
.copia-lp--jiujitsu .rsvp-sub {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 2.2rem;
}

.copia-lp--jiujitsu .jj-form { text-align: left; }

.copia-lp--jiujitsu .field { margin-bottom: 1.5rem; }

.copia-lp--jiujitsu .field label {
	display: block;
	font-size: var(--label-size);
	font-weight: var(--label-weight);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: .5rem;
}

/* underline rather than a filled box — same treatment as /dinner, and it keeps the
   form from reading as a heavy widget dropped onto the page */
.copia-lp--jiujitsu .field input {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--line-2);
	border-radius: 0;
	padding: .55rem 0;
	font-family: var(--sans);
	font-size: 1.05rem;
	color: var(--text);
	transition: border-color .18s ease;
}

.copia-lp--jiujitsu .field input:focus {
	outline: none;
	border-bottom-color: var(--accent);
}

.copia-lp--jiujitsu .field input:-webkit-autofill {
	-webkit-text-fill-color: var(--text);
	-webkit-box-shadow: 0 0 0 100px var(--surface) inset;
}

.copia-lp--jiujitsu .jj-form .btn {
	width: 100%;
	justify-content: center;
	margin-top: .6rem;
}

.copia-lp--jiujitsu .jj-form .btn[disabled] { opacity: .55; cursor: default; transform: none; }

/* honeypot: off-canvas rather than display:none, which some bots skip */
.copia-lp--jiujitsu .hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.copia-lp--jiujitsu .form-status {
	margin: 1rem 0 0;
	font-size: .92rem;
	min-height: 1.4em;
	max-width: none;
}

.copia-lp--jiujitsu .form-status.is-error { color: var(--orange-3); }
.copia-lp--jiujitsu .form-status.is-ok { color: var(--teal-lite); }

/* Inline field errors — the message goes ON the field, because a line under the button
   reads as nothing having happened at all. */
.copia-lp--jiujitsu .field.has-error input {
	border-bottom-color: var(--orange);
	border-bottom-width: 2px;
}

.copia-lp--jiujitsu .field.has-error label { color: var(--orange-3); }

.copia-lp--jiujitsu .field-error {
	margin: .5rem 0 0;
	font-size: .92rem;
	line-height: 1.45;
	color: var(--orange-3);
	max-width: none;
}

.copia-lp--jiujitsu .form-done {
	border: 1px solid var(--line-2);
	padding: 1.6rem;
	text-align: center;
}

.copia-lp--jiujitsu .form-done b {
	display: block;
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--text);
	margin-bottom: .4rem;
}

.copia-lp--jiujitsu .form-pending {
	border: 1px dashed var(--line-2);
	padding: 1.3rem;
	text-align: left;
	font-size: .9rem;
	color: var(--text-muted);
}

.copia-lp--jiujitsu .form-pending b { display: block; color: var(--text); margin-bottom: .35rem; }

.copia-lp--jiujitsu code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .86em;
	color: var(--teal-lite);
	background: rgba(255, 255, 255, .05);
	padding: .1em .35em;
}

/* ---------- sharp corners ------------------------------------------------- */
/*
 * ZERO border-radius. This is the brand, not a page preference — see
 * docs/brand-dark-theme.md §4.
 *
 * MEASURED on live copia.io: the site's own primary CTA, the "Request a Demo" button in the
 * header (`#header li.menu-button a`), computes `border-radius: 0px` on the same orange
 * #FF5643. Sharp is what the real site already does; the 3px in _shared/lp-components.css is
 * drift, and the 999px pill these chips used was further still.
 *
 * Scoped to this page ON PURPOSE. Changing the shared component would restyle /dinner,
 * /blackhat2026 and both whiskey pages in the same commit, which is a separate decision with
 * a separate review. When the shared layer is squared off, this block simply becomes
 * redundant and can go.
 *
 * `.copia-lp--jiujitsu .btn` and `.copia-lp .btn` are BOTH (0,2,0) — equal specificity — so
 * this wins purely because lp.css is enqueued after lp-components.css. That is the documented
 * load order (README §4); no !important needed, and adding one would only make the next
 * override harder.
 */
.copia-lp--jiujitsu .btn,
.copia-lp--jiujitsu .tags li,
.copia-lp--jiujitsu .creds li,
.copia-lp--jiujitsu .form-done,
.copia-lp--jiujitsu .form-pending,
.copia-lp--jiujitsu code {
	border-radius: 0;
}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 980px) {
	.copia-lp--jiujitsu .facts-grid { grid-template-columns: repeat(2, 1fr); }
	.copia-lp--jiujitsu .learn-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	/* Stack, figure FIRST — the photo is the hook on a phone, and it stops the page opening
	   with a wall of type. */
	.copia-lp--jiujitsu .hero-grid {
		grid-template-columns: 1fr;
		min-height: 0;
		gap: 1.5rem;
	}
	.copia-lp--jiujitsu .hero-figure {
		order: -1;
		justify-self: center;
		max-width: 22rem;
	}
	.copia-lp--jiujitsu .hero .lede { max-width: none; }
}

@media (max-width: 560px) {
	.copia-lp--jiujitsu .facts-grid { grid-template-columns: 1fr; gap: 1.4rem; }
	.copia-lp--jiujitsu .hero-figure { max-width: 17rem; }
}

/* ---------- anchor scrolling ---------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.copia-lp--jiujitsu { scroll-behavior: smooth; }
}