/**
 * Property Elements CSS
 * HHBR-9.3: Property Media Shortcodes
 * HHBR-9.5: Property Info Shortcodes
 * Styles for granular property element shortcodes (gallery grid, facilities columns)
 *
 * @package HolidayHomeBooking
 */

/* Featured Image Container */
.hhb-property-featured-image {
	margin: 0 0 1.5em 0;
}

.hhb-property-featured-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

/* Property Gallery Grid */
.hhb-property-gallery {
	display: grid;
	gap: 10px;
	margin: 0 0 1.5em 0;
}

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

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

.hhb-gallery-cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.hhb-gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	line-height: 0; /* Remove extra space below images */
}

.hhb-gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	transition: transform 0.3s ease;
}

/* Lightbox hover effect */
.hhb-property-gallery[data-lightbox="yes"] .hhb-gallery-item a {
	display: block;
	cursor: pointer;
}

.hhb-property-gallery[data-lightbox="yes"] .hhb-gallery-item a:hover img {
	transform: scale(1.05);
}

/* Responsive: Collapse to 2 columns on mobile */
@media (max-width: 600px) {
	.hhb-gallery-cols-3,
	.hhb-gallery-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Facilities Column Styling (HHBR-9.5) */
.hhb-facilities-cols-2 .hhb-facilities-list,
.hhb-facilities-cols-3 .hhb-facilities-list,
.hhb-facilities-cols-4 .hhb-facilities-list {
	column-gap: 20px;
}

.hhb-facilities-cols-2 .hhb-facilities-list {
	column-count: 2;
}

.hhb-facilities-cols-3 .hhb-facilities-list {
	column-count: 3;
}

.hhb-facilities-cols-4 .hhb-facilities-list {
	column-count: 4;
}

/* Prevent column breaks inside facility items */
.hhb-facilities-cols-2 .hhb-facility-item,
.hhb-facilities-cols-3 .hhb-facility-item,
.hhb-facilities-cols-4 .hhb-facility-item {
	break-inside: avoid;
	page-break-inside: avoid;
}

/* Responsive: Reduce columns on smaller screens */
@media (max-width: 768px) {
	.hhb-facilities-cols-4 .hhb-facilities-list {
		column-count: 3;
	}
}

@media (max-width: 600px) {
	.hhb-facilities-cols-3 .hhb-facilities-list,
	.hhb-facilities-cols-4 .hhb-facilities-list {
		column-count: 2;
	}
}