/* Rooms — walk the exhibition sideways; each room sets the wall colour.
   Markup starts as a swipeable row (.rooms--static); rooms.js removes the class
   on desktop to pin the stage and move the track with the scroll. */

.ei.rooms { position: relative; background: var(--tone, var(--ei-lapis)); color: var(--ei-light); transition: background-color .7s ease; }
.ei .rooms__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.ei .rooms__track { display: flex; gap: 0; will-change: transform; padding-left: max(var(--ei-gut), calc((100vw - var(--ei-wrap)) / 2 + var(--ei-gut))); }
.ei .room { flex: 0 0 min(1100px, 82vw); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; position: relative; padding-right: clamp(40px, 6vw, 120px); }
.ei .room--intro { flex-basis: min(620px, 70vw); display: block; }
.ei .room__intro .lead { color: #cfd4e6; max-width: 40ch; margin-top: 20px; font-size: 18px; }
.ei .rooms__hint { margin-top: 20px; font-size: 14px; color: var(--ei-gold-2); display: flex; align-items: center; gap: 10px; }
.ei .rooms__hint::after { content: ""; width: 60px; height: 1.5px; background: currentColor; }
.ei .room__media { position: relative; aspect-ratio: 4 / 3.2; margin: 0;
	clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%); }
.ei .room__media img { width: 100%; height: 100%; object-fit: cover; }
.ei .room__frame { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); pointer-events: none; }
.ei .room__frame polygon { fill: none; stroke: rgba(240, 196, 106, .85); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ei .room__ar { position: absolute; right: clamp(20px, 4vw, 80px); top: -14vh; font: 700 clamp(60px, 9vw, 150px)/1 var(--ei-ar); color: rgba(240, 196, 106, .12); white-space: nowrap; pointer-events: none; }
.ei .room__no { font-size: 15px; font-weight: 600; color: var(--ei-gold-2); margin-bottom: 12px; }
.ei .room__text h3 { font: 400 clamp(32px, 3.6vw, 52px)/1.05 var(--ei-display); margin-bottom: 18px; }
.ei .room__text .room__p { color: #d6daea; max-width: 42ch; }
.ei .room .label { margin-top: 24px; padding: 14px 16px; background: rgba(246, 241, 230, .08); border-left: 2px solid var(--ei-gold-2); font-size: 14.5px; line-height: 1.45; color: #e7e3d8; max-width: 40ch; }
.ei .room .label b { display: block; color: var(--ei-gold-2); font-weight: 600; margin-bottom: 2px; }
.ei .room__text .link { display: inline-block; margin-top: 24px; }

.ei .rooms__map { position: absolute; left: 50%; bottom: clamp(20px, 5vh, 48px); transform: translateX(-50%); display: flex; gap: 0; font-size: 13px; color: var(--ei-light-2); }
.ei .rooms__map li { position: relative; padding: 18px 14px 0; text-align: center; min-width: 92px; }
.ei .rooms__map li::before { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); border: 1.5px solid currentColor; background: transparent; transition: background-color .3s; }
.ei .rooms__map li::after { content: ""; position: absolute; top: 5px; left: calc(50% + 10px); right: calc(-50% + 10px); height: 1px; background: rgba(185, 191, 214, .4); }
.ei .rooms__map li:last-child::after { display: none; }
.ei .rooms__map li.is-on { color: var(--ei-gold-2); }
.ei .rooms__map li.is-on::before { background: currentColor; border-color: currentColor; }

/* Swipeable row: phones, reduced motion, the Elementor editor, and before the script runs */
.ei.rooms.rooms--static { background: var(--tone, var(--ei-lapis)); }
.ei.rooms--static .rooms__stage { position: static; height: auto; overflow: visible; padding: 80px 0 40px; }
.ei.rooms--static .rooms__track { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 var(--ei-gut); gap: 16px; transform: none !important; }
.ei.rooms--static .rooms__track::-webkit-scrollbar { display: none; }
.ei.rooms--static .room { flex: 0 0 min(84%, 520px); grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0; scroll-snap-align: start; align-items: start; }
.ei.rooms--static .room--intro { align-self: center; }
.ei.rooms--static .room__ar { top: -6px; right: 0; font-size: 64px; }
.ei.rooms--static .rooms__map { display: none; }

@media (max-width: 720px) {
	.ei .room__media { aspect-ratio: 4 / 3; }
	.ei .room__text h3 { font-size: 30px; }
	.ei.rooms--static .room { flex-basis: 84%; }
}