/*
Created: 05/26/2026.
*/

.bk-card {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 95%; /* Changed to percentage for responsiveness */
	margin: 0 auto;
	max-width: 1065px; /* Added max-width limit */
	height: auto; /* Changed from fixed height */
	min-height: 457px; /* Added min-height to maintain original desktop look */
	background: linear-gradient( rgba( 0, 0, 0, 0.46 ) 36%, rgba( 171, 145, 99, 0.25 ) 137% );
	border: 5px double rgba( 171, 145, 99, 0.41 );
	border-radius: 36px;
	padding: 40px 25px;
	box-sizing: border-box;
	gap: 30px; /* Added gap to keep sections separated when they stack */
	font-family: 'DM Sans', sans-serif;
}

.bk-media-section {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 303px; /* Prevents it from getting too wide */
	height: 367px;
	background: #080808;
	border-radius: 16px;
	backdrop-filter: blur( 3px );
}

.bk-media-section::before,
.bk-media-section::after {
	content: '';
	position: absolute;
	left: 33px;
	right: 33px;
	height: 1px;
	background: linear-gradient( 90deg, transparent 0%, #aa9063 50%, transparent 100% );
}

.bk-media-section::before {
	top: 0;
}

.bk-media-section::after {
	bottom: 0;
}

.bk-video-wrapper {
	width: calc(100% - 12px); /* Automatically fits inside the parent wrapper natively */
	height: calc(100% - 12px);
	border-radius: 15px;
	overflow: hidden;
	filter: brightness( 2 );
}

.bk-video-wrapper video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bk-info-section {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 350px; /* Keeps the text contained gracefully on desktop */
	height: auto; /* Auto height fixes clipping issues */
}

.bk-info-section .bk-header h2 {
	color: #ffffff;
	font-family: 'Orbitron', sans-serif;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 3px;
	margin: 0;
	text-transform: uppercase;
}

.bk-info-section .bk-header h3 {
	margin: 0;
	font-family: 'Orbitron', sans-serif;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
	background: linear-gradient( 0deg, #aa9063 22%, #615033 30%, #aa9063 47%, #fff2db 52%, #544734 70% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.bk-rating-container {
	display: column;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
	flex-wrap: wrap;
}

.bk-stars {
	display: flex;
	gap: 10px;
}

.bk-star {
	width: 20px;
	height: 20px;
	background: url( 'data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 viewBox=%220 0 20 20%22><g><defs><linearGradient id=%22idss10820963776_1g109576687%22 x1=%220.4979476036204114%22 x2=%220.502215572615526%22 y1=%220.0874683277027027%22 y2=%220.9453300957207207%22><stop offset=%220%22 stop-color=%22rgb(84, 74, 60)%22 stop-opacity=%221%22></stop><stop offset=%220.3013906551257333%22 stop-color=%22rgba(171, 145, 99, 0.69)%22 stop-opacity=%220.69%22></stop><stop offset=%220.5275669688640933%22 stop-color=%22rgb(255, 215, 150)%22 stop-opacity=%221%22></stop><stop offset=%220.6524182631168726%22 stop-color=%22rgb(117, 95, 49)%22 stop-opacity=%221%22></stop><stop offset=%221%22 stop-color=%22rgb(161, 139, 93)%22 stop-opacity=%221%22></stop></linearGradient></defs><path d=%22M 9.049 2.927 C 9.348 2.006 10.652 2.006 10.951 2.927 L 12.021 6.219 C 12.155 6.631 12.539 6.91 12.972 6.91 L 16.433 6.91 C 17.402 6.91 17.804 8.149 17.021 8.719 L 14.22 10.753 C 13.87 11.008 13.723 11.459 13.857 11.871 L 14.927 15.163 C 15.226 16.084 14.172 16.851 13.388 16.281 L 10.588 14.247 C 10.237 13.992 9.763 13.992 9.412 14.247 L 6.612 16.281 C 5.828 16.851 4.774 16.084 5.073 15.163 L 6.143 11.871 C 6.277 11.459 6.13 11.008 5.779 10.753 L 2.979 8.719 C 2.196 8.149 2.598 6.91 3.567 6.91 L 7.028 6.91 C 7.462 6.91 7.845 6.631 7.979 6.219 Z%22 fill=%22url(%23idss10820963776_1g109576687)%22></path></g></svg>' ) no-repeat center center / contain;
}

.bk-rating-text {
	color: rgba( 255, 255, 255, 0.8 );
	font-size: 12px;
	margin: 0;
	padding-top: 5px;
}

.bk-amenities-grid {
	display: flex;
	gap: 20px;
	margin-top: 25px;
	margin-bottom: auto;
}

.bk-amenity-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1;
}

.bk-amenity-item {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 12px;
}

.bk-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0; /* Prevents icons from squishing on small screens */
}

.bk-book-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%; /* Changed to span container width entirely */
	max-width: 270px;
	height: 76px;
	border: 4px solid #aa9063;
	border-radius: 5px;
	text-decoration: none;
	margin-top: 20px;
}

.bk-book-btn span {
	color: #aa9063;
	font-family: 'Orbitron', sans-serif;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 1px;
}

/* THE FIX: Mobile Responsive Breakpoint */
@media (max-width: 768px) {
	.bk-card {
		flex-direction: column; /* Force columns to stack vertically */
		padding: 30px 20px;
		border-radius: 24px; /* Optional: smaller radius looks better on phones */
		background: linear-gradient( rgba( 0, 0, 0, 0.7 ) 36%, rgba( 171, 145, 99, 0.25 ) 137% );
	}

	.bk-media-section {
		order: 1;
		max-width: 100%; /* Let the video module fill the mobile screen */
	}

	.bk-info-section {
		order: 0;
		max-width: 100%; /* Let the info module fill the mobile screen */
		align-items: center; /* Center content on mobile */
		text-align: center;
	}

	.bk-amenities-grid {
		flex-direction: column; /* Stack the amenity lists too */
		gap: 10px;
		width: 100%;
	}

	.bk-amenity-item, .bk-rating-text {
		justify-content: center; /* Center the amenities on mobile */
		color: white;
		font-weight: bold;
		font-size: 15px;
	}

	.bk-book-btn {
		max-width: 100%; /* Full width button on phones */
	}

	.bk-book-btn span {
		font-size: 20px;
	}
}