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

/* ── Layout ── */
.cr-sd { max-width: 1120px; margin: 0 auto; padding: 0 var(--cr-space-4) var(--cr-space-8); }
.cr-sd-header { margin-bottom: var(--cr-space-6); }
.cr-sd-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-sd-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-sd-header .meta-row .loc { display: flex; align-items: center; gap: var(--cr-space-1); cursor: pointer; transition: color 0.2s; }
.cr-sd-header .meta-row .loc:hover { color: var(--cr-text-primary); }
.cr-sd-header .meta-row .loc svg { pointer-events: none; }
.cr-sd-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); }
.cr-sd-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--cr-space-8); align-items: start; }

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

/* ── Sidebar ── */
.cr-sidebar { position: sticky; top: var(--cr-space-4); }
.cr-sidebar-card { border: 1px solid var(--cr-border); border-radius: var(--cr-radius-lg); padding: 0; background: var(--cr-bg-elevated); overflow: visible; }
.cr-sidebar-rate { display: flex; align-items: baseline; gap: var(--cr-space-2); margin-bottom: var(--cr-space-5); }
.cr-sidebar-rate .amt { font-size: var(--cr-font-size-lg); font-weight: var(--cr-font-weight-bold); }
.cr-sidebar-rate .period { font-size: var(--cr-font-size-sm); color: var(--cr-text-secondary); }
.cr-sidebar-rates-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cr-space-3); margin-bottom: var(--cr-space-5); padding-bottom: var(--cr-space-4); border-bottom: 1px solid var(--cr-border); }
.cr-sidebar-rates-grid .rate-item { text-align: center; }
.cr-sidebar-rates-grid .rate-item .amt { font-size: var(--cr-font-size-md); font-weight: var(--cr-font-weight-semibold); }
.cr-sidebar-rates-grid .rate-item .type { font-size: var(--cr-font-size-xs); color: var(--cr-text-tertiary); }
.cr-sidebar-actions { display: flex; flex-direction: column; gap: var(--cr-space-3); }
.cr-sidebar-actions .cr-btn { width: 100%; text-align: center; }

/* ── Responsive ── */
@media (max-width: 900px) {
    /* On mobile, flatten the two-column grid into a single flex column
       and reorder so that the Price card and Facility banner appear
       ABOVE the main set cards. We use display:contents to promote the
       sidebar-card and facility-banner into the flex parent so they can
       be targeted with `order`. */
    .cr-sd-layout { display: flex; flex-direction: column; gap: var(--cr-space-6); }
    .cr-sd-layout > div { display: contents; }
    .cr-sidebar { display: contents; position: static; }
    .cr-sd-layout #sidebar-card { order: 1; margin-bottom: 0; }
    .cr-sd-layout #facility-toggle-card { order: 2; margin-top: 0; }
    .cr-sd-layout > div:first-child > .cr-sd-section { order: 3; }
}

@media (max-width: 768px) {
    .cr-sd { overflow-x: hidden; }
}

@media (max-width: 480px) {
    .cr-sd-header h1 { font-size: var(--cr-font-size-xl); }
}