/*!
 * Kat's Gone Global — compatibility layer
 * Version 1.0.0
 *
 * A BRIDGE, NOT A DESIGN. DELETE THIS FILE WHEN THE POSTS ARE MIGRATED.
 *
 * The two live guides were built before the design system existed and carry a
 * different class vocabulary — `kgg-affiliate-cta`, `kgg-chips`,
 * `kgg-insert-filters`, `kgg-insert-line`. Sintra also carries three <style>
 * blocks inside its post content.
 *
 * The result is three vocabularies on one site: Sintra styled by its own
 * embedded CSS, Scotland partly styled and partly bare core blocks, and the
 * design system matching almost nothing on either. That is why the two pages
 * do not look like the same site.
 *
 * This file maps the old names onto the design system so both pages look
 * right immediately, with no post edits and nothing to re-publish. It is not
 * the fix. The fix is:
 *
 *   1. Rewrite each post to the canonical class names (docs/kgg-design-system.md)
 *   2. Delete every <style> block from the post content
 *   3. Delete this file and drop it from kgg-blocks.php
 *
 * Until then: everything here is a duplicate of a rule that already exists,
 * which means it is a place for the two to drift apart. Migrate sooner.
 */

/* -------------------------------------------------------------------------
 * The green affiliate box.  kgg-affiliate-cta -> kgg-affiliate
 * ---------------------------------------------------------------------- */

.kgg-affiliate-cta {
	background: var(--kgg-green-tint);
	border-radius: var(--kgg-r-sm);
	padding: var(--kgg-s6) 28px;
	margin: 0 0 var(--kgg-s8);
	box-sizing: border-box;
	max-width: var(--kgg-block-measure, var(--kgg-measure));
}

.kgg-affiliate-cta > p:first-child {
	font-size: 17px;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * The pill row.  kgg-chips -> kgg-pills
 * Built as a <ul> of <li>, so the list marker has to go as well.
 * ---------------------------------------------------------------------- */

.kgg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kgg-s2);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--kgg-s6);
}

.kgg-chips > li {
	display: inline-block;
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 7px 13px;
	border-radius: var(--kgg-r-pill);
	margin: 0;
	background: var(--kgg-surface);
	border: 1px solid var(--kgg-rule);
	color: var(--kgg-ink-muted);
}

.kgg-chips > li.kgg-chip-alert {
	background: var(--kgg-pink-tint);
	border-color: transparent;
	color: var(--kgg-pink-deep);
}

.kgg-chips > li.kgg-chip-ok {
	background: var(--kgg-sage-tint);
	border-color: transparent;
	color: var(--kgg-green);
}

.kgg-chips > li.kgg-chip-plain {
	background: var(--kgg-surface);
	border-color: var(--kgg-rule);
	color: var(--kgg-ink-muted);
}

/* -------------------------------------------------------------------------
 * The facts panel.  kgg-insert-filters -> kgg-factgrid
 * Already close to the design; this aligns the tokens and the width tier so
 * it matches Scotland's facts table on the same site.
 * ---------------------------------------------------------------------- */

.kgg-insert-filters {
	background: var(--kgg-rule);
	border: 1px solid var(--kgg-rule);
	border-radius: var(--kgg-r-md);
	overflow: hidden;
	box-sizing: border-box;
	max-width: var(--kgg-block-measure, var(--kgg-measure));
}

.kgg-insert-filters > div {
	background: var(--kgg-surface);
}

.kgg-label {
	font-family: var(--kgg-font-mono);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kgg-ink-muted);
}

.kgg-val {
	font-size: 14px;
	line-height: 1.5;
	color: var(--kgg-ink);
}

/* -------------------------------------------------------------------------
 * The route timeline.  kgg-insert-line -> kgg-timeline
 * Sintra's embedded CSS already draws this correctly and its grid matches the
 * design system's exactly, so only the card and the width tier are set here.
 * Do not restyle the stop internals from this file — two sets of rules on the
 * same elements is how a rail ends up half a pixel out.
 * ---------------------------------------------------------------------- */

.kgg-insert-line {
	--kgg-block-measure: var(--kgg-measure-wide);
	background: var(--kgg-surface);
	border: 1px solid var(--kgg-rule);
	border-radius: var(--kgg-r-lg);
	box-sizing: border-box;
	max-width: var(--kgg-block-measure);
}

.kgg-line-head .kgg-label,
.kgg-line-head > *:first-child {
	color: var(--kgg-green);
}

.kgg-key {
	font-family: var(--kgg-font-mono);
	font-size: 11px;
	line-height: 1.6;
	color: var(--kgg-ink-faint);
}