/* Brookstreet hotel gallery — logo, gold rule, and an eleven-tile masonry
   grid. Grid geometry is the artboard's: 1400px wide, five 1fr columns,
   200px rows, 20px gaps (mobile: two columns, 160px rows, 12px gaps). */
.bsw-hotel-gallery.wp-block-group.alignfull {
	background: #fff;
	padding: 72px 20px 45px !important;
	margin-block: 0 !important;
}

.bsw-hotel-gallery__logo.wp-block-image {
	margin: 0 auto !important;
}

.bsw-hotel-gallery__logo img {
	display: block;
	width: 252px;
	height: auto;
}

.bsw-hotel-gallery__rule {
	display: block;
	width: 43px;
	height: 1.5px;
	background: #baaa7c;
	margin: 22px auto 0;
}

.bsw-hotel-gallery__grid.wp-block-group {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: 200px;
	gap: 20px;
	margin-block-start: 38px;
}

.bsw-hotel-gallery__tile.wp-block-image {
	position: relative;
	overflow: hidden;
	margin: 0 !important;
	background: #eeece8;
}

.bsw-hotel-gallery__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 over the photo on hover, under the zoom */
.bsw-hotel-gallery__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-hotel-gallery__tile:hover img {
	transform: scale(1.12);
}

.bsw-hotel-gallery__tile:hover::after {
	opacity: 1;
}

/* Explicit placement, in the artboard's order. Tiles 1, 8 and 11 are the
   2×2 features; everything else is a single cell. */
.bsw-hotel-gallery__tile:nth-child(1) { grid-area: 1 / 1 / span 2 / span 2; }
.bsw-hotel-gallery__tile:nth-child(2) { grid-area: 1 / 3; }
.bsw-hotel-gallery__tile:nth-child(3) { grid-area: 1 / 4; }
.bsw-hotel-gallery__tile:nth-child(4) { grid-area: 1 / 5; }
.bsw-hotel-gallery__tile:nth-child(5) { grid-area: 2 / 3; }
.bsw-hotel-gallery__tile:nth-child(6) { grid-area: 2 / 4; }
.bsw-hotel-gallery__tile:nth-child(7) { grid-area: 2 / 5; }
.bsw-hotel-gallery__tile:nth-child(8) { grid-area: 3 / 1 / span 2 / span 2; }
.bsw-hotel-gallery__tile:nth-child(9) { grid-area: 3 / 3; }
.bsw-hotel-gallery__tile:nth-child(10) { grid-area: 4 / 3; }
.bsw-hotel-gallery__tile:nth-child(11) { grid-area: 3 / 4 / span 2 / span 2; }

@media (max-width: 767px) {
	.bsw-hotel-gallery.wp-block-group.alignfull {
		padding: 56px 20px 30px !important;
	}

	.bsw-hotel-gallery__logo img {
		width: 185px;
	}

	.bsw-hotel-gallery__grid.wp-block-group {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 160px;
		gap: 12px;
		margin-block-start: 26px;
	}

	/* Auto-flow on mobile; only the lead tile keeps a span. */
	.bsw-hotel-gallery__tile.wp-block-image {
		grid-area: auto;
	}

	.bsw-hotel-gallery__tile:nth-child(1) {
		grid-column: 1 / span 2;
		grid-row: span 2;
	}
}

/* page-section.css gives the Instagram section 60px of top padding on any page
   carrying a page-intro — that exists so the flourish clears the cream content
   sections. Here the section above is white and the artboard asks for 45px, which
   this section's own bottom padding already supplies. Four classes to outrank the
   `:has()` rule regardless of stylesheet order. */
.wp-site-blocks .bsw-hotel-gallery.wp-block-group + .bsw-instagram {
	padding-block-start: 0;
}

/* Desktop only: on mobile this section carries no bottom gap of its own, so the
   plugin's own 60px above the flourish is what separates them. */
@media (max-width: 767px) {
	.wp-site-blocks .bsw-hotel-gallery.wp-block-group + .bsw-instagram {
		padding-block-start: 60px;
	}
}