/**
 * marketplace-facility.css
 * ════════════════════════════════════════════════════════════════
 * Page-specific styles for the facility detail page (facility.php).
 * Shared styles live in marketplace-base.css.
 *
 * Used by: facility.php
 * Loaded via: Assets.php (conditionally on marketplace facility pages)
 * ════════════════════════════════════════════════════════════════
 */

/* ── Facility Header ── */
.cr-fd { max-width: 1120px; margin: 0 auto; padding: 0 var(--cr-space-4) var(--cr-space-8); }
.cr-fd-header { margin-bottom: var(--cr-space-6); }
.cr-fd-header h1 { font-size: clamp(32px, 3vw + 14px, 40px); font-weight: var(--cr-font-weight-bold); margin: 0 0 var(--cr-space-1) 0; line-height: 1.2; }
.cr-fd-header .meta-row { display: flex; align-items: center; gap: var(--cr-space-4); flex-wrap: wrap; font-size: var(--cr-font-size-sm); color: var(--cr-text-secondary); }
.cr-fd-header .meta-row .loc { display: flex; align-items: center; gap: var(--cr-space-1); }
.cr-fd-header .meta-row .tag { background: var(--cr-bg-elevated); border: 1px solid var(--cr-border); padding: var(--cr-space-1) var(--cr-space-2); border-radius: var(--cr-radius-full); font-size: var(--cr-font-size-xs); color: var(--cr-text-secondary); }

/* ── Two-column layout ── */
.cr-fd-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--cr-space-8); align-items: start; }

/* ── Content sections ── */
.cr-fd-section { margin-bottom: var(--cr-space-8); }
.cr-fd-section-title { font-size: var(--cr-font-size-sm, 14px); font-weight: 300; margin-bottom: var(--cr-space-4); display: flex; align-items: center; }

/* ── Quick Facts ── */
.cr-quick-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--cr-space-3); margin-bottom: var(--cr-space-6); }
.cr-fact { display: flex; align-items: center; gap: var(--cr-space-2); padding: var(--cr-space-3); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-md); background: var(--cr-bg-elevated); }
.cr-fact-icon { font-size: var(--cr-font-size-lg); flex-shrink: 0; width: 28px; text-align: center; }
.cr-fact-text { font-size: var(--cr-font-size-xs); }
.cr-fact-text .label { color: var(--cr-text-tertiary); display: block; }
.cr-fact-text .value { color: var(--cr-text-primary); font-weight: var(--cr-font-weight-medium); }

/* ── Space cards — now uses shared .cr-listing-card from marketplace-base.css ── */

/* ── Space detail modal ── */
.cr-space-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.cr-space-modal { background: var(--cr-bg-elevated); border: 1px solid var(--cr-border); border-radius: var(--cr-radius-lg); width: 90%; max-width: 640px; max-height: 85vh; overflow-y: auto; font-family: var(--cr-font-family); }
.cr-space-modal-photo { width: 100%; overflow: hidden; display: grid; grid-template-columns: 2fr 1fr; gap: var(--cr-space-1); max-height: 320px; }
.cr-space-modal-photo .modal-photo-main { grid-row: 1 / 3; overflow: hidden; }
.cr-space-modal-photo .modal-photo-side { overflow: hidden; }
.cr-space-modal-photo img { width: 100%; height: 100%; object-fit: cover; }
.cr-space-modal-body { padding: var(--cr-space-6); }
.cr-space-modal-body h2 { font-size: var(--cr-font-size-lg); font-weight: var(--cr-font-weight-bold); margin-bottom: var(--cr-space-2); }
.cr-space-modal-desc { font-size: var(--cr-font-size-sm); color: var(--cr-text-secondary); line-height: 1.7; margin-bottom: var(--cr-space-4); }
.cr-space-modal-actions { display: flex; gap: var(--cr-space-3); margin-top: var(--cr-space-4); }
.cr-space-modal-actions .cr-btn { flex: 1; justify-content: center; }

/* ── Facility Rooms (photo grid) ── */
.cr-rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--cr-space-3); }
/* NOTE: .cr-room-card here is the amenity room photo grid (thumbnail with overlay label).
   Inventory cards now use .cr-listing-card from marketplace-base.css. */
.cr-rooms-grid .cr-room-card { position: relative; border-radius: var(--cr-radius-md); overflow: hidden; cursor: pointer; aspect-ratio: 4/3; background: var(--cr-bg-elevated); border: 1px solid var(--cr-border); }
.cr-rooms-grid .cr-room-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.cr-rooms-grid .cr-room-card:hover img { transform: scale(1.05); }
.cr-rooms-grid .cr-room-card .room-label { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--cr-space-1) var(--cr-space-2); background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: var(--cr-text-inverse); font-size: var(--cr-font-size-xs); font-weight: var(--cr-font-weight-medium); }

/* ── Services ── */
.cr-service-row { display: flex; justify-content: space-between; align-items: center; padding: var(--cr-space-3) 0; border-bottom: 1px solid var(--cr-border); font-size: var(--cr-font-size-sm); }
.cr-service-row:last-child { border-bottom: none; }
.cr-service-name { color: var(--cr-text-secondary); }
.cr-service-rate { font-weight: var(--cr-font-weight-medium); color: var(--cr-text-primary); }

/* ── Address reveal ── */
.cr-address-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; }
.cr-address-link:hover { color: var(--cr-text-primary); }

/* ── Parking modal (clickable fact) ── */
.cr-fact.clickable { cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.cr-fact.clickable:hover { border-color: var(--cr-text-primary); background: var(--cr-bg-hover); }

/* ── Space card grid — now uses .cr-listing-grid from marketplace-base.css ── */

/* ── Sidebar ── */
.cr-fd-sidebar { position: sticky; top: var(--cr-space-4); }

/* ── Action buttons ── */
.cr-action-stack { margin-bottom: var(--cr-space-4); }
.cr-action-stack .cr-btn { width: 100%; justify-content: center; display: flex; align-items: center; gap: var(--cr-space-2); font-size: var(--cr-font-size-sm); padding: var(--cr-space-3); }
.cr-action-stack .cr-btn-primary { margin-bottom: var(--cr-space-2); }
.cr-action-row { display: flex; gap: var(--cr-space-2); }
.cr-action-row .cr-btn { flex: 1; }

/* ── Inquiry card → shared in marketplace-base.css ── */

/* ── Responsive ── */
@media (max-width: 768px) {
    .cr-fd-layout { grid-template-columns: 1fr; }
    .cr-fd-sidebar { position: static; }
    .cr-rooms-grid { grid-template-columns: repeat(2, 1fr); }
    .cr-quick-facts { grid-template-columns: repeat(2, 1fr); }
    .cr-space-modal { width: 95%; max-height: 90vh; }
    .cr-space-modal-photo { max-height: 200px; }
    /* .cr-listing-grid responsive handled in marketplace-base.css */
}