/**
 * Dunrobin Events — front-end styles.
 *
 * Values come from the Dunrobin design system (Bebas Neue display type,
 * Georgia body, gold #A3814A, charcoal, warm cream panels with hairline
 * rules). They're exposed as custom properties on every .dre-* root so a
 * redesign can retheme from one place, or override them from the theme.
 *
 * Layout switches from stacked (mobile) to side by side at 1200px, matching
 * the design's breakpoint.
 */

.dre-hero,
.dre-feed,
.dre-events,
.dre-outro,
.dre-single,
.dre-details {
	--dre-gold: #a3814a;
	--dre-cta-hover: #1c1c1c; /* site-wide gold CTA hover (agraria-child) */
	--dre-gold-light: #edcf89;
	--dre-ink: #1a1a1a;
	--dre-text: #2b2b2b;
	--dre-cream: #ece5d5;
	--dre-paper: #f8f5eb;
	--dre-line: #d9d0bb;
	--dre-line-dark: rgba(248, 245, 235, 0.14);
	--dre-heading-font: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
	--dre-body-font: Georgia, "Times New Roman", serif;
	--dre-accent-font: "Crimson Pro", Georgia, serif;
}

.dre-icon {
	flex: none;
	color: var(--dre-gold);
}

/* Gold bar rule under display titles. */
.dre-rule {
	display: block;
	width: 87px;
	height: 5px;
	background: var(--dre-gold);
}

/* Bebas title + rule lockup. */
.dre-page-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.dre-page-title--center {
	align-items: center;
	text-align: center;
}

.dre-page-title .dre-page-title__heading {
	margin: 0;
	font-family: var(--dre-heading-font);
	font-size: 60px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--dre-text);
}

@media (max-width: 1199px) {
	.dre-page-title .dre-page-title__heading {
		font-size: 48px;
	}
}

/* Primary button: gold, turning charcoal on hover like the site's other
   gold CTAs (.qodef-button filled in the child theme). */
.dre-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	box-sizing: border-box;
	padding: 19px 44px 17px;
	border: 1px solid var(--dre-gold);
	border-radius: 0;
	background: var(--dre-gold);
	color: var(--dre-paper) !important;
	font-family: var(--dre-heading-font);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
}

.dre-button:hover,
.dre-button:focus-visible {
	background: var(--dre-cta-hover);
	border-color: var(--dre-cta-hover);
}

.dre-button--disabled,
.dre-button--disabled:hover {
	background: var(--dre-gold);
	border-color: var(--dre-gold);
	opacity: 0.45;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* Events page hero — [dunrobin_events_hero]                           */
/* ------------------------------------------------------------------ */

.dre-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	background: var(--dre-ink);
	color: var(--dre-paper);
}

.dre-hero__media {
	position: relative;
	min-height: 420px;
}

.dre-hero .dre-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 46% 61%;
	-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.dre-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	padding: 8px 24px 72px;
	font-family: var(--dre-body-font);
	font-size: 18px;
	line-height: 32px;
}

.dre-hero p {
	margin: 0;
	color: var(--dre-paper);
}

.dre-hero__heading {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.dre-hero .dre-hero__title {
	margin: 0;
	font-family: var(--dre-heading-font);
	font-size: 80px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--dre-paper);
}

.dre-hero__intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 620px;
	text-wrap: pretty;
}

.dre-hero__where {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 680px;
	margin-top: 12px;
}

.dre-hero .dre-hero__subtitle {
	margin: 0;
	font-family: var(--dre-heading-font);
	font-size: 36px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--dre-gold-light);
}

.dre-hero .dre-hero__places {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	column-gap: 32px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	box-shadow: inset 0 1px 0 var(--dre-line-dark);
	font-size: 17px;
	line-height: 24px;
}

.dre-hero .dre-hero__places li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 12px 0;
	box-shadow: inset 0 -1px 0 var(--dre-line-dark);
}

.dre-hero__places .dre-icon {
	color: var(--dre-gold-light);
}

.dre-hero .dre-hero__tagline {
	margin-top: 12px;
	font-family: var(--dre-accent-font);
	font-size: 20px;
	font-style: italic;
	line-height: 30px;
	color: var(--dre-gold-light);
	text-wrap: pretty;
}

@media (min-width: 1200px) {
	.dre-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		min-height: 720px;
	}

	.dre-hero__media {
		order: 2;
		min-height: 0;
	}

	.dre-hero .dre-hero__img {
		object-position: 50% 40%;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%);
		mask-image: linear-gradient(to right, transparent 0%, #000 30%);
	}

	.dre-hero__content {
		padding: 72px 40px 72px 160px;
	}
}

/* ------------------------------------------------------------------ */
/* Listing — [dunrobin_events]                                         */
/* ------------------------------------------------------------------ */

.dre-feed {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 56px;
	max-width: 1200px;
	margin: 0 auto;
}

.dre-events {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

.dre-events--cols-2 { --dre-cols: 2; }
.dre-events--cols-3 { --dre-cols: 3; }
.dre-events--cols-4 { --dre-cols: 4; }

@media (min-width: 1200px) {
	.dre-events--grid.dre-events--multi {
		grid-template-columns: repeat(var(--dre-cols, 1), minmax(0, 1fr));
	}
}

/* Side gutters on mobile so cards and copy don't touch the screen edges. */
@media (max-width: 1199px) {
	.dre-feed,
	.dre-outro {
		padding-left: 24px;
		padding-right: 24px;
	}
}

.dre-events__empty {
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--dre-body-font);
	font-size: 18px;
	font-style: italic;
	text-align: center;
	color: var(--dre-text);
}

/* ------------------------------------------------------------------ */
/* Card                                                                */
/* ------------------------------------------------------------------ */

/* Default: image beside text, wrapping to image-over-text when narrow. In a
   multi-column grid on desktop, cards stack (see below). */
.dre-card {
	height: 100%;
	overflow: hidden;
	border-radius: 2px;
	background: var(--dre-cream);
}

.dre-card__link {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	height: 100%;
	color: var(--dre-text);
	text-decoration: none !important;
}

/* The whole card is one link, so the theme's link hover colour would recolour
   every line of text. Hold the text colours steady — on hover only the image
   zooms and the button changes colour. */
.dre-events .dre-card__link:hover,
.dre-events .dre-card__link:focus,
.dre-events .dre-card__link:focus-visible {
	color: var(--dre-text);
}

/* Nothing in the card is bold. The card is one link, and the theme's link
   weight would otherwise carry into every line (and fake-bold Bebas Neue,
   which only ships regular). */
.dre-events .dre-card__link,
.dre-events .dre-card__link * {
	font-weight: 400;
	font-synthesis: none;
}

.dre-card__media {
	position: relative;
	min-height: 360px;
	overflow: hidden;
	background: var(--dre-ink);
}

.dre-card .dre-card__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.4s ease-out;
}

.dre-card__link:hover .dre-card__img,
.dre-card__link:focus-visible .dre-card__img {
	transform: scale(1.05);
}

.dre-card__badge {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12px 18px;
	background: var(--dre-ink);
	color: var(--dre-paper);
	font-family: var(--dre-heading-font);
	line-height: 1;
	text-transform: uppercase;
}

.dre-card__badge-month {
	font-size: 20px;
	color: var(--dre-gold-light);
}

.dre-card__badge-day {
	font-size: 44px;
}

.dre-card__flag {
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px 16px 8px;
	background: var(--dre-gold);
	color: var(--dre-paper);
	font-family: var(--dre-heading-font);
	font-size: 22px;
	line-height: 1;
	text-transform: uppercase;
}

.dre-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: 48px 56px;
}

.dre-card .dre-card__title {
	margin: 0;
	font-family: var(--dre-heading-font);
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--dre-text);
}

.dre-card .dre-card__meta {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	box-shadow: inset 0 1px 0 var(--dre-line);
	color: var(--dre-text);
	font-family: var(--dre-body-font);
	font-size: 17px;
	line-height: 24px;
}

.dre-card .dre-card__meta li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 10px 0;
	box-shadow: inset 0 -1px 0 var(--dre-line);
}

.dre-card .dre-card__excerpt {
	margin: 0;
	font-family: var(--dre-body-font);
	font-size: 18px;
	line-height: 32px;
	color: var(--dre-text);
	text-wrap: pretty;
}

.dre-card__link:hover .dre-card__button,
.dre-card__link:focus-visible .dre-card__button {
	background: var(--dre-cta-hover);
	border-color: var(--dre-cta-hover);
}

.dre-card--sold-out .dre-card__img {
	filter: grayscale(0.6);
}

@media (max-width: 1199px) {
	.dre-card__body {
		padding: 32px 24px;
	}
}

/* Several events side by side on desktop: image over text, buttons lined up
   along the bottom. */
@media (min-width: 1200px) {
	.dre-events--grid.dre-events--multi:not(.dre-events--cols-1) .dre-card__link {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 320px 1fr;
	}

	.dre-events--grid.dre-events--multi:not(.dre-events--cols-1) .dre-card__media {
		min-height: 320px;
	}

	.dre-events--grid.dre-events--multi:not(.dre-events--cols-1) .dre-card__body {
		justify-content: flex-start;
		padding: 40px 40px 48px;
	}

	.dre-events--grid.dre-events--multi:not(.dre-events--cols-1) .dre-card__button {
		margin-top: auto;
	}
}

/* ------------------------------------------------------------------ */
/* Closing copy — [dunrobin_events_outro]                              */
/* ------------------------------------------------------------------ */

.dre-outro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 32px 80px;
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 16px;
}

.dre-outro__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.dre-outro .dre-outro__heading {
	margin: 0;
	font-family: var(--dre-heading-font);
	font-size: 36px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--dre-text);
}

.dre-outro p {
	margin: 0;
	font-family: var(--dre-body-font);
	font-size: 17px;
	line-height: 28px;
	color: var(--dre-text);
	text-wrap: pretty;
}

.dre-outro .dre-outro__link {
	margin-top: 8px;
	font-family: var(--dre-body-font);
	font-size: 18px;
	line-height: 28px;
	color: var(--dre-gold);
	text-decoration: none;
}

.dre-outro .dre-outro__link:hover,
.dre-outro .dre-outro__link:focus-visible {
	color: var(--dre-gold);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Single event page                                                   */
/* ------------------------------------------------------------------ */

.dre-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"header"
		"main"
		"aside";
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 40px;
}

@media (min-width: 1200px) {
	.dre-single {
		padding-top: 72px;
		grid-template-columns: minmax(0, 1fr) 380px;
		grid-template-areas:
			"header header"
			"main   aside";
		gap: 40px 56px;
		align-items: start;
	}
}

.dre-single__header { grid-area: header; }
.dre-single__main   { grid-area: main; }
.dre-single__aside  { grid-area: aside; }

.dre-single__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

.dre-single .dre-single__back {
	font-family: var(--dre-heading-font);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0;
	font-synthesis: none;
	line-height: 1;
	text-transform: uppercase;
	color: var(--dre-gold);
	text-decoration: none;
}

.dre-single .dre-single__back:hover,
.dre-single .dre-single__back:focus-visible {
	color: var(--dre-gold);
	text-decoration: underline;
}

/* The template renders its own title and slider (the slider shows the
   featured image); hide the theme's byline, title and featured image, plus
   its share links (also switched off in PHP — this catches any the theme
   prints without checking the option). */
.dre-single-page .type-dunrobin_event .qodef-e-top-holder,
.dre-single-page .type-dunrobin_event .qodef-e-media,
.dre-single-page .type-dunrobin_event .qodef-e-title:not(.dre-single__title),
.dre-single-page .type-dunrobin_event .qodef-e-info-social-share,
.dre-single-page .type-dunrobin_event .qodef-social-share {
	display: none !important;
}

.dre-single__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

.dre-single__about {
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-family: var(--dre-body-font);
	font-size: 18px;
	line-height: 32px;
	color: var(--dre-text);
	text-wrap: pretty;
}

.dre-single__about > * {
	margin-top: 0;
	margin-bottom: 0;
}

.dre-single .dre-single__about-heading {
	margin: 0;
	font-family: var(--dre-heading-font);
	font-size: 36px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--dre-text);
}

.dre-single__about iframe,
.dre-single__about video,
.dre-single__about img {
	max-width: 100%;
}

@media (min-width: 1200px) {
	.dre-single__aside {
		position: sticky;
		top: 110px; /* clears the fixed 85px header */
	}
}

/* ------------------------------------------------------------------ */
/* Image slider                                                        */
/* ------------------------------------------------------------------ */

.dre-slider {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dre-slider__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 2px;
	background: var(--dre-ink);
}

.dre-slider__track {
	display: flex;
	height: 100%;
	transition: transform 450ms ease;
}

.dre-slider__slide {
	flex: 0 0 100%;
	height: 100%;
}

.dre-slider .dre-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.dre-slider__nav {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
}

.dre-slider .dre-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--dre-ink);
	color: var(--dre-paper);
	cursor: pointer;
	transition: background-color 180ms ease;
}

.dre-slider .dre-slider__arrow + .dre-slider__arrow {
	box-shadow: inset 1px 0 0 rgba(248, 245, 235, 0.16);
}

.dre-slider .dre-slider__arrow:hover,
.dre-slider .dre-slider__arrow:focus-visible {
	background: var(--dre-gold);
	color: var(--dre-paper);
}

.dre-slider__dots {
	display: flex;
	gap: 8px;
}

.dre-slider .dre-slider__dot {
	width: 32px;
	height: 5px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--dre-line);
	cursor: pointer;
}

.dre-slider .dre-slider__dot.is-active {
	background: var(--dre-gold);
}

@media (prefers-reduced-motion: reduce) {
	.dre-slider__track,
	.dre-card .dre-card__img {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Details panel                                                       */
/* ------------------------------------------------------------------ */

.dre-details {
	padding: 41px 32px 32px;
	border-radius: 2px;
	background: var(--dre-cream);
	box-shadow: inset 0 5px 0 var(--dre-gold);
	color: var(--dre-text);
	font-family: var(--dre-body-font);
	font-size: 17px;
	line-height: 26px;
}

.dre-details .dre-details__heading {
	margin: 0 0 8px;
	font-family: var(--dre-heading-font);
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--dre-text);
}

.dre-details__list {
	margin: 0;
}

.dre-details__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 0;
	box-shadow: inset 0 -1px 0 var(--dre-line);
}

.dre-details__row:last-child {
	padding-bottom: 0;
	box-shadow: none;
}

.dre-details .dre-details__row dt {
	margin: 0;
	font-family: var(--dre-heading-font);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--dre-gold);
}

.dre-details .dre-details__row dd {
	margin: 0;
}

.dre-details .dre-details__map {
	display: flex;
	width: 100%;
	margin-top: 16px;
}

.dre-details__includes {
	margin: 0;
	padding: 0 0 0 18px;
}

.dre-details__includes li {
	margin: 0;
}

.dre-details__dates {
	margin-top: 18px;
	padding-top: 18px;
	box-shadow: inset 0 1px 0 var(--dre-line);
}

.dre-details .dre-details__dates h3 {
	margin: 0 0 8px;
	font-family: var(--dre-heading-font);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--dre-gold);
}

.dre-details__dates ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dre-details__dates li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 10px;
	margin: 0;
	padding: 4px 0;
}

.dre-details__dates li span {
	color: rgba(26, 23, 20, 0.66);
}

.dre-details__actions {
	margin-top: 24px;
}

.dre-details__actions .dre-button {
	display: flex;
	width: 100%;
}

.dre-details__notice {
	margin: 0;
	font-style: italic;
	color: rgba(26, 23, 20, 0.66);
}