/**
 * PWSGO: every style for pages rendered from the content model.
 *
 * This is the one file to edit. Templates carry classes and no inline styles,
 * so a change here reaches every page that uses the class, including vehicles
 * added later that nobody has seen yet.
 *
 * Colours, fonts and radii are never written as literals below. They come from
 * the tokens in pwsgo-tokens.css, which is generated from the approved design
 * and is not hand-edited. Changing a brand colour is therefore one line there,
 * not a search through this file.
 *
 * Naming: .pwsgo-<block>-<element>. Blocks are page regions, for example
 * .pwsgo-v for a vehicle page. State is a separate is- class.
 */

/* ---------------------------------------------------------------- shell -- */

.pwsgo-v {
	background: var(--paper);
	color: var(--ink);
	font: 400 16px/1.6 'Archivo', system-ui, -apple-system, sans-serif;
	padding: 0 0 72px;
}

.pwsgo-v .pwsgo-wrap {
	margin: 0 auto;
	max-width: 1240px;
	padding: 0 clamp(16px, 4vw, 56px);
}

.pwsgo-v h2 {
	font: 600 clamp(21px, 2.4vw, 26px)/1.3 'Archivo', system-ui, sans-serif;
	margin: 0 0 16px;
}

.pwsgo-v h3 {
	font: 600 15px/1.3 'Archivo', system-ui, sans-serif;
	margin: 0;
}

.pwsgo-v section {
	border-top: 1px solid var(--rule);
	margin-top: 48px;
	padding-top: 40px;
	position: relative;
}

/* ----------------------------------------------------------------- head -- */

.pwsgo-v-head {
	padding: 56px 0 8px;
}

.pwsgo-v-eyebrow {
	color: var(--ink-soft);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.pwsgo-v-head h1 {
	font: 600 clamp(34px, 6vw, 56px)/1.05 'Archivo', system-ui, sans-serif;
	letter-spacing: -0.02em;
	margin: 0;
}

.pwsgo-v-model {
	color: var(--ink-soft);
	font-size: 18px;
	margin: 12px 0 0;
}

/* -------------------------------------------------------------- gallery -- */

.pwsgo-v-gallery {
	border-top: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	margin-top: 32px;
	padding-top: 0;
}

.pwsgo-v-gallery figure {
	margin: 0;
}

.pwsgo-v-gallery figure.is-lead {
	grid-column: 1 / -1;
}

.pwsgo-v-gallery img {
	background: var(--well);
	border-radius: var(--r);
	display: block;
	height: auto;
	width: 100%;
}

.pwsgo-v-gallery figcaption {
	color: var(--ink-soft);
	font-size: 13.5px;
	padding-top: 8px;
}

/* ------------------------------------------------------- label / value -- */

.pwsgo-v-rows {
	margin: 0;
}

.pwsgo-v-rows > div {
	border-bottom: 1px solid var(--rule);
	display: flex;
	gap: 24px;
	padding: 12px 0;
}

.pwsgo-v-rows > div:last-child {
	border-bottom: 0;
}

.pwsgo-v-rows dt {
	color: var(--ink-soft);
	flex: 1 1 auto;
	font-size: 15px;
}

.pwsgo-v-rows dt span {
	display: block;
	font-size: 13.5px;
}

.pwsgo-v-rows dt em {
	display: block;
	font-size: 13.5px;
	font-style: normal;
	opacity: 0.8;
	padding-top: 2px;
}

.pwsgo-v-rows dd {
	color: var(--ink);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

/* --------------------------------------------------------- watermark -- */

.pwsgo-v-watermark {
	color: rgba(7, 31, 62, 0.05);
	font: 700 clamp(64px, 13vw, 150px)/0.8 'Archivo', system-ui, sans-serif;
	letter-spacing: -0.05em;
	pointer-events: none;
	position: absolute;
	right: -8px;
	top: 40px;
	user-select: none;
	white-space: nowrap;
}

/* ------------------------------------------------------------ equipment -- */

.pwsgo-v-list {
	columns: 2 260px;
	column-gap: 48px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pwsgo-v-list li {
	border-bottom: 1px solid var(--rule);
	break-inside: avoid;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 10px 0;
}

.pwsgo-v-list li span {
	color: var(--ink-soft);
	font-size: 13.5px;
	white-space: nowrap;
}

/* ------------------------------------------------------------ inventory -- */

.pwsgo-v-invgrid {
	display: grid;
	gap: clamp(28px, 3vw, 44px) 48px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
}

.pwsgo-v-invgroup h3 {
	align-items: baseline;
	border-bottom: 2px solid var(--ink);
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	padding-bottom: 6px;
}

.pwsgo-v-invgroup h3 span {
	color: var(--ink-soft);
	font-size: 13px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.pwsgo-v-invrow {
	border-bottom: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	margin: 0;
	padding: 9px 0;
}

.pwsgo-v-invrow:last-child {
	border-bottom: 0;
}

.pwsgo-v-invrow span {
	font-size: 14.5px;
}

.pwsgo-v-invrow em {
	color: var(--ink-soft);
	font-size: 13.5px;
	font-style: normal;
	text-align: right;
}

/* ---------------------------------------------------------------- text -- */

.pwsgo-v-licence p {
	color: var(--ink-soft);
	margin: 0 0 12px;
	max-width: 68ch;
}

.pwsgo-v-note {
	color: var(--ink-soft);
	font-size: 14px;
	margin: 16px 0 0;
	max-width: 68ch;
}

/* ----------------------------------------------------------------- faq -- */

.pwsgo-v-faq details {
	border-bottom: 1px solid var(--rule);
	padding: 14px 0;
}

.pwsgo-v-faq summary {
	cursor: pointer;
	font-size: 16.5px;
	font-weight: 600;
	list-style: none;
}

.pwsgo-v-faq summary::-webkit-details-marker {
	display: none;
}

.pwsgo-v-faq summary::after {
	content: '+';
	float: right;
	font-weight: 400;
}

.pwsgo-v-faq details[open] summary::after {
	content: '\2212';
}

.pwsgo-v-faq details > div {
	color: var(--ink-soft);
	max-width: 68ch;
	padding-top: 8px;
}

.pwsgo-v-faq details > div p {
	margin: 0 0 10px;
}

/* --------------------------------------------------------------- stamp -- */

.pwsgo-v-stamp {
	color: var(--ink-soft);
	font-size: 13px;
	margin: 48px 0 0;
}