/* ==========================================================================
   Page frame + content sections (patterns/section-*.php).
   Sections are reusable on any page: wrap them in a .cr-page main (see templates/front-page.html).
   ========================================================================== */

.cr-page {
	max-width: var(--cr-max);
	margin: 0 auto;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--charcoal);
	border: 1px solid var(--cr-rule);
	font-family: var(--cr-font-serif);
	box-shadow: 0 22px 60px rgb(0 0 0 / 0.24);
}

/* Sections are stacked edge to edge – spacing comes from their own padding. */
.cr-page > * {
	margin-block: 0;
}

.cr-section {
	padding: 46px 36px;
	border-bottom: 1px solid var(--cr-rule-soft);
}

.cr-section:last-child {
	border-bottom: 0;
}

.cr-section-head {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	margin: 0 0 22px;
}

.cr-mark {
	width: 34px;
	height: 34px;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: var(--cr-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--gold);
	background: var(--wp--preset--color--cream);
	font-size: 13px;
	font-weight: 500;
}

.cr-heading {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.16;
	font-weight: 400;
	letter-spacing: 0;
}

.cr-muted {
	margin: 8px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 16px;
	line-height: 1.65;
	max-width: 780px;
}

/* Card headings share one style; individual cards tweak size/colour. */
.cr-note h3,
.cr-menu-card h3,
.cr-map-content h3 {
	margin: 0 0 6px;
	color: var(--wp--preset--color--charcoal);
	font-family: var(--cr-font-serif);
	font-size: 19px;
	line-height: 1.25;
	font-weight: 500;
}

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

.cr-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
	min-height: 560px;
	background: var(--wp--preset--color--cream);
}

.cr-photo {
	position: relative;
	min-height: 420px;
	overflow: hidden;
}

.cr-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cr-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(21 21 21 / 0.18), rgb(21 21 21 / 0.54));
}

.cr-photo-caption {
	position: absolute;
	left: 22px;
	bottom: 20px;
	right: 22px;
	z-index: 1;
	color: var(--wp--preset--color--cream);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.cr-hero-panel {
	display: flex;
	align-items: center;
	padding: 46px 40px;
	background: linear-gradient(180deg, var(--wp--preset--color--cream) 0%, var(--wp--preset--color--butter) 100%);
}

.cr-kicker {
	margin: 0 0 16px;
	color: var(--wp--preset--color--sage);
	font-family: var(--cr-font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.cr-title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.98;
	font-weight: 400;
	letter-spacing: 0;
}

.cr-subtitle {
	margin: 15px 0 0;
	color: var(--wp--preset--color--teal);
	font-family: var(--cr-font-display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	font-weight: 400;
	letter-spacing: 0;
}

.cr-copy {
	margin: 22px 0 0;
	color: #30302c;
	font-size: 18px;
	line-height: 1.72;
}

.cr-callout {
	margin: 24px 0 0;
	padding: 15px 17px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	border-left: 3px solid var(--wp--preset--color--gold);
	border-radius: var(--cr-radius);
	font-family: var(--cr-font-sans);
	font-size: 15px;
	line-height: 1.55;
}

.cr-callout strong {
	display: block;
	margin-bottom: 4px;
	color: var(--wp--preset--color--butter);
	font-family: var(--cr-font-display);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 500;
}

/* --- What's on (occasions in season) -------------------------------------- */

.cr-whats-on {
	padding: 46px 36px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	border-bottom: 1px solid var(--cr-rule-soft);
}

.cr-whats-on > .cr-kicker {
	color: var(--wp--preset--color--festive-gold);
}

.cr-whats-on-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--festive-gold) 45%, transparent);
	border-radius: var(--cr-radius);
}

.cr-whats-on-item + .cr-whats-on-item {
	margin-top: 18px;
}

.cr-whats-on-media {
	position: relative;
	min-height: 280px;
}

.cr-whats-on-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cr-whats-on-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px 32px;
}

.cr-whats-on-text .cr-heading {
	color: var(--wp--preset--color--festive-gold);
}

.cr-whats-on-text p {
	margin: 12px 0 0;
	color: var(--wp--preset--color--sand);
	font-size: 16px;
	line-height: 1.65;
}

.cr-whats-on-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.cr-whats-on-actions .crh-cta,
.cr-whats-on-actions .cr-chip {
	padding: 13px 20px;
	font-size: 14px;
}

/* Christmas: red and gold like the printed menu. */
.cr-whats-on--christmas {
	background:
		radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--wp--preset--color--festive-gold) 18%, transparent), transparent 55%),
		linear-gradient(135deg, #6e0f12, var(--wp--preset--color--christmas-red));
	border: 0;
	box-shadow: inset 0 3px 0 var(--wp--preset--color--festive-gold);
}

.cr-whats-on--christmas .cr-whats-on-text p {
	color: var(--wp--preset--color--cream);
}

.cr-whats-on--christmas .crh-cta {
	background: var(--wp--preset--color--festive-gold);
	border-color: var(--wp--preset--color--festive-gold);
}

.cr-whats-on--christmas .cr-chip {
	border-color: var(--wp--preset--color--festive-gold);
}

.cr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 30px 0 0;
}

/* --- Facts bar ------------------------------------------------------------ */

.cr-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	border-top: 1px solid var(--cr-rule-gold);
	border-bottom: 1px solid var(--cr-rule-gold);
}

.cr-fact {
	margin: 0;
	padding: 18px 20px;
	border-right: 1px solid var(--cr-rule-on-dark);
}

.cr-fact:last-child {
	border-right: 0;
}

.cr-fact dd {
	display: block;
	margin: 6px 0 0;
	color: var(--wp--preset--color--cream);
	font-size: 15px;
	line-height: 1.45;
}

/* --- Intro / overview ----------------------------------------------------- */

.cr-overview {
	padding: 34px 36px;
}

.cr-overview-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
	gap: 28px;
	align-items: center;
}

.cr-overview .cr-section-head {
	margin-bottom: 18px;
}

.cr-overview .cr-heading {
	font-size: clamp(28px, 2.8vw, 42px);
	max-width: 560px;
}

.cr-overview .cr-muted {
	max-width: 560px;
}

.cr-list {
	display: grid;
	gap: 12px;
}

.cr-note {
	background: var(--wp--preset--color--paper);
	border-left: 3px solid var(--wp--preset--color--gold);
	padding: 16px 18px;
}

.cr-note p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 15px;
	line-height: 1.58;
}

.cr-venue-photo {
	display: block;
	width: 100%;
	height: auto;
	min-height: 310px;
	object-fit: cover;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 62%, transparent);
	filter: saturate(0.95) contrast(1.02);
}

/* --- Menus ---------------------------------------------------------------- */

.cr-menu-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 24px 0 0;
}

.cr-menu-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 126px;
	padding: 17px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--charcoal);
	border: 1px solid var(--cr-rule);
	border-left: 3px solid var(--wp--preset--color--gold);
	border-radius: var(--cr-radius);
	text-decoration: none;
}

.cr-menu-link:hover,
.cr-menu-link:focus-visible {
	color: var(--wp--preset--color--charcoal);
	border-color: var(--wp--preset--color--gold);
}

.cr-menu-link strong {
	color: var(--wp--preset--color--ink);
	font-size: 19px;
	line-height: 1.25;
	font-weight: 500;
}

.cr-menu-link span {
	color: var(--wp--preset--color--muted);
	font-family: var(--cr-font-sans);
	font-size: 14px;
	line-height: 1.45;
}

.cr-menu-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 22px;
}

.cr-menu-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--cr-rule);
	border-radius: var(--cr-radius);
	overflow: hidden;
}

.cr-menu-card img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	display: block;
	border-bottom: 1px solid var(--cr-rule-soft);
}

.cr-menu-card > div {
	padding: 17px;
}

.cr-menu-card h3 {
	margin-bottom: 7px;
	color: var(--wp--preset--color--wine);
	font-size: 20px;
}

.cr-menu-card p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 15px;
	line-height: 1.58;
}

/* --- Booking band (dark) -------------------------------------------------- */

.cr-band-dark {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
}

.cr-band-dark .cr-heading {
	color: var(--wp--preset--color--cream);
}

.cr-band-dark .cr-muted {
	color: var(--wp--preset--color--sand);
}

.cr-band-dark .cr-mark {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--gold);
}

.cr-cards-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 24px;
	align-items: stretch;
}

.cr-card {
	display: flex;
	flex-direction: column;
	min-height: 260px;
	padding: 22px;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--charcoal);
	border: 1px solid var(--cr-rule);
	border-radius: var(--cr-radius);
}

.cr-card h3 {
	margin: 0 0 8px;
	color: var(--wp--preset--color--ink);
	font-family: var(--cr-font-display);
	font-size: 23px;
	line-height: 1.25;
	font-weight: 500;
}

.cr-card p {
	flex: 1;
	margin: 0 0 18px;
	color: var(--wp--preset--color--muted);
	font-size: 15px;
	line-height: 1.62;
}

.cr-card .cr-button,
.cr-card .cr-widget-trigger {
	width: 100%;
	margin-top: auto;
	text-align: center;
}

.cr-band-note {
	max-width: 980px;
	margin: 24px auto 0;
	color: var(--wp--preset--color--sand);
	font-family: var(--cr-font-sans);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}

/* --- FAQ ------------------------------------------------------------------ */

.cr-faq details {
	margin: 0 0 10px;
	padding: 15px 17px;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--cr-rule);
	border-radius: var(--cr-radius);
}

.cr-faq details:last-child {
	margin-bottom: 0;
}

.cr-faq summary {
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	font-size: 16px;
	line-height: 1.4;
	font-weight: 500;
}

.cr-faq details p {
	margin: 11px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 15px;
	line-height: 1.6;
}

.cr-faq a {
	color: var(--wp--preset--color--teal);
	font-weight: 500;
}

/* --- Visit / contact ------------------------------------------------------ */

.cr-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
	gap: 22px;
	align-items: stretch;
}

.cr-contact-card {
	margin: 0;
	padding: 22px;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--cr-rule);
	border-radius: var(--cr-radius);
}

.cr-contact-line {
	padding: 14px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 36%, transparent);
}

.cr-contact-line:first-child {
	padding-top: 0;
}

.cr-contact-line:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.cr-contact-line dt {
	display: block;
	color: #6f6960;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.1px;
	text-transform: uppercase;
}

.cr-contact-line dd {
	margin: 0;
}

.cr-contact-line dd > a:not(.cr-chip),
.cr-contact-line dd > strong {
	display: inline-block;
	margin-top: 5px;
	color: var(--wp--preset--color--charcoal);
	font-size: 16px;
	line-height: 1.45;
	font-weight: 500;
	text-decoration: none;
}

.cr-socials,
.cr-contact-line dd.cr-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.cr-map-panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 22px;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--cr-rule);
	border-radius: var(--cr-radius);
	text-align: center;
}

.cr-map-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgb(21 21 21 / 0.7), rgb(47 87 84 / 0.62)), var(--cr-map-image, none) center / cover no-repeat;
	filter: saturate(0.92);
}

.cr-map-content {
	position: relative;
	z-index: 1;
	max-width: 420px;
	padding: 18px;
	background: color-mix(in srgb, var(--wp--preset--color--cream) 94%, transparent);
	color: var(--wp--preset--color--charcoal);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 50%, transparent);
	border-radius: var(--cr-radius);
}

.cr-map-content h3 {
	margin-bottom: 8px;
	color: var(--wp--preset--color--ink);
	font-size: 22px;
	line-height: 1.2;
}

.cr-map-content p {
	margin: 0 0 14px;
	color: var(--wp--preset--color--muted);
	font-size: 15px;
	line-height: 1.58;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
	.cr-hero,
	.cr-overview-grid,
	.cr-cards-2,
	.cr-contact-grid,
	.cr-whats-on-item {
		grid-template-columns: 1fr;
	}

	.cr-whats-on {
		padding: 36px 22px;
	}

	.cr-whats-on-media {
		min-height: 220px;
	}

	.cr-whats-on-text {
		padding: 24px 22px;
	}

	.cr-hero {
		min-height: 0;
	}

	.cr-photo {
		min-height: 380px;
	}

	.cr-hero-panel {
		padding: 34px 24px;
	}

	.cr-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cr-fact:nth-child(2) {
		border-right: 0;
	}

	.cr-menu-grid,
	.cr-menu-links {
		grid-template-columns: 1fr;
	}

	.cr-section,
	.cr-overview {
		padding: 36px 22px;
	}

	.cr-overview .cr-heading {
		font-size: clamp(25px, 8vw, 34px);
	}

	.cr-overview .cr-venue-photo {
		min-height: 280px;
	}
}

@media (max-width: 560px) {
	.cr-page .cr-button,
	.cr-socials .cr-chip {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.cr-facts {
		grid-template-columns: 1fr;
	}

	.cr-fact {
		border-right: 0;
		border-bottom: 1px solid var(--cr-rule-on-dark);
	}

	.cr-fact:last-child {
		border-bottom: 0;
	}

	.cr-section-head {
		grid-template-columns: 1fr;
	}

	.cr-photo {
		min-height: 300px;
	}

	.cr-map-panel {
		min-height: 300px;
		padding: 14px;
	}

	.cr-map-content {
		width: 100%;
	}
}