/*
 * SE Stay Index.
 *
 * The typographic index at the foot of every stay page. The generic hover,
 * active row and floating photo live in base.css and the runtime; this file
 * only sets the stay geometry: 130px names, the one liner pinned right and the
 * touch accordion that shows the photo inline.
 */

.se-stay-index {
	--se-si-top: 7.5rem;
	--se-si-bottom: 7.5rem;
	background: var(--se-black, #0b0a09);
	padding-top: var(--se-si-top);
	padding-bottom: var(--se-si-bottom);
}

.se-stay-index__eyebrow {
	margin: 0 0 3rem;
}

.se-stay-index__body {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
}

.se-stay-index__index {
	flex: 1 1 auto;
	min-width: 0;
}

.se-stay-index .se-index__row {
	grid-template-columns: 3.5rem minmax(0, 1fr) 15.85%;
	align-items: start;
	gap: 0;
	padding-block: 0.40625rem;
}

.se-stay-index .se-index__num {
	padding-top: 2.25rem;
}

.se-stay-index .se-index__name {
	font-size: clamp(2rem, 6.7708vw, 8.125rem);
	line-height: 0.9;
}

.se-stay-index .se-index__note {
	padding-top: 2.125rem;
	line-height: 1.5;
	text-align: left;
}

/* The row the design pins in red before anyone hovers. */
.se-stay-index__row--hot,
.se-stay-index__row--hot .se-index__num {
	color: var(--se-red-hot, #d0342a);
}

/* QA-MOBILE: the numeral beside it is 12 to 16px, under the large text
   threshold, so it takes the AA safe red on its own. */
.se-stay-index__row--hot .se-index__num {
	color: var(--se-red-text, #d94436);
}

/* Once a row is hovered or focused the pinned row lets go. */
.se-stay-index__index:hover .se-stay-index__row--hot:not(:hover),
.se-stay-index__index:focus-within .se-stay-index__row--hot:not(:focus-within) {
	color: var(--se-text, #f3eee5);
}

.se-stay-index__index:hover .se-stay-index__row--hot:not(:hover) .se-index__num,
.se-stay-index__index:focus-within .se-stay-index__row--hot:not(:focus-within) .se-index__num {
	color: var(--se-grey, #9a948b);
}

/* The inline photo, hidden until a touch device opens the row. */
.se-stay-index__thumb {
	display: none;
	grid-column: 1 / -1;
	overflow: hidden;
	background: var(--se-cocoa, #1d140f);
}

.se-stay-index__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Plain variant: names only, link pinned to the bottom right. */

.se-stay-index--plain .se-stay-index__row {
	grid-template-columns: 3.5rem minmax(0, auto);
	padding-block: 0.3125rem;
}

.se-stay-index--plain .se-index__num {
	padding-top: 1.375rem;
}

.se-stay-index--plain .se-index__name {
	line-height: 0.88;
}

.se-stay-index__link {
	flex: 0 0 auto;
	padding-bottom: 0.75rem;
}

@media (max-width: 1279px) {
	.se-stay-index .se-index__row {
		grid-template-columns: 3rem minmax(0, 1fr) 20%;
	}

	.se-stay-index .se-index__num,
	.se-stay-index .se-index__note {
		padding-top: 1.5rem;
	}
}

/* Phone: the index becomes a set of tap accordions with the photo inline. */
@media (max-width: 767px) {
	.se-stay-index {
		padding-top: min(var(--se-si-top), 4rem);
		padding-bottom: min(var(--se-si-bottom), 4rem);
	}

	.se-stay-index__eyebrow {
		margin-bottom: 1.75rem;
	}

	.se-stay-index__body,
	.se-stay-index--plain .se-stay-index__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
	}

	.se-stay-index__index {
		width: 100%;
	}

	.se-stay-index .se-index__row,
	.se-stay-index--plain .se-stay-index__row {
		grid-template-columns: 2.25rem minmax(0, 1fr);
		padding-block: 0.875rem;
	}

	.se-stay-index .se-index__num,
	.se-stay-index--plain .se-index__num {
		padding-top: 0.5rem;
	}

	.se-stay-index .se-index__name {
		font-size: clamp(1.75rem, 8.5vw, 2.75rem);
	}

	.se-stay-index .se-index__note {
		grid-column: 2;
		padding-top: 0.625rem;
		font-size: 1rem;
	}

	.se-stay-index__link {
		padding-bottom: 0;
	}

	/* Closed rows hide the one liner and the photo; an open row shows both. */
	.se-stay-index--touch .se-index__note,
	.se-stay-index--touch .se-stay-index__thumb {
		display: none;
	}

	.se-stay-index--touch .se-stay-index__row.is-open .se-index__note {
		display: block;
	}

	.se-stay-index--touch .se-stay-index__row.is-open .se-stay-index__thumb {
		display: block;
		grid-column: 2;
		margin-top: 1rem;
		aspect-ratio: 4 / 3;
	}

	.se-stay-index--touch .se-stay-index__row.is-open {
		color: var(--se-red-hot, #d0342a);
	}
}