.wedding-packages {
	--navy: #051a40;
	--gold: #ca9f3e;
	--gold-light: #c4a46b;
	--cream: #f5f0e8;
	--muted: #8a8a7a;
	--hairline: rgba(196, 164, 107, 0.15);
	--hairline-soft: rgba(196, 164, 107, 0.12);
	background-color: var(--navy);
	padding: 6rem 2rem;
}

.wedding-packages__inner {
	max-width: 1152px;
	margin: 0 auto;
}

.wedding-packages__label {
	margin: 0;
	font-family: "DM Mono", "SFMono-Regular", Menlo, monospace;
	font-size: 0.68rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--gold-light);
}

.wedding-packages__heading {
	margin: 0.7rem 0 0;
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.75rem, 4vw, 2.6rem);
	line-height: 1.2;
	color: var(--cream);
}

/* Heading on the left, optional download button on the right (bottom-
   aligned with the heading); wraps so the button drops underneath on
   narrow screens. */
.wedding-packages__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 2rem;
}

.wedding-packages__download {
	display: inline-block;
	padding: 0.9rem 2rem;
	background-color: var(--gold);
	color: var(--navy);
	font-family: "DM Mono", "SFMono-Regular", Menlo, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.15s ease;
}

.wedding-packages__download:hover,
.wedding-packages__download:focus-visible {
	background-color: #dbb659;
}

.wedding-packages__placeholder {
	margin: 1rem 0 0;
	color: var(--muted);
	font-style: italic;
}

/* --- Tabs -------------------------------------------------------------
   Identical pattern to blocks/club-competitions and
   blocks/visiting-the-club (this block was built to match both): any
   number of tabs can exist, so this is a horizontally-scrollable strip
   rather than something that wraps or squeezes, with script.js showing
   prev/next arrows only once the strip actually overflows. */
.wedding-packages__tabs-wrap {
	display: flex;
	align-items: stretch;
	gap: 0.25rem;
	margin-top: 2rem;
	border-bottom: 1px solid rgba(196, 164, 107, 0.2);
}

.wedding-packages__tabs {
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.wedding-packages__tabs::-webkit-scrollbar {
	display: none;
}

.wedding-packages__tabs-nav {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	margin: 0;
	padding: 0;
	background: rgba(196, 164, 107, 0.08);
	border: none;
	color: var(--gold-light);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.wedding-packages__tabs-nav.is-visible {
	display: flex;
}

.wedding-packages__tabs-nav:hover {
	background: rgba(196, 164, 107, 0.16);
}

.wedding-packages__tabs-nav:disabled {
	opacity: 0.3;
	cursor: default;
	background: rgba(196, 164, 107, 0.08);
}

.wedding-packages__tab {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.85rem 1.5rem;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: "DM Mono", "SFMono-Regular", Menlo, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.wedding-packages__tab:hover {
	color: rgba(245, 240, 232, 0.85);
}

.wedding-packages__tab[aria-selected="true"] {
	color: var(--gold);
	border-bottom-color: var(--gold-light);
}

.wedding-packages__tab:focus-visible {
	outline: 2px solid var(--gold-light);
	outline-offset: -2px;
}

.wedding-packages__empty {
	margin: 1.5rem 0 0;
	padding: 1.75rem;
	border: 1px solid var(--hairline);
	color: var(--muted);
	font-style: italic;
}

/* --- Package grid (2+ tiers side by side) -------------------------------
   The first package is highlighted with a tinted background (matching
   "Diamond" in the design); every other package gets a left divider
   instead — both rules are column-count-agnostic (:first-child /
   :not(:first-child)), so this holds however many packages exist. The
   nth-child(n+4) top-border is a defensive fallback for a 4th+ package
   wrapping to a new row — the design only ever shows up to 3, so this
   just stops that edge case looking broken rather than being a fully
   general N-column grid. */
.wedding-packages__grid {
	display: grid;
	grid-template-columns: 1fr;
	border: 1px solid var(--hairline);
	margin-top: 1.5rem;
}

.wedding-packages__grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.wedding-packages__grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.wedding-packages__package {
	padding: 2.25rem;
}

.wedding-packages__package:first-child {
	background-color: rgba(196, 164, 107, 0.08);
}

.wedding-packages__grid--cols-2 .wedding-packages__package:not(:first-child),
.wedding-packages__grid--cols-3 .wedding-packages__package:not(:first-child) {
	border-left: 1px solid var(--hairline-soft);
}

.wedding-packages__grid--cols-3 .wedding-packages__package:nth-child(n+4) {
	border-top: 1px solid var(--hairline-soft);
}

.wedding-packages__package-name {
	margin: 0;
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	color: var(--gold);
}

.wedding-packages__package-description {
	margin: 0.75rem 0 0;
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--muted);
}

.wedding-packages__price-label {
	margin: 1.25rem 0 0;
	font-family: "DM Mono", "SFMono-Regular", Menlo, monospace;
	font-size: 0.58rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
}

.wedding-packages__price-list {
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.wedding-packages__price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--hairline-soft);
}

.wedding-packages__price-guests {
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.82rem;
	color: var(--muted);
}

.wedding-packages__price-amount {
	flex: none;
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--cream);
	white-space: nowrap;
}

/* --- Feature lists (Drinks Included / Decor Included / Package Includes)
   Native <details open>: expanded and non-interactive on desktop, same
   trick as blocks/visiting-the-club's Key Contacts sidebar. script.js
   closes these into real, click-to-open accordions below the breakpoint
   the grid itself stacks to a single column at, so a long "Decor
   Included" list doesn't turn a phone visit into an enormous scroll. */
.wedding-packages__feature-list {
	margin-top: 1.25rem;
}

.wedding-packages__feature-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	cursor: default;
	pointer-events: none;
	list-style: none;
}

.wedding-packages__feature-summary::-webkit-details-marker {
	display: none;
}

.wedding-packages__feature-heading {
	font-family: "DM Mono", "SFMono-Regular", Menlo, monospace;
	font-size: 0.58rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--gold-light);
}

/* Plus/minus indicator — hidden (and unused, since the summary above is
   pointer-events:none) until the 900px breakpoint below turns each list
   into a real accordion. */
.wedding-packages__feature-toggle {
	display: none;
}

.wedding-packages__feature-toggle::before,
.wedding-packages__feature-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--cream);
	transform: translate(-50%, -50%);
}

.wedding-packages__feature-toggle::before {
	width: 100%;
	height: 1px;
}

.wedding-packages__feature-toggle::after {
	width: 1px;
	height: 100%;
	transition: opacity 0.15s ease;
}

.wedding-packages__feature-list[open] .wedding-packages__feature-toggle::after {
	opacity: 0;
}

.wedding-packages__feature-items {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wedding-packages__feature-item {
	display: flex;
	gap: 0.5rem;
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.82rem;
	line-height: 1.5;
	color: rgba(245, 240, 232, 0.75);
}

.wedding-packages__feature-dash {
	flex: none;
	color: var(--gold-light);
}

/* --- Single-package layout (e.g. Twilight) -------------------------------
   Only used when a tab's layout is "single" (see render.php) — a
   two-column spotlight card instead of the multi-package grid above. */
.wedding-packages__single {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--hairline);
	margin-top: 1.5rem;
}

.wedding-packages__single-details {
	flex: 1 1 0;
	min-width: 0;
	padding: 2.5rem;
	border-right: 1px solid var(--hairline-soft);
}

.wedding-packages__single-features {
	flex: 1 1 0;
	min-width: 0;
	padding: 2.5rem;
}

.wedding-packages__single-features .wedding-packages__feature-list {
	margin-top: 0;
}

/* Space out a second/third list (e.g. "Upgrades", "Add-ons") so its
   heading doesn't sit flush against the previous list's last item. */
.wedding-packages__single-features .wedding-packages__feature-list + .wedding-packages__feature-list {
	margin-top: 1.5rem;
}

.wedding-packages__single-name {
	margin: 0;
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--gold);
}

.wedding-packages__single-description {
	margin: 0.6rem 0 0;
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--muted);
}

.wedding-packages__single-prices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, auto));
	justify-content: start;
	gap: 1.5rem 2rem;
	margin-top: 1.75rem;
}

/* Exactly 2 or 4 tiers (e.g. Twilight: up to 80 / up to 100 for each of
   two day groups) read as pairs, so lay them out 2-up rather than 3 + 1. */
.wedding-packages__single-prices:has(> :nth-child(2):last-child),
.wedding-packages__single-prices:has(> :nth-child(4):last-child) {
	grid-template-columns: repeat(2, minmax(0, auto));
}

.wedding-packages__single-price {
	display: flex;
	flex-direction: column;
}

.wedding-packages__single-price-label {
	font-family: "DM Mono", "SFMono-Regular", Menlo, monospace;
	font-size: 0.58rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
}

.wedding-packages__single-price-value {
	display: flex;
	flex-direction: column;
	margin-top: 0.4rem;
	font-family: "Lora", Georgia, serif;
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--cream);
}

.wedding-packages__single-price-value .wedding-packages__price-from {
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 400;
	font-size: 0.95rem;
	color: rgba(245, 240, 232, 0.6);
}

/* --- "All <tab> packages include" ----------------------------------------
   Shared across every package in a grid-layout tab; omitted entirely
   when its repeater is empty (typically the case for a single-package
   tab, whose one package already has its own feature list). */
.wedding-packages__all-include {
	margin-top: 1.5rem;
	padding: 2rem;
	border: 1px solid var(--hairline);
}

.wedding-packages__all-include-heading {
	margin: 0;
	font-family: "DM Mono", "SFMono-Regular", Menlo, monospace;
	font-size: 0.62rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--gold-light);
}

.wedding-packages__all-include-list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem 2rem;
}

.wedding-packages__all-include-item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.83rem;
	line-height: 1.5;
	color: rgba(245, 240, 232, 0.72);
}

.wedding-packages__check {
	flex: none;
	margin-top: 0.15rem;
	font-family: "DM Mono", "SFMono-Regular", Menlo, monospace;
	font-size: 0.7rem;
	color: var(--gold-light);
}

@media (max-width: 900px) {
	.wedding-packages__grid--cols-2,
	.wedding-packages__grid--cols-3 {
		grid-template-columns: 1fr;
	}

	.wedding-packages__grid .wedding-packages__package {
		border-left: 0;
	}

	.wedding-packages__grid .wedding-packages__package:not(:first-child) {
		border-top: 1px solid var(--hairline-soft);
	}

	.wedding-packages__single {
		flex-direction: column;
	}

	.wedding-packages__single-details {
		border-right: 0;
		border-bottom: 1px solid var(--hairline-soft);
	}

	/* ---- Real accordion below the stacking breakpoint ----
	   script.js closes every feature list on load below this breakpoint
	   (and reopens/disables them again above it, so a resize back to
	   desktop never leaves one stuck closed once its summary goes back to
	   being non-interactive there). */
	.wedding-packages__feature-summary {
		cursor: pointer;
		pointer-events: auto;
	}

	.wedding-packages__feature-toggle {
		position: relative;
		display: block;
		flex: none;
		width: 0.9rem;
		height: 0.9rem;
	}
}

@media (max-width: 700px) {
	.wedding-packages__all-include-list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.wedding-packages {
		padding: 4rem 1.25rem;
	}

	.wedding-packages__tab {
		padding: 0.85rem 1.25rem;
	}

	.wedding-packages__package,
	.wedding-packages__single-details,
	.wedding-packages__single-features {
		padding: 1.5rem;
	}

	.wedding-packages__all-include {
		padding: 1.5rem;
	}
}

/* ---- Readability: white cards ----
   The package panels sit on white cards (matching the Full Scorecard and
   buggy hire table) so prices and feature lists read as dark ink on white.
   The rules above are written against these custom properties, so
   redefining them inside the cards recolours everything in one place;
   the few hard-coded light rgba() values are overridden underneath. The
   heading, download button and tabs stay on the navy section. */
.wedding-packages__grid,
.wedding-packages__single,
.wedding-packages__all-include,
.wedding-packages__empty {
	--cream: #0a2e72;
	--gold: #0a2e72;
	--gold-light: #8a6a1f;
	--muted: #5f5f48;
	--hairline: #e8dfc8;
	--hairline-soft: #e8dfc8;
	background-color: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.wedding-packages__package:first-child {
	background-color: #faf7f1;
}

.wedding-packages__feature-item,
.wedding-packages__all-include-item {
	color: #2b3a5c;
}

.wedding-packages__single-price-value .wedding-packages__price-from {
	color: var(--muted);
}