/**
 * GDC Zone 6: The Stay — Styles
 * S7 §7: Property gallery, description, room cards, amenity grid, lightbox
 *
 * @package GDC
 * @since   5.0.0
 */

/* S7 §7: Zone container */
.gdc-zone-6-stay {
	background: var(--gdc-bg-deep);
}

/* S7 §7: Inner wrapper */
.gdc-stay__inner {
	max-width: var(--gdc-max-narrow);
	margin: 0 auto;
	padding: var(--gdc-section-py-mobile) var(--gdc-section-px-mobile);
}

/* ==============================
   PROPERTY GALLERY
   ============================== */

.gdc-stay-gallery {
	margin-bottom: var(--gdc-space-6);
	border-radius: var(--gdc-radius-lg, 12px);
	overflow: hidden;
}

/* S7 §7.2: Hero photo */
.gdc-stay-gallery__hero {
	position: relative;
}

.gdc-stay-gallery__hero-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	position: relative;
}

.gdc-stay-gallery__hero-btn:focus-visible {
	outline: 2px solid var(--gdc-purple);
	outline-offset: 2px;
}

.gdc-stay-gallery__hero-img {
	width: 100%;
	height: 480px;
	object-fit: cover;
	display: block;
}

/* S7 §7.2: Photo count badge */
.gdc-stay-gallery__badge {
	position: absolute;
	bottom: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(8px);
	border-radius: var(--gdc-radius-md, 8px);
	color: var(--gdc-white);
	font-family: var(--gdc-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
}

.gdc-stay-gallery__badge svg {
	flex-shrink: 0;
}

/* S7 §7.2: Thumbnail row */
.gdc-stay-gallery__thumbs {
	display: flex;
	gap: 4px;
	margin-top: 4px;
}

.gdc-stay-gallery__thumb {
	flex: 1;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	overflow: hidden;
}

.gdc-stay-gallery__thumb:focus-visible {
	outline: 2px solid var(--gdc-purple);
	outline-offset: -2px;
}

.gdc-stay-gallery__thumb-img {
	width: 100%;
	height: 100px;
	object-fit: cover;
	display: block;
	transition: opacity var(--gdc-duration-fast, 150ms) var(--gdc-ease-default, ease);
}

.gdc-stay-gallery__thumb:hover .gdc-stay-gallery__thumb-img {
	opacity: 0.8;
}

/* ==============================
   LIGHTBOX
   ============================== */

.gdc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gdc-lightbox[hidden] {
	display: none;
}

.gdc-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(16px);
}

.gdc-lightbox__container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* S7 §7.6: Close button */
.gdc-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 10;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	color: var(--gdc-white);
	cursor: pointer;
	transition: background var(--gdc-duration-fast, 150ms) var(--gdc-ease-default, ease);
}

.gdc-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.gdc-lightbox__close:focus-visible {
	outline: 2px solid var(--gdc-purple);
	outline-offset: 2px;
}

/* S7 §7.6: Photo counter */
.gdc-lightbox__counter {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	font-family: var(--gdc-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--gdc-white-dim);
}

/* S7 §7.6: Slide stage */
.gdc-lightbox__stage {
	width: 100%;
	height: 100%;
	position: relative;
	touch-action: pan-y;
}

.gdc-lightbox__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--gdc-duration-fast, 150ms) var(--gdc-ease-default, ease);
}

.gdc-lightbox__slide--active {
	opacity: 1;
	pointer-events: auto;
}

.gdc-lightbox__slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--gdc-radius-md, 8px);
}

/* S7 §7.6: Navigation arrows */
.gdc-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	color: var(--gdc-white);
	cursor: pointer;
	transition: background var(--gdc-duration-fast, 150ms) var(--gdc-ease-default, ease);
}

.gdc-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.2);
}

.gdc-lightbox__nav:focus-visible {
	outline: 2px solid var(--gdc-purple);
	outline-offset: 2px;
}

.gdc-lightbox__nav--prev {
	left: 16px;
}

.gdc-lightbox__nav--next {
	right: 16px;
}

/* ==============================
   DESCRIPTION
   ============================== */

.gdc-stay__description {
	margin-bottom: var(--gdc-space-6);
}

.gdc-stay__description p {
	font-family: var(--gdc-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--gdc-white-muted);
	margin: 0;
}

/* ==============================
   SECTION HEADINGS
   ============================== */

.gdc-stay__rooms-header h3,
.gdc-stay__amenities-header h3 {
	font-family: var(--gdc-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--gdc-white);
	margin: 0 0 var(--gdc-space-3);
}

.gdc-stay__rooms-header,
.gdc-stay__amenities-header {
	margin-top: var(--gdc-space-6);
}

/* ==============================
   ROOM TYPE CARDS
   ============================== */

/* S7 §7.4: Card grid — mobile single column */
.gdc-room-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gdc-space-4);
}

.gdc-room-card {
	background: var(--gdc-surface, var(--gdc-bg-abyss, #141B24));
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--gdc-radius-md, 8px);
	overflow: hidden;
}

/* S7 §7.4: Room photo — 4:3 */
.gdc-room-card__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.gdc-room-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* S7 §7.4: Room icon fallback */
.gdc-room-card__icon {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gdc-bg-abyss, #141B24);
	color: var(--gdc-white-dim);
}

/* S7 §7.4: Card content */
.gdc-room-card__content {
	padding: 16px;
}

.gdc-room-card__name {
	font-family: var(--gdc-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--gdc-white);
	margin: 0 0 8px;
	line-height: 1.3;
}

.gdc-room-card__bed {
	font-family: var(--gdc-font-body);
	font-size: 0.875rem;
	color: var(--gdc-white-dim);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.gdc-room-card__sep {
	color: var(--gdc-white-muted);
	margin: 0 2px;
}

/* S7 §7.4: Amenities checklist */
.gdc-room-card__amenities {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.gdc-room-card__amenities li {
	font-family: var(--gdc-font-body);
	font-size: 0.8125rem;
	line-height: 1;
}

.gdc-room-card__amenity--yes {
	color: var(--gdc-teal, #4DD4C0);
}

.gdc-room-card__amenity--no {
	color: var(--gdc-white-muted);
	opacity: 0.5;
}

/* ==============================
   AMENITY GRID
   ============================== */

/* S7 §7.5: Icon + label grid — 3 columns mobile */
.gdc-amenity-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gdc-space-3);
}

.gdc-amenity-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.gdc-amenity-grid__icon {
	color: var(--gdc-purple);
	display: flex;
	align-items: center;
	justify-content: center;
}

.gdc-amenity-grid__icon svg {
	width: 32px;
	height: 32px;
}

.gdc-amenity-grid__label {
	font-family: var(--gdc-font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--gdc-white);
}

/* ==============================
   MOBILE PREVIEW
   ============================== */

.gdc-stay__preview {
	display: flex;
	flex-direction: column;
	gap: var(--gdc-space-1);
	padding-top: var(--gdc-space-2);
}

.gdc-stay__preview-type {
	font-family: var(--gdc-font-body);
	font-size: var(--gdc-text-sm);
	color: var(--gdc-purple);
	font-weight: 500;
}

.gdc-stay__preview-rooms {
	font-family: var(--gdc-font-body);
	font-size: var(--gdc-text-sm);
	color: var(--gdc-white-muted);
}

.gdc-zone-details[open] .gdc-stay__preview {
	display: none;
}

/* ==============================
   TABLET (768px+)
   ============================== */

@media (min-width: 768px) {
	.gdc-stay__inner {
		padding: var(--gdc-space-10) var(--gdc-space-4);
	}

	.gdc-stay-gallery__hero-img {
		height: 560px;
	}

	/* S7 §7.4: 2-column room cards on tablet */
	.gdc-room-cards {
		grid-template-columns: 1fr 1fr;
	}

	/* S7 §7.5: 4-column amenity grid on tablet */
	.gdc-amenity-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==============================
   DESKTOP (1200px+)
   ============================== */

@media (min-width: 1200px) {
	.gdc-stay__inner {
		padding: var(--gdc-section-py-desktop) var(--gdc-space-4);
	}

	.gdc-stay-gallery__hero-img {
		height: 600px;
	}

	/* S7 §7.4: 2-3 column room cards on desktop */
	.gdc-room-cards {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: var(--gdc-space-5);
	}

	/* S7 §7.5: 6-column amenity grid on desktop */
	.gdc-amenity-grid {
		grid-template-columns: repeat(6, 1fr);
		gap: var(--gdc-space-4);
	}

	/* S7 §7.6: Larger lightbox nav */
	.gdc-lightbox__nav--prev {
		left: 32px;
	}

	.gdc-lightbox__nav--next {
		right: 32px;
	}
}

/* ==============================
   SCROLL FADE-IN
   ============================== */

@media (prefers-reduced-motion: no-preference) {
	.gdc-stay__inner {
		opacity: 0;
		transform: translateY(var(--gdc-scroll-slide-distance));
		transition:
			opacity var(--gdc-scroll-fade-duration) var(--gdc-ease-default),
			transform var(--gdc-scroll-fade-duration) var(--gdc-ease-default);
	}

	.gdc-stay__inner.se-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gdc-stay__inner {
		opacity: 1;
		transform: none;
	}
}