/**
 * Caltrans Traffic Cameras Styling
 *
 * @package Sierra_At_Tahoe
 */

/* Media wrapper */
.traffic-cam-media-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	background: #000;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
	overflow: hidden;
}

/* Poster image (clickable) */
.traffic-cam-poster {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.traffic-cam-poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
}

/* Play button overlay */
.traffic-cam-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
	pointer-events: none;
}

.traffic-cam-poster:hover .traffic-cam-play-icon {
	transform: translate(-50%, -50%) scale(1.1);
}

.traffic-cam-poster:focus {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* Video container */
.traffic-cam-video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: 0 !important;
}

.traffic-cam-video {
	display: block;
	width: 100%;
	height: 100%;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
	object-fit: cover;
}

/* Legacy iframe support (if still needed) */
.sierra-traffic-cam-card iframe {
	display: block;
	width: 100%;
	border: none;
	aspect-ratio: 16/9;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
}

/* Card hover effect */
.sierra-traffic-cam-card:hover {
	box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.2s ease-in-out;
}