/* Carson Daly Racing - inner pages.
 *
 * Event detail, results, gallery, articles, hubs and calls to action.
 * chrome.css holds the header, footer and page shell.
 */

/* =================================================================
   Page furniture: breadcrumbs, intros, adjacent navigation
   ================================================================= */

.cdr-page-intro {
	margin: 14px 0 0;
	max-width: 62ch;
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.6;
	color: var(--cdr-grey);
}

.cdr-crumbs { margin-bottom: 16px; }

.cdr-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--cdr-font-data);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cdr-grey-dim);
}

.cdr-crumbs li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--cdr-rule-strong);
}

.cdr-crumbs a { color: var(--cdr-grey); text-decoration: none; }
.cdr-crumbs a:hover { color: var(--cdr-yellow); }
.cdr-crumbs [aria-current="page"] { color: var(--cdr-off-white); }

/* Page content: give running text a reading measure, but let components -
   tables, hub cards, schedules, sponsor walls - use the full column. */

/* The :not() guard matters: components render as lists and divs too, and a
   reading measure on those would squeeze the results table and hub cards. */
.cdr-content > p:not([class*="cdr-"]),
.cdr-content > h2:not([class*="cdr-"]),
.cdr-content > h3:not([class*="cdr-"]),
.cdr-content > h4:not([class*="cdr-"]),
.cdr-content > ul:not([class*="cdr-"]),
.cdr-content > ol:not([class*="cdr-"]),
.cdr-content > blockquote:not([class*="cdr-"]) {
	max-width: 68ch;
}

.cdr-content > p:not([class*="cdr-"]) { color: var(--cdr-grey); line-height: 1.65; }

.cdr-content > h2:not([class*="cdr-"]),
.cdr-content > h3:not([class*="cdr-"]),
.cdr-content > h4:not([class*="cdr-"]) {
	margin: clamp(30px, 3.4vw, 46px) 0 12px;
	font-family: var(--cdr-font-display);
	font-style: italic;
	font-weight: 800;
	font-stretch: 88%;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--cdr-white);
}

.cdr-content > h2:not([class*="cdr-"]) { font-size: clamp(21px, 2.6vw, 28px); }
.cdr-content > h3:not([class*="cdr-"]) { font-size: clamp(17px, 2vw, 21px); }

.cdr-content > .cdr-shell { padding-inline: 0; }

.cdr-block-title {
	margin: 0 0 14px;
	font-family: var(--cdr-font-display);
	font-style: italic;
	font-weight: 700;
	font-stretch: 88%;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cdr-yellow);
}

.cdr-empty {
	margin: 0;
	padding: 26px;
	border: 1px dashed var(--cdr-rule-strong);
	color: var(--cdr-grey);
	font-size: 14.5px;
}

.cdr-adjacent {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	padding-bottom: clamp(30px, 4vw, 52px);
}

.cdr-adjacent__link {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 18px 20px;
	background: var(--cdr-panel);
	border: 1px solid var(--cdr-rule);
	text-decoration: none;
	transition: border-color var(--cdr-speed) var(--cdr-ease), background var(--cdr-speed) var(--cdr-ease);
}

.cdr-adjacent__link:hover {
	border-color: var(--cdr-yellow);
	background: var(--cdr-panel-raised);
}

.cdr-adjacent__link--next { text-align: right; }

.cdr-adjacent__dir {
	font-family: var(--cdr-font-data);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cdr-yellow);
}

.cdr-adjacent__title {
	font-family: var(--cdr-font-display);
	font-style: italic;
	font-weight: 700;
	font-stretch: 88%;
	font-size: 16px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--cdr-white);
}

.cdr-adjacent__meta { font-size: 13px; color: var(--cdr-grey); }

/* =================================================================
   Event detail
   ================================================================= */

.cdr-event__head {
	padding: clamp(26px, 4vw, 48px) 0 clamp(24px, 3.4vw, 40px);
	border-bottom: 1px solid var(--cdr-rule);
	background:
		radial-gradient(90% 120% at 80% 0%, rgba(255, 210, 0, .06), transparent 62%),
		var(--cdr-black);
}

.cdr-event__headgrid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 44px);
	align-items: center;
}

.cdr-event__series {
	margin: 0 0 8px;
	font-family: var(--cdr-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--series, var(--cdr-yellow));
}

.cdr-event__venue {
	margin: 12px 0 0;
	font-family: var(--cdr-font-display);
	font-style: italic;
	font-weight: 700;
	font-stretch: 88%;
	font-size: clamp(17px, 2vw, 22px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cdr-yellow);
}

.cdr-event__town {
	display: block;
	margin-top: 3px;
	font-family: var(--cdr-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--cdr-grey);
}

.cdr-event__date {
	margin: 6px 0 0;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cdr-off-white);
}

.cdr-event__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
}

.cdr-badge {
	display: inline-block;
	padding: 4px 11px;
	border: 1px solid var(--cdr-rule-strong);
	font-family: var(--cdr-font-data);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cdr-grey);
}

.cdr-badge--live {
	background: var(--cdr-yellow);
	border-color: var(--cdr-yellow);
	color: var(--cdr-ink);
	font-weight: 600;
}

.cdr-badge--off { color: #C9705F; border-color: #6A3A32; }
.cdr-badge--quiet { color: var(--cdr-grey-dim); }

.cdr-event__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 22px 0 0;
}

.cdr-event__figure {
	display: grid;
	place-items: center;
	min-height: 190px;
	background: var(--cdr-panel);
	border: 1px solid var(--cdr-rule);
	overflow: hidden;
}

.cdr-event__figure img {
	width: 100%;
	height: 100%;
	max-height: 300px;
	object-fit: contain;
	padding: 18px;
}

.cdr-event__cols {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: clamp(24px, 3.4vw, 48px);
	align-items: start;
}

.cdr-event__block { margin-top: clamp(28px, 3.4vw, 44px); }
.cdr-event__block:first-child { margin-top: 0; }

/* The preview paragraph, full width above the two columns. */
.cdr-event__intro {
	padding-top: clamp(28px, 3.4vw, 44px);
}

.cdr-event__intro + .cdr-event__body {
	padding-top: clamp(20px, 2.6vw, 32px);
}

/* Both columns start on the same line, so the circuit panel sits level with
   the Session timetable heading rather than floating above it. */
.cdr-event__cols > * { margin-top: 0; }



.cdr-aside__outline {
	display: block;
	width: 100%;
	max-width: 190px;
	margin-bottom: 4px;
	color: var(--cdr-grey);
}

.cdr-aside__outline img {
	display: block;
	width: 100%;
	height: auto;
}

.cdr-aside__town {
	margin: 0;
	font-size: 13.5px;
	color: var(--cdr-grey);
}

.cdr-aside__desc {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--cdr-grey);
}

.cdr-event__qual { margin: 0 0 12px; font-size: 15px; color: var(--cdr-grey); }
.cdr-event__qual strong { color: var(--cdr-white); }

.cdr-event__summary {
	margin: 16px 0 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cdr-grey);
}

/* The aside mirrors the main column: a block title, then a panel. Because both
   columns start with the same title element, and both are grid items aligned
   to the start of the row, the Circuit heading always sits on the same line as
   the Session timetable heading - whatever length either column runs to. */
.cdr-aside__group {
	margin-bottom: clamp(22px, 2.8vw, 34px);
}

.cdr-aside__group:last-child {
	margin-bottom: 0;
}

.cdr-aside__panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	background: var(--cdr-panel);
	border: 1px solid var(--cdr-rule);
}

/* Nothing in either column may add space above its first element, or the two
   headings stop lining up. */
.cdr-event__cols > * > :first-child {
	margin-top: 0;
}

.cdr-aside__venue {
	margin: 0;
	font-family: var(--cdr-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	color: var(--cdr-white);
}

.cdr-aside__label {
	margin: 4px 0 0;
	font-family: var(--cdr-font-data);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cdr-grey-dim);
}

.cdr-aside__list { list-style: none; margin: 0; padding: 0; }

.cdr-aside__list a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--cdr-rule);
	color: var(--cdr-off-white);
	text-decoration: none;
	font-size: 14px;
}

.cdr-aside__list li:last-child a { border-bottom: 0; }
.cdr-aside__list a:hover { color: var(--cdr-yellow); }

.cdr-aside__list a span {
	color: var(--cdr-grey-dim);
	font-size: 12.5px;
	white-space: nowrap;
}

/* ---------- session timetable ---------- */

.cdr-timetable {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
}

.cdr-timetable__day {
	padding: 16px 18px 8px;
	background: var(--cdr-panel);
	border: 1px solid var(--cdr-rule);
	border-top: 3px solid var(--series, var(--cdr-yellow));
}

.cdr-timetable__date {
	margin: 0 0 10px;
	font-family: var(--cdr-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cdr-white);
}

.cdr-timetable__list { list-style: none; margin: 0; padding: 0; }

.cdr-timetable__row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid var(--cdr-rule);
}

.cdr-timetable__row:last-child { border-bottom: 0; }

.cdr-timetable__name { font-size: 14px; color: var(--cdr-off-white); }

.cdr-timetable__time {
	font-family: var(--cdr-font-data);
	font-size: 12.5px;
	color: var(--cdr-grey);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ---------- finishes ---------- */

.cdr-finishes { list-style: none; margin: 0; padding: 0; }

.cdr-finishes li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.cdr-finishes--stack li {
	padding: 12px 0;
	border-bottom: 1px solid var(--cdr-rule);
}

.cdr-finishes--stack li:last-child { border-bottom: 0; }

.cdr-finishes__label {
	min-width: 62px;
	font-family: var(--cdr-font-data);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cdr-grey-dim);
}

.cdr-finishes__pos {
	font-family: var(--cdr-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: 19px;
	color: var(--cdr-yellow);
}

.cdr-finishes__class,
.cdr-finishes__pts,
.cdr-finishes__note { font-size: 13px; color: var(--cdr-grey); }

.cdr-finishes__note { font-style: italic; }

/* =================================================================
   Results table
   ================================================================= */

.cdr-seasonnav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.cdr-seasonnav__item {
	padding: 8px 15px;
	border: 1px solid var(--cdr-rule-strong);
	font-family: var(--cdr-font-data);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cdr-grey);
	text-decoration: none;
}

.cdr-seasonnav__item:hover { border-color: var(--cdr-yellow); color: var(--cdr-white); }

.cdr-seasonnav__item.is-current {
	background: var(--cdr-yellow);
	border-color: var(--cdr-yellow);
	color: var(--cdr-ink);
	font-weight: 600;
}

.cdr-tablewrap { overflow-x: auto; }

.cdr-table {
	width: 100%;
	min-width: 780px;
	border-collapse: collapse;
	font-size: 14px;
}

.cdr-table th,
.cdr-table td {
	padding: 14px 16px 14px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--cdr-rule);
	color: var(--cdr-grey);
}

.cdr-table thead th {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cdr-rule-strong);
	font-family: var(--cdr-font-data);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cdr-grey-dim);
}

.cdr-table td.cdr-table__round,
.cdr-table th.cdr-table__round {
	padding-left: 14px;
	border-left: 3px solid var(--series, var(--cdr-yellow));
}

.cdr-table__round a {
	font-family: var(--cdr-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--cdr-white);
	text-decoration: none;
}

.cdr-table__round a:hover { color: var(--cdr-yellow); }

.cdr-table__series {
	display: block;
	margin-top: 3px;
	font-family: var(--cdr-font-data);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--series, var(--cdr-yellow));
}

.cdr-table__date,
.cdr-table__num { white-space: nowrap; font-variant-numeric: tabular-nums; }

.cdr-table__num { color: var(--cdr-off-white); }
.cdr-table__note { max-width: 30ch; font-style: italic; }

/* =================================================================
   Gallery
   ================================================================= */

.cdr-albums {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(16px, 2.2vw, 26px);
}

.cdr-albums__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--cdr-panel);
	border: 1px solid var(--cdr-rule);
	text-decoration: none;
	transition: border-color var(--cdr-speed) var(--cdr-ease);
}

.cdr-albums__link:hover { border-color: var(--cdr-yellow); }

.cdr-albums__thumb {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--cdr-panel-raised);
}

.cdr-albums__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--cdr-speed) var(--cdr-ease);
}

.cdr-albums__link:hover .cdr-albums__thumb img { transform: scale(1.04); }

.cdr-albums__body { display: block; padding: 16px 18px 20px; }

.cdr-albums__title {
	display: block;
	font-family: var(--cdr-font-display);
	font-style: italic;
	font-weight: 700;
	font-stretch: 88%;
	font-size: 17px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--cdr-white);
}

.cdr-albums__meta {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	color: var(--cdr-grey);
}

.cdr-album__meta { margin: 12px 0 0; font-size: 14px; color: var(--cdr-grey); }
.cdr-album__meta a { color: var(--cdr-yellow); text-decoration: none; }

.cdr-album__photos .wp-block-gallery { gap: 10px; }

.cdr-album__credit {
	margin: 22px 0 0;
	font-family: var(--cdr-font-data);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cdr-grey-dim);
}

/* =================================================================
   Article
   ================================================================= */

.cdr-post__date { margin: 10px 0 0; font-style: italic; color: var(--cdr-yellow); }

.cdr-post__hero { margin-top: clamp(22px, 3vw, 36px); }
.cdr-post__hero img { display: block; width: 100%; height: auto; }

.cdr-post__backlink { margin-top: 30px; }

/* =================================================================
   Hub cards, calls to action, enquiry
   ================================================================= */

.cdr-hub {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
}

.cdr-hub__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 24px 22px 46px;
	background: var(--cdr-panel);
	border: 1px solid var(--cdr-rule);
	border-top: 3px solid var(--cdr-yellow);
	text-decoration: none;
	transition: background var(--cdr-speed) var(--cdr-ease);
}

.cdr-hub__link:hover { background: var(--cdr-panel-raised); }

.cdr-hub__title {
	font-family: var(--cdr-font-display);
	font-style: italic;
	font-weight: 800;
	font-stretch: 85%;
	font-size: 22px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cdr-white);
}

.cdr-hub__text { font-size: 14px; line-height: 1.55; color: var(--cdr-grey); }

.cdr-hub__go {
	position: absolute;
	left: 22px;
	bottom: 20px;
	font-size: 22px;
	line-height: 1;
	color: var(--cdr-yellow);
}

.cdr-cta {
	position: relative;
	isolation: isolate;
	border: 1px solid var(--cdr-rule);
	border-left: 4px solid var(--cdr-yellow);
	background-color: var(--cta-bg, var(--cdr-panel));
	background-image: var(--cta-img, none);
	background-position: var(--cta-pos, center center);
	background-size: var(--cta-size, cover);
	background-repeat: no-repeat;
}

/* The yellow wash of the original design. */
.cdr-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	opacity: var(--cta-wash, 1);
	background: radial-gradient(80% 140% at 85% 0%, rgba(255, 210, 0, .10), transparent 60%);
}

/* The overlay that keeps text readable over a photograph. */
.cdr-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--cta-overlay-color, #0A0A0B);
	opacity: var(--cta-overlay, 0);
}

.cdr-cta__inner { position: relative; z-index: 1; }

.cdr-cta__brand {
	display: block;
	max-width: var(--cta-brand-w, 180px);
	height: auto;
	margin-bottom: 14px;
}

.cdr-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: clamp(18px, 3vw, 44px);
	padding: clamp(26px, 3.4vw, 44px);
}

.cdr-cta__title {
	margin: 0 0 8px;
	font-size: clamp(24px, 3.2vw, 36px);
	color: var(--cdr-white);
}

.cdr-cta__text {
	margin: 0;
	max-width: 56ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cdr-grey);
}

.cdr-btn--solid {
	background: var(--cdr-yellow);
	border-color: var(--cdr-yellow);
	color: var(--cdr-ink);
}

.cdr-btn--solid span { color: var(--cdr-ink); }

.cdr-btn--solid:hover,
.cdr-btn--solid:focus-visible {
	background: var(--cdr-yellow-deep);
	border-color: var(--cdr-yellow-deep);
	color: var(--cdr-ink);
}

.cdr-enquiry {
	padding: clamp(22px, 3vw, 34px);
	background: var(--cdr-panel);
	border: 1px solid var(--cdr-rule);
}

.cdr-enquiry__title {
	margin: 0 0 16px;
	font-size: clamp(20px, 2.4vw, 26px);
	color: var(--cdr-white);
}

.cdr-404 { text-align: center; }
.cdr-404 .cdr-page-intro { margin-inline: auto; }

.cdr-404__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

/* =================================================================
   Responsive
   ================================================================= */

@media (max-width: 900px) {
	.cdr-event__headgrid,
	.cdr-event__cols { grid-template-columns: 1fr; }

	.cdr-event__figure { order: -1; min-height: 150px; }

	/* Stacked, the reading order is timetable and result first, then the
	   circuit panel and the links below them. */
	.cdr-event__main { order: 1; }
	.cdr-event__aside { order: 2; margin-top: clamp(24px, 4vw, 36px); }
}

@media (max-width: 640px) {
	.cdr-adjacent { grid-template-columns: 1fr; }
	.cdr-adjacent__link--next { text-align: left; }

	.cdr-cta__inner { align-items: flex-start; }
	.cdr-cta__inner .cdr-btn { width: 100%; justify-content: center; }

	.cdr-crumbs ol { font-size: 10px; }
}