/*
 * Rooms — bento grid (modern editorial). Home page only.
 */

.teledom-design .bento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 144px;
	gap: 15px;
}

.teledom-design .bento .item {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--ink);
	color: var(--paper);
	transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
	font: inherit;
	text-align: left;
	border: 0;
	padding: 0;
	cursor: pointer;
	isolation: isolate;
}

.teledom-design .bento .item::after {
	content: "";
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 0;
	height: 2px;
	background: var(--gold-bright);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.55s var(--ease);
	z-index: 3;
}

.teledom-design .bento .item:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
}

.teledom-design .bento .item:hover::after {
	transform: scaleX(1);
}

.teledom-design .bento .item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease), filter 0.55s var(--ease);
	opacity: 0.92;
	filter: saturate(0.95);
}

.teledom-design .bento .item:hover img {
	transform: scale(1.07);
	opacity: 1;
	filter: saturate(1.05);
}

.teledom-design .bento .item .overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.18) 38%, rgba(0, 0, 0, 0.78) 80%, rgba(0, 0, 0, 0.92) 100%);
	z-index: 1;
}

.teledom-design .bento .item .num {
	position: absolute;
	top: 22px;
	left: 26px;
	font-family: var(--display);
	font-size: 54px;
	line-height: 1;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.18);
	letter-spacing: -0.02em;
	z-index: 2;
	font-feature-settings: "lnum";
	transition: color 0.45s var(--ease), transform 0.55s var(--ease);
	font-style: italic;
}

.teledom-design .bento .item:hover .num {
	color: rgba(255, 255, 255, 0.36);
	transform: translateY(-4px);
}

.teledom-design .bento .item.b .num,
.teledom-design .bento .item.d .num {
	font-size: 40px;
	top: 18px;
	left: 22px;
}

.teledom-design .bento .item .badge {
	position: absolute;
	top: 24px;
	right: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 99px;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	z-index: 3;
	transition: background 0.45s var(--ease), border-color 0.45s var(--ease);
}

.teledom-design .bento .item:hover .badge {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.32);
}

.teledom-design .bento .item.a .badge {
	border-color: var(--gold);
	color: var(--gold-bright);
	background: rgba(0, 0, 0, 0.32);
}

.teledom-design .bento .item.a .badge .bd {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold-bright);
	box-shadow: 0 0 12px var(--gold-bright);
}

.teledom-design .bento .item .body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 25px 25px 24px;
	z-index: 2;
	transition: transform 0.55s var(--ease);
}

.teledom-design .bento .item:hover .body {
	transform: translateY(-2px);
}

.teledom-design .bento .item h3 {
	color: #fff;
	margin: 0 0 10px;
	font-size: clamp(22px, 1.7vw, 28px);
	font-family: var(--display);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.teledom-design .bento .item.a h3 {
	font-size: clamp(28px, 2.2vw, 38px);
}

.teledom-design .bento .item .lead {
	color: rgba(255, 255, 255, 0.78);
	font-size: 12px;
	line-height: 1.55;
	margin: 0 0 16px;
	max-width: 42ch;
}

.teledom-design .bento .item .stats {
	display: flex;
	gap: 24px;
	padding: 14px 0 0;
	margin-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.teledom-design .bento .item .stats > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.teledom-design .bento .item .stats .v {
	font-family: var(--display);
	font-size: 19px;
	font-weight: 400;
	color: #fff;
	line-height: 1;
	letter-spacing: -0.01em;
}

.teledom-design .bento .item .stats .l {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 6px;
}

.teledom-design .bento .item .cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold-bright);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.teledom-design .bento .item .cta .arr {
	display: inline-block;
	transition: transform 0.45s var(--ease);
}

.teledom-design .bento .item:hover .cta {
	opacity: 1;
	transform: translateY(0);
}

.teledom-design .bento .item:hover .cta .arr {
	transform: translateX(6px);
}

.teledom-design .bento .item:focus-visible {
	outline: 2px solid var(--gold-bright);
	outline-offset: 4px;
}

.teledom-design .bento .a { grid-column: span 7; grid-row: span 3; }
.teledom-design .bento .b { grid-column: span 5; grid-row: span 2; }
.teledom-design .bento .c { grid-column: span 5; grid-row: span 3; }
.teledom-design .bento .d { grid-column: span 7; grid-row: span 2; }