/* ============================================================================
   iProperty.com.sg — Coming Soon
   Figma: iProperty / Desktop - 1 (node 875:3957)
   ========================================================================== */

:root {
  /* Brand + neutrals (raw hex from the Figma node) */
  --navy: #1e3a8a;
  --ink: #0f172a;
  --surface: #f8fafc;          /* navbar / search field base */
  --white: #ffffff;            /* token: Neutral/L Neutral 100 */
  --muted: #a1a6ad;            /* wordmark TLD */
  /* The search bar is translucent over a moving photo, so its base tone swings
     between ~180 and ~250 luminance. #334155 clears 4.5:1 against the darkest
     of that range, where the designed #a1a6ad only managed ~1.15:1. */
  --placeholder: #334155;
  --sub: #c0c0c0;              /* hero subtitle */
  --stage: #191919;            /* frame background */

  /* token: Shadow/Mobile L1 — DROP_SHADOW #0B113426, offset (0,2), radius 12 */
  --shadow-l1: 0 2px 12px rgba(11, 17, 52, 0.15);

  /* Type */
  --font-ui: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* token: Web/Body/16 Demi Bold — Avenir Next / 600 / 16 / 22 */
  --font-btn: "Avenir Next", "Avenir", "Montserrat", ui-sans-serif, system-ui, sans-serif;

  /* Mosaic lattice, measured in the rotated (local) frame of the design.
     Tile 353x374; column pitch 421 (353 + 68); row pitch 409 (374 + 35);
     each column sits ~120px higher than the one to its left. */
  --tile-w: 353px;
  --tile-h: 374px;
  --col-gap: 68px;
  --row-gap: 35px;
  --row-pitch: 409px;
  --col-pitch: 421px;
  --stagger: 120px;
  --tilt: 15deg;
  --drift-speed: 30;           /* px per second */

  /* Page rhythm */
  --page-max: 1392px;          /* navbar width at the 1440 frame */
  --page-inset: 24px;
  --hero-w: 1055px;            /* hero row: 582 + 64 + 409 */
  --hero-gap: 64px;
  --col-l: 582px;              /* copy + search column */
  --col-r: 409px;              /* trending column */
  --card-min: 498px;           /* card height is pinned in the design */
  --hero-guard: 130px;         /* clearance under the floating navbar */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--stage);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Background ─────────────────────────────────────────────────────────── */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--stage);
  pointer-events: none;
}

/* Rotated lattice. Sized by mosaic.js from the viewport, then rotated once. */
.mosaic {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  gap: var(--col-gap);
  transform: translate(-50%, -50%) rotate(var(--tilt));
  transform-origin: 50% 50%;
}

.mosaic__col {
  position: relative;
  flex: 0 0 auto;
  width: var(--tile-w);
  height: 100%;
}

/* Static per-column offset — kept separate from the animated node so the two
   transforms never fight. */
.mosaic__shift {
  position: absolute;
  inset: 0 0 auto 0;
  transform: translate3d(0, var(--y0, 0px), 0);
}

.mosaic__track {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  will-change: transform;
  animation: drift var(--duration, 80s) linear infinite;
}

/* The track holds the tile sequence twice, so shifting it up by exactly one
   sequence height (--loop) lands on an identical frame. */
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(-1 * var(--loop)), 0); }
}

/* Alternate columns run the other way. `reverse` walks the same keyframes
   backwards, so it visits the identical position range and stays seamless. */
.mosaic__col:nth-child(even) .mosaic__track {
  animation-direction: reverse;
}

.mosaic__tile {
  flex: 0 0 auto;
  width: var(--tile-w);
  height: var(--tile-h);
  border-radius: 8px;
  overflow: hidden;
  background: #d9d9d9;
}

.mosaic__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The carousel's image pool. Never painted — mosaic.js reads the srcs and
   creates its own tiles from them. */
.mosaic-source { display: none; }

/* linear-gradient(89.66deg, #000 0.25%, rgba(0,0,0,.2) 99.83%) */
.scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(89.66deg, rgb(0, 0, 0) 0.25%, rgba(0, 0, 0, 0.2) 99.83%);
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */

.navbar {
  position: absolute;
  inset: var(--page-inset) 0 auto 0;
  z-index: 2;
}

.navbar__inner {
  width: min(100% - (var(--page-inset) * 2), var(--page-max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6.388px;
}

.brand__mark {
  display: block;
  width: 40.724px;
  height: 50.306px;
  padding: 1.6px;
}

.brand__mark svg {
  width: 37.53px;
  height: 47.419px;
}

.brand__word {
  font-size: 21.164px;
  font-weight: 600;
  white-space: nowrap;
}

.brand__word--name { color: var(--navy); }
.brand__word--tld  { color: var(--muted); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  align-items: center;
  /* Symmetric padding keeps the block centred in the full frame, exactly as
     in the 1440x1024 design (content top = 176px), while still giving the
     page room to grow when the copy is taller than the viewport. */
  padding-block: var(--page-inset);
}

/* Two columns, centred in the frame: copy + search on the left, the trending
   card on the right (Figma 875:3968 — 1055 wide, gap 64, items centred). */
.hero__inner {
  width: min(100% - (var(--page-inset) * 2), var(--hero-w));
  margin-inline: auto;
  display: flex;
  gap: var(--hero-gap);
  align-items: center;
}

.lede {
  flex: 1 1 var(--col-l);
  min-width: 0;
  max-width: var(--col-l);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.lede__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.lede__title {
  margin: 0;
  font-size: clamp(32px, 3.34vw, 48px);
  font-weight: 600;
  line-height: 1.23;   /* Montserrat "normal" — 2 lines @48px = 118px, as designed */
  text-transform: capitalize;
  color: var(--white);
  text-wrap: balance;
}

.lede__sub {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--sub);
}

/* Break between the bullet-separated items, never inside "E-Brochures". */
.lede__sub span { white-space: nowrap; }

/* Search */

.search {
  display: flex;
  align-items: center;
  gap: 37px;
  width: 100%;
  padding: 8px 8px 8px 12px;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
  overflow: hidden;
}

.search__field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--placeholder);
}

.search__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 13px 32px;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-btn);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}

.btn--primary {
  background: var(--navy);
  color: var(--white);
  opacity: 0.72;
}

/* The button carries a label on desktop and collapses to the magnifier glyph
   on phones (Figma mobile search bar: 40x40 square, icon only). */
.btn__icon { display: none; width: 15px; height: 15px; }

/* Trending */

.trending {
  flex: 0 0 var(--col-r);
  min-width: 0;
  max-width: var(--col-r);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Repeat container — holds only the item template and the rendered cards. */
.trending__list { width: 100%; }

.trending__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
  color: var(--white);
}

.card {
  width: 100%;
  min-height: var(--card-min, auto);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 24px;
  background: var(--white);
  box-shadow: var(--shadow-l1);
  color: var(--ink);
}

.card__media {
  width: 374px;
  max-width: 100%;
  height: 363px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card__name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.card__meta {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.215;
}

.card__link {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  color: var(--navy);
}

.card__link:hover { text-decoration: underline; }
.card__link:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }

.card__link-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Short viewports: stop the vertically-centred hero from riding up under the
   floating navbar. --hero-guard tracks the navbar height per breakpoint. */
@media (max-height: 920px) {
  .hero { padding-top: var(--hero-guard); }
}

/* ── Narrow desktop: let the two columns compress before they stack ─────── */
@media (max-width: 1120px) {
  :root { --hero-gap: 40px; --col-r: 360px; --card-min: auto; }
  .card__media { height: 320px; }
}

/* ── Tablet: stack the two columns ──────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --page-inset: 20px;
    --hero-guard: 122px;

    /* Smaller tiles keep 3–4 columns on screen instead of one giant slab. */
    --tile-w: 248px;
    --tile-h: 263px;
    --col-gap: 48px;
    --row-gap: 25px;
    --row-pitch: 288px;
    --col-pitch: 296px;
    --stagger: 84px;
    --drift-speed: 26;
  }

  .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: min(100% - (var(--page-inset) * 2), 620px);
  }

  .lede { flex: 0 0 auto; max-width: 100%; width: 100%; gap: 24px; }
  .trending { flex: 0 0 auto; max-width: 100%; width: 100%; }
  .search { gap: 16px; }
  .card__media { width: 100%; height: 300px; }

  /* Once the columns stack, the copy spans the full width, so the designed
     left-to-right scrim no longer sits behind it. Darken top-to-bottom. */
  .scrim {
    background: linear-gradient(180deg, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.68) 50%, rgba(0,0,0,0.56) 100%);
  }
}

/* ── Phone ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    /* 24px gutters put the search bar at exactly 327px on a 375 viewport,
       matching the supplied mobile spec. */
    --page-inset: 24px;
    --hero-guard: 96px;

    --tile-w: 168px;
    --tile-h: 178px;
    --col-gap: 32px;
    --row-gap: 18px;
    --row-pitch: 196px;
    --col-pitch: 200px;
    --stagger: 62px;
    --drift-speed: 20;
  }

  /* Navbar shrinks to a compact pill. */
  .navbar__inner { padding: 10px 16px; border-radius: 14px; }
  .brand { gap: 5px; }
  .brand__mark { width: 27px; height: 33.4px; padding: 1.1px; }
  .brand__mark svg { width: 24.9px; height: 31.5px; }
  .brand__word { font-size: 17px; }

  .hero__inner { gap: 28px; }
  .lede { gap: 20px; width: 100%; }
  .lede__copy { gap: 12px; }
  .lede__title { font-size: 30px; line-height: 1.25; }
  .lede__sub { font-size: 14px; }

  /* Mobile search bar, per the supplied Figma spec: 48 tall, r8, 10px lead-in,
     17px glyph, 14px placeholder, and a 40x40 icon-only button inset by 4. */
  .search {
    gap: 8px;
    padding: 4px 4px 4px 10px;
    border-radius: 8px;
  }
  .search__field { gap: 7px; }
  .search__icon { width: 17px; height: 17px; }
  .search__input { font-size: 14px; }
  .btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
  }
  .btn__label { display: none; }
  .btn__icon { display: block; }

  .trending__title { font-size: 18px; }

  .card { padding: 12px; border-radius: 20px; gap: 12px; }
  .card__media { width: 100%; height: 260px; border-radius: 12px 12px 0 0; }
  .card__body { gap: 8px; }

  /* The designed scrim reads left-to-right; on a narrow screen the copy sits
     over the full width, so darken top-to-bottom instead. */
  .scrim {
    background: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.74) 48%, rgba(0,0,0,0.6) 100%);
  }
}

@media (max-width: 380px) {
  .lede__title { font-size: 27px; }
  .card__media { height: 224px; }
}

/* ── Motion preference ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mosaic__track { animation: none; }
}