/* Sands Suites Experiences Calendar — front end.
   Palette and fonts taken from the site's Elementor global kit (.elementor-kit-5).
   Note: the kit's four *named* colour slots are still Elementor defaults and are
   not brand colours - the real palette lives in its hash-suffixed custom slots. */

.sve {
	/* Terracotta is the Sands accent - it carries buttons, badges and labels. */
	--sve-brand: #D6703A;
	--sve-brand-soft: #E8C4AC;

	/* Text sitting on a terracotta panel (the featured ritual block). */
	--sve-on-brand: #FFFFFF;

	--sve-taupe: #776E64;
	--sve-ink: #3F444B;   /* measured from sands.mu headings */
	--sve-body: #5C5C5C;  /* measured from sands.mu paragraphs */
	--sve-rule: #E5E0DA;
	--sve-paper: #FFFFFF;
	--sve-paper-alt: #FAF7F4;

	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 96px;
	color: var(--sve-body);
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

.sve *,
.sve *::before,
.sve *::after { box-sizing: border-box; }

/* ---------- Hero ---------- */

.sve-hero {
	text-align: center;
	padding: 72px 0 56px;
	border-bottom: 1px solid var(--sve-rule);
	margin-bottom: 64px;
}

.sve-hero__eyebrow {
	margin: 0 0 18px;
	font-size: 12px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--sve-brand);
}

.sve-hero__title {
	margin: 0;
	font-size: clamp(34px, 5vw, 52px);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.15;
	color: var(--sve-ink);
}

.sve-hero__season {
	margin: 16px 0 0;
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sve-taupe);
}

.sve-hero__intro {
	max-width: 720px;
	margin: 32px auto 0;
	font-size: 17px;
	line-height: 1.85;
}

/* ---------- Sections ---------- */

.sve-section,
.sve-month { margin-bottom: 64px; }

.sve-section__title,
.sve-month__title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--sve-ink);
}

.sve-month__title {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--sve-rule);
	margin-bottom: 28px;
	font-size: 15px;
}

.sve-section__note {
	margin: 0 0 28px;
	font-size: 15px;
	font-style: italic;
	color: var(--sve-body);
}

.sve-section__title + .sve-card { margin-top: 28px; }

.sve-month__ritual {
	margin: 0 0 28px;
	padding-left: 18px;
	border-left: 2px solid var(--sve-brand-soft);
	font-size: 15px;
	color: var(--sve-brand);
}

/* ---------- Event card ---------- */

.sve-card {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 0;
	border: 1px solid var(--sve-rule);
	background: var(--sve-paper);
	margin-bottom: 20px;
}

.sve-card.is-featured {
	border-color: var(--sve-brand);
	box-shadow: 0 2px 24px rgba(214, 112, 58, 0.10);
}

.sve-card__when {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 34px 20px;
	background: var(--sve-paper-alt);
	border-right: 1px solid var(--sve-rule);
	text-align: center;
}

.sve-card.is-featured .sve-card__when {
	background: var(--sve-brand);
	border-right-color: var(--sve-brand);
}

.sve-card__when span {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--sve-ink);
}

.sve-card.is-featured .sve-card__when span { color: var(--sve-on-brand); }

.sve-card__body { padding: 32px 36px; }

.sve-card__title {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: var(--sve-ink);
}

.sve-card__details {
	margin: 0 0 18px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sve-brand);
}

.sve-card__image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 20px;
}

.sve-card__text p { margin: 0 0 14px; }
.sve-card__text p:last-child { margin-bottom: 0; }

.sve-card__note {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--sve-rule);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--sve-taupe);
}

.sve-sep { margin: 0 10px; opacity: 0.55; }

.sve-footnote {
	margin: 48px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--sve-rule);
	font-size: 13px;
	font-style: italic;
	color: var(--sve-body);
}

/* ---------- Small screens ---------- */

@media (max-width: 782px) {
	.sve { padding: 0 18px 64px; }
	.sve-hero { padding: 48px 0 40px; margin-bottom: 48px; }

	.sve-card { grid-template-columns: 1fr; }

	.sve-card__when {
		justify-content: flex-start;
		padding: 16px 24px;
		border-right: 0;
		border-bottom: 1px solid var(--sve-rule);
		text-align: left;
	}

	.sve-card.is-featured .sve-card__when { border-bottom-color: var(--sve-brand); }

	.sve-card__body { padding: 24px; }
	.sve-card__title { font-size: 21px; }

	.sve-card__details .sve-sep,
	.sve-card__note .sve-sep { margin: 0 7px; }
}

@media print {
	.sve-card { break-inside: avoid; }
}
/* Sands Experiences - picture styles (card media, banner, empty state) */

/*
 * Only the extra tokens the picture styles need. Everything else is already
 * defined on .sve - redeclaring it here is what kept the old palette alive,
 * because these two blocks set the same names to different values.
 */
.sve {
	/* Empty-state wash. Warm neutral, deliberately not beige: the Sands site
	   has no sand tones, and six placeholders in a row must stay quiet. */
	--sve-empty-1:  #F0EDEA;
	--sve-empty-2:  #DCD5CE;
}

/* ---------------------------------------------------------------- card media */

.sve-card__media {
	position: relative;
	aspect-ratio: 3 / 2;          /* matches the sve_event_card crop */
	overflow: hidden;
	background: var(--sve-empty-1);
	border-radius: 2px;
}

.sve-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .9s cubic-bezier(.2,.6,.2,1);
}

.sve-card:hover .sve-card__media img { transform: scale(1.04); }

/* ------------------------------------------------------------------- banner */

.sve-banner {
	position: relative;
	aspect-ratio: 9 / 4;          /* matches the sve_event_banner crop */
	overflow: hidden;
	background: var(--sve-empty-1);
}

.sve-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------- empty state */
/* Deliberate, not broken: several events launch before a photo exists. */

.sve-media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
		linear-gradient(160deg, var(--sve-empty-1) 0%, var(--sve-empty-2) 100%);
}

.sve-media--empty::after {
	/* horizon line, echoing the lagoon */
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	top: 62%;
	height: 1px;
	background: rgba(63,68,75,.14);
}

.sve-media__initial {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: clamp(2.5rem, 6vw, 4rem);
	line-height: 1;
	color: rgba(63,68,75,.22);
	letter-spacing: .04em;
	user-select: none;
}

/* --------------------------------------------------- admin list "no picture" */

.column-sve_picture { width: 76px; }
.column-sve_picture img { width: 60px; height: 40px; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
	.sve-card__media img { transition: none; }
	.sve-card:hover .sve-card__media img { transform: none; }
}

/* ------------------------------------------------------------ buttons/links */

.sve-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.sve a.sve-btn {
	text-decoration: none;
}

.sve-btn {
	display: inline-block;
	padding: 11px 20px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--sve-brand);
	border-radius: 2px;
	transition: background-color .25s ease, color .25s ease;
}

/* Scoped as `.sve a.sve-btn` (0,2,1) so these beat the Elementor kit's
   `.elementor-kit-6 a` (0,1,1), which otherwise recolours the button text. */
.sve a.sve-btn--primary,
.sve a.sve-btn--primary:link,
.sve a.sve-btn--primary:visited {
	background: var(--sve-brand);
	color: #fff;
}

.sve a.sve-btn--primary:hover,
.sve a.sve-btn--primary:focus {
	background: #B65B2B;
	border-color: #B65B2B;
	color: #fff;
}

.sve a.sve-btn--secondary,
.sve a.sve-btn--secondary:link,
.sve a.sve-btn--secondary:visited {
	background: transparent;
	color: var(--sve-brand);
}

.sve a.sve-btn--secondary:hover,
.sve a.sve-btn--secondary:focus {
	background: var(--sve-brand);
	color: #fff;
}

.sve-btn:focus-visible {
	outline: 2px solid var(--sve-ink);
	outline-offset: 2px;
}

/* Preview-only flag: shown when unpublished events are being displayed. */
.sve-draft-flag{background:#373737;color:#fff;font-size:13px;letter-spacing:.02em;
  padding:11px 18px;margin:0 0 28px;text-align:center}

/* ---------------------------------------------------------------------------
   Desktop scale. Scoped to wide screens only - the narrow layout is unchanged.
   The picture floats beside the copy. Float rather than grid on purpose: the
   card body has a variable number of children (buttons and footnotes are
   optional), and a grid item cannot span implicit rows, which left a gap.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {

	.sve-card__body {
		padding: 28px 32px;
		overflow: hidden;          /* contains the float */
	}

	.sve-card__media {
		float: left;
		width: 300px;
		margin: 4px 28px 14px 0;
	}

	/* A touch less air overall. */
	.sve-hero { padding: 56px 0 44px; }
	.sve-hero__title { font-size: clamp(30px, 3.4vw, 42px); }
	.sve-hero__intro { font-size: 16px; }
	.sve-card__title { font-size: 21px; }
	.sve-card__when { padding: 28px 20px; }
	.sve-section,
	.sve-month { margin-bottom: 48px; }

	/* Buttons clear the picture so they never sit alongside it. */
	.sve-actions { clear: left; }
}

/* The old full-width image rule is superseded by .sve-card__media. */
.sve-card__image { max-width: 300px; }

/* ---------------------------------------------------------------------------
   Filter bar
   --------------------------------------------------------------------------- */
.sve-filters {
	position: sticky;
	top: 0;
	z-index: 5;
	margin: 0 0 40px;
	padding: 16px 0 14px;
	background: var(--sve-paper);
	border-bottom: 1px solid var(--sve-rule);
}

.sve-filters__row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.sve-filters__row::-webkit-scrollbar { display: none; }
.sve-filters__row:last-of-type { margin-bottom: 0; }

.sve-filters__label {
	flex: 0 0 auto;
	padding-right: 4px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--sve-body);
}

.sve .sve-chip {
	flex: 0 0 auto;
	min-height: 40px;
	padding: 10px 15px;
	font-family: inherit;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sve-body);
	background: transparent;
	border: 1px solid var(--sve-rule);
	border-radius: 0;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.sve .sve-chip:hover {
	color: var(--sve-brand);
	border-color: var(--sve-brand);
}

.sve .sve-chip.is-active {
	color: #fff;
	background: var(--sve-brand);
	border-color: var(--sve-brand);
}

.sve .sve-chip:focus-visible {
	outline: 2px solid var(--sve-brand);
	outline-offset: 2px;
}

.sve-filters__count {
	margin: 10px 0 0;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--sve-body);
	font-variant-numeric: tabular-nums;
}

.sve [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.sve .sve-chip { transition: none; }
}

/* Filter bar on narrow screens. Matches the 782px breakpoint and the 18px
   container padding used elsewhere. The bar bleeds to both edges so chips can
   scroll right up to the screen edge instead of being clipped mid-chip. */
@media (max-width: 782px) {

	.sve-filters {
		margin: 0 -18px 28px;
		padding: 12px 18px 10px;
	}

	.sve-filters__row {
		flex-wrap: nowrap;
		margin-bottom: 6px;
	}

	/* Trailing spacer so the last chip never sits flush against the edge. */
	.sve-filters__row::after {
		content: "";
		flex: 0 0 12px;
	}

	/* The visible label goes; each row keeps an aria-label so the meaning
	   survives for screen readers. Buys back ~58px per row. */
	.sve-filters__label { display: none; }

	.sve-filters__row { gap: 6px; }

	.sve .sve-chip {
		min-height: 36px;
		padding: 8px 12px;
		font-size: 10px;
		letter-spacing: 0.1em;
	}

	/* Three-letter month chips do not need word-chip tracking or padding. */
	.sve .sve-chip--month {
		padding: 8px 10px;
		letter-spacing: 0.04em;
		font-size: 10.5px;
	}

	.sve-filters__count {
		margin-top: 8px;
		font-size: 11px;
	}
}

/* Closing note: same scale as the footnote but with no asterisk to align to. */
.sve-footnote--plain {
	margin-top: 6px;
	padding-left: 0;
	color: var(--sve-taupe);
}