/* ============================================================================
 * Grand Tour #61 — "The Next Stop card"  (re-skin, 19 Jul 2026)
 * ----------------------------------------------------------------------------
 * PURPOSE
 *   Re-skins the EXISTING onward-journey module rendered by the mu-plugin
 *   `journey3_cnp-continue-journey.php`  (wrapper: <section id="cnp-continue-journey">,
 *   cards: a.cj-card) into calm Instrument "NEXT STOP" ticket cards, evoking a
 *   connecting-service card on a rail platform.
 *
 *   This file adds NO new section and NO second recommendation engine. It reuses
 *   the plugin's curated 6-language next-destination map exactly as-is and only
 *   improves presentation + type. It is a pure stylesheet: reversible by dequeuing.
 *
 * SCOPE / SAFETY
 *   Every rule is scoped to `#cnp-continue-journey`, which the plugin emits ONLY on
 *   its ~29 curated method/regional source paths. It therefore no-ops on blog posts
 *   and any page without the module. It deliberately does NOT touch the theme's
 *   separate `.related` / "Keep exploring" related-topics block (a distinct element
 *   that renders just above this module on method/regional pages).
 *
 *   Selectors are prefixed with `body` so they out-specify the plugin's own inline
 *   <style id="cnp-cj-style"> (which is injected later in source, just before the
 *   footer). `body #id .class` (a=1,b=1,c=1) beats the plugin's `#id .class`
 *   (a=1,b=1,c=0). No !important is used, so the re-skin stays easy to override.
 *
 * TOKENS (Instrument, exact)
 *   cream/page #F5EEE1 · card #FBF6EB · ink #2A211B · soft-ink #6E6253
 *   hairline #DED3BF · burnt-orange #C75B22
 * FONTS  Newsreader (serif/headings) · IBM Plex Mono (labels/data) · Hanken (body)
 * ========================================================================== */

/* --- 1. Retint + refont via the plugin's own custom properties ---------------
 * The plugin draws everything through var(--cj-*), var(--font-serif) and
 * var(--font-mono). Overriding those values on the section (higher specificity)
 * re-colours and re-fonts the whole module without re-declaring each rule.
 * Notably: --font-serif was previously undefined, so headings fell back to
 * Fraunces; here we pin them to the site serif, Newsreader. */
body #cnp-continue-journey{
	--cj-cream:#FBF6EB;   /* card fill        */
	--cj-hair:#DED3BF;    /* hairline         */
	--cj-orange:#C75B22;  /* burnt-orange     */
	--cj-ink:#2A211B;     /* ink              */
	--cj-muted:#6E6253;   /* soft-ink         */
	--font-serif:'Newsreader',Georgia,'Times New Roman',serif;
	--font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
	/* local helper token: the page cream behind the cards, used for the
	   "punched" perforation notches so they read as torn out of the ticket. */
	--gt-page:#F5EEE1;
	padding-top:60px;
}

/* --- 2. Section eyebrow + heading: quieter, ticket-desk voice --------------- */
body #cnp-continue-journey .cj-eyebrow{
	color:var(--cj-orange);
	letter-spacing:.2em;
}
body #cnp-continue-journey .cj-heading{
	font-family:var(--font-serif);
	color:var(--cj-ink);
}

/* --- 3. The ticket card ----------------------------------------------------- */
body #cnp-continue-journey .cj-card{
	position:relative;
	background:var(--cj-cream);
	border:1px solid var(--cj-hair);
	border-radius:12px;
	padding:18px 22px 18px;
	overflow:hidden;                 /* keep notch scallops clipped to the card */
}

/* Kicker becomes the ticket header stub, above the tear line. */
body #cnp-continue-journey .cj-k{
	position:relative;
	color:var(--cj-orange);
	letter-spacing:.16em;
	margin:0 0 20px;
	padding-bottom:18px;
}

/* Perforation tear edge: a dashed hairline spanning the card, with two small
 * "punched" notches straddling the left/right borders (rail-ticket scallop).
 * Rendered as one multi-layer background on .cj-k::after — earlier layers paint
 * on top, so the notches sit over the dashed line ends. */
body #cnp-continue-journey .cj-k::after{
	content:"";
	position:absolute;
	left:-22px;                      /* reach the card's inner border edge (=padding) */
	right:-22px;
	bottom:0;
	height:13px;
	pointer-events:none;
	background:
		/* left notch: page-cream fill + hairline ring */
		radial-gradient(circle 6.5px at 0 50%,   var(--gt-page) 0 5.5px, var(--cj-hair) 5.5px 6.5px, transparent 6.6px) no-repeat,
		/* right notch */
		radial-gradient(circle 6.5px at 100% 50%, var(--gt-page) 0 5.5px, var(--cj-hair) 5.5px 6.5px, transparent 6.6px) no-repeat,
		/* dashed tear line, 1px tall, centred */
		repeating-linear-gradient(to right, var(--cj-hair) 0 5px, transparent 5px 11px) left center/100% 1px no-repeat;
}

/* Destination title in Newsreader. */
body #cnp-continue-journey .cj-t{
	font-family:var(--font-serif);
	color:var(--cj-ink);
	font-size:21px;
	line-height:1.2;
}

/* "Why go there" one-liner in soft-ink. */
body #cnp-continue-journey .cj-d{
	color:var(--cj-muted);
	font-size:14.5px;
}

/* --- 4. Fare footer: mono "PLATFORM N"  +  the plugin's localized "Open ->" -- */
body #cnp-continue-journey .cj-grid{
	counter-reset:gt-plat;
}
body #cnp-continue-journey .cj-card{
	counter-increment:gt-plat;
}
body #cnp-continue-journey .cj-go{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	margin-top:4px;
	padding-top:14px;
	border-top:1px dashed var(--cj-hair);   /* stub-bottom perforation, mirrors the top tear */
	font-family:var(--font-mono);
	color:var(--cj-muted);
}
body #cnp-continue-journey .cj-go::before{
	content:"PLATFORM " counter(gt-plat);
	font-family:var(--font-mono);
	font-size:11px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--cj-muted);
}
/* The plugin's arrow sits with the "Open" word on the right of the footer. */
body #cnp-continue-journey .cj-go .cj-arrow{
	color:var(--cj-orange);
}

/* --- 5. Hover: a gentle lift on the ticket (kept subtle) -------------------- */
body #cnp-continue-journey .cj-card:hover{
	border-color:var(--cj-orange);
	box-shadow:0 12px 28px -16px rgba(42,33,27,.38);
}

/* --- 6. Reduced motion: neutralise all transforms/transitions -------------- */
@media (prefers-reduced-motion: reduce){
	body #cnp-continue-journey .cj-card,
	body #cnp-continue-journey .cj-card:hover{
		transform:none;
		transition:none;
	}
	body #cnp-continue-journey .cj-arrow,
	body #cnp-continue-journey .cj-card:hover .cj-arrow{
		transform:none;
		transition:none;
	}
}