/**
 * Venue/Hotel Views - Basic Structural Styles
 * Designers will enhance these styles later
 */

/* ==========================================================================
   Section Containers
   ========================================================================== */

.vtd-venues-section,
.vtd-hotels-section,
.vtd-whats-on-section {
	margin: 20px 0;
}

.vtd-venues-section .vtd-card-title {
	padding-top: 5px;
	padding-left: 0px;
} 
.vtd-venues-section .vtd-card-excerpt {
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
	font-size: 13px;
}  

.vtd-venues-section .section-header {
	padding-top: 0px;
	padding-bottom: 20px;
}  

.vtd-hotels-section .vtd-card-title {
	padding-top: 5px;
	padding-left: 0px;
} 
.vtd-hotels-section .vtd-card-excerpt {
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
	font-size: 13px;
}  

.vtd-hotels-section .section-header {
	padding-top: 0px;
	padding-bottom: 20px !important;;
}  

.vtd-whats-on-section .vtd-card-title {
	padding-top: 5px;
	padding-left: 0px;
} 
.vtd-whats-on-section .vtd-card-excerpt {
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
	font-size: 13px;
}  

/* ==========================================================================
   What's On Section Header & Section "View more" Buttons
   ========================================================================== */
.vtd-whats-on-section .section-header {
	padding-top: 0px;
	padding-bottom: 20px;
}

.vtd-whats-on-view-all,
.vtd-venues-view-all,
.vtd-hotels-view-all {
	display: flex;
	justify-content: center;
	margin: 20px 0;
}

/* ==========================================================================
   Featured Sections
   ========================================================================== */

/* Venue: 1 full-width featured */
.vtd-featured-venue {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 30px;
	padding: 0px;
	border: 1px solid #ddd;
	background: #f9f9f9;
}

.vtd-featured-venue .vtd-featured-image {
	flex: 0 0 50%;
	max-width: 50%;
}

.vtd-featured-venue .vtd-featured-details {
	flex: 1;
	position: relative;
}

.vtd-featured-venue .vtd-featured-long-excerpt,
.vtd-featured-venue .vtd-featured-link {
	flex-basis: 100%;
}

.vtd-featured-venue .vtd-featured-long-excerpt {
	margin: 0;
}

.vtd-featured-venue .vtd-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* What's On: 2 side-by-side featured (50/50) */
.vtd-featured-whats-on {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 30px;
}

.vtd-featured-whats-on-card {
	border: 1px solid #ddd;
	background: #f9f9f9;
	overflow: hidden;
}

.vtd-featured-whats-on-card .vtd-featured-image img {
	width: 100%;
	height: 350px;
	object-fit: cover;
	display: block;
}

.vtd-featured-whats-on-card .vtd-featured-details {
	padding: 15px;
}

/* Hotels: 2 side-by-side featured (50/50) */
.vtd-featured-hotels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 30px;
}

.vtd-featured-hotel {
	border: 1px solid #ddd;
	background: #f9f9f9;
	overflow: hidden;
}

.vtd-featured-hotel .vtd-featured-image img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	display: block;
}

.vtd-featured-hotel .vtd-featured-details {
	padding-top: 15px;
	position: relative;
}

/* Shared featured elements */
.vtd-featured-title {
	margin: 10px 0;
	font-size: 1.25em;
}

.vtd-featured-excerpt {
	margin: 10px 0;
	color: #666;
	font-weight: normal;
}

.vtd-featured-long-excerpt {
	margin: 10px 0;
	font-weight: normal;
}

.vtd-featured-link {
	display: inline-block;
	margin-top: 10px;
	color: #1b1b1b;
	font-weight: bold;
	text-decoration: none;
}

.vtd-featured-link:hover {
	text-decoration: underline;
}

.vtd-featured-heart {
	top: 15px;
	right: 15px;
	color: #ccc;
	cursor: pointer;
	vertical-align: middle;
	height: 30px;
	display: table-cell;
}

.vtd-featured-heart.dashicons-heart::before {
	font-size: 30px;
}

.vtd-featured-heart:hover {
	color: #e74c3c;
}

.vtd-featured-details-list {
	list-style: none;
	padding: 0;
	margin: 10px 0;
	font-size: 0.9em;
	color: #666;
}

.vtd-featured-details-list li {
	margin: 5px 0;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.vtd-featured-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 10px;
}

.vtd-badge {
    display: table-cell;
	padding: 8px 10px;
	font-size: 0.75em;
	line-height: 1em;
	vertical-align: middle;
	border-radius: 20px;
	background: #e0e0e0;
	color: #333;
}

.vtd-badge-featured {
	background: #f39c12;
	color: #000000;
}

.vtd-badge-luxury {
	background: #9b59b6;
	color: #fff;
}

.vtd-badge-budget {
	background: #27ae60;
	color: #fff;
}

.vtd-badge-location {
	background: #3498db;
	color: #fff;
}

/* ==========================================================================
   Filter Bar
   ========================================================================== */

.vtd-filter-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	padding: 15px 0;
	margin-bottom: 20px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.vtd-filter-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.vtd-filter-btn {
	padding: 6px 7px;
	border: 1px solid #ccc;
	background: #fff;
	cursor: pointer;
	font-size: 0.8em;
	border-radius: 3px;
	transition: background 0.2s, color 0.2s;
}

.vtd-filter-btn:hover {
	background: #5772e83e;
	color: #000;
}

.vtd-filter-btn.active {
	background: #5771e8;
	color: #fff;
	border-color: #5771e8;
}

.vtd-sort-dropdown {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vtd-sort-dropdown label {
	font-size: 0.9em;
	color: #666;
}

.vtd-sort-select {
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 0.9em;
}

/* ==========================================================================
   Card Grid
   ========================================================================== */

.vtd-venue-grid,
.vtd-hotel-grid,
.vtd-whats-on-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.vtd-venue-card,
.vtd-hotel-card {
	border: 0px solid #ddd;
	overflow: hidden;
	display: block;
	position: relative;
	height: 370px;
}
.vtd-whats-on-card {
	border: 0px solid #ddd;
	background: #fff;
	overflow: hidden;
	position: relative; /* anchor for the stretched <a> overlay below */
}

/* Stretched link: covers the whole card so the entire tile is clickable
   without nesting an outer <a> around the photo-credit's photographer <a>
   (HTML5 forbids nested anchors). The photo-credit pill sits above this
   via its existing z-index: 2 in photo-attribution.css. */
.vtd-whats-on-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	text-indent: -9999px;
}

.vtd-card-image img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	display: block;
}

.vtd-card-title {padding-top: 10px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.vtd-card-excerpt,

.vtd-card-rating {
	padding-left: 0px !important;
	padding-right: 0px;
	margin-top: 10px;
}

.vtd-hotel-card .vtd-card-rating {
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 10px;
}

.vtd-card-title {
	margin: 10px 15px;
	font-size: 1em;
}

.vtd-card-excerpt {
	margin: 0 15px 10px;
	font-size: 0.85em;
	display: overflow;
	color: #666;
}

.vtd-card-link {
	padding-top: 5px;
	padding-left: 0px !important;
    width: fit-content;
    display: block;
    font-size: 14px;
	font-weight: bold;
    color: #1b1b1b;
    position: absolute;
    bottom: 0px;
}

.vtd-card-link:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Star Ratings
   ========================================================================== */

.vtd-stars {
	color: #f39c12;
	font-size: 1em;
	vertical-align: middle;
	height: 30px;
	display: table-cell;
}

.vtd-featured-rating .vtd-stars::before {
	font-size: 30px;
}

.vtd-star-empty {
	color: #ccc;
}

.vtd-featured-rating {
	margin: 5px 0;
}

/* Star Rating with Info Tooltip */
.vtd-star-rating-wrapper {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.vtd-star-rating-wrapper .vtd-star-info {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
}

.vtd-star-rating-wrapper .vtd-star-info-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 16px !important;
	height: 16px !important;
	font-size: 11px !important;
	font-style: normal !important;
	font-weight: bold !important;
	color: #666 !important;
	background: #e0e0e0 !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	line-height: 1 !important;
}

.vtd-star-rating-wrapper .vtd-star-tooltip {
	position: absolute !important;
	bottom: calc(100% + 8px) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	padding: 6px 10px !important;
	background: #333 !important;
	color: #fff !important;
	font-size: 12px !important;
	font-style: normal !important;
	font-weight: normal !important;
	white-space: nowrap !important;
	border-radius: 4px !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.2s, visibility 0.2s !important;
	z-index: 100 !important;
	pointer-events: none !important;
}

.vtd-star-rating-wrapper .vtd-star-tooltip::after {
	content: '' !important;
	position: absolute !important;
	top: 100% !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	border: 5px solid transparent !important;
	border-top-color: #333 !important;
}

.vtd-star-rating-wrapper .vtd-star-info:hover .vtd-star-tooltip {
	opacity: 1 !important;
	visibility: visible !important;
}

/* ==========================================================================
   Placeholder Image
   ========================================================================== */

.vtd-placeholder-image {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e0e0e0;
	color: #999;
	height: 150px;
	font-size: 0.9em;
}

.vtd-featured-venue .vtd-placeholder-image,
.vtd-featured-hotel .vtd-placeholder-image {
	height: 200px;
}

/* ==========================================================================
   Notice Messages
   ========================================================================== */

.vtd-venues-notice,
.vtd-hotels-notice,
.vtd-whats-on-notice {
	padding: 20px;
	background: #f9f9f9;
	border: 1px solid #ddd;
	text-align: center;
	color: #666;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 992px) {
	.vtd-venue-grid,
	.vtd-hotel-grid,
	.vtd-whats-on-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.vtd-featured-venue .vtd-featured-image {
		flex: none;
		max-width: 100%;
	}

	.vtd-featured-hotels,
	.vtd-featured-whats-on {
		grid-template-columns: 1fr;
	}

	.vtd-filter-bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 576px) {
	.vtd-venue-grid,
	.vtd-hotel-grid,
	.vtd-whats-on-grid {
		grid-template-columns: 1fr;
	}
}