/**
 * The neighbourhoods row, and the status viewer it opens.
 *
 * Loaded by the pages that draw the row — the homepage and /neighborhoods —
 * rather than by the shell, which every page pays for.
 *
 * THE RING MEANS "NOT SEEN YET", AND NOTHING ELSE
 *
 * The convention every reader here already knows from WhatsApp: a coloured
 * ring is something you have not watched, a quiet one is something you have.
 * It re-lights when a neighbourhood gains a listing after you last opened it.
 * It does not mean popular — there is no honest measure of that to draw from.
 */

/* ── The row ─────────────────────────────────────────────────────────────── */

.v2-stories { padding-block: var(--s-8) 0; }
.v2-stories-head { display: flex; align-items: baseline; gap: var(--s-3); margin-block-end: var(--s-4); }
.v2-stories-head h2 { font-family: var(--font-display); font-size: var(--t-xl); }
:lang(ku) .v2-stories-head h2, :lang(ar) .v2-stories-head h2 { font-family: var(--font-ar); font-weight: 700; }
.v2-stories-more { font-size: var(--t-sm); font-weight: 600; margin-inline-start: auto; white-space: nowrap; }

.v2-story-row {
  display: flex; gap: var(--s-4); list-style: none; margin: 0;
  padding: var(--s-1) 0 var(--s-3);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.v2-story-row::-webkit-scrollbar { display: none; }
.v2-story-row > li { flex: 0 0 auto; scroll-snap-align: start; }

.v2-story-ring {
  --ring: conic-gradient(from 210deg, var(--brand-gold), var(--brand-teal-lit), var(--brand-teal), var(--brand-gold-soft), var(--brand-gold));
  display: grid; justify-items: center; gap: var(--s-1);
  inline-size: 84px; color: var(--ink); text-align: center;
}
.v2-story-ring:hover { text-decoration: none; }
.v2-story-ring:focus-visible { outline: none; }
.v2-story-ring:focus-visible .v2-story-face { outline: 2px solid var(--accent); outline-offset: 3px; }

.v2-story-face {
  position: relative; display: block;
  inline-size: 76px; block-size: 76px; padding: 3px;
  border-radius: var(--radius-pill); background: var(--ring);
  transition: transform var(--fast) var(--ease);
}
.v2-story-ring:hover .v2-story-face { transform: scale(1.04); }
.v2-story-ring[data-seen] .v2-story-face { background: var(--rule-strong); }
.v2-story-face img {
  display: block; inline-size: 100%; block-size: 100%;
  border-radius: var(--radius-pill); border: 3px solid var(--surface);
  object-fit: cover;
  /* Below the burned-in caption, where the property itself is. */
  object-position: 50% 62%;
  background: var(--surface-deep);
}
.v2-story-fresh {
  position: absolute; inset-block-end: -4px; inset-inline: 0; margin-inline: auto;
  inline-size: max-content; padding: 1px 7px;
  border-radius: var(--radius-pill); border: 2px solid var(--surface);
  background: var(--live); color: var(--live-on);
  font-size: 10px; font-weight: 700; line-height: 1.5;
}
.v2-story-name {
  font-size: var(--t-sm); font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-block-start: var(--s-1);
}
.v2-story-count { font-size: var(--t-xs); color: var(--ink-dim); }

@media (min-width: 900px) {
  .v2-story-row { gap: var(--s-5); }
  .v2-story-ring { inline-size: 96px; }
  .v2-story-face { inline-size: 88px; block-size: 88px; }
}

/* ── The viewer ──────────────────────────────────────────────────────────── */

.v2-story {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none;
  background: var(--surface-deep); color: var(--brand-mint);
  overscroll-behavior: contain;
}
.v2-story::backdrop { background: var(--surface-deep); }
html:has(.v2-story[open]) { overflow: hidden; }

.v2-story-col {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  block-size: 100%; max-inline-size: 460px; margin-inline: auto;
  padding: var(--s-3) var(--s-3) max(var(--s-3), env(safe-area-inset-bottom));
  gap: var(--s-2);
}

.v2-story-bar-row { display: flex; align-items: center; gap: var(--s-2); }
.v2-story-bars { flex: 1; display: flex; gap: 3px; }
.v2-story-bars > span {
  flex: 1; block-size: 3px; border-radius: var(--radius-pill); overflow: hidden;
  background: color-mix(in srgb, var(--brand-mint) 26%, transparent);
}
.v2-story-bars > span > i { display: block; block-size: 100%; inline-size: 0; background: var(--brand-gold); }
.v2-story-bars > span.is-done > i { inline-size: 100%; }
/* inline-size rather than a transform, so the bar fills from the side the
   text starts on in both directions without a physical transform-origin. */
.v2-story-bars > span.is-on > i { animation: v2-story-fill var(--story-ms, 6000ms) linear forwards; }
.v2-story[data-paused] .v2-story-bars > span.is-on > i { animation-play-state: paused; }
@keyframes v2-story-fill { from { inline-size: 0; } to { inline-size: 100%; } }

.v2-story-icon {
  display: grid; place-items: center; flex: 0 0 auto;
  inline-size: 36px; block-size: 36px; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand-mint) 10%, transparent); color: var(--brand-mint); cursor: pointer;
}
.v2-story-icon:hover { background: color-mix(in srgb, var(--brand-mint) 20%, transparent); }
.v2-story-icon:focus-visible, .v2-story-nav:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.v2-story-icon .is-play { display: none; }
.v2-story[data-paused] .v2-story-icon .is-pause { display: none; }
.v2-story[data-paused] .v2-story-icon .is-play { display: block; }
/* Not mirrored in right-to-left: a play triangle names the medium, not a reading direction. */

.v2-story-body { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-3); min-block-size: 0; }

.v2-story-top { display: flex; align-items: center; gap: var(--s-3); }
.v2-story-avatar {
  inline-size: 36px; block-size: 36px; border-radius: var(--radius-pill);
  object-fit: cover; object-position: 50% 62%;
  border: 2px solid var(--brand-gold);
}
.v2-story-who { display: grid; line-height: 1.3; min-inline-size: 0; }
.v2-story-who a {
  color: var(--brand-mint); font-weight: 700; font-size: var(--t-md);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-story-who span { font-size: var(--t-xs); color: color-mix(in srgb, var(--brand-mint) 66%, transparent); }

.v2-story-slide { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s-3); min-block-size: 0; }
.v2-story-slide[hidden] { display: none; }

/* The picture is never covered: nothing is positioned over it. Contained, not
   cropped — three films are landscape, and a photograph of a room cropped to
   9:16 is a photograph of a wall. */
.v2-story-stage {
  position: relative; min-block-size: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-lg); overflow: hidden;
  background: color-mix(in srgb, var(--brand-mint) 5%, var(--surface-deep));
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
/* Absolutely placed: a percentage height inside an auto-sized grid row
   resolves to the picture's own height, and the bottom of the reel — our
   watermark — was cut off by the stage's overflow. */
.v2-story-stage img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%; object-fit: contain;
  -webkit-user-drag: none; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .v2-story-slide:not([hidden]) .v2-story-stage img { animation: v2-story-in var(--slow) var(--ease); }
  @keyframes v2-story-in { from { opacity: .35; } to { opacity: 1; } }
}

.v2-story-info { display: grid; gap: var(--s-1); }
.v2-story-kind { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); }
.v2-story-kind .v2-tag { margin-inline-start: 0; background: var(--brand-gold); color: var(--live-on); backdrop-filter: none; }
.v2-story-price { font-size: var(--t-2xl); font-weight: 700; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
.v2-story-price small { font-size: var(--t-sm); font-weight: 600; color: color-mix(in srgb, var(--brand-mint) 72%, transparent); }
.v2-story-price .v2-story-down { color: var(--brand-gold-soft); }
.v2-story-facts { font-size: var(--t-sm); color: color-mix(in srgb, var(--brand-mint) 72%, transparent); }
.v2-story-go { margin-block-start: var(--s-2); justify-content: center; }

.v2-story-end {
  cursor: default; align-content: center; gap: var(--s-3); padding: var(--s-6);
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--brand-teal) 55%, transparent), transparent 70%),
    color-mix(in srgb, var(--brand-mint) 4%, var(--surface-deep));
}
.v2-story-col:focus { outline: none; }
/* The neighbourhood's own cover, far behind the words, so the last slide is
   still a picture of the place rather than an empty panel. */
.v2-story-end > * { position: relative; }
.v2-story-end > .v2-story-end-bg {
  position: absolute; inset: -10%; inline-size: 120%; block-size: 120%;
  object-fit: cover; filter: blur(22px) saturate(1.1); opacity: .32;
}
.v2-story-end-name { font-size: var(--t-3xl); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.v2-story-end-n { color: color-mix(in srgb, var(--brand-mint) 72%, transparent); margin-block-end: var(--s-3); }
.v2-story-end .v2-btn { min-inline-size: 220px; justify-content: center; }
.v2-story-then {
  background: transparent; color: var(--brand-mint);
  border-color: color-mix(in srgb, var(--brand-mint) 30%, transparent);
}
.v2-story-then:hover { border-color: var(--brand-gold); color: var(--brand-gold); }

/* Beside the column, on a screen with room and a pointer to use them. A phone
   taps the picture instead. */
.v2-story-nav { display: none; }
@media (min-width: 720px) and (hover: hover) {
  .v2-story-nav {
    display: grid; place-items: center;
    position: absolute; inset-block-start: 50%; translate: 0 -50%;
    inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--brand-mint) 12%, transparent); color: var(--brand-mint); cursor: pointer;
  }
  .v2-story-nav:hover { background: var(--brand-gold); color: var(--live-on); }
  .v2-story-nav.is-prev { inset-inline-start: calc(50% - 230px - 64px); }
  .v2-story-nav.is-next { inset-inline-end: calc(50% - 230px - 64px); }
  [dir="rtl"] .v2-story-nav svg { transform: scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing advances by itself for this reader, so a bar that fills would be
     a promise the viewer does not keep. */
  .v2-story-bars > span.is-on > i { animation: none; inline-size: 100%; }
  .v2-story-icon[data-v2-story-pause] { display: none; }
}