.csc-room {
	--csc-mobile-ratio: 4 / 5;
	--csc-hotspot-size: 18px;
	position: relative;
	width: 100%;
	margin: 0 0 3rem;
}

.csc-room-media {
	position: relative;
	width: 100%;
	line-height: 0;
	overflow: hidden;
}

.csc-room-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center center;
}

.csc-room-hotspot {
	position: absolute;
	z-index: 5;
	width: var(--csc-hotspot-size);
	height: var(--csc-hotspot-size);
	padding: 0;
	margin: calc(var(--csc-hotspot-size) / -2) 0 0 calc(var(--csc-hotspot-size) / -2);
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	line-height: 1;
}

.csc-room-hotspot-dot {
	display: block;
	width: 100%;
	height: 100%;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(20,20,20,.82);
	box-shadow: 0 2px 9px rgba(0,0,0,.28);
	transition: transform .2s ease, background-color .2s ease;
}

.csc-room-hotspot:hover .csc-room-hotspot-dot,
.csc-room-hotspot:focus-visible .csc-room-hotspot-dot,
.csc-room-hotspot.is-open .csc-room-hotspot-dot {
	transform: scale(1.35);
	background: #fff;
	border-color: #111;
}

.csc-room-hotspot-card {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 14px);
	width: min(280px, 42vw);
	display: flex;
	align-items: stretch;
	background: #fff;
	color: #111;
	box-shadow: 0 12px 35px rgba(0,0,0,.18);
	text-align: left;
	line-height: 1.2;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	pointer-events: none;
}

/* Opens on click/tap (.is-open, toggled by JS) or keyboard focus — never
   on plain mouse hover, so desktop behaves the same as mobile. */
.csc-room-hotspot:focus-visible .csc-room-hotspot-card,
.csc-room-hotspot.is-open .csc-room-hotspot-card {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.csc-room-hotspot-card img {
	width: 82px;
	height: 82px;
	object-fit: cover;
	flex: 0 0 82px;
}

.csc-room-hotspot-card-content {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px 14px;
}

.csc-room-hotspot-type {
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .55;
}

.csc-room-hotspot-card strong {
	font-size: 14px;
	font-weight: 600;
}

.csc-room-hotspot-link {
	margin-top: auto;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.csc-room-empty {
	padding: 3rem;
	background: #f5f5f5;
	text-align: center;
}

.csc-room-mobile-links {
	display: none;
}

@media (max-width: 767px) {
	.csc-room-media {
		aspect-ratio: var(--csc-mobile-ratio);
	}

	.csc-room-image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: center center;
	}

	.csc-room-hotspot-card {
		position: fixed;
		left: 50vw;
		bottom: 18px;
		top: auto;
		width: min(92vw, 360px);
		transform: translate(-50%, 10px);
		z-index: 30;
	}

	.csc-room-hotspot.is-open .csc-room-hotspot-card {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}
}

/* ==========================================================================
   Room cover video (hero)
   Full-bleed section that replaces the theme's own title area on Room
   pages that have a video set (see the "csc-room-has-video" body class
   and the matching title-hiding rule below).
   ========================================================================== */

.csc-room-hero {
	--csc-hero-height: 78vh;
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	height: var(--csc-hero-height);
	min-height: 420px;
	max-height: 900px;
	overflow: hidden;
	background: #111;
}

.csc-room-hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.csc-room-hero-media iframe,
.csc-room-hero-media video,
.csc-room-hero-media embed {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	object-fit: cover;
	pointer-events: none;
}

.csc-room-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%);
	pointer-events: none;
	z-index: 1;
}

.csc-room-hero-title {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: flex-end;
	padding: 2.5rem clamp(1rem, 4vw, 3rem);
}

.csc-room-hero-title h1 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.8rem, 4vw, 3.2rem);
	line-height: 1.15;
	text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

@media (max-width: 767px) {
	.csc-room-hero {
		--csc-hero-height: 56vh;
		min-height: 320px;
	}
}

/* If your theme's title markup uses a different selector than Astra's
   default ".entry-title", add it to this list. */
body.csc-room-has-video .entry-title,
body.csc-room-has-video .page-header .entry-title,
body.csc-room-has-video h1.entry-title {
	display: none;
}

/* ==========================================================================
   Room ambient audio toggle
   ========================================================================== */

.csc-room-audio {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 40;
}

.csc-room-audio-el {
	display: none;
}

.csc-room-audio-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px 12px 14px;
	border: 0;
	border-radius: 999px;
	background: rgba(20,20,20,.86);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
	font-size: 12px;
	letter-spacing: .03em;
	text-transform: uppercase;
	transition: background-color .2s ease, transform .2s ease;
}

.csc-room-audio-toggle:hover {
	transform: translateY(-2px);
}

.csc-room-audio-icon {
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #fff;
}

.csc-room-audio.is-playing .csc-room-audio-icon {
	animation: csc-audio-pulse 1.4s ease-in-out infinite;
}

@keyframes csc-audio-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .4; transform: scale(1.4); }
}

@media (max-width: 600px) {
	.csc-room-audio-label {
		display: none;
	}

	.csc-room-audio-toggle {
		padding: 14px;
	}
}

/* ==========================================================================
   Project hero (cover image + title/tags side by side)
   ========================================================================== */

.csc-project-hero {
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.csc-project-hero-media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin: 0 20px;
}

.csc-project-hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.csc-project-hero-body {
	padding: 1.5rem clamp(1rem, 4vw, 2rem) 0;
}

.csc-project-hero-title {
	margin: 0 0 .75rem;
	font-size: clamp(1.8rem, 6vw, 3rem);
	line-height: 1.15;
	text-align: center;
}

.csc-project-hero-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem .5rem;
}

.csc-project-hero-tag {
	display: inline-block;
	padding: .3em .8em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: .75rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	opacity: .75;
}

/* Desktop: hero esce a piena larghezza (edge-to-edge), immagine quasi
   sul bordo sinistro, altezza ~90vh. Il resto dell'articolo, sotto,
   NON è full-bleed: resta alla larghezza normale del tema con sidebar. */
@media (min-width: 768px) {
	.csc-project-hero {
		position: relative;
		left: 50%;
		right: 50%;
		width: 100vw;
		max-width: 100vw !important;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
		grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
		align-items: stretch;
		height: 90vh;
		min-height: 480px;
	}

	.csc-project-hero-media {
		height: 100%;
		margin-left: 30px;
	}

	.csc-project-hero-body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 2rem clamp(2rem, 6vw, 5rem) 2rem clamp(2rem, 4vw, 3rem);
	}
}