/* =====================================================================
   Detailing Summit — shared widget stylesheet (Pit Lane Blue)
   Design tokens sourced verbatim from draft/design-1-pitlane-blue.
   Every custom widget in this plugin styles from these variables so the
   whole site stays visually consistent. See REDESIGN-SPEC.md §6.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	--ds-blue:        #1B01C4;
	--ds-blue-dark:   #120085;
	--ds-blue-bright: #0C90FF;
	--ds-blue-tint:   rgba(27, 1, 196, 0.14);
	--ds-black:       #0a0a0a;
	--ds-charcoal:    #161616;
	--ds-line:        #222222;
	--ds-line-soft:   #2a2a2a;
	--ds-gold:        #ffb800;
	--ds-gold-dark:   #cc8e00;
	--ds-card:        #141414;

	--ds-font-display: 'Anton', sans-serif;
	--ds-font-head:    'Oswald', sans-serif;
	--ds-font-body:    'Inter', sans-serif;
}

/* ---- Site-wide dark background ----------------------------------------
   The reference design has no light sections at all — every section sets
   its own black/charcoal background. This is a backstop so nothing white
   ever shows through gaps/edges if a page container isn't full-bleed. */
body { background: var(--ds-black); }

/* ---- Typography helpers ------------------------------------------------ */
.ds-font-display { font-family: var(--ds-font-display); letter-spacing: 0.5px; }
.ds-font-head    { font-family: var(--ds-font-head); }
.ds-font-body    { font-family: var(--ds-font-body); }

/* ---- Scroll-reveal (opt-in via .ds-reveal, toggled by ds-widgets.js) --- */
.ds-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}
.ds-reveal.ds-show {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.ds-reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   Countdown Strip widget — label + the countdown boxes, as one section.
   ===================================================================== */
.ds-countdown-strip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 1.25rem;
	background: var(--ds-black);
	border-top: 1px solid rgba(18, 0, 133, 0.4);
	border-bottom: 1px solid rgba(18, 0, 133, 0.4);
}
@media (min-width: 640px) {
	.ds-countdown-strip {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 1.5rem 2rem;
	}
}

.ds-countdown-strip__label {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 1.125rem;
	color: #fff;
	margin: 0;
	text-align: center;
}
@media (min-width: 640px) {
	.ds-countdown-strip__label { font-size: 1.25rem; text-align: left; }
}

.ds-countdown {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
	font-family: var(--ds-font-display);
}
@media (min-width: 640px) {
	.ds-countdown { gap: 1.25rem; }
}

.ds-countdown__box {
	background: var(--ds-charcoal);
	border: 1px solid var(--ds-line-soft);
	border-radius: 6px;
	padding: 0.75rem 1rem;
	min-width: 4.25rem;
	text-align: center;
}

.ds-countdown__num {
	display: block;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--ds-blue-bright);
}
@media (min-width: 640px) {
	.ds-countdown__num { font-size: 2.25rem; }
}

.ds-countdown__label {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--ds-font-head);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9aa0a6;
}

.ds-countdown__sep {
	display: none;
}

/* Complete / past-date message */
.ds-countdown__done {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ds-blue-bright);
}

/* =====================================================================
   Hero widget — full-bleed slideshow + kicker + title + subtext, wrapping
   the hero-fork cards below.
   ===================================================================== */
.ds-hero {
	position: relative;
	min-height: 640px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--ds-black);
}
@media (min-width: 640px) {
	.ds-hero { min-height: 720px; }
}

.ds-hero__slides { position: absolute; inset: 0; z-index: 0; }

.ds-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 30%;
	opacity: 0;
	transition: opacity 1.6s ease-in-out;
}
.ds-hero__slide--active { opacity: 1; }

.ds-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.8) 55%, rgba(10,10,10,0.97) 100%);
}

.ds-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 80rem;
	margin: 0 auto;
	width: 100%;
	padding: 1.5rem 1.25rem 2.5rem;
	text-align: center;
}
@media (min-width: 640px) {
	.ds-hero__inner { padding: 2rem 2rem 3rem; }
}

.ds-hero__kicker {
	display: inline-block;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 6px 18px;
	border-radius: 999px;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.8rem;
	color: #fff;
	margin: 0 0 1.25rem;
}

.ds-hero__title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	line-height: 0.95;
	font-size: 3rem;
	color: #fff;
	margin: 0;
}
@media (min-width: 640px)  { .ds-hero__title { font-size: 4.5rem; } }
@media (min-width: 1024px) { .ds-hero__title { font-size: 6rem; } }

.ds-hero__title-highlight { color: var(--ds-blue-bright); }

.ds-hero__subtext {
	font-family: var(--ds-font-head);
	font-size: 1.125rem;
	color: #d1d5db;
	max-width: 42rem;
	margin: 1.5rem auto 0;
}
@media (min-width: 640px) { .ds-hero__subtext { font-size: 1.25rem; } }

.ds-hero .ds-hero-fork { margin-top: 3rem; }

/* =====================================================================
   Hero-fork cards — "The Show" vs "Master Classes" choice cards.
   Ticket URLs are injected server-side from the Ticket Links settings
   (DS_Widgets\Ticket_Links), never hard-coded in a page.
   ===================================================================== */
.ds-hero-fork {
	display: grid;
	gap: 1.25rem;
	max-width: 64rem;
	margin: 0 auto;
}
@media (min-width: 640px) {
	.ds-hero-fork { grid-template-columns: 1fr 1fr; }
}

.ds-hero-fork__card {
	display: block;
	text-align: left;
	padding: 1.5rem;
	background: rgba(20, 20, 20, 0.95);
	border: 2px solid var(--ds-blue-dark);
	text-decoration: none;
	color: inherit;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
@media (min-width: 640px) {
	.ds-hero-fork__card { padding: 2rem; }
}
.ds-hero-fork__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -12px rgba(12, 144, 255, 0.18);
}

.ds-hero-fork__card--class {
	border-color: var(--ds-gold);
	clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

.ds-hero-fork__badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	margin-bottom: 1rem;
	font-family: var(--ds-font-head);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	transform: skewX(-6deg);
	background: linear-gradient(135deg, var(--ds-blue-dark), var(--ds-blue));
	color: #fff;
}
.ds-hero-fork__card--class .ds-hero-fork__badge {
	background: linear-gradient(135deg, var(--ds-gold), var(--ds-gold-dark));
	color: var(--ds-black);
}

.ds-hero-fork__title {
	font-family: var(--ds-font-display);
	font-size: 1.875rem;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
	color: #fff;
}
@media (min-width: 640px) {
	.ds-hero-fork__title { font-size: 2.25rem; }
}

.ds-hero-fork__desc {
	font-family: var(--ds-font-head);
	color: #9aa0a6;
	margin: 0 0 1rem;
}

.ds-hero-fork__date {
	font-family: var(--ds-font-head);
	font-size: 0.875rem;
	color: #6b7280;
	margin: 0 0 1rem;
}

.ds-hero-fork__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.875rem;
	color: var(--ds-blue-bright);
	transition: gap .2s ease;
}
.ds-hero-fork__card--class .ds-hero-fork__cta { color: var(--ds-gold); }
.ds-hero-fork__card:hover .ds-hero-fork__cta { gap: 1rem; }

.ds-hero-fork__cta-arrow { display: inline-block; }

/* =====================================================================
   Timeline widget — alternating day-by-day schedule.
   ===================================================================== */
.ds-timeline-section {
	background: var(--ds-charcoal);
	padding: 4rem 1.5rem;
}
@media (min-width: 640px) { .ds-timeline-section { padding: 5rem 3rem; } }
.ds-timeline { max-width: 60rem; margin: 0 auto; }

.ds-timeline__head { text-align: center; margin-bottom: 3rem; }

.ds-timeline__kicker {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.85rem;
	color: var(--ds-gold);
	margin: 0 0 0.75rem;
}

.ds-timeline__title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 1.875rem;
	margin: 0 0 0.5rem;
	color: #fff;
}
@media (min-width: 640px) { .ds-timeline__title { font-size: 2.5rem; } }

.ds-timeline__subtitle {
	font-family: var(--ds-font-head);
	color: #9aa0a6;
	margin: 0;
}

.ds-timeline__rail {
	position: relative;
}

.ds-timeline__rail::before {
	content: '';
	position: absolute;
	left: 1rem;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, transparent, var(--ds-blue-bright) 8%, var(--ds-blue-bright) 92%, transparent);
}
@media (min-width: 640px) {
	.ds-timeline__rail::before { left: 50%; transform: translateX(-50%); }
}

.ds-timeline__row {
	position: relative;
	padding-left: 3rem;
	margin-bottom: 2.5rem;
}
.ds-timeline__row:last-child { margin-bottom: 0; }

@media (min-width: 640px) {
	.ds-timeline__row {
		padding-left: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
		align-items: center;
		margin-bottom: 1rem;
	}
	.ds-timeline__row-content { grid-column: 1; text-align: right; padding-right: 3rem; }
	.ds-timeline__row--even .ds-timeline__row-content { grid-column: 2; text-align: left; padding-right: 0; padding-left: 3rem; }
}

.ds-timeline__dot {
	position: absolute;
	left: 1rem;
	top: 0.25rem;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--ds-blue-bright);
	box-shadow: 0 0 0 6px var(--ds-black), 0 0 0 8px rgba(12, 144, 255, 0.3);
	transform: translateX(-50%);
}
@media (min-width: 640px) {
	.ds-timeline__dot { left: 50%; }
}

.ds-timeline__day {
	font-family: var(--ds-font-display);
	color: var(--ds-gold);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 0.25rem;
}

.ds-timeline__row-title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
	color: #fff;
}

.ds-timeline__row-desc {
	font-family: var(--ds-font-head);
	color: #9aa0a6;
	font-size: 0.9rem;
	margin: 0;
}

/* =====================================================================
   Partners grid widget — grid or continuous ticker layout.
   ===================================================================== */
.ds-partners-section {
	background: var(--ds-charcoal);
	padding: 4rem 1.5rem;
}
@media (min-width: 640px) { .ds-partners-section { padding: 5rem 3rem; } }
.ds-partners { max-width: 80rem; margin: 0 auto; }
.ds-partners__head { text-align: center; margin-bottom: 2.5rem; }
.ds-partners__kicker {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.85rem;
	color: var(--ds-blue-bright);
	margin: 0 0 0.5rem;
}
.ds-partners__title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 1.5rem;
	margin: 0;
	color: #fff;
}
@media (min-width: 640px) { .ds-partners__title { font-size: 2rem; } }

.ds-partners__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
@media (min-width: 640px)  { .ds-partners__grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { .ds-partners__grid { grid-template-columns: repeat(7, 1fr); } }

.ds-partner-card {
	background: #fff;
	border-radius: 10px;
	padding: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
}
.ds-partner-card img {
	max-height: 3rem;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.ds-partner-card:hover img {
	filter: grayscale(0);
	opacity: 1;
	transform: scale(1.04);
}

/* Ticker variant: two identical tracks back-to-back, scrolled together,
   so the loop is seamless. */
.ds-partners__ticker {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ds-partners__ticker-track {
	display: flex;
	width: max-content;
	animation: ds-ticker var(--ds-ticker-duration, 30s) linear infinite;
}
.ds-partners__ticker:hover .ds-partners__ticker-track {
	animation-play-state: paused;
}
.ds-partners__ticker .ds-partner-card {
	flex: 0 0 auto;
	width: 8rem;
	aspect-ratio: auto;
	height: 6rem;
	margin-right: 1rem;
}
@keyframes ds-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ds-partners__ticker-track { animation: none; }
}

/* =====================================================================
   Video-testimonials widget
   ===================================================================== */
.ds-video-testimonials__head { text-align: center; margin-bottom: 2.5rem; }
.ds-video-testimonials__kicker {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.85rem;
	color: var(--ds-blue-bright);
	margin: 0 0 0.5rem;
}
.ds-video-testimonials__title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 1.875rem;
	margin: 0;
	color: #fff;
}
@media (min-width: 640px) { .ds-video-testimonials__title { font-size: 2.5rem; } }

.ds-video-testimonials__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 640px)  { .ds-video-testimonials__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ds-video-testimonials__grid { grid-template-columns: repeat(3, 1fr); } }

.ds-video-card { background: var(--ds-card); border: 1px solid var(--ds-line); }

.ds-video-card__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}
.ds-video-card__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ds-video-card__caption {
	padding: 1rem 1.25rem;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.9rem;
	color: #d1d5db;
	margin: 0;
}

/* =====================================================================
   Sub-hero / page-header widget
   ===================================================================== */
.ds-sub-hero {
	position: relative;
	padding: 4rem 1.25rem 3rem;
	text-align: center;
	background-color: var(--ds-charcoal);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
@media (min-width: 640px) { .ds-sub-hero { padding: 5.5rem 2rem 4rem; } }

.ds-sub-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.85) 100%);
}
.ds-sub-hero--no-image .ds-sub-hero__overlay { background: none; }

.ds-sub-hero__inner { position: relative; z-index: 1; max-width: 48rem; margin: 0 auto; }

.ds-sub-hero__breadcrumb {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0 0 1rem;
	padding: 0;
	font-family: var(--ds-font-head);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #9aa0a6;
}
.ds-sub-hero__breadcrumb li { display: flex; align-items: center; gap: 0.4rem; }
.ds-sub-hero__breadcrumb li:not(:last-child)::after { content: '/'; color: #4b5563; }
.ds-sub-hero__breadcrumb a { color: #9aa0a6; text-decoration: none; }
.ds-sub-hero__breadcrumb a:hover { color: var(--ds-blue-bright); }
.ds-sub-hero__breadcrumb li:last-child { color: var(--ds-blue-bright); }

.ds-sub-hero__kicker {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.8rem;
	color: var(--ds-blue-bright);
	margin: 0 0 0.75rem;
}

.ds-sub-hero__title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 2.5rem;
	line-height: 1;
	margin: 0;
	color: #fff;
}
@media (min-width: 640px) { .ds-sub-hero__title { font-size: 3.5rem; } }

.ds-sub-hero__subtitle {
	font-family: var(--ds-font-head);
	color: #d1d5db;
	max-width: 36rem;
	margin: 1rem auto 0;
}

/* =====================================================================
   Pricing-tier cards widget
   ===================================================================== */
.ds-pricing__head { text-align: center; margin-bottom: 2.5rem; }
.ds-pricing__kicker {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.85rem;
	color: var(--ds-blue-bright);
	margin: 0 0 0.5rem;
}
.ds-pricing__title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 1.875rem;
	margin: 0;
	color: #fff;
}
@media (min-width: 640px) { .ds-pricing__title { font-size: 2.5rem; } }

.ds-pricing__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: stretch;
}
@media (min-width: 640px)  { .ds-pricing__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ds-pricing__grid { grid-template-columns: repeat(3, 1fr); } }

.ds-pricing-card {
	display: flex;
	flex-direction: column;
	background: var(--ds-card);
	border: 1px solid var(--ds-line);
	padding: 2rem 1.75rem;
	transition: border-color .25s ease, transform .25s ease;
}
.ds-pricing-card:hover { border-color: var(--ds-blue-dark); transform: translateY(-4px); }

.ds-pricing-card--highlight {
	border-color: var(--ds-gold);
	position: relative;
}

.ds-pricing-card__flag {
	align-self: flex-start;
	background: linear-gradient(135deg, var(--ds-gold), var(--ds-gold-dark));
	color: var(--ds-black);
	font-family: var(--ds-font-head);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.25rem 0.75rem;
	margin-bottom: 1rem;
	transform: skewX(-6deg);
}

.ds-pricing-card__name {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 1.375rem;
	margin: 0 0 0.5rem;
	color: #fff;
}

.ds-pricing-card__tagline {
	font-family: var(--ds-font-head);
	color: var(--ds-blue-bright);
	font-size: 0.95rem;
	margin: 0 0 1.25rem;
}
.ds-pricing-card--highlight .ds-pricing-card__tagline { color: var(--ds-gold); }

.ds-pricing-card__features {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	flex-grow: 1;
	font-family: var(--ds-font-head);
	color: #d1d5db;
	font-size: 0.9rem;
}
.ds-pricing-card__features li {
	display: flex;
	gap: 0.6rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--ds-line);
}
.ds-pricing-card__features li:last-child { border-bottom: none; }
.ds-pricing-card__features li::before {
	content: '▸';
	color: var(--ds-blue-bright);
	flex-shrink: 0;
}
.ds-pricing-card--highlight .ds-pricing-card__features li::before { color: var(--ds-gold); }

.ds-pricing-card__cta {
	display: inline-block;
	text-align: center;
	padding: 0.75rem 1.5rem;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	background: var(--ds-blue-dark);
	color: #fff;
	text-decoration: none;
	transition: background .2s ease;
}
.ds-pricing-card__cta:hover { background: var(--ds-blue); }
.ds-pricing-card--highlight .ds-pricing-card__cta { background: var(--ds-gold); color: var(--ds-black); }
.ds-pricing-card--highlight .ds-pricing-card__cta:hover { background: var(--ds-gold-dark); }

/* =====================================================================
   Feature Grid widget
   ===================================================================== */
.ds-feature-grid-section {
	background: var(--ds-black);
	padding: 4rem 1.5rem;
}
@media (min-width: 640px) { .ds-feature-grid-section { padding: 5rem 3rem; } }
.ds-feature-grid { max-width: 80rem; margin: 0 auto; }
.ds-feature-grid__head { text-align: center; margin-bottom: 3rem; }
.ds-feature-grid__kicker {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.85rem;
	color: var(--ds-blue-bright);
	margin: 0 0 0.5rem;
}
.ds-feature-grid__title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 1.875rem;
	margin: 0 0 0.75rem;
	color: #fff;
}
@media (min-width: 640px) { .ds-feature-grid__title { font-size: 2.75rem; } }
.ds-feature-grid__subtitle {
	font-family: var(--ds-font-head);
	color: #9aa0a6;
	max-width: 40rem;
	margin: 0 auto;
}

.ds-feature-grid__cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) {
	.ds-feature-grid__cards--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.ds-feature-grid__cards--cols-3 { grid-template-columns: repeat(2, 1fr); }
	.ds-feature-grid__cards--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.ds-feature-grid__cards--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.ds-feature-grid__cards--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.ds-feature-card {
	position: relative;
	padding: 1.75rem;
	background: var(--ds-card);
	border: 1px solid var(--ds-line);
	text-align: center;
	overflow: hidden;
	transition: border-color .2s ease, transform .3s ease;
}
.ds-feature-grid__cards--cols-2 .ds-feature-card { text-align: center; }
.ds-feature-grid__cards--cols-3 .ds-feature-card,
.ds-feature-grid__cards--cols-4 .ds-feature-card { text-align: left; }
.ds-feature-card:hover { border-color: var(--ds-blue-dark); }

/* Photo variant — a blurred, color-tinted background photo behind the
   card content instead of the flat panel, for sections that need more
   visual life than plain icon+text (e.g. venue/event photography). */
.ds-feature-card--photo {
	border-color: transparent;
	background-size: cover;
	background-position: center;
	min-height: 14rem;
	display: flex;
	align-items: flex-end;
}
.ds-feature-card--photo:hover { transform: translateY(-4px); }
.ds-feature-card--photo::before {
	content: '';
	position: absolute;
	inset: -12px;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	filter: blur(10px);
}
.ds-feature-card__overlay {
	position: absolute;
	inset: 0;
	mix-blend-mode: multiply;
}
.ds-feature-card--tint-1 .ds-feature-card__overlay { background: linear-gradient(160deg, rgba(219,39,119,0.55), rgba(27,1,196,0.7)); }
.ds-feature-card--tint-2 .ds-feature-card__overlay { background: linear-gradient(160deg, rgba(124,58,237,0.55), rgba(18,0,133,0.7)); }
.ds-feature-card--tint-3 .ds-feature-card__overlay { background: linear-gradient(160deg, rgba(12,144,255,0.5), rgba(10,10,10,0.75)); }
.ds-feature-card--photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,0.85) 100%);
}
.ds-feature-card--photo .ds-feature-card__content {
	position: relative;
	z-index: 2;
}
.ds-feature-card--photo .ds-feature-card__title,
.ds-feature-card--photo .ds-feature-card__desc { color: #fff; }
.ds-feature-card--photo .ds-feature-card__desc { color: #e5e7eb; }

.ds-feature-card__icon {
	display: inline-block;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--ds-blue-bright);
	margin-bottom: 1rem;
}
.ds-feature-card__icon svg { width: 1em; height: 1em; fill: currentColor; }

.ds-feature-card__title {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 1.125rem;
	color: #fff;
	margin: 0 0 0.5rem;
}

.ds-feature-card__desc {
	font-family: var(--ds-font-body);
	color: #9aa0a6;
	font-size: 0.9rem;
	margin: 0;
	line-height: 1.6;
}

/* =====================================================================
   Statement widget
   ===================================================================== */
.ds-statement-section {
	padding: 4rem 1.5rem;
}
.ds-statement-section--charcoal { background: var(--ds-charcoal); }
.ds-statement-section--black { background: var(--ds-black); }
@media (min-width: 640px) { .ds-statement-section { padding: 5rem 3rem; } }
.ds-statement__inner {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
}
.ds-statement__kicker {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.85rem;
	color: var(--ds-blue-bright);
	margin: 0 0 1rem;
}
.ds-statement__title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 1.875rem;
	color: #fff;
	margin: 0 0 1.5rem;
}
@media (min-width: 640px) { .ds-statement__title { font-size: 3rem; } }
.ds-statement__body {
	font-family: var(--ds-font-head);
	font-size: 1.125rem;
	color: #d1d5db;
	line-height: 1.7;
}
.ds-statement__body p { margin: 0 0 1.25rem; }
.ds-statement__body p:last-child { margin-bottom: 0; }

.ds-statement__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 64rem;
	margin: 3.5rem auto 0;
	text-align: left;
}
@media (min-width: 640px) { .ds-statement__cards { grid-template-columns: repeat(3, 1fr); } }

.ds-statement-card {
	padding: 1.5rem;
	background: var(--ds-card);
	border: 1px solid var(--ds-line);
}
.ds-statement-card__title {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	color: var(--ds-blue-bright);
	font-size: 1rem;
	margin: 0 0 0.5rem;
}
.ds-statement-card__desc {
	color: #9aa0a6;
	font-size: 0.9rem;
	margin: 0;
	line-height: 1.6;
}

/* Optional side image variant — image runs full-height alongside the
   text instead of the section having a full-width background (that's
   the parent Container's own Style tab job, kept separate on purpose). */
.ds-statement--has-image {
	display: flex;
	align-items: stretch;
	gap: 2.5rem;
	max-width: 80rem;
	margin: 0 auto;
	flex-direction: column;
}
@media (min-width: 768px) {
	.ds-statement--has-image { flex-direction: row; }
}
.ds-statement--has-image .ds-statement__media {
	flex: 0 0 auto;
	width: 100%;
}
@media (min-width: 768px) {
	.ds-statement--has-image .ds-statement__media { flex: 0 0 42%; }
}
.ds-statement--has-image .ds-statement__media img {
	width: 100%;
	height: 100%;
	min-height: 16rem;
	object-fit: cover;
	display: block;
}
.ds-statement--has-image .ds-statement__text {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ds-statement--has-image .ds-statement__inner {
	max-width: none;
	margin: 0;
}
.ds-statement--image-left .ds-statement__inner,
.ds-statement--image-left .ds-statement__cards { text-align: left; }
.ds-statement--image-right .ds-statement__inner,
.ds-statement--image-right .ds-statement__cards { text-align: right; }
.ds-statement--has-image .ds-statement__cards {
	max-width: none;
	margin: 2rem 0 0;
}
.ds-statement--image-right .ds-statement__cards { margin-left: auto; }

/* =====================================================================
   Stats Strip widget
   ===================================================================== */
.ds-stats-strip-section {
	background: var(--ds-charcoal);
	padding: 3rem 1.5rem;
}
@media (min-width: 640px) { .ds-stats-strip-section { padding: 3.5rem 3rem; } }
.ds-stats-strip {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	text-align: center;
	max-width: 80rem;
	margin: 0 auto;
}
@media (min-width: 640px) { .ds-stats-strip { grid-template-columns: repeat(4, 1fr); } }

.ds-stat__number {
	font-family: var(--ds-font-display);
	font-size: 2.5rem;
	color: var(--ds-blue-bright);
	margin: 0;
}
@media (min-width: 640px) { .ds-stat__number { font-size: 3rem; } }

.ds-stat__label {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.85rem;
	color: #9aa0a6;
	margin: 0.5rem 0 0;
}

/* =====================================================================
   Product Detail widget — "The Show" / "Master Classes" sections.
   ===================================================================== */
.ds-product-detail-section {
	padding: 4rem 1.5rem;
}
.ds-product-detail-section--show { background: var(--ds-black); }
.ds-product-detail-section--masterclass { background: var(--ds-charcoal); }
@media (min-width: 640px) { .ds-product-detail-section { padding: 5rem 3rem; } }

.ds-product-detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
	max-width: 80rem;
	margin: 0 auto;
}
@media (min-width: 1024px) {
	.ds-product-detail { grid-template-columns: 1fr 1fr; }
	.ds-product-detail--reversed .ds-product-detail__text { order: 2; }
	.ds-product-detail--reversed .ds-product-detail__boxes { order: 1; }
}

.ds-product-detail__badge {
	display: inline-block;
	padding: 0.35rem 1rem;
	margin-bottom: 1.25rem;
	border-radius: 999px;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	background: linear-gradient(135deg, var(--ds-blue-dark), var(--ds-blue));
	color: #fff;
}
.ds-product-detail--masterclass .ds-product-detail__badge {
	background: linear-gradient(135deg, var(--ds-gold), var(--ds-gold-dark));
	color: var(--ds-black);
}

.ds-product-detail__title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 2.25rem;
	color: #fff;
	margin: 0 0 1.25rem;
}
@media (min-width: 640px) { .ds-product-detail__title { font-size: 3.5rem; } }

.ds-product-detail__desc {
	font-family: var(--ds-font-head);
	font-size: 1.125rem;
	color: #d1d5db;
	margin: 0 0 1.5rem;
}

.ds-product-detail__bullets {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	font-family: var(--ds-font-head);
	color: #d1d5db;
}
.ds-product-detail__bullets li { display: flex; gap: 0.75rem; padding: 0.4rem 0; }
.ds-product-detail__bullet-mark { color: var(--ds-blue-bright); flex-shrink: 0; }
.ds-product-detail--masterclass .ds-product-detail__bullet-mark { color: var(--ds-gold); }

.ds-product-detail__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

.ds-product-detail__cta {
	display: inline-block;
	padding: 0.9rem 1.75rem;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}
.ds-product-detail__cta--primary {
	background: var(--ds-blue-dark);
	color: #fff;
}
.ds-product-detail__cta--primary:hover { background: var(--ds-blue); }
.ds-product-detail--masterclass .ds-product-detail__cta--primary {
	background: var(--ds-gold);
	color: var(--ds-black);
}
.ds-product-detail--masterclass .ds-product-detail__cta--primary:hover { background: var(--ds-gold-dark); }

.ds-product-detail__cta--secondary {
	border: 1px solid #4b5563;
	color: #fff;
	background: transparent;
}
.ds-product-detail__cta--secondary:hover { border-color: #fff; }

.ds-product-detail__boxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.ds-info-box {
	background: var(--ds-charcoal);
	border: 1px solid var(--ds-line-soft);
	padding: 1.5rem;
}
.ds-product-detail--masterclass .ds-info-box { border-color: rgba(255, 184, 0, 0.3); }
.ds-info-box--full { grid-column: 1 / -1; }

.ds-info-box__value {
	font-family: var(--ds-font-display);
	font-size: 1.875rem;
	color: var(--ds-blue-bright);
	margin: 0;
}
.ds-product-detail--masterclass .ds-info-box__value { color: var(--ds-gold); }

.ds-info-box__label {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.85rem;
	color: #9aa0a6;
	margin: 0.35rem 0 0;
}

/* =====================================================================
   Quote widget
   ===================================================================== */
.ds-quote-section {
	background: var(--ds-black);
	padding: 4rem 1.5rem;
}
@media (min-width: 640px) { .ds-quote-section { padding: 5rem 3rem; } }
.ds-quote { max-width: 48rem; margin: 0 auto; text-align: center; }
.ds-quote__text {
	font-family: var(--ds-font-display);
	font-size: 1.5rem;
	line-height: 1.4;
	color: #fff;
	margin: 0;
}
@media (min-width: 640px) { .ds-quote__text { font-size: 1.875rem; } }
.ds-quote__attribution {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.85rem;
	color: #6b7280;
	margin: 1.25rem 0 0;
}

/* =====================================================================
   Final CTA widget
   ===================================================================== */
.ds-final-cta-section {
	background: var(--ds-charcoal);
	padding: 4rem 1.5rem;
}
@media (min-width: 640px) { .ds-final-cta-section { padding: 5rem 3rem; } }
.ds-final-cta { max-width: 48rem; margin: 0 auto; text-align: center; }
.ds-final-cta__title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 2.25rem;
	color: #fff;
	margin: 0 0 1rem;
}
@media (min-width: 640px) { .ds-final-cta__title { font-size: 3.5rem; } }
.ds-final-cta__subtitle {
	font-family: var(--ds-font-head);
	font-size: 1.125rem;
	color: #d1d5db;
	margin: 0 0 2.5rem;
}
.ds-final-cta__buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.ds-final-cta__button {
	display: inline-block;
	padding: 1rem 2rem;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background .2s ease;
}
.ds-final-cta__button--show { background: var(--ds-blue-dark); color: #fff; }
.ds-final-cta__button--show:hover { background: var(--ds-blue); }
.ds-final-cta__button--class { background: var(--ds-gold); color: var(--ds-black); }
.ds-final-cta__button--class:hover { background: var(--ds-gold-dark); }

/* =====================================================================
   Site Header widget
   ===================================================================== */
.ds-site-header { position: relative; background: var(--ds-black); border-bottom: 1px solid var(--ds-line); }

.ds-ticker {
	background: var(--ds-black);
	border-bottom: 1px solid #1f1f1f;
	overflow: hidden;
	padding: 0.5rem 0;
}
.ds-ticker__track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	animation: ds-ticker 26s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .ds-ticker__track { animation: none; } }
.ds-ticker__item {
	font-family: var(--ds-font-head);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: var(--ds-blue-bright);
	padding: 0 0.5rem;
}
.ds-ticker__sep { color: var(--ds-blue-bright); padding: 0 0.5rem; }

.ds-site-header__bar {
	max-width: 90rem;
	margin: 0 auto;
	padding: 0 1.25rem;
	height: 5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
@media (min-width: 640px) { .ds-site-header__bar { padding: 0 2rem; } }

.ds-site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.ds-site-header__logo img { height: 3rem; width: auto; object-fit: contain; }

.ds-site-header__nav {
	display: none;
	align-items: center;
	gap: 1.75rem;
	font-family: var(--ds-font-head);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
@media (min-width: 1024px) { .ds-site-header__nav { display: flex; } }

.ds-nav-link {
	position: relative;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
}
.ds-nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 0;
	height: 2px;
	background: var(--ds-blue-bright);
	transition: width .25s ease;
}
.ds-nav-link:hover::after { width: 100%; }

.ds-nav-dropdown { position: relative; }
.ds-nav-dropdown__menu {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 0.75rem;
	min-width: 12rem;
	background: var(--ds-charcoal);
	border: 1px solid var(--ds-line);
	padding: 0.5rem 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	z-index: 20;
}
.ds-nav-dropdown:hover .ds-nav-dropdown__menu,
.ds-nav-dropdown:focus-within .ds-nav-dropdown__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ds-nav-dropdown__menu a {
	display: block;
	padding: 0.6rem 1.25rem;
	color: #d1d5db;
	text-decoration: none;
	font-size: 0.85rem;
	white-space: nowrap;
}
.ds-nav-dropdown__menu a:hover { color: var(--ds-blue-bright); background: rgba(12,144,255,0.06); }

.ds-site-header__buttons { display: none; align-items: center; gap: 0.75rem; flex-shrink: 0; }
@media (min-width: 1024px) { .ds-site-header__buttons { display: flex; } }

.ds-site-header__button {
	display: inline-block;
	padding: 0.6rem 1.25rem;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}
.ds-site-header__button--show {
	border: 1px solid var(--ds-blue-dark);
	color: var(--ds-blue-bright);
	background: transparent;
}
.ds-site-header__button--show:hover { background: var(--ds-blue-dark); color: #fff; }
.ds-site-header__button--class { background: var(--ds-blue-dark); color: #fff; }
.ds-site-header__button--class:hover { background: var(--ds-blue); }

.ds-site-header__menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2rem;
	height: 2rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
@media (min-width: 1024px) { .ds-site-header__menu-toggle { display: none; } }
.ds-site-header__menu-toggle span { display: block; height: 2px; background: #fff; border-radius: 1px; }

.ds-site-header__mobile-nav {
	display: none;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 1.25rem 1.5rem;
	border-top: 1px solid #1f1f1f;
	background: var(--ds-black);
}
.ds-site-header__mobile-nav--open { display: flex; }
@media (min-width: 1024px) { .ds-site-header__mobile-nav { display: none !important; } }
.ds-site-header__mobile-nav a {
	padding: 0.6rem 0;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.9rem;
	color: #d1d5db;
	text-decoration: none;
}
.ds-site-header__mobile-nav .ds-site-header__button { text-align: center; margin-top: 0.5rem; }

/* =====================================================================
   Site Footer widget — matches draft/design-1-pitlane-blue's footer:
   a centered subscribe band, a 5-column grid, a centered copyright line.
   ===================================================================== */
.ds-site-footer { background: var(--ds-black); }

/* Subscribe Band widget — its own section above the footer grid. */
.ds-subscribe-band {
	max-width: 42rem;
	margin: 0 auto;
	padding: 3rem 1.5rem 0.5rem;
	text-align: center;
	background: var(--ds-black);
}
@media (min-width: 640px) { .ds-subscribe-band { padding: 5rem 3rem 2rem; } }
.ds-subscribe-band__title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 1.875rem;
	color: #fff;
	margin: 0 0 0.75rem;
}
@media (min-width: 640px) { .ds-subscribe-band__title { font-size: 2.25rem; } }
.ds-subscribe-band__subtitle {
	font-family: var(--ds-font-head);
	color: #9aa0a6;
	margin: 0 0 1.25rem;
}
@media (min-width: 640px) { .ds-subscribe-band__subtitle { margin: 0 0 2rem; } }

/* ---- Real Mailchimp signup form (MC4WP [mc4wp_form id=1819]) ----------
   Placed as a Shortcode element directly after the Subscribe Band widget.
   Styled here to match the draft's input+button look since MC4WP ships
   with no visual styling of its own. */
/* MC4WP's actual markup nests the fields one level deeper than the
   ".mc4wp-form-fields" wrapper: that div just wraps ".mc_signup-form",
   which is the real parent of the label/input/button. The centering and
   max-width live on the outer wrapper; the flex row layout has to be
   applied to ".mc_signup-form" itself or the inputs never move. */
.elementor-widget-shortcode .mc4wp-form-fields {
	max-width: 28rem;
	margin: 0 auto 2rem;
	padding: 0 1.5rem;
	box-sizing: border-box;
}
@media (min-width: 640px) {
	.elementor-widget-shortcode .mc4wp-form-fields { padding: 0; }
}
.mc4wp-form-fields .mc_signup-form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}
@media (min-width: 640px) {
	.mc4wp-form-fields .mc_signup-form { flex-direction: row; align-items: stretch; }
}
.mc4wp-form-fields label { display: none; }
.mc4wp-form-fields input[name="_mc4wp_honeypot"] { display: none !important; }
.mc4wp-form-fields input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	flex: 1;
	min-width: 0;
	padding: 0.875rem 1.25rem;
	background: var(--ds-charcoal);
	border: 1px solid var(--ds-line-soft);
	color: #fff;
	font-family: var(--ds-font-head);
	font-size: 0.9rem;
	outline: none;
}
.mc4wp-form-fields input[type="email"]:focus { border-color: var(--ds-blue-dark); }
.mc4wp-form-fields input[type="email"]::placeholder { color: #6b7280; }
.mc4wp-form-fields input[type="submit"] {
	align-self: center;
	flex-shrink: 0;
	width: auto;
	padding: 0.875rem 1.75rem;
	background: var(--ds-blue-dark);
	border: none;
	color: #fff;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background .2s ease;
}
@media (min-width: 640px) {
	.mc4wp-form-fields input[type="submit"] { align-self: stretch; }
}
.mc4wp-form-fields input[type="submit"]:hover { background: var(--ds-blue); }
.mc4wp-response { max-width: 28rem; margin: 0 auto; text-align: center; }
.mc4wp-response p {
	font-family: var(--ds-font-head);
	font-size: 0.85rem;
	color: var(--ds-gold);
}

.ds-site-footer__grid {
	max-width: 90rem;
	margin: 0 auto;
	padding: 2rem 1.5rem;
	border-top: 1px solid var(--ds-line);
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 640px) {
	.ds-site-footer__grid { grid-template-columns: repeat(2, 1fr); padding: 4rem 2rem; }
}
@media (min-width: 1024px) {
	.ds-site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* Specificity note: Elementor ships ".elementor img { height:auto; max-width:100% }"
   at (0,1,1), which beats a plain ".ds-site-footer__logo" class selector at
   (0,1,0) regardless of source order. Scoping to the widget wrapper bumps
   this rule to (0,2,1) so it wins without needing !important. */
.ds-site-footer .ds-site-footer__logo { height: 2.5rem; width: auto; object-fit: contain; margin-bottom: 1rem; }
.ds-site-footer__tagline { color: #6b7280; font-size: 0.9rem; max-width: 28rem; margin: 0; }

.ds-site-footer__col-heading {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.85rem;
	color: #d1d5db;
	margin: 0 0 1rem;
}
.ds-site-footer__col-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-family: var(--ds-font-head);
	font-size: 0.9rem;
}
.ds-site-footer__col-list a { color: #6b7280; text-decoration: none; }
.ds-site-footer__col-list a:hover { color: #fff; }

.ds-site-footer__copyright {
	text-align: center;
	color: #4b5563;
	font-family: var(--ds-font-head);
	font-size: 0.75rem;
	margin: 0;
	padding: 0 1.5rem 2rem;
}

/* =====================================================================
   Single Event template — restyles The Events Calendar's own native
   Elementor widgets (no custom PHP, per REDESIGN-SPEC.md §2). Every
   selector below targets TEC's real output classes, confirmed by
   rendering a live event through the new template and inspecting the
   actual DOM rather than guessing at markup.
   ===================================================================== */
.ds-event-hero { position: relative; background: var(--ds-black); overflow: hidden; height: 320px; }
@media (min-width: 640px) { .ds-event-hero { height: 500px; } }
.ds-event-hero .tec-events-elementor-event-widget__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ds-event-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.9) 100%);
	pointer-events: none;
}

.ds-event-meta-band {
	max-width: 60rem;
	margin: 0 auto;
	padding: 2rem 1.5rem 2.5rem;
	text-align: center;
}
@media (min-width: 640px) { .ds-event-meta-band { padding: 2.5rem 2rem 3rem; } }

/* "« All Events" back-link — moved to the top of the band (was previously
   stranded below the price with no visual relationship to anything). A
   small breadcrumb-style link, not a competing CTA. */
.tec-events-elementor-event-widget__calendar-link {
	margin-bottom: 1.5rem;
}
.tec-events-elementor-event-widget__calendar-link a,
.tec-events-elementor-event-widget__calendar-link button {
	display: inline-block;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8rem;
	background: none !important;
	color: #9aa0a6 !important;
	text-decoration: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: color .2s ease;
}
.tec-events-elementor-event-widget__calendar-link a:hover,
.tec-events-elementor-event-widget__calendar-link button:hover { color: var(--ds-blue-bright) !important; }

.tec-events-elementor-event-widget__status,
.tec-events-elementor-event-widget__status-passed,
.tec-events-elementor-event-widget__status-canceled,
.tec-events-elementor-event-widget__status-postponed {
	display: inline-block;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.8rem;
	padding: 0.35rem 1rem;
	margin-bottom: 1rem;
	background: rgba(255, 184, 0, 0.12) !important;
	color: var(--ds-gold) !important;
	border: 1px solid rgba(255, 184, 0, 0.3);
	border-radius: 999px;
}

/* !important below: The Events Calendar ships its own same-specificity
   single-class rules for these widgets (e.g. widgets/title.css), loaded
   after ours — without !important, whichever loads last silently wins
   and the text renders in TEC's default dark color against our dark
   background, invisible. Confirmed by inspecting computed styles on a
   live page. */
.tec-events-elementor-event-widget__title {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	line-height: 1;
	font-size: 2.5rem;
	color: #fff !important;
	margin: 0 0 1.75rem;
}
@media (min-width: 640px) { .tec-events-elementor-event-widget__title { font-size: 3.5rem; } }

/* Date & Time and Cost now live as rows inside the sidebar "Event Info"
   card (.ds-event-body-side) instead of a centered band under the title
   — left-aligned to match the Venue/Organizer/Website rows around them,
   each with the widget's own "Show Header" label enabled for the same
   eyebrow-over-value treatment used throughout that card. */
.tec-events-elementor-event-widget__datetime-header,
.tec-events-elementor-event-widget__cost-header {
	font-family: var(--ds-font-head) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.7rem;
	color: #9aa0a6 !important;
	margin: 0 0 0.4rem;
}
.tec-events-elementor-event-widget__datetime-wrapper,
.tec-events-elementor-event-widget__datetime {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--ds-font-head);
	font-size: 0.95rem;
	color: #fff !important;
	margin: 0;
}
.tec-events-elementor-event-widget__datetime-separator { color: #6b7280 !important; }
.tec-events-elementor-event-widget__datetime a { color: var(--ds-blue-bright) !important; }

.tec-events-elementor-event-widget__cost {
	font-family: var(--ds-font-head);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ds-gold) !important;
	margin: 0;
}

.ds-event-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	max-width: 78rem;
	margin: 0 auto;
	padding: 0 1.5rem 5rem;
	align-items: start;
}
@media (min-width: 1024px) { .ds-event-body { grid-template-columns: 2fr 1fr; padding: 0 2rem 6rem; } }

.ds-event-body-main,
.ds-event-body-side { color: #d1d5db; }

.ds-event-body-main .theme-post-content,
.ds-event-body-main .elementor-widget-theme-post-content {
	font-family: var(--ds-font-body);
	font-size: 1.05rem;
	line-height: 1.75;
	color: #d1d5db;
}
.ds-event-body-main .theme-post-content h1,
.ds-event-body-main .theme-post-content h2,
.ds-event-body-main .theme-post-content h3 {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	color: #fff;
}
.ds-event-body-main .theme-post-content a { color: var(--ds-blue-bright); }

.tec-events-elementor-event-widget__categories,
.tec-events-elementor-event-widget__tags {
	margin-top: 2rem;
	font-family: var(--ds-font-head);
	font-size: 0.9rem;
}
.tec-events-elementor-event-widget__categories-header {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	color: #6b7280 !important;
	margin: 0 0 0.5rem;
}
.tec-events-elementor-event-widget__categories a,
.tec-events-elementor-event-widget__tags a {
	color: var(--ds-blue-bright) !important;
	text-decoration: none;
}

/* Sidebar — one unified card (background/border/radius live on the
   container itself, .ds-event-body-side) instead of four separate boxes
   each with their own background + margin, which is what made Venue /
   Organizer / Website / Add-to-Calendar read as disconnected floating
   islands. Each widget becomes a plain row inside that one card, with a
   hairline divider between rows instead of a full card edge each. */
.ds-event-body-side {
	background: var(--ds-charcoal);
	border: 1px solid var(--ds-line-soft);
	border-radius: 0.5rem;
	padding: 1.75rem;
	position: sticky;
	top: 1.5rem;
}
.ds-event-body-side > * {
	font-family: var(--ds-font-head);
	font-size: 0.9rem;
	color: #d1d5db !important;
}
.ds-event-body-side > * + * {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ds-line);
}

.ds-event-info-heading .elementor-heading-title {
	font-family: var(--ds-font-head) !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	color: #9aa0a6 !important;
	margin: 0;
}

/* Venue/Organizer "Show Header" settings are now enabled on the widgets
   themselves (show_venue_header / show_organizer_header), rendering
   TEC's real "Venue" / "Organizer" labels — matching the kicker-over-
   heading pattern already used by the Sub-Hero widget elsewhere on the
   site, rather than leaving bare unlabeled text like the live site did
   (the Organizer widget by design prints only the raw name, e.g. "LRC",
   with no indication of what that value even is). */
.tec-events-elementor-event-widget__venue-header,
.tec-events-elementor-event-widget__organizer-header {
	font-family: var(--ds-font-head) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.7rem;
	color: #9aa0a6 !important;
	margin: 0 0 0.4rem;
}
.tec-events-elementor-event-widget__venue-name,
.tec-events-elementor-event-widget__organizer-name {
	font-family: var(--ds-font-display);
	text-transform: uppercase;
	font-size: 1rem;
	color: #fff !important;
	margin: 0 0 0.5rem;
}
.tec-events-elementor-event-widget__venue a,
.tec-events-elementor-event-widget__organizer a,
.tec-events-elementor-event-widget__website a { color: var(--ds-blue-bright) !important; text-decoration: none; }

/* The address/phone text nodes ship TEC's light-theme default (near-
   black, e.g. rgb(20,24,39)) which is invisible against the dark card —
   same class of bug as the datepicker above: real content, wrong theme
   assumption, not a missing rule. */
.tec-events-elementor-event-widget__venue-address-address,
.tec-events-elementor-event-widget__venue-address-address .tribe-address,
.tec-events-elementor-event-widget__venue-phone-number {
	color: #d1d5db !important;
	font-style: normal;
	line-height: 1.5;
}

.tec-events-elementor-event-widget__website {
	font-family: var(--ds-font-head) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.7rem;
	color: #9aa0a6 !important;
}
.tec-events-elementor-event-widget__website a {
	display: block;
	font-family: var(--ds-font-body) !important;
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.9rem;
	margin-top: 0.4rem;
	word-break: break-word;
}

.tec-events-elementor-event-widget__export-dropdown-button {
	width: 100%;
	background: var(--ds-blue-dark) !important;
	color: #fff !important;
	border: none;
	padding: 0.9rem 1.25rem;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background .2s ease;
}
.tec-events-elementor-event-widget__export-dropdown-button:hover { background: var(--ds-blue) !important; }
.tec-events-elementor-event-widget__export-dropdown-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }

.ds-event-nav {
	max-width: 80rem;
	margin: 0 auto;
	padding: 2rem 1.5rem 4rem;
	border-top: 1px solid var(--ds-line);
	display: flex;
	justify-content: space-between;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.85rem;
}
.tec-events-elementor-event-widget__navigation a { color: var(--ds-blue-bright) !important; text-decoration: none; }
.tec-events-elementor-event-widget__navigation a:hover { color: #fff !important; }

/* =====================================================================
   Events Archive — Loop Grid + Event Card. The grid mechanics
   (columns, gap) come from Elementor's own loop-grid stylesheet; this
   only styles the card itself and its two custom-CSS-class containers.
   ===================================================================== */
.ds-events-archive-grid {
	max-width: 90rem;
	margin: 0 auto;
	padding: 4rem 1.5rem 5rem;
}
@media (min-width: 640px) { .ds-events-archive-grid { padding: 5rem 2rem 6rem; } }

/* This container's own html_tag is set to "a" with a dynamic Post URL
   link (see Event_Card template build script), so .ds-event-card is
   itself the whole card's clickable anchor — no overlay trick needed. */
.ds-event-card {
	display: block;
	text-decoration: none;
	background: var(--ds-card);
	border: 1px solid var(--ds-line);
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;
	cursor: pointer;
}
.ds-event-card:hover { border-color: var(--ds-blue-dark); transform: translateY(-4px); }

.ds-event-card__media { position: relative; height: 12rem; overflow: hidden; }
.ds-event-card__media .tec-events-elementor-event-widget__image,
.ds-event-card__media .tec-events-elementor-event-widget__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ds-event-card__body { padding: 1.5rem; }
.ds-event-card__body .tec-events-elementor-event-widget__title {
	font-size: 1.375rem;
	margin: 0 0 0.5rem;
}
.ds-event-card__body .tec-events-elementor-event-widget__datetime-wrapper,
.ds-event-card__body .tec-events-elementor-event-widget__datetime {
	justify-content: flex-start;
	font-size: 0.85rem;
	margin: 0;
}

/* =====================================================================
   Events listing (/events/) — restyles The Events Calendar's native
   List/Month/Day views via CSS only, keeping all native search, filter
   and pagination functionality intact (no custom PHP, no replaced
   templates). Scoped to body.post-type-archive-tribe_events so it can
   never leak onto other WordPress archive pages (blog categories, etc.)
   that happen to share the same generic Elementor Archive template.

   Root-cause note: the page's own light gray background, the
   ".eventsHeader" gradient banner, and the white boxed ".tribe-events-
   single" card all come from a pre-existing Customizer "Additional CSS"
   entry (post ID 154, hello-theme-child-master), not from The Events
   Calendar itself — confirmed by reading its actual saved content.
   ===================================================================== */
body.post-type-archive-tribe_events #tribe-events-pg-template,
body.single-tribe_events #tribe-events-pg-template,
body.single-tribe_events .tribe-events-pg-template {
	background: var(--ds-black) !important;
	padding-bottom: 0 !important;
}

/* The events-bar wrapper (search input + button + view-selector tabs)
   ships its own white background that bleeds through as a border around
   the dark search/tab elements sitting inside it. */
body.post-type-archive-tribe_events .tribe-events-c-events-bar {
	background: transparent !important;
	border: none !important;
	gap: 1rem;
}
body.post-type-archive-tribe_events .tribe-events-c-events-bar__search {
	background: transparent !important;
}
body.post-type-archive-tribe_events .tribe-events-c-events-bar__search-container {
	background: var(--ds-charcoal) !important;
	border-radius: 0.5rem;
	padding-right: 0.75rem !important;
}
body.post-type-archive-tribe_events .tribe-events-c-events-bar__views {
	background: transparent !important;
	margin-left: 1rem;
}

/* "Latest Past Events" cards: the featured-image wrapper has 24px of
   built-in horizontal padding and object-fit:fill, leaving a visible gap
   next to the card edge and stretching the photo. */
body.post-type-archive-tribe_events .tribe-events-calendar-latest-past__event-featured-image-wrapper {
	padding: 0 !important;
}
body.post-type-archive-tribe_events .tribe-events-calendar-latest-past__event-featured-image {
	object-fit: cover !important;
	width: 100% !important;
	height: 100% !important;
}

/* TEC's own V2 views are built on a small set of root CSS custom
   properties that everything else derives from (confirmed via
   variables-skeleton.css) — overriding these ~25 tokens restyles the
   vast majority of the page instead of fighting 100+ component rules
   one at a time. */
body.post-type-archive-tribe_events .tribe-common {
	--tec-color-text-primary: #ffffff;
	--tec-color-text-secondary: #9aa0a6;
	--tec-color-text-disabled: #6b7280;
	--tec-color-icon-primary: #9aa0a6;
	--tec-color-icon-primary-alt: #9aa0a6;
	--tec-color-icon-secondary: #6b7280;
	--tec-color-icon-active: #ffffff;
	--tec-color-icon-focus: var(--ds-blue-bright);
	--tec-color-accent-primary: var(--ds-blue-dark);
	--tec-color-accent-primary-hover: var(--ds-blue);
	--tec-color-accent-primary-active: var(--ds-blue);
	--tec-color-accent-primary-background: rgba(27, 1, 196, 0.12);
	--tec-color-accent-secondary: var(--ds-charcoal);
	--tec-color-accent-secondary-hover: #232323;
	--tec-color-accent-secondary-active: #232323;
	--tec-color-accent-secondary-background: rgba(255,255,255,0.05);
	--tec-color-border-default: var(--ds-line-soft);
	--tec-color-border-secondary: var(--ds-line);
	--tec-color-border-tertiary: #4b5563;
	--tec-color-border-hover: var(--ds-blue-bright);
	--tec-color-border-active: #ffffff;
	--tec-color-background: var(--ds-charcoal);
	--tec-color-background-secondary: #1f1f1f;
	--tec-color-background-secondary-hover: #232323;
	--tec-color-background-messages: rgba(255,255,255,0.06);
	--tec-color-background-view-selector-tabs: var(--ds-charcoal);
	--tec-color-background-secondary-datepicker: #1f1f1f;
	--tec-color-background-events-bar-submit-button: var(--ds-blue-dark);
	--tec-color-background-events-bar-submit-button-hover: var(--ds-blue);
	--tec-color-text-events-bar-submit-button: #ffffff;
	--tec-color-text-events-title: #ffffff;
	--tec-color-link-primary: #ffffff;
	--tec-color-link-accent: var(--ds-blue-bright);
	/* Not part of the ~25 root tokens, but left at their light-theme
	   defaults (near-white background, dark text) they make the view
	   selector's hover state unreadable — a white tab with dark text
	   over a dark page. */
	--tec-color-background-view-selector-list-item-hover: #232323;
	--tec-color-text-view-selector-list-item-hover: #ffffff;
}

/* The active-tab underline reuses --tec-color-accent-secondary, which we
   set to the same charcoal as the tab panel itself — making the "active"
   indicator nearly invisible and look like a stray disconnected sliver.
   Give it its own visible accent instead of touching accent-secondary
   globally (that variable is also used elsewhere). */
body.post-type-archive-tribe_events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link:after {
	background-color: var(--ds-blue-bright) !important;
}

body.post-type-archive-tribe_events .tribe-events-view {
	background: var(--ds-black) !important;
}

body.post-type-archive-tribe_events .tribe-events-calendar-list__event-title,
body.post-type-archive-tribe_events .tribe-events-calendar-latest-past__event-title,
body.post-type-archive-tribe_events .tribe-events-header__title-text {
	font-family: var(--ds-font-display) !important;
	text-transform: uppercase;
}
body.post-type-archive-tribe_events .tribe-common-h3,
body.post-type-archive-tribe_events .tribe-common-h4,
body.post-type-archive-tribe_events .tribe-common-h5,
body.post-type-archive-tribe_events .tribe-common-h6 {
	font-family: var(--ds-font-head) !important;
}

body.post-type-archive-tribe_events .tribe-events-c-search__input {
	background: var(--ds-charcoal) !important;
	border-color: var(--ds-line-soft) !important;
	color: #fff !important;
}
body.post-type-archive-tribe_events .tribe-events-c-search__input:focus {
	outline: none !important;
	border-color: var(--ds-blue-bright) !important;
	box-shadow: none !important;
}
body.post-type-archive-tribe_events .tribe-events-c-search__button {
	text-transform: uppercase;
	font-family: var(--ds-font-head) !important;
}

body.post-type-archive-tribe_events .tribe-events-c-view-selector,
body.post-type-archive-tribe_events .tribe-events-c-view-selector__content {
	background: var(--ds-charcoal) !important;
	border: 1px solid var(--ds-line-soft);
}
body.post-type-archive-tribe_events .tribe-events-c-view-selector--tabs a,
body.post-type-archive-tribe_events .tribe-events-c-view-selector__list-item-link,
body.post-type-archive-tribe_events .tribe-events-c-view-selector__list-item-text {
	font-family: var(--ds-font-head) !important;
	text-transform: uppercase;
	color: #9aa0a6 !important;
}
body.post-type-archive-tribe_events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
body.post-type-archive-tribe_events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text,
body.post-type-archive-tribe_events .tribe-events-c-view-selector__list-item-link:hover,
body.post-type-archive-tribe_events .tribe-events-c-view-selector__list-item-link:hover .tribe-events-c-view-selector__list-item-text {
	color: #fff !important;
}

body.post-type-archive-tribe_events .tribe-events-calendar-list__event,
body.post-type-archive-tribe_events .tribe-events-calendar-latest-past__event {
	background: var(--ds-card) !important;
	border: 1px solid var(--ds-line) !important;
}
body.post-type-archive-tribe_events .tribe-events-calendar-list__event-cost,
body.post-type-archive-tribe_events .tec-events-c-small-cta {
	background: rgba(255, 184, 0, 0.12) !important;
	color: var(--ds-gold) !important;
}
body.post-type-archive-tribe_events .tribe-events-calendar-list__event-date-tag-daynum,
body.post-type-archive-tribe_events .tribe-events-calendar-list__event-date-tag-weekday {
	color: var(--ds-blue-bright) !important;
}

/* "Upcoming"/date-range jump-to-date popup on the List/Month/Day views
   — this is the third-party bootstrap-datepicker library (confirmed via
   live DOM inspection: .datepicker.datepicker-dropdown.dropdown-menu),
   not one of TEC's own React components, so it ships zero dark-theme
   awareness and none of the --tec-color-* tokens above touch it. */
body.post-type-archive-tribe_events .datepicker.datepicker-dropdown {
	background: var(--ds-charcoal) !important;
	border: 1px solid var(--ds-line-soft) !important;
	border-radius: 0.5rem;
	box-shadow: 0 12px 32px rgba(0,0,0,0.5);
	padding: 0.75rem;
	font-family: var(--ds-font-body);
	z-index: 20;
}
body.post-type-archive-tribe_events .datepicker table { width: 100%; }
body.post-type-archive-tribe_events .datepicker table tr td,
body.post-type-archive-tribe_events .datepicker table tr th {
	width: 2.25rem;
	height: 2.25rem;
	text-align: center;
	border-radius: 0.375rem;
}
body.post-type-archive-tribe_events .datepicker .datepicker-switch {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #fff !important;
	font-weight: 600;
}
body.post-type-archive-tribe_events .datepicker .prev,
body.post-type-archive-tribe_events .datepicker .next {
	color: var(--ds-blue-bright) !important;
	font-size: 1rem;
}
body.post-type-archive-tribe_events .datepicker .prev.disabled,
body.post-type-archive-tribe_events .datepicker .next.disabled {
	color: #4b5563 !important;
	opacity: 0.5;
}
body.post-type-archive-tribe_events .datepicker .datepicker-switch:hover,
body.post-type-archive-tribe_events .datepicker .prev:hover,
body.post-type-archive-tribe_events .datepicker .next:hover {
	background: var(--ds-line-soft) !important;
	cursor: pointer;
}
body.post-type-archive-tribe_events .datepicker .dow {
	color: #9aa0a6 !important;
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.03em;
	border-bottom: 1px solid var(--ds-line);
	padding-bottom: 0.5rem;
}
body.post-type-archive-tribe_events .datepicker .day {
	color: #fff;
	cursor: pointer;
}
body.post-type-archive-tribe_events .datepicker .day:hover {
	background: var(--ds-line-soft) !important;
}
body.post-type-archive-tribe_events .datepicker .day.old,
body.post-type-archive-tribe_events .datepicker .day.new {
	color: #4b5563 !important;
}
body.post-type-archive-tribe_events .datepicker .day.past:not(.old):not(.new) {
	color: #9aa0a6;
}
body.post-type-archive-tribe_events .datepicker .day.today {
	background: rgba(27, 1, 196, 0.25) !important;
	color: #fff !important;
}
body.post-type-archive-tribe_events .datepicker .day.active,
body.post-type-archive-tribe_events .datepicker .day.active.current {
	background: var(--ds-blue-bright) !important;
	color: #fff !important;
	font-weight: 600;
}
body.post-type-archive-tribe_events .datepicker .day.disabled {
	color: #374151 !important;
	cursor: not-allowed;
}

/* =====================================================================
   Business Blog — index page (native Elementor Posts widget, cards
   skin) and the new minimal Single Post template. Both use Elementor's
   own real output classes, confirmed by rendering a live post and
   inspecting actual markup rather than guessing.
   ===================================================================== */
.ds-blog-grid {
	max-width: 90rem;
	margin: 0 auto;
	padding: 4rem 1.5rem 5rem;
}
@media (min-width: 640px) { .ds-blog-grid { padding: 5rem 2rem 6rem; } }

.ds-blog-grid .elementor-posts-container { gap: 2rem; }
.ds-blog-grid .elementor-post__avatar { display: none; }
.ds-blog-grid .elementor-post__card {
	background: var(--ds-card) !important;
	border: 1px solid var(--ds-line) !important;
	box-shadow: none !important;
	transition: border-color .2s ease, transform .2s ease;
}
.ds-blog-grid .elementor-post__card:hover {
	border-color: var(--ds-blue-dark) !important;
	transform: translateY(-4px);
}
.ds-blog-grid .elementor-post__thumbnail__link,
.ds-blog-grid .elementor-post__thumbnail img { width: 100%; object-fit: cover; }
.ds-blog-grid .elementor-post__title,
.ds-blog-grid .elementor-post__title a {
	font-family: var(--ds-font-display) !important;
	text-transform: uppercase;
	color: #fff !important;
}
.ds-blog-grid .elementor-post__excerpt,
.ds-blog-grid .elementor-post__excerpt p {
	font-family: var(--ds-font-body);
	color: #9aa0a6 !important;
}
.ds-blog-grid .elementor-post__meta-data,
.ds-blog-grid .elementor-post-date {
	font-family: var(--ds-font-head);
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: #6b7280 !important;
}
.ds-blog-grid .elementor-post__read-more {
	font-family: var(--ds-font-head) !important;
	text-transform: uppercase;
	color: var(--ds-blue-bright) !important;
}

/* Single Post template */
.ds-blog-post-hero {
	position: relative;
	background: var(--ds-black);
	overflow: hidden;
	height: 320px;
}
@media (min-width: 640px) { .ds-blog-post-hero { height: 420px; } }
.ds-blog-post-hero .elementor-widget-theme-post-featured-image,
.ds-blog-post-hero .elementor-widget-theme-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ds-blog-post-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.9) 100%);
	pointer-events: none;
}

.ds-blog-post-title-band {
	max-width: 60rem;
	margin: 0 auto;
	padding: 3rem 1.5rem 2rem;
	text-align: center;
}
.ds-blog-post-title-band .elementor-heading-title {
	font-family: var(--ds-font-display) !important;
	text-transform: uppercase;
	color: #fff !important;
	font-size: 2.25rem;
	line-height: 1.1;
}
@media (min-width: 640px) { .ds-blog-post-title-band .elementor-heading-title { font-size: 3rem; } }

.ds-blog-post-body {
	max-width: 48rem;
	margin: 0 auto;
	padding: 0 1.5rem 5rem;
}
.ds-blog-post-body .elementor-widget-theme-post-content {
	font-family: var(--ds-font-body);
	font-size: 1.05rem;
	line-height: 1.75;
	color: #d1d5db !important;
}
.ds-blog-post-body .elementor-widget-theme-post-content h1,
.ds-blog-post-body .elementor-widget-theme-post-content h2,
.ds-blog-post-body .elementor-widget-theme-post-content h3 {
	font-family: var(--ds-font-display) !important;
	text-transform: uppercase;
	color: #fff !important;
}
.ds-blog-post-body .elementor-widget-theme-post-content a { color: var(--ds-blue-bright) !important; }
.ds-blog-post-body .elementor-widget-theme-post-content img { max-width: 100%; height: auto; }

/* Become a Sponsor popup logo — the uploaded source is a large flat
   lockup (1307x559), so cap its display height to sit cleanly above the
   "Become a Sponsor" heading instead of dominating the modal. */
.ds-popup-logo { margin-bottom: 1.5rem; }
.ds-popup-logo img { max-height: 2.5rem; width: auto; margin: 0 auto; }