/*
 * Вкладка «Номера» на странице клиники: свёрнутые карточки.
 *
 * Раньше каждый номер выводил сразу весь список услуг (у некоторых больше
 * сорока), все фотографии и полное описание — страница превращалась в простыню,
 * и сравнить номера было невозможно. Теперь видно превью: фото, название и
 * начало описания; остальное раскрывается по клику.
 *
 * Заголовок стал кнопкой, поэтому здесь же гасим её браузерные стили —
 * прежние правила `.room-type-title` из style.css продолжают работать.
 */

.room-type--collapsible .room-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin-bottom: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 4px;
	font: inherit;
	text-align: left;
	color: inherit;
	cursor: pointer;
	transition: background-color .15s ease;
}

.room-type--collapsible .room-toggle:hover,
.room-type--collapsible .room-toggle:focus-visible {
	background-color: #f3ece0;
}

.room-toggle__preview {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.room-toggle__thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 4px;
	overflow: hidden;
	background: #efece7;
}

.room-toggle__thumb img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	display: block;
	margin: 0;
}

.room-toggle__text {
	min-width: 0;
}

.room-toggle__text strong {
	display: block;
}

.room-toggle__excerpt {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: #6b6b6b;
}

.room-toggle__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 400;
	color: #b8912f;
	white-space: nowrap;
}

.room-toggle__chevron {
	transition: transform .2s ease;
}

/* Раскрытое состояние: меняем подпись и разворачиваем стрелку. */
.room-toggle__more-close { display: none; }
.room-toggle[aria-expanded="true"] .room-toggle__more-open { display: none; }
.room-toggle[aria-expanded="true"] .room-toggle__more-close { display: inline; }
.room-toggle[aria-expanded="true"] .room-toggle__chevron { transform: rotate(180deg); }

.room-type--collapsible .room-details {
	padding-top: 18px;
}

/* На узком экране подпись «Подробнее» съедает место — оставляем только стрелку. */
@media (max-width: 600px) {
	.room-type--collapsible .room-toggle {
		gap: 10px;
		padding: 10px 12px;
	}

	.room-toggle__preview {
		gap: 10px;
	}

	.room-toggle__thumb,
	.room-toggle__thumb img {
		flex-basis: 56px;
		width: 56px;
		height: 56px;
	}

	.room-toggle__excerpt {
		font-size: 13px;
	}

	.room-toggle__more-open,
	.room-toggle__more-close {
		display: none;
	}

	.room-toggle[aria-expanded="true"] .room-toggle__more-close {
		display: none;
	}
}