/* Gallery page — one grid per venue. The artboard's geometry: a 1400px column,
   80px between the two categories, five 1fr columns with 20px gaps and 200px
   tiles (two columns, 12px gaps, 160px tiles on mobile).

   Normalized: the artboard draws the rule under each title in blush at 45×1px
   (90px on mobile). design.md is explicit that accent lines on a light ground are
   gold #baaa7c at 43×1.5, which is what every other section on the site uses, so
   that is what ships here. Flag if the client wants the blush back. */
.bsw-gallery-venues.wp-block-group.alignfull {
	background: #fff;
	padding: 57px 20px 60px !important;
	margin-block: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.bsw-gallery-venues > * {
	margin-block: 0 !important;
	width: 100%;
}

/* When a section follows the grids (the closing "See It In Person" CTA), that
   section's own top padding owns the gap — otherwise this padding and its 70px
   would stack. With Instagram directly after, the 60px below stays. */
.bsw-gallery-venues.wp-block-group.alignfull:has(+ .bsw-page-section) {
	padding-block-end: 0 !important;
}

h2.bsw-gallery-venues__title {
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant', serif) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	font-size: 42px !important;
	line-height: 44px !important;
	color: var(--wp--preset--color--taupe, #8c857b) !important;
	margin-block: 0 !important;
}

h2.bsw-gallery-venues__title::after {
	content: "";
	display: block;
	width: 43px;
	height: 1.5px;
	background: #baaa7c;
	margin: 22px auto 0;
}

.bsw-gallery-venues__grid.wp-block-group {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin-block-start: 30px;
}

.bsw-gallery-venues__tile.wp-block-image {
	position: relative;
	overflow: hidden;
	margin: 0 !important;
	height: 200px;
	background: #eeece8;
}

.bsw-gallery-venues__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Mauve veil on hover, matching the hotel gallery */
.bsw-gallery-venues__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(170, 116, 124, 0.16);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.bsw-gallery-venues__tile:hover img {
	transform: scale(1.12);
}

.bsw-gallery-venues__tile:hover::after {
	opacity: 1;
}

@media (max-width: 767px) {
	/* The intro above owns the top gap; Instagram below owns the bottom. */
	.bsw-gallery-venues.wp-block-group.alignfull {
		padding: 0 20px !important;
		gap: 56px;
	}

	h2.bsw-gallery-venues__title {
		font-size: 38px !important;
		line-height: 40px !important;
	}

	h2.bsw-gallery-venues__title::after {
		margin-block-start: 10px;
	}

	.bsw-gallery-venues__grid.wp-block-group {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin-block-start: 22px;
	}

	.bsw-gallery-venues__tile.wp-block-image {
		height: 160px;
	}
}

/* page-section.css gives .bsw-instagram 60px of top padding on any page carrying a
   page-intro — meant for the cream content sections. This section is white and owns
   the gap with its own bottom padding on desktop; on mobile it has none, so the
   plugin's own 60px does the work. Same pairing as hotel-gallery/dining-venues. */
.wp-site-blocks .bsw-gallery-venues.wp-block-group + .bsw-instagram {
	padding-block-start: 0;
}

@media (max-width: 767px) {
	.wp-site-blocks .bsw-gallery-venues.wp-block-group + .bsw-instagram {
		padding-block-start: 60px;
	}
}