/* Facilities page specifics: hero, grid, detail, amenities */

/* ===== Hero (white title) ===== */
.facilities-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding: clamp(4rem, 12vw, 9rem) 0;
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(122,62,240,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(255,43,179,.20), transparent 60%),
    var(--gradient-brand);
  color:#fff;
}
.facilities-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0)); pointer-events:none; }
.facilities-hero-inner{ position:relative; z-index:1; text-align:center; }
.facilities-hero-title{ color:#ffffff; font-size: clamp(2rem, 4.5vw, 3.2rem); text-shadow:0 10px 30px rgba(0,0,0,.25); }
.facilities-hero-subtitle{ color:#f5f7ff; margin-top:.6rem; font-size: clamp(1rem, 2.2vw, 1.2rem); opacity:.95; }

/* ===== Grid ===== */
.facilities-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1.1rem; margin-bottom:1.2rem;
}
.facility-card{
  position:relative; border:1px solid #eef; border-radius:var(--radius-xl);
  overflow:hidden; cursor:pointer; padding:0; background:#fff;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.facility-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 36px rgba(11,29,54,.18); }
.facility-card.selected{ border-color: rgba(122,62,240,.45); box-shadow: 0 12px 30px rgba(122,62,240,.20); }
.facility-card img{ display:block; width:100%; height: 220px; object-fit:cover; }
.facility-overlay{
  position:absolute; inset:auto 0 0 0; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
  padding:.6rem .7rem; color:#fff;
}
.facility-overlay h3{ margin:0; font-size:1.02rem; }

/* ===== Detail Panel ===== */
.facility-detail{
  display:grid; grid-template-columns: 1.15fr 1fr; gap:1.1rem; align-items:stretch;
}
.detail-image{
  background:#fff; border:1px solid #eef; border-radius:var(--radius-xl);
  overflow:hidden; box-shadow: var(--shadow);
}
.detail-image img{ display:block; width:100%; height:100%; max-height:420px; object-fit:cover; }
.detail-content{
  background:#fff; border:1px solid #eef; border-radius:var(--radius-xl);
  padding: clamp(1rem, 3vw, 1.4rem); box-shadow: var(--shadow);
}
.detail-content h2{ color:var(--oxblood); margin:0 0 .35rem; }
.detail-content p{ color:var(--muted); margin:0 0 .7rem; }

.key-features h3{ margin:.2rem 0 .4rem; color:var(--navy-900); }
.key-features ul{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.key-features li{ display:flex; align-items:center; gap:.5rem; }
.feature-dot{
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg, var(--purple), var(--fuchsia));
  display:inline-block;
}

.navigation-buttons{ margin-top:.8rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.btn.btn-primary{ min-width:140px; }

/* ===== Amenities ===== */
.amenities-section{
  background:
    radial-gradient(900px 500px at 20% 20%, #f5f1ff 0%, transparent 70%),
    radial-gradient(900px 500px at 80% 0%, #ffe9f7 0%, transparent 60%);
}
.amenities-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1.1rem; margin-top:1rem;
}
.amenity-card{
  background:#fff; border:1px solid #eef; border-radius:var(--radius-xl);
  padding: clamp(.9rem, 2.4vw, 1.2rem); box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.amenity-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 30px rgba(11,29,54,.14); }
.amenity-card h3{ margin:.1rem 0 .25rem; color:var(--navy-900); }
.amenity-card p{ margin:0; color:var(--muted); }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .facilities-grid{ grid-template-columns: repeat(2, 1fr); }
  .facility-card img{ height: 200px; }
  .facility-detail{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .facilities-grid{ grid-template-columns: 1fr; }
  .amenities-grid{ grid-template-columns: 1fr 1fr; }
}