/* Trojan Storage — single Facility ("Listing A") layout.
   Recreates mocks/Facility.html (the parts outside the unit listing, which the
   companion plugin styles). Built on components.css + tokens. Responsive at
   <=860px. */

.facility { background: #fff; color: var(--text-body); }
.facility-section-title { font-size: 24px; margin-bottom: 16px; }

/* ---------- Breadcrumb ---------- */
.facility-crumbs-wrap { padding-top: 18px; }
.crumbs .sep { display: inline-flex; }
.crumbs .sep svg { width: 13px; height: 13px; }

/* ---------- Header + gallery ---------- */
.facility-head { padding-top: 16px; padding-bottom: 8px; }
.facility-head__title {
  font: 800 34px/1.06 var(--font-display); color: var(--text-strong);
  letter-spacing: -.01em; margin: 4px 0 16px;
}

.facility-gallery {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px;
  height: 320px; margin-bottom: 18px;
}
.facility-gallery__col { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.gallery-photo { border-radius: var(--radius-md); position: relative; min-height: 0; }
.gallery-photo--main { height: 320px; }
.galleryable { cursor: zoom-in; }
.photos-pill {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(13,15,19,.7); color: #fff; font: 600 12px/1 var(--font-sans);
  padding: 7px 12px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 6px;
}
.photos-pill svg { width: 14px; height: 14px; }
.gallery-map {
  border-radius: var(--radius-md); border: 1px solid var(--border-subtle); position: relative;
  background-color: #E9EEF3; text-decoration: none;
  background-image: linear-gradient(0deg, rgba(150,162,178,.16) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(150,162,178,.16) 1px, transparent 1px);
  background-size: 22px 22px;
}
.gallery-map__pin {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  background: var(--brand); color: #fff; width: 28px; height: 28px;
  border-radius: 999px 999px 999px 2px; display: flex; align-items: center; justify-content: center;
}
.gallery-map__label {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font: 600 11px/1 var(--font-sans); color: var(--slate-600);
}

/* ---------- Info strip ---------- */
.info-strip { display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.info-strip__cell { flex: 1; display: flex; align-items: center; gap: 13px; padding: 16px 22px; }
.info-strip__ic {
  width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--red-50); color: var(--brand);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.info-strip__label {
  font: 700 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate-500); margin-bottom: 4px;
}
.info-strip__value { font-size: 13.5px; color: var(--text-strong); line-height: 1.35; }
.info-strip__value a { color: inherit; text-decoration: none; }
.info-strip__value--strong { font-size: 15px; font-weight: 700; }
.info-strip__divider { width: 1px; align-self: stretch; background: var(--border-subtle); }
.info-strip__action { padding: 16px 22px; border-left: 1px solid var(--border-subtle); align-self: stretch; display: flex; align-items: center; }

/* ---------- Units section ---------- */
.facility-units {
  background: var(--slate-50); padding: 34px 0; margin-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

/* ---------- Facility details ---------- */
.facility-details { padding-top: 44px; padding-bottom: 44px; }
.facility-details__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; }
.facility-map {
  display: block; height: 280px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle);
  position: relative; background-color: #E9EEF3; text-decoration: none;
  background-image: linear-gradient(0deg, rgba(150,162,178,.16) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(150,162,178,.16) 1px, transparent 1px);
  background-size: 24px 24px;
}
.facility-map__pin {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  background: var(--brand); color: #fff; width: 34px; height: 34px;
  border-radius: 999px 999px 999px 2px; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.facility-map__btn { position: absolute; right: 14px; bottom: 14px; }
.amenities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; margin-top: 18px; }
.amenity { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-body); }
.amenity svg { width: 18px; height: 18px; color: var(--green-600); flex: 0 0 auto; }
.facility-details__hours { display: flex; flex-direction: column; gap: 14px; }
.hours-card__title {
  font: 700 16px/1.2 var(--font-display); color: var(--text-strong);
  margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.hours-card__title svg { width: 17px; height: 17px; color: var(--brand); }
.hours-card__body { font-size: 13.5px; color: var(--text-body); line-height: 1.6; }

/* ---------- About ---------- */
.facility-about { background: var(--slate-50); padding: 44px 0; border-top: 1px solid var(--border-subtle); }
.facility-about__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.facility-about__copy { font-size: 15px; line-height: 1.7; color: var(--text-body); }
.facility-about__copy p { margin: 0 0 12px; }
.facility-directions__addr { font-size: 13.5px; color: var(--text-body); margin: 4px 0 14px; }

/* ---------- Reviews ---------- */
.facility-reviews { padding-top: 44px; padding-bottom: 44px; }
.facility-reviews .muted { margin: 0 0 16px; }

/* ---------- FAQ ---------- */
.facility-faq { background: var(--slate-50); padding: 44px 0; border-top: 1px solid var(--border-subtle); }
.facility-faq__inner { max-width: 840px; }
.faq-list { margin-top: 8px; }
.faq { border-top: 1px solid var(--border-subtle); }
.faq:first-child { border-top: 0; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 16px 0; cursor: pointer; background: none; border: 0; text-align: left;
  font: 600 15.5px/1.3 var(--font-sans); color: var(--text-strong);
}
.faq-q__icon { flex: 0 0 auto; display: inline-flex; }
.faq-q__icon svg { width: 18px; height: 18px; }
.faq-q__plus { color: var(--slate-400); display: inline-flex; }
.faq-q__minus { color: var(--brand); display: none; }
.faq.is-open .faq-q__plus { display: none; }
.faq.is-open .faq-q__minus { display: inline-flex; }
.faq-a { padding: 0 0 16px; }
.faq-a p { margin: 0; font-size: 14px; color: var(--text-body); line-height: 1.6; }

/* ---------- Lightbox ---------- */
.ts-lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(13,15,19,.93);
  display: none; flex-direction: column; align-items: center; justify-content: center; padding: 36px;
}
.ts-lightbox.is-open { display: flex; }
.lb-stage { position: relative; display: flex; align-items: center; gap: 14px; max-width: 1100px; width: 100%; justify-content: center; }
.lb-img { max-width: 84%; max-height: 70vh; border-radius: 10px; box-shadow: var(--shadow-xl); background: var(--slate-800); }
.lb-close, .lb-arrow {
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255,255,255,.12); border-radius: 999px;
}
.lb-close:hover, .lb-arrow:hover { background: rgba(255,255,255,.24); }
.lb-close { position: absolute; top: 22px; right: 26px; width: 40px; height: 40px; }
.lb-arrow { width: 46px; height: 46px; flex: 0 0 auto; }
.lb-count { color: var(--slate-300); font: 600 13px/1 var(--font-sans); margin-top: 16px; }

/* =================================================================== */
/* Mobile                                                              */
/* =================================================================== */
@media (max-width: 860px) {
  .facility-head__title { font-size: 24px; }
  .facility-gallery { grid-template-columns: 1fr; height: 220px; }
  .facility-gallery__col { display: none; }
  .gallery-photo--main { height: 220px; }

  .info-strip { flex-direction: column; align-items: stretch; }
  .info-strip__divider { width: auto; height: 1px; }
  .info-strip__action { border-left: 0; border-top: 1px solid var(--border-subtle); }
  .info-strip__action .btn { width: 100%; }

  .facility-details__grid,
  .facility-about__grid { grid-template-columns: 1fr; gap: 22px; }
  .amenities-grid { gap: 9px 16px; }
  .facility-details, .facility-about, .facility-reviews, .facility-faq { padding-top: 28px; padding-bottom: 28px; }
}