/**
 * Buy Private Plates - format guide pages (theme v1.5.1)
 * template-guide-formats.php + template-guide-{slug}.php.
 * Layers on page-landing.css and page-home.css (for .hp-ticks).
 */

/* Breadcrumbs in the hero */
.fg-crumbs { font-size: var(--bp-text-xs); color: var(--bp-muted-on-navy); margin-bottom: var(--bp-s4); display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.fg-crumbs a { color: var(--bp-muted-on-navy); text-decoration: none; }
.fg-crumbs a:hover { color: var(--bp-white); }
.fg-crumbs span { color: var(--bp-white); }

/* Narrow reading measure for prose sections */
.fg-narrow { max-width: 820px; }
.fg-narrow .lp-section__title { font-size: var(--bp-text-2xl); }
.fg-section .lp-richtext { font-size: var(--bp-text-base); }
.fg-section .lp-richtext p { margin-bottom: var(--bp-s4); }
.fg-section .lp-richtext .btn { margin-top: var(--bp-s2); }
.fg-section { scroll-margin-top: calc(var(--bp-header-h, 72px) + var(--bp-s4)); }
#faq { scroll-margin-top: calc(var(--bp-header-h, 72px) + var(--bp-s4)); }

/* At a glance */
.fg-glance__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bp-s8); align-items: start; }
.fg-stats { list-style: none; margin: var(--bp-s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bp-s3); }
.fg-stats li { background: var(--bp-white); border: 1px solid var(--bp-border); border-radius: var(--bp-radius); padding: var(--bp-s4); display: grid; gap: 2px; box-shadow: var(--bp-shadow-card); }
.fg-stats strong { font-size: var(--bp-text-2xl); font-weight: 800; color: var(--bp-navy); letter-spacing: -0.01em; line-height: 1.1; }
.fg-stats span { font-size: var(--bp-text-xs); color: var(--bp-muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }

.fg-toc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: var(--bp-s5); }
.fg-toc__label { font-size: var(--bp-text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--bp-muted); font-weight: 700; margin-right: 4px; }
.fg-toc a { font-size: var(--bp-text-sm); font-weight: 600; color: var(--bp-royal-deep); text-decoration: none; padding: 5px 12px; border-radius: 999px; background: var(--bp-royal-soft); }
.fg-toc a:hover { background: var(--bp-royal); color: var(--bp-white); }

/* Plate anatomy artifact */
.fg-anatomy { position: relative; display: grid; gap: var(--bp-s3); justify-items: center; padding: var(--bp-s6) var(--bp-s4); background: var(--bp-white); border: 1px solid var(--bp-border); border-radius: var(--bp-radius); box-shadow: 0 24px 60px rgba(15, 18, 53, 0.12); }
.fg-anatomy::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 80% 0%, rgba(255, 199, 44, 0.16), transparent 55%); pointer-events: none; }
.fg-anatomy__plate {
	position: relative;
	display: inline-flex; gap: .3em;
	background: var(--bp-plate-yellow);
	color: var(--bp-plate-ink);
	font-family: var(--bp-font-plate);
	font-weight: 800;
	font-size: clamp(2rem, 6vw, 3.4rem);
	letter-spacing: .06em;
	padding: .18em .5em .22em;
	border: 3px solid var(--bp-plate-ink);
	border-radius: 10px;
	box-shadow: inset 0 -6px 0 var(--bp-plate-yellow-deep), 0 12px 30px rgba(15, 18, 53, 0.22);
}
.fg-anatomy__seg { position: relative; padding: 0 .08em; border-radius: 4px; }
.fg-anatomy__seg--1 { box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.55); }
.fg-anatomy__seg--2 { box-shadow: 0 0 0 3px rgba(217, 52, 43, 0.6); }
.fg-anatomy__seg--3 { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.6); }
.fg-anatomy__labels { position: relative; width: 100%; display: grid; grid-template-columns: repeat(var(--fg-cols, 3), 1fr); gap: var(--bp-s3); }
.fg-anatomy__label { text-align: center; display: grid; gap: 2px; padding-top: 12px; position: relative; }
.fg-anatomy__label::before { content: ''; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); }
.fg-anatomy__label--1::before { background: rgba(59, 91, 219, 0.9); }
.fg-anatomy__label--2::before { background: rgba(217, 52, 43, 0.9); }
.fg-anatomy__label--3::before { background: rgba(22, 163, 74, 0.9); }
.fg-anatomy__label strong { font-size: var(--bp-text-sm); color: var(--bp-navy); }
.fg-anatomy__label span { font-size: var(--bp-text-xs); color: var(--bp-muted); }
.fg-anatomy__note { position: relative; margin: var(--bp-s2) 0 0; font-size: var(--bp-text-sm); color: var(--bp-text-soft); text-align: center; line-height: 1.5; }

/* Reference tables */
.fg-table { margin-top: var(--bp-s5); background: var(--bp-white); border: 1px solid var(--bp-border); border-radius: var(--bp-radius); box-shadow: var(--bp-shadow-card); overflow: hidden; }
.fg-table table { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--bp-text-sm); }
.fg-table caption { text-align: left; padding: var(--bp-s3) var(--bp-s4); font-weight: 700; color: var(--bp-navy); background: var(--bp-canvas); border-bottom: 1px solid var(--bp-border); }
.fg-table th, .fg-table td { padding: 9px var(--bp-s4); border-bottom: 1px solid var(--bp-border); text-align: left; vertical-align: top; }
.fg-table th { font-size: var(--bp-text-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--bp-muted); background: var(--bp-white); }
.fg-table tbody tr:last-child td { border-bottom: 0; }
.fg-table tbody tr:hover td { background: #fbfbfe; }
.fg-table__key { white-space: nowrap; width: 1%; font-weight: 700; color: var(--bp-navy); }
/* Key cell renders its value as a proper plate chip: padded, bordered,
   centred, with a min width so single letters and two-digit codes line up */
.fg-table td.fg-table__key { padding: 8px var(--bp-s4) 8px 0; }
.fg-table__chip {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 48px; padding: 4px 12px 5px;
	font-family: var(--bp-font-plate); font-weight: 800; font-size: var(--bp-text-base); letter-spacing: .06em;
	color: var(--bp-plate-ink); background: var(--bp-plate-yellow);
	border: 2px solid var(--bp-plate-ink); border-radius: 6px;
	box-shadow: inset 0 -3px 0 var(--bp-plate-yellow-deep);
	line-height: 1.2;
}
/* Long year tables flow into two columns on wide screens */
@media (min-width: 720px) {
	.fg-table--split tbody { display: grid; grid-template-columns: 1fr 1fr; }
	.fg-table--split thead { display: none; }
	.fg-table--split tbody tr { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--bp-s3); padding: 0 var(--bp-s4); border-bottom: 1px solid var(--bp-border); }
	.fg-table--split tbody tr:nth-child(odd) { border-right: 1px solid var(--bp-border); }
	.fg-table--split tbody td { border-bottom: 0; padding-left: 0; padding-right: 0; }
	.fg-table--split tbody td.fg-table__key { padding: 8px var(--bp-s3) 8px 0; }
}

/* Buying tips */
.fg-tips { margin-top: var(--bp-s4); }
.fg-tips__ctas { display: flex; gap: var(--bp-s3); flex-wrap: wrap; margin-top: var(--bp-s6); }

/* Hub timeline */
.fg-timeline-band { position: relative; overflow: hidden; }
.fg-timeline { list-style: none; margin: var(--bp-s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--bp-s4); position: relative; }
.fg-timeline::before { content: ''; position: absolute; left: 10%; right: 10%; top: 14px; border-top: 2px dashed var(--bp-border-strong); }
.fg-timeline__item { position: relative; display: grid; gap: var(--bp-s2); justify-items: center; text-align: center; padding-top: var(--bp-s5); }
.fg-timeline__item::before { content: ''; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--bp-white); border: 3px solid var(--bp-royal); transform: translateX(-50%); }
.fg-timeline__year { font-size: var(--bp-text-xs); font-weight: 800; letter-spacing: .12em; color: var(--bp-royal-deep); text-transform: uppercase; }
.fg-timeline__chip { font-size: var(--bp-text-base); transform: rotate(-2deg); }
.fg-timeline__item:nth-child(even) .fg-timeline__chip { transform: rotate(2deg); }
.fg-timeline__title { font-size: var(--bp-text-base); color: var(--bp-navy); }
.fg-timeline__body { font-size: var(--bp-text-sm); color: var(--bp-text-soft); line-height: 1.45; }

/* Decoder */
.fg-decoder { counter-reset: fg; list-style: none; margin: var(--bp-s5) 0; padding: 0; display: grid; gap: var(--bp-s3); }
.fg-decoder li { position: relative; padding: var(--bp-s4) var(--bp-s4) var(--bp-s4) 64px; background: var(--bp-white); border: 1px solid var(--bp-border); border-radius: var(--bp-radius); box-shadow: var(--bp-shadow-card); color: var(--bp-text-soft); line-height: 1.5; }
.fg-decoder li::before { counter-increment: fg; content: counter(fg); position: absolute; left: var(--bp-s4); top: var(--bp-s4); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bp-navy); color: var(--bp-white); font-weight: 800; font-size: var(--bp-text-sm); }
.fg-decoder strong { color: var(--bp-navy); display: block; margin-bottom: 2px; }

/* Responsive */
@media (max-width: 900px) {
	.fg-glance__grid { grid-template-columns: 1fr; gap: var(--bp-s6); }
	.fg-timeline { grid-template-columns: 1fr; gap: var(--bp-s5); padding-left: 28px; }
	.fg-timeline::before { left: 6px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed var(--bp-border-strong); }
	.fg-timeline__item { text-align: left; justify-items: start; padding-top: 0; }
	.fg-timeline__item::before { left: -28px; top: 2px; transform: none; }
}
@media (max-width: 600px) {
	.fg-stats { grid-template-columns: 1fr 1fr; }
	.fg-anatomy__plate { gap: .2em; }
	.fg-anatomy__label span { display: none; }
}

/* Promo band on the commercial format pages / year checker */
.fg-promo { padding: var(--bp-s6) 0; }
.fg-promo__card {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--bp-s5);
	padding: var(--bp-s5) var(--bp-s6);
	background:
		radial-gradient(circle at 100% 0%, rgba(255, 199, 44, 0.14), transparent 45%),
		var(--bp-white);
	border: 1px solid var(--bp-border); border-radius: var(--bp-radius);
	box-shadow: var(--bp-shadow-card);
	text-decoration: none; color: var(--bp-text);
	transition: transform var(--bp-fast) var(--bp-ease), box-shadow var(--bp-fast) var(--bp-ease);
}
.fg-promo__card:hover { transform: translateY(-3px); box-shadow: var(--bp-shadow-card-hover); }
.fg-promo__chip { font-size: clamp(1.4rem, 3vw, 2rem) !important; transform: rotate(-3deg); }
.fg-promo__text { display: grid; gap: 4px; }
.fg-promo__text strong { font-size: var(--bp-text-lg); color: var(--bp-navy); }
.fg-promo__text > span:last-child { font-size: var(--bp-text-sm); color: var(--bp-text-soft); line-height: 1.5; }
.fg-promo__arrow { font-size: var(--bp-text-2xl); color: var(--bp-royal); }
@media (max-width: 700px) { .fg-promo__card { grid-template-columns: 1fr; text-align: center; justify-items: center; } .fg-promo__arrow { display: none; } }