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

/* ---------- location-page hero ---------- */
.hero-loc { padding-bottom: clamp(48px, 7vw, 88px); }
.hero-loc .hero-body { padding-top: clamp(44px, 5vw, 68px); padding-bottom: clamp(48px, 6vw, 76px); }
.hero-loc h1 { font-size: clamp(1.875rem, 4vw, 3rem); }
.hero-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.hero-meta a, .hero-meta span { color: #fff; display: inline-flex; align-items: center; gap: 11px; font-size: 1.0625rem; }
.hero-meta svg { width: 19px; height: 19px; color: var(--orange); flex: none; }
.hero-features { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.hero-feature { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: .875rem; font-weight: 600; line-height: 1.25; }
.hero-feature .ic {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4);
  display: grid; place-items: center; flex: none;
}
.hero-feature .ic svg { width: 18px; height: 18px; color: var(--orange); }

/* ---------- location cards ---------- */
.loc-cards { background: linear-gradient(180deg, var(--surface-peach) 0%, var(--surface-warm) 100%); padding: 0 0 var(--sp-7); }
.loc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1100px) { .loc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .loc-grid { grid-template-columns: 1fr; } }

.loc-card {
  /* position:relative so the availability badge — which is emitted by the
     generated featured-units fragment inside .loc-card-body — still lands
     over the top-left of the photograph exactly as in the approved design. */
  position: relative;
  background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column; border: 1px solid var(--line-2);
  transition: box-shadow .18s ease, transform .18s ease;
}
.loc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.loc-card-media { position: relative; aspect-ratio: 16 / 9; background: var(--line-2); }
.loc-card-media img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--green); color: #fff; font-size: .6875rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 6px 11px; border-radius: 6px; box-shadow: var(--shadow-sm);
}
.badge-amber { background: #8a5a12; }
.badge-quiet { background: var(--ink-2); }

.loc-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.loc-card-body h3 { font-size: .9375rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }
.loc-addr { display: flex; gap: 9px; color: var(--ink-3); font-size: .875rem; line-height: 1.45; margin-bottom: 10px; }
.loc-addr svg { width: 16px; height: 16px; color: var(--orange); flex: none; margin-top: 2px; }
.loc-types { color: var(--orange-700); font-weight: 700; font-size: .8125rem; margin-bottom: 14px; }

.loc-offer {
  background: var(--surface-warm); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 13px; margin-bottom: 12px;
}
.loc-offer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.loc-offer-label { font-size: .75rem; color: var(--ink-3); font-weight: 600; }
.loc-offer-unit { font-weight: 700; color: var(--ink); font-size: .9375rem; }
.loc-offer-price { color: var(--orange-700); font-weight: 800; font-size: 1.375rem; font-family: var(--font-display); white-space: nowrap; }
.loc-offer-price small { font-size: .8125rem; font-weight: 700; }
.loc-offer-wait { display: flex; align-items: center; gap: 11px; }
.loc-offer-wait svg { width: 22px; height: 22px; color: var(--ink-2); flex: none; }
.loc-offer-wait strong { display: block; color: var(--ink); font-size: .875rem; text-transform: uppercase; letter-spacing: .02em; }
.loc-offer-wait span { font-size: .8125rem; color: var(--ink-3); }
.loc-card .btn { margin-top: auto; }
.loc-login {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-top: 1px solid var(--line-2); margin: 12px -18px -18px; padding: 12px;
  color: var(--ink-2); font-size: .8125rem; font-weight: 600;
}
.loc-login:hover { color: var(--orange-700); background: var(--surface-warm); text-decoration: none; }
.loc-login svg { width: 14px; height: 14px; }

/* ---------- sidebar ---------- */
.side { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 1080px) { .side { position: static; } }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.panel-head {
  background: var(--green); color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: .875rem; letter-spacing: .05em; text-transform: uppercase; padding: 13px 18px;
}
.panel-body { padding: 18px; }
.panel-row { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.panel-row:first-child { padding-top: 0; }
.panel-row:last-child { border-bottom: 0; padding-bottom: 0; }
.panel-row > svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; margin-top: 3px; }
.panel-row .rb { min-width: 0; flex: 1; }
.panel-row h4 { font-family: var(--font-display); font-size: .8125rem; text-transform: uppercase; letter-spacing: .045em; color: var(--ink); margin: 0 0 6px; }
.panel-row p { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.hours { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; font-size: .875rem; }
.hours dt { color: var(--ink-3); margin: 0; }
.hours dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.map-embed { aspect-ratio: 16 / 10; background: var(--line-2); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.freshness { font-size: .75rem; color: var(--ink-4); display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.freshness svg { width: 13px; height: 13px; }
.notice {
  background: #fff8ec; border: 1px solid #f0dcc0; border-radius: var(--radius); padding: 12px 14px;
  font-size: .8125rem; color: #7a5a20; display: flex; gap: 10px;
}
.notice svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }


/* ---------- unavailable states (no verified QuikStor data) ---------- */

.loc-offer-unavailable { display: flex; flex-direction: column; gap: 3px; }
.loc-offer-unavailable strong { color: var(--ink); font-size: .8125rem; line-height: 1.35; }
.loc-offer-unavailable span { font-size: .8125rem; color: var(--ink-3); }

.units-unavailable {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.units-unavailable > svg { width: 22px; height: 22px; color: var(--orange); flex: none; margin-top: 2px; }
.units-unavailable p { margin: 0 0 8px; color: var(--ink-3); font-size: .9375rem; }
.units-unavailable p strong { color: var(--ink); }
.units-unavailable .btn { margin-top: 6px; }

/* ==========================================================================
   VISUAL SYSTEM — location cards, hero and sidebar
   Uses the tokens defined in main.css. No new shadows or gradients invented.
   ========================================================================== */

/* ---------- location cards ---------- */
.loc-card {
  background: var(--gradient-surface);
  box-shadow: var(--shadow-card);
  border-color: rgba(27,31,34,.07);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Top-edge highlight — reads as a lit surface rather than a flat rectangle. */
.loc-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0));
}
.loc-card:hover {
  transform: translateY(var(--lift-strong));
  box-shadow: var(--shadow-raised);
}

.loc-card-media { overflow: hidden; }
.loc-card-media picture, .loc-card-media img {
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}
.loc-card:hover .loc-card-media img { transform: scale(1.045); }
/* Very light scrim so the availability badge stays legible on any photograph. */
.loc-card-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,16,18,.30) 0%, rgba(12,16,18,.04) 42%, rgba(12,16,18,0) 100%);
}

.badge {
  background: var(--gradient-green);
  box-shadow: 0 4px 12px rgba(27,31,34,.22), var(--inset-top-dark);
  backdrop-filter: blur(2px);
}
/* .badge-amber is no longer emitted — waitlist is .badge-wait (green). Kept
   so an older cached fragment does not render an unstyled badge. */
.badge-amber { background: var(--gradient-green); }
.badge-quiet { background: var(--gradient-dark); }

.loc-offer {
  background: var(--gradient-price);
  border-color: rgba(27,31,34,.08);
  box-shadow: var(--inset-top), 0 1px 3px rgba(27,31,34,.04);
}
.loc-offer-price { text-shadow: 0 1px 0 rgba(255,255,255,.7); }

.loc-login {
  background: linear-gradient(180deg, #fdfbf9 0%, #faf6f2 100%);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.loc-login:hover { background: linear-gradient(180deg, #fff4ee 0%, #fdeae0 100%); color: var(--orange-700); }
.loc-login svg { transition: transform var(--dur) var(--ease); }
.loc-login:hover svg { transform: translateY(-1px); }

.loc-cards { position: relative; }

/* ---------- location hero ---------- */
.hero-loc .hero-media { left: 34%; }
@media (max-width: 1180px) { .hero-loc .hero-media { left: 20%; } }
@media (max-width: 860px)  { .hero-loc .hero-media { left: 0; } }
.hero-meta a { transition: color var(--dur-fast) var(--ease); }
.hero-meta a:hover { color: var(--orange); text-decoration: none; }

/* ---------- sidebar ---------- */
.panel {
  background: var(--gradient-surface);
  box-shadow: var(--shadow-card);
  border-color: rgba(27,31,34,.07);
  transition: box-shadow var(--dur) var(--ease);
}
.panel:hover { box-shadow: var(--shadow-raised); }
.panel-head {
  background: var(--gradient-green);
  box-shadow: var(--inset-top-dark);
  position: relative;
}
.panel-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, rgba(240,106,57,0), rgba(240,106,57,.7), rgba(240,106,57,0));
}

/* Icon chips give the rows a hierarchy the plain glyphs did not have. */
.panel-row > svg {
  width: 30px; height: 30px; padding: 7px; margin-top: 0;
  border-radius: 9px; box-sizing: border-box; color: var(--green);
  background: linear-gradient(180deg, #f3f8f3 0%, #e9f2ea 100%);
  box-shadow: var(--inset-top);
}
.panel-row { gap: 13px; padding: 14px 0; }
.panel-row h4 { margin-bottom: 7px; }
.hours dt, .hours dd { padding: 2px 0; }
.hours dt { color: var(--ink-3); }

.map-embed {
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, #f4f2f0 0%, #eceae7 100%);
  position: relative;
}
.map-embed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 6px 14px -8px rgba(27,31,34,.28), inset 0 -6px 14px -8px rgba(27,31,34,.18);
}

/* ---------- unavailable states ---------- */
.units-unavailable {
  background: var(--gradient-surface);
  box-shadow: var(--shadow-card);
  border-color: rgba(27,31,34,.07);
  position: relative; overflow: hidden;
}
.units-unavailable::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--gradient-orange);
}
.units-unavailable > svg {
  width: 30px; height: 30px; padding: 6px; box-sizing: border-box;
  border-radius: 9px; background: linear-gradient(180deg, #fff2ea 0%, #fde3d6 100%);
  box-shadow: var(--inset-top);
}
.loc-offer-unavailable strong { color: var(--ink); }

/* ---------- 3. green availability treatment ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px 7px 10px; font-size: .7rem; border-radius: 8px;
}
.badge svg { width: 14px; height: 14px; flex: none; }
/* ---------- availability colour hierarchy ----------
   ORANGE means you can rent it today. GREEN means the waitlist is open.
   Anything we have not verified stays neutral and borrows neither, because a
   coloured "unknown" is a claim we cannot support. */
.badge-available { background: var(--gradient-orange); box-shadow: var(--shadow-orange), var(--inset-top-dark); }
.badge-wait      { background: var(--gradient-green);  box-shadow: var(--shadow-green),  var(--inset-top-dark); }

.avail-cta, .wait-cta { font-size: .9375rem; }
.avail-cta svg:first-child, .wait-cta svg:first-child { width: 17px; height: 17px; }

.loc-card:has(.avail-cta) .loc-offer {
  border-left: 3px solid var(--orange);
  background: var(--gradient-price);
}
.loc-card:has(.avail-cta) .loc-offer-price { color: var(--orange-700); }

.loc-card:has(.wait-cta) .loc-offer {
  border-left: 3px solid var(--green);
  background: linear-gradient(180deg, #fbfdfb 0%, #f2f8f3 100%);
}
.loc-card:has(.wait-cta) .loc-offer-wait svg { color: var(--green-600); }
.loc-card:has(.wait-cta) .loc-offer-wait strong { color: var(--green-700, #1f4c28); }

/* Unknown: no accent bar, no tint, no coloured icon. */
.loc-card:has(.unknown-cta) .loc-offer {
  border-left: 3px solid var(--line);
  background: var(--surface-warm);
}

/* ==========================================================================
   FINAL REVIEW BUILD — item 4: photographs dark at rest, lit on hover
   Placed here rather than in main.css so it composes with the zoom rule above
   instead of being overridden by it. The zoom, the lift and the shadow are
   untouched; only brightness and the overlay change.
   ========================================================================== */
.loc-card-media img {
  filter: brightness(.72) saturate(.94);
  transition:
    transform var(--dur-slow) var(--ease-out),
    filter 420ms var(--ease);
}
/* The scrim above stays for badge legibility; this second layer is the one
   that lifts on hover, so the badge never loses its backing. */
.loc-card-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,12,14,.22) 0%, rgba(9,12,14,.36) 100%);
  transition: opacity 420ms var(--ease);
  opacity: 1;
}
.loc-card:hover .loc-card-media img,
.loc-card:focus-within .loc-card-media img { filter: brightness(.99) saturate(1.04); }
.loc-card:hover .loc-card-media::before,
.loc-card:focus-within .loc-card-media::before { opacity: .22; }

/* A touch screen has no hover, so the resting state has to be readable as a
   photograph rather than as a dark rectangle nobody can light up. */
@media (hover: none) {
  .loc-card-media img { filter: brightness(.90) saturate(1); }
  .loc-card-media::before { opacity: .34; }
}
@media (prefers-reduced-motion: reduce) {
  .loc-card-media img, .loc-card-media::before { transition-duration: 1ms; }
}

/* ---------- FINAL REVIEW BUILD — hero clearance and the trailing breadcrumb ----------
   The header card now floats over the banner, so the location hero reserves the
   same room the home hero does. The breadcrumb here follows the hero rather
   than standing in for it, so it is a compact dark bar, not a masthead. */
.hero-loc .hero-body { padding-top: calc(var(--header-float) + clamp(24px, 3vw, 44px)); }

.hero-loc + .breadcrumb,
main > .hero + .breadcrumb {
  background: var(--gradient-dark-deep);
  color: rgba(255,255,255,.72);
  padding: 13px 0 14px;
}

/* ==========================================================================
   CLICKABLE LOCATION PHOTOS
   ==========================================================================
   The photograph is its own link, not a card-wide wrapper — a wrapper would
   swallow the View Units and Tenant Login buttons into itself and produce
   nested anchors, which is invalid and unusable with a screen reader. This
   anchor contains only the <picture>, so the buttons beneath stay separate
   controls with their own labels.

   The vignette, resting brightness, hover lighting and zoom all live on
   .loc-card / .loc-card-media and are untouched; the anchor is a transparent
   layer that adds a cursor, a target and a focus ring.
   ========================================================================== */
.loc-card-photo {
  display: block;
  position: relative;
  z-index: 2;
  cursor: pointer;
  border-radius: inherit;
  -webkit-tap-highlight-color: rgba(240,106,57,.18);
}
.loc-card-photo:hover { text-decoration: none; }

/* Keyboard focus.
   The ring is a pseudo-element, not an outline. An outline on the anchor is
   painted before its children, so the photograph sits on top of it and the
   ring vanishes; and an outline drawn outside the box is clipped away by
   .loc-card-media{overflow:hidden}. A positioned ::after above the image
   survives both. White inside orange so it reads on a dark photo and on a
   bright one. */
.loc-card-photo:focus-visible { outline: none; }
.loc-card-photo:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: 3px solid var(--orange);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.92), 0 0 0 1px rgba(0,0,0,.25);
}
/* Focusing the photo lights it exactly as hovering does — .loc-card:focus-within
   already drives the brightness and zoom rules. */