/* Trojan Storage — live unit listing ("Listing A" rows).
   Recreates the Facility mock's unit rows: photo · name+size · online special ·
   feature tags · slate rate panel · stacked Rent/Reserve (or Choose Your Space).
   Tokenized to the Trojan design system with literal fallbacks so the shortcode
   is self-styling anywhere it's dropped (facility pages, SEO landing posts). The
   .btn / .badge / .card primitives come from the theme; this file styles the
   listing-specific pieces (.unit-row, .unit-rate, .seg, .promo-banner, .utag …). */

.tsf-units { margin: 0; }

/* ---------- Top bar + controls ---------- */
.tsf-units__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.tsf-units__heading {
  font: var(--fw-bold, 700) 26px/1.1 var(--font-display, 'Barlow Semi Condensed', 'Arial Narrow', sans-serif);
  color: var(--text-strong, #0d0f13); margin: 0;
}
.tsf-units__live svg { width: 12px; height: 12px; }

.seg {
  display: inline-flex; border: 1px solid var(--border-subtle, #dce0e7);
  border-radius: var(--radius-sm, 6px); overflow: hidden; background: #fff; margin-bottom: 16px;
}
.seg button {
  border: none; background: #fff; cursor: pointer;
  font: var(--fw-semibold, 600) 14px/1 var(--font-sans, 'Barlow', system-ui, sans-serif);
  color: var(--slate-600, #4b525f); padding: 11px 26px;
}
.seg button.on { background: var(--brand, #d32d08); color: #fff; }

.promo-banner {
  border: 1.5px dashed var(--amber-500, #e2a100); background: var(--amber-50, #fdf4e1);
  border-radius: var(--radius-md, 10px); padding: 14px 18px; margin-bottom: 18px;
}
.promo-banner .lead { font-size: 13px; color: var(--amber-600, #b47f00); }
.promo-banner .deal {
  display: flex; align-items: center; gap: 8px; margin-top: 3px;
  font: var(--fw-bold, 700) 16px/1.2 var(--font-display, 'Barlow Semi Condensed', sans-serif);
  color: var(--text-strong, #0d0f13);
}
.promo-banner .deal svg { width: 18px; height: 18px; color: var(--amber-500, #e2a100); flex: 0 0 auto; }

/* ---------- List ---------- */
.tsf-units__list { display: flex; flex-direction: column; gap: 14px; }
.tsf-units__disclaimer { font-size: 12px; color: var(--text-muted, #6b7383); margin: 14px 0 0; }

/* ---------- Row ---------- */
.unit-row { display: flex; align-items: stretch; padding: 0; overflow: hidden; }
.unit-row.is-soldout { opacity: 0.7; }
.unit-img {
  width: 150px; flex: 0 0 auto;
  background-image: linear-gradient(135deg, #22262e, #4b525f);
  background-size: cover; background-position: center;
}
.unit-row__main { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.unit-row__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.unit-row__name {
  font: var(--fw-extra, 800) 19px/1 var(--font-display, 'Barlow Semi Condensed', sans-serif);
  color: var(--text-strong, #0d0f13);
}
.unit-row__desc { font-size: 13.5px; margin: 0; }

/* online special callout */
.online-special {
  border: 1.5px solid var(--amber-500, #e2a100); background: var(--amber-50, #fdf4e1);
  border-radius: var(--radius-sm, 6px); padding: 10px 14px;
  display: flex; gap: 9px; align-items: flex-start;
}
.online-special svg { width: 17px; height: 17px; color: var(--amber-500, #e2a100); fill: var(--amber-500, #e2a100); flex: 0 0 auto; margin-top: 1px; }
.online-special span { font-size: 13.5px; line-height: 1.45; color: var(--text-body, #353a44); }
.online-special b { color: var(--text-strong, #0d0f13); }

/* feature tags */
.unit-row__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.utag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--slate-100, #edeff3); color: var(--slate-700, #353a44);
  font: var(--fw-semibold, 600) 12.5px/1 var(--font-sans, 'Barlow', system-ui, sans-serif);
  padding: 7px 12px; border-radius: var(--radius-pill, 999px);
}
.utag svg { width: 14px; height: 14px; color: var(--brand, #d32d08); }

/* rate panel */
.unit-rate {
  width: 208px; flex: 0 0 auto; background: var(--slate-50, #f6f7f9);
  border-left: 1px solid var(--border-subtle, #dce0e7); padding: 18px;
  text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.rate-label {
  font: var(--fw-bold, 700) 11px/1 var(--font-sans, 'Barlow', sans-serif);
  letter-spacing: .07em; text-transform: uppercase; color: var(--brand, #d32d08); margin-bottom: 5px;
}
.rate-note { font-size: 11.5px; color: var(--text-muted, #6b7383); line-height: 1.4; }
.strike { color: var(--text-faint, #99a1af); text-decoration: line-through; font-size: 14px; }
.price-from { font: var(--fw-semibold, 600) 13px/1 var(--font-sans, 'Barlow', sans-serif); color: var(--text-muted, #6b7383); }
.price-big { font: var(--fw-extra, 800) 26px/1 var(--font-display, 'Barlow Semi Condensed', sans-serif); color: var(--text-strong, #0d0f13); }
.unit-rate__now, .unit-rate__from { display: flex; align-items: baseline; gap: 4px; justify-content: center; margin: 2px 0 6px; }
.unit-rate .badge-hot { align-self: center; }
.unit-rate .badge-hot svg { width: 12px; height: 12px; }

/* action panel */
.unit-act {
  width: 168px; flex: 0 0 auto; background: var(--slate-50, #f6f7f9);
  padding: 18px 18px 18px 0; display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
.unit-act--center { justify-content: center; text-align: center; }
.unit-act .rate-note { text-align: center; }

/* notices */
.tsf-units-notice { margin: 16px 0; color: var(--text-muted, #6b7383); }
.tsf-units-notice--admin {
  padding: 10px 14px; border-left: 3px solid var(--amber-600, #b47f00);
  background: var(--slate-50, #f6f7f9); font-size: 14px;
}

/* =================================================================== */
/* Mobile — rows become stacked cards (photo on top)                   */
/* =================================================================== */
@media (max-width: 720px) {
  .seg { width: 100%; }
  .seg button { flex: 1; padding: 10px 0; }

  .unit-row { flex-direction: column; }
  .unit-img { width: 100%; height: 120px; }
  .unit-rate {
    width: auto; border-left: 0; border-top: 1px solid var(--border-subtle, #dce0e7);
    text-align: left; align-items: flex-start;
  }
  .unit-rate__now, .unit-rate__from { justify-content: flex-start; }
  .unit-act { width: auto; padding: 0 16px 16px; flex-direction: row; }
  .unit-act .btn { flex: 1; }
  .unit-act--center { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .unit-row, .btn { transition: none; }
}