/* Stats row moved to a proper block (blocks/stats + blocks/stat) - its CSS now lives
   there instead, co-located and auto-loaded wherever the block is used. */

/* USP icons - raw inline SVGs (via wp:html), unlike the homepage's own USP row which
   uses the core wp:icon block (centered automatically via its own align:center
   wrapper). display:block + margin:auto centers these the same way. */
.usp-icon {
	display: block;
	margin: 0 auto 0.5rem;
	color: var(--wp--preset--color--primary);
}

/* USP banner: tighter padding + vertical divider borders between columns.
   WP core adds gap:24px to every .is-layout-flex container (which Columns renders
   as) - that stacks on top of our own padding-inline below, so zero it here and
   let padding be the only thing controlling the spacing. */
.usp-columns {
	padding-block: 1.5rem;
	gap: 0;
}
.usp-columns .wp-block-column {
	padding-inline: 1.5rem;
}
.usp-columns .wp-block-column:not(:last-child) {
	border-right: 1px solid var(--wp--preset--color--border);
}
/* Core stacks columns below 782px: no vertical dividers then, and space the stacked items out. */
@media (max-width: 781px) {
	.usp-columns .wp-block-column:not(:last-child) {
		border-right: none;
	}
	.usp-columns {
		row-gap: 2rem;
	}
}

/* Eyebrow + heading left, button right - used by the homepage What's On teaser
   (dark forest bg, white heading) and reused as-is for the Food & Drink page's
   "What's Being Served" row (light bg, needs the default dark heading colour back). */
.whats-on-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}
.whats-on-header .section-heading {
	color: #fff;
	margin: 0;
}
.whats-being-served-section .whats-on-header .section-heading {
	color: var(--wp--preset--color--charcoal);
}
.whats-being-served-section {
	border-top: 1px solid var(--wp--preset--color--primary);
	border-bottom: 1px solid var(--wp--preset--color--primary);
}

/* Ever so slightly shorter than the standard .content-section 7.5rem - this section
   otherwise looks a touch taller than Drink/Food/About with the same-sized content. */
.whats-on-section.whats-on-section {
	padding-block: 6rem;
}

/* What's On card grid, filter pills, and modal now live in
   blocks/whats-on-calendar/style.css (self-contained with the block that renders
   them) instead of here - see bell-bear/whats-on-calendar. */

/* Text & Image sections: image gallery pattern (main image + smaller thumbs).
   Values pulled directly from the original Next.js/Tailwind ImageGridLayout
   component (src/blocks/Content/Component.tsx): gap-3, rounded-xl, aspect-video
   for the main/stacked images, aspect-square for thumbs. */
.section-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem; /* gap-3 */
}
.section-gallery__main {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 9; /* aspect-video */
	border-radius: 0.75rem; /* rounded-xl */
	overflow: hidden;
}
.section-gallery__thumb {
	aspect-ratio: 1 / 1; /* aspect-square */
	border-radius: 0.75rem; /* rounded-xl */
	overflow: hidden;
}
.section-gallery__main img,
.section-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Stacked variant (Food section): two full-width images stacked instead of 1 + 2 */
.section-gallery--stacked {
	grid-template-columns: 1fr;
}
.section-gallery--stacked .section-gallery__thumb {
	aspect-ratio: 16 / 9; /* aspect-video, same as component's oneTopTwoBottom */
}

/* Text & Image sections: outer wrapper + column gap, matching the same component.
   Section padding is py-30 (7.5rem); grid gap is gap-x-8 lg:gap-x-16. */
.content-section {
	padding-block: 7.5rem;
}
/* Sections on a coloured background pick up core's side padding (2.375em); one with no
   background (e.g. the homepage Drinks section) got none, so its text sat against the
   screen edge. Give those the same 38px. */
.wp-block-group.alignfull:not(.has-background):not(.wp-block-cover) > .content-section {
	padding-inline: 2.375rem;
}
/* Other pages built as a bare content-section / constrained <main> (privacy policy, 404 intro,
   and .page-gutter on the events, food vendor, What's On and search templates). */
main.wp-block-group.content-section,
.not-found__intro,
.page-gutter {
	padding-inline: 2.375rem;
}

/* Half the tall section padding on mobile. */
@media (max-width: 47.9375rem) {
	.content-section {
		padding-block: 3.75rem;
	}
	.whats-on-section.whats-on-section {
		padding-block: 3rem;
	}
}
.content-columns {
	gap: 2rem;
}
.content-columns p,
.content-columns .wp-block-list {
	font-size: 1rem; /* 16px */
}

/* The column block's own verticalAlignment:center sets align-items:center, which lets
   a single tall image (image-grid main-top/main-bottom with no thumbs, or
   vendor-feature) render at its own natural height and dwarf the text column next to
   it. Switch just those columns to stretch, so the image is capped at the text
   column's height instead - see the height:100%/position:absolute image rules in
   image-grid and vendor-feature. Deliberately NOT scoped to every .section-gallery - 
   multi-image galleries keep their fixed aspect-ratio sizing (see the note in
   image-grid/style.css for why extending this to them broke). align-self on the
   column, not align-items on the row - WP core ships
   ".wp-block-columns { align-items: normal !important; }", which nothing can
   out-rank from the row side. */
/* Getting Here / map embed (Visit and Contact pages). The map's column is set to
   verticalAlignment:"top" in the editor (so it doesn't centre-float if it were ever
   the shorter column), which gives it "align-self: flex-start" - that also happens to
   block it from matching the text column's height, since flex-start pins it to its own
   content size (the iframe's fixed height="450") rather than stretching. Override with
   the exact class combo so this wins regardless of source order, then have the map
   (and the iframe inside it, which otherwise ignores CSS height in favour of its own
   height="450" attribute) actually fill that stretched height. */
.wp-block-column:has(.visit-map) {
	align-self: stretch; /* any vertical alignment: the Contact map column is "top", the Visit page's is "center" */
}
.visit-map {
	height: 100%;
	border-radius: 0.75rem;
	overflow: hidden;
	line-height: 0;
}
.visit-map iframe {
	display: block;
	width: 100%;
	height: 100%;
}

/* Opening hours on a light background (Contact page) - footer-hours__row's base
   styling in footer.css assumes a dark background (white/60% text etc), so this
   overrides colour/size on top of it rather than duplicating the flex row layout. */
.contact-hours {
	max-width: 22rem;
	margin-bottom: 1.5rem;
}
.contact-hours .footer-hours__row {
	padding-block: 0.4rem;
	font-size: 1rem;
}
.contact-hours .footer-hours__day {
	font-weight: 700;
	color: var(--wp--preset--color--charcoal);
}
.contact-hours .footer-hours__time {
	color: var(--wp--preset--color--muted-foreground);
}

/* Special hours on the light Contact page background - base card styling is in footer.css. */
.special-hours--light {
	max-width: 22rem;
	margin-bottom: 1.5rem;
	background: var(--wp--preset--color--secondary);
}
.special-hours--light .special-hours__item {
	color: var(--wp--preset--color--muted-foreground);
	font-size: 1rem;
	padding-block: 0.4rem;
}
.special-hours--light .special-hours__item + .special-hours__item {
	border-top-color: var(--wp--preset--color--border);
}
.special-hours--light .special-hours__date {
	color: var(--wp--preset--color--charcoal);
	font-weight: 700;
}

.content-columns .wp-block-column:has(.section-gallery__main:only-child),
.content-columns .wp-block-column:has(.vendor-feature__image) {
	align-self: stretch;
}
@media (min-width: 64rem) {
	.content-columns {
		gap: 4rem;
	}
}

/* Testimonials: horizontal scroll-snap carousel, ~3.5 cards visible */
.testimonial-carousel {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.5rem;
	-webkit-overflow-scrolling: touch;
}
.testimonial-carousel .testimonial-card {
	flex: 0 0 auto;
	width: 28%;
	scroll-snap-align: start;
	padding: 1.5rem;
	border-radius: var(--wp--preset--spacing--20, 0.5rem);
}
@media (max-width: 782px) {
	.testimonial-carousel .testimonial-card {
		width: 80%;
	}
}
.testimonial-carousel__controls {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
}
.testimonial-carousel__prev,
.testimonial-carousel__next {
	background: transparent;
	border: 2px solid #fff;
	color: #fff;
	border-radius: 999px;
	width: 2.5rem;
	height: 2.5rem;
	cursor: pointer;
}
.testimonial-carousel__prev:hover,
.testimonial-carousel__next:hover {
	background: #fff;
	color: var(--wp--preset--color--charcoal);
}

/* Contact page, bottom section: the accessibility / family / dog-friendly notes stack in the
   left column, with the enquiry form (a card) in the right column. */
.contact-info-block:not(:last-child) {
	margin-bottom: 2.5rem;
}
.contact-form-card {
	scroll-margin-top: 7rem; /* clear the sticky header when linked to as #contact-form */
	padding: 2rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--secondary);
}
.contact-form-card .bb-form__legal {
	margin-bottom: 1.25rem;
}
@media (max-width: 37.5rem) {
	.contact-form-card {
		padding: 1.5rem;
	}
}