/* ==========================================================================
   Big Peach Self Storage — unit search, filters & unit cards
   Part of the StorageRankers static/SSI standard. Edit directly; no build step.
   Load order: main.css -> locations.css -> units.css -> home.css
   ========================================================================== */

/* ---------- unit search ---------- */
.units-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
@media (max-width: 1080px) { .units-layout { grid-template-columns: 1fr; } }

.units-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.units-head h2 { text-transform: uppercase; margin: 0; }
.units-count { color: var(--ink-3); font-size: .9375rem; margin: 6px 0 0; }
.sortwrap { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--ink-3); }
select.control {
  font-family: var(--font); font-size: .875rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 34px 9px 12px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626b72' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}

.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.chip {
  font-family: var(--font); font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; padding: 9px 17px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--orange); color: var(--orange-700); }
.chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #fff; }

.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 18px; }
.unit-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.unit-card:hover { box-shadow: var(--shadow); border-color: var(--line); }
.unit-top { display: flex; gap: 13px; margin-bottom: 12px; }
.unit-thumb {
  width: 74px; height: 74px; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--line-2); display: grid; place-items: center;
}
.unit-thumb svg { width: 100%; height: 100%; }
.unit-title { min-width: 0; }
.unit-title h3 { font-size: 1.0625rem; margin: 0 0 2px; }
.unit-title .kind { font-size: .8125rem; font-weight: 700; color: var(--ink-3); }
.unit-title .kind.cc { color: var(--green); }
.unit-desc { font-size: .8125rem; color: var(--ink-3); line-height: 1.5; margin: 0 0 12px; }
.unit-attrs { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.unit-attrs li { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--ink-2); }
.unit-attrs svg { width: 15px; height: 15px; color: var(--green); flex: none; }

.unit-price {
  margin-top: auto; background: var(--surface-warm); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 13px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; margin-bottom: 10px;
}
.unit-price .lbl { font-size: .8125rem; color: var(--ink-3); font-weight: 600; }
.unit-price .amt { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; color: var(--orange-700); white-space: nowrap; }
.unit-price .amt small { font-size: .8125rem; }
.unit-price .was { display: block; font-size: .75rem; color: var(--ink-4); text-decoration: line-through; font-weight: 600; text-align: right; }
.unit-promo {
  background: var(--green-050); border: 1px solid #cfe0d2; color: var(--green-600);
  font-size: .75rem; font-weight: 700; padding: 6px 10px; border-radius: 6px; margin-bottom: 10px;
}
.unit-details { margin-top: 10px; }
.unit-details summary {
  cursor: pointer; font-size: .8125rem; font-weight: 700; color: var(--ink-2);
  list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 0;
}
.unit-details summary::-webkit-details-marker { display: none; }
.unit-details summary::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); margin-left: 2px; margin-top: -3px; transition: transform .16s;
}
.unit-details[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
.unit-details .body { font-size: .8125rem; color: var(--ink-3); padding-top: 8px; border-top: 1px solid var(--line-2); margin-top: 6px; }
.unit-details .body dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.unit-details .body dt { font-weight: 700; color: var(--ink-2); }
.unit-details .body dd { margin: 0; }

.empty-state {
  border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 44px 24px;
  text-align: center; color: var(--ink-3); background: #fff;
}

/* Climate-controlled emphasis inside a unit-card title. */
.unit-cc { color: var(--green); }

/* Unit with no verified rate — keeps the block's shape without showing a figure. */
.unit-price-none { justify-content: flex-start; }
.unit-price-none .lbl { font-weight: 700; color: var(--ink-2); }

/* ==========================================================================
   VISUAL SYSTEM — unit cards, filters and sorting
   A shopping interface, not informational boxes. Tokens from main.css.
   ========================================================================== */

/* ---------- filter chips ---------- */
.chip {
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f5 100%);
  box-shadow: 0 1px 2px rgba(27,31,34,.05);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.chip:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(240,106,57,.16); }
.chip[aria-pressed="true"] {
  background: var(--gradient-orange);
  border-color: transparent;
  box-shadow: var(--shadow-orange), var(--inset-top);
  transform: translateY(-1px);
}

select.control {
  background-color: #fff;
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626b72' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ffffff 0%, #fbf8f5 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 10px center, 0 0;
  background-size: 15px, auto;
  box-shadow: 0 1px 2px rgba(27,31,34,.05);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
select.control:hover { border-color: var(--orange); box-shadow: 0 4px 10px rgba(240,106,57,.14); }

/* ---------- unit cards ---------- */
.unit-card {
  background: var(--gradient-surface);
  box-shadow: var(--shadow-card);
  border-color: rgba(27,31,34,.07);
  position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.unit-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0));
}
.unit-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-raised);
  border-color: rgba(240,106,57,.22);
}

.unit-thumb {
  box-shadow: var(--inset-top), 0 2px 6px rgba(27,31,34,.07);
  border: 1px solid rgba(27,31,34,.06);
}
.unit-title h3 { letter-spacing: -.015em; }
.unit-attrs li { color: var(--ink-2); }
.unit-attrs svg { color: var(--green); }

/* Price panel — the decision point, so it carries the most weight. */
.unit-price {
  background: var(--gradient-price);
  border-color: rgba(27,31,34,.09);
  box-shadow: var(--inset-top), 0 1px 3px rgba(27,31,34,.04);
  padding: 12px 14px;
}
.unit-price .amt { text-shadow: 0 1px 0 rgba(255,255,255,.75); letter-spacing: -.02em; }
.unit-price .was { position: relative; text-decoration: none; }
.unit-price .was::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px;
  background: var(--danger); opacity: .65; transform: rotate(-6deg);
}
.unit-price-none {
  background: linear-gradient(180deg, #fafafa 0%, #f4f3f1 100%);
  border-style: dashed;
}

.unit-promo {
  background: linear-gradient(180deg, #f2f9f3 0%, #e7f2e9 100%);
  box-shadow: var(--inset-top);
}

.unit-card .btn-primary { box-shadow: var(--shadow-orange), var(--inset-top); font-size: .9375rem; }
.unit-card .btn-primary:hover { box-shadow: var(--shadow-orange-strong), var(--inset-top); }

/* ---------- accordion ---------- */
.unit-details summary { transition: color var(--dur-fast) var(--ease); border-radius: 6px; }
.unit-details summary:hover { color: var(--orange-700); }
.unit-details[open] summary { color: var(--orange-700); }
.unit-details[open] .body { animation: unit-reveal var(--dur) var(--ease-out) both; }
@keyframes unit-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.unit-details .body {
  background: linear-gradient(180deg, #fbfaf8 0%, #f7f5f2 100%);
  border-radius: 8px; padding: 12px; margin-top: 8px; border-top: 0;
}
.unit-details .body dt { color: var(--ink); }

.empty-state {
  background: var(--gradient-surface);
  box-shadow: var(--shadow-card);
  border-color: rgba(27,31,34,.12);
}

.units-head h2 { letter-spacing: -.015em; }
.freshness { color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .chip:hover, .chip[aria-pressed="true"], .unit-card:hover { transform: none !important; }
  .unit-details[open] .body { animation: none !important; }
}

/* ==========================================================================
   AVAILABILITY COLOUR HIERARCHY — unit cards
   ==========================================================================
   Orange = rentable now. Green = waitlist open. Neutral = not verified.
   Driven by data-state, which the sync writes from the parsed record, so the
   colour can never disagree with the button beside it.
   ========================================================================== */
.unit-card[data-state="available"] .unit-price { border-left: 3px solid var(--orange); }
.unit-card[data-state="available"] .unit-price .amt { color: var(--orange-700); }

.unit-card[data-state="waitlist"] .unit-price {
  border-left: 3px solid var(--green);
  background: linear-gradient(180deg, #fbfdfb 0%, #f2f8f3 100%);
}
.unit-card[data-state="waitlist"] .unit-price .amt { color: var(--green-600); }

.unit-card[data-state="unknown"] .unit-price {
  border-left: 3px solid var(--line);
  background: var(--surface-warm);
}
.unit-card[data-state="unknown"] .unit-price .amt { color: var(--ink-2); }

/* The climate-controlled label was green, which now reads as "waitlist" when
   it sits directly above an orange Rent Now. Green is reserved for
   availability state, so the feature label goes neutral. This is a colour
   change only — the wording and the logic are untouched. */
.unit-title .kind.cc { color: var(--ink-3); }
.unit-cc { color: var(--ink-2); }