/* ============================================================
   Renta · the front page's market rail

   What used to sit under the hero was three paragraphs describing the
   product to somebody who had just read the hero describing the product.
   This replaces them with the only thing on that page a stranger can act
   on: the flats, houses and land that are actually going, right now,
   photographed, priced, and swipeable.

   It loads AFTER auth.css and borrows its palette wholesale, so the rail
   belongs to the same page rather than looking bolted on. Nothing in here
   is used anywhere else, which is why it is its own file: the market's own
   stylesheet (market.css) never loads on the front door.

   The card says three things a photograph cannot: what kind of deal it is
   (to let / short stay / for sale / land), what it costs, and that it is
   free to move into today. Those are the three questions somebody asks
   before they tap.

   IT HAS TO FIT ON THE SCREEN. The band is only doing its job if a whole
   card is on it when the page opens - a heading with the top of a
   photograph under it reads as the end of the page, not the start of a
   row you can swipe. Everything below is budgeted against a phone of
   roughly 844 points and a laptop of 800: the hero has been cut back, the
   band's own padding is modest, and the card is kept to a width whose
   16:9 photograph comes in around 190 points tall. If a card is ever made
   taller, take the height back off something else here.
   ============================================================ */

/* ---------------- the hero above it, cut back ----------------
   These two rules belong to auth.css and are overridden HERE, not there,
   because this stylesheet is the only one the front page loads that no
   other page does - the door and the signup keep the roomier hero they
   were designed with. The user had the lede and the search field taken
   out for the same reason: to get the rail up onto the first screen. */
.auth-hero { padding: 44px 24px 30px; }

.fm {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 28px 28px;
  border-top: 1px solid var(--line);
  background: rgba(12, 15, 18, 0.5);
  backdrop-filter: blur(10px);
}

/* ---------------- the line above the rail ---------------- */
.fm-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.fm-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}
.fm-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.15;
  margin: 0;
  color: var(--fg);
}
.fm-head h2 em { font-style: italic; color: var(--accent); }

.fm-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.fm-nav {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.fm-nav:hover { background: var(--accent-soft); border-color: rgba(211, 164, 88, 0.5); }
.fm-nav:active { transform: scale(0.92); }
.fm-nav[disabled] { opacity: 0.28; pointer-events: none; }
/* nothing to scroll: the arrows go away rather than sitting there greyed */
.fm-nav[hidden] { display: none; }
.fm-all {
  margin-left: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-dim);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.fm-all:hover { color: var(--accent); }

/* ---------------- the rail itself ----------------
   One row, snapping, thumb-driven. The scrollbar is already hidden for
   the whole page by auth.css, so this only has to say where the cards
   stop. */
.fm-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 10px;
  margin: 0 -2px;
}
.fm-card {
  flex: 0 0 292px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.24s ease,
    box-shadow 0.24s ease;
}
.fm-card:hover {
  transform: translateY(-6px);
  border-color: rgba(211, 164, 88, 0.55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(211, 164, 88, 0.18);
}

/*
  Three or fewer places on the market, on a screen with room to spare.

  These cards used to be told to SHARE the strip out between them, so two
  of them came out 560px wide each - and a card that wide drags its
  photograph into a 2.9:1 letterbox that crops the building's head off and
  looks stretched. A house photograph has a shape. So the cards keep their
  own honest width here and the ROW moves to the middle instead; an
  ordinary rail of cards, centred, rather than two banners.

  `safe center` is what stops centring from hiding the first card off the
  left edge on a narrow desktop window: if the row ever does overflow it
  falls back to starting at the left, where it can still be scrolled to.
  A browser that has never heard of it drops that line and keeps plain
  centring, which is the harmless half of the bargain.
*/
@media (min-width: 761px) {
  .fm-rail.few {
    justify-content: center;
    justify-content: safe center;
  }
  .fm-rail.few .fm-card { flex: 0 0 340px; }
}

/* ---------------- the photograph ----------------
   A RATIO, AND NOTHING CLAMPING IT. Never `aspect-ratio` together with
   `max-height`: they look identical in Chrome and are wrong in Safari,
   which works the WIDTH back out of the clamped height and draws a
   260px-wide picture in a 560px-wide card with a slab of empty card
   beside it. The height here comes from the card's width and the card's
   width alone, which is why the width above is the thing kept honest.

   16:9 because that is the shape a phone takes a picture of a building
   in, so the crop takes the least off it. */
.fm-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d1013;
}
.fm-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.fm-card:hover .fm-shot img { transform: scale(1.06); }
.fm-none {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 40px;
  opacity: 0.28;
  background: linear-gradient(140deg, #1b2026, #10141a);
}
/* the wash the price sits on, so white type stays readable over any
   photograph at all */
.fm-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 8, 10, 0.92) 0%, rgba(6, 8, 10, 0.45) 32%, rgba(6, 8, 10, 0) 62%);
  pointer-events: none;
}

/* what kind of deal it is - the one thing a picture cannot say */
.fm-chip {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: linear-gradient(150deg, #e9c078 0%, var(--accent) 58%, #b9873c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 10px rgba(0, 0, 0, 0.4);
}
.fm-chip.sale { background: linear-gradient(150deg, #9fd6b0 0%, #4fa974 60%, #2f7a51 100%); }
.fm-chip.short { background: linear-gradient(150deg, #a9cbf0 0%, #5b93d4 60%, #35659c 100%); }
.fm-chip.land { background: linear-gradient(150deg, #dcd0a8 0%, #a89463 60%, #7b6a41 100%); }

.fm-shots {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(8, 10, 12, 0.62);
  backdrop-filter: blur(6px);
}
.fm-shots svg { width: 13px; height: 13px; }

.fm-price {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 11px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.fm-price b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

/* free today - the pip that says this is not an archive */
.fm-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c9e8d3;
  white-space: nowrap;
}
.fm-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5fd08a;
  box-shadow: 0 0 0 0 rgba(95, 208, 138, 0.65);
  animation: fm-pip 2.2s ease-out infinite;
}
@keyframes fm-pip {
  0% { box-shadow: 0 0 0 0 rgba(95, 208, 138, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(95, 208, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 208, 138, 0); }
}

/* ---------------- the words under it ---------------- */
.fm-text { padding: 12px 15px 14px; }
.fm-text h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.25;
  margin: 0 0 5px;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fm-where {
  font-size: 12.5px;
  color: var(--fg-dim);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;
}
/*
  ONE ROW OF PILLS, ALWAYS. A card with a long address wraps them onto a
  second row, and that second row is what hangs off the bottom of a 800pt
  laptop screen while the card beside it sits neatly inside it - two cards
  in a row of different heights, one of them cut. The overflow is hidden
  rather than the pills being shortened, because the ones that matter come
  first: beds, then baths, then where in the building.
*/
/*
  The height that clips the second row has to be the height of ONE WHOLE
  pill, or it slices the bottom off the first row instead of hiding the
  second - which is what a flat `max-height: 25px` did here. Everything is
  border-box, so that 25px was swallowing the 9px of padding and the 1px
  rule above, leaving 15px for a pill that stands 24px tall: every bubble
  came up with its bottom cut off.

  So the pill's height is stated rather than left to the inherited
  line-height, and the cut-off is worked out from it. Change the padding or
  the line-height below and the container follows on its own.
*/
.fm-facts {
  --fm-pill-h: 24px; /* 16px line + 3px padding twice + 1px border twice */
  --fm-facts-top: 10px; /* the 9px padding-top and the 1px border-top */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  max-height: calc(var(--fm-facts-top) + var(--fm-pill-h));
  overflow: hidden;
}
.fm-facts span {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 16px;
  color: var(--fg-dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  white-space: nowrap;
}

/* ---------------- dots ----------------
   Shown under the rail only when the row actually runs off the edge,
   because dots under a row you can already see whole are furniture. */
.fm-deck {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.fm-deck[hidden] { display: none; }
.fm-deck .dots { display: flex; align-items: center; gap: 7px; }
.fm-deck .dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(233, 231, 227, 0.28);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.fm-deck .dots button.on { background: var(--accent); transform: scale(1.4); }
.fm-deck .of { font-size: 11.5px; color: var(--fg-dim); margin-left: 4px; }

/* ---------------- the phone ----------------
   Where the fit is actually decided. Against ~844 points: the header and
   the hero take about 380 of it, this band's heading another 100, and the
   card is built to come in under 320 so the whole of it - photograph,
   price, title, facts - is on screen with the dots underneath.

   The card is a little narrower than the screen on purpose. The sliver of
   the next one showing past its edge is what says "this row moves"; a
   card that fills the width looks like a single tile. */
@media (max-width: 760px) {
  .auth-hero { padding: 30px 20px 24px; }

  .fm { padding: 18px 0 22px; border-radius: 0; }
  .fm-head { padding: 0 20px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .fm-head h2 { font-size: 21px; }
  .fm-controls { align-self: flex-end; }
  .fm-nav { display: none; }
  .fm-rail { padding: 6px 20px 10px; margin: 0; gap: 12px; }
  .fm-card { flex: 0 0 74%; }
  .fm-card:hover { transform: none; }
  /* a touch taller than the desk, because a narrow card can afford it */
  .fm-shot { aspect-ratio: 16 / 10; }
  .fm-deck { margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .fm-rail { scroll-behavior: auto; }
  .fm-card, .fm-shot img { transition: none; }
  .fm-live i { animation: none; }
}