/* ==========================================================================
   FACILITY PAGE
   ========================================================================== */

.area-explorer {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.area-stage {
  position: relative;
  min-height: 560px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--surface-border);
}

.area-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.7s var(--ease-power3), transform 1.1s var(--ease-power3);
}

.area-stage img.is-active {
  opacity: 1;
  transform: scale(1);
  position: relative;
}

.area-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5,5,4,0.75) 0%, transparent 35%);
  z-index: 1;
  pointer-events: none;
}

.area-stage-label {
  position: absolute;
  left: 1.75rem;
  bottom: 1.75rem;
  z-index: 2;
}

.area-stage-label .eyebrow { margin-bottom: 0.5rem; }

.area-stage-label h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  text-transform: uppercase;
  color: var(--text);
}

.area-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.area-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--surface-border);
  text-align: left;
  transition: background 0.3s;
  position: relative;
}

.area-item:last-child { border-bottom: none; }

.area-extra {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.25rem 1.75rem;
  background: rgba(232, 184, 75, 0.035);
  font-family: var(--font-head);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

.area-extra svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
}

.area-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform 0.3s var(--ease-power3);
  transform-origin: top;
}

.area-item:hover {
  background: rgba(255,255,255,0.02);
}

.area-item.is-active {
  background: rgba(232,184,75,0.05);
}

.area-item.is-active::before {
  transform: scaleY(1);
}

.area-item-num {
  font-family: var(--font-head);
  font-size: 0.75rem;
  color: var(--muted);
}

.area-item.is-active .area-item-num {
  color: var(--accent);
}

.area-item-name {
  font-family: var(--font-head);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex: 1;
  margin-left: 1rem;
}

.area-item-arrow {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s;
  color: var(--accent);
}

.area-item.is-active .area-item-arrow,
.area-item:hover .area-item-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 900px) {
  .area-explorer { grid-template-columns: 1fr; }
  .area-stage { min-height: 360px; order: -1; }
}

/* ---- Facilities & amenities ---- */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--surface-border);
  border: 1px solid var(--surface-border);
}

.amenity-item {
  background: var(--bg);
  padding: 2.4rem 1.5rem;
  text-align: center;
  transition: background var(--dur) var(--ease-out);
}

.amenity-item:hover {
  background: rgba(232, 184, 75, 0.035);
}

.amenity-item svg {
  width: 30px;
  height: 30px;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

.amenity-item h4 {
  font-family: var(--font-head);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---- Lightbox gallery ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 0.9rem;
}

.gallery-grid .g-item:nth-child(4n+1) { grid-column: span 2; grid-row: span 2; }

.g-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}

.g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-power3);
}

.g-item:hover img {
  transform: scale(1.08);
}

.g-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10,9,8,0.15);
  opacity: 0;
  transition: opacity 0.3s;
}
.g-item:hover::after { opacity: 1; }

.g-item .expand-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10,9,8,0.6);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s, transform 0.3s;
}
.g-item:hover .expand-icon { opacity: 1; transform: scale(1); }

@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery-grid .g-item:nth-child(4n+1) { grid-column: span 2; grid-row: span 1; }
}

/* ---- Lightbox overlay ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(5,5,4,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
  padding: 2rem;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: min(1100px, 90vw);
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--surface-border-strong);
  display: grid;
  place-items: center;
  color: var(--text);
}