/* Infinity Ecosystem — the page a buyer opens from WhatsApp.
   Mobile-first throughout: the overwhelming majority of visits are a tap on a
   link inside a chat, on a phone, on mobile data. */

:root {
  --bg: #f8fafc;
  --card: #ffffff;
  --fg: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --primary: #0f766e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --card: #111827;
    --fg: #e2e8f0;
    --muted: #94a3b8;
    --border: #1f2937;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
}

.pres { max-width: 46rem; margin: 0 auto; background: var(--card); min-height: 100vh; }

.hero { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--border); }
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-veil {
  position: absolute; inset: 0;
  /* The headline sits on top of a photograph whose brightness we do not
     control, so the text carries its own gradient rather than trusting the
     render to be dark at the bottom. */
  background: linear-gradient(to top,
    rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 38%, rgba(0,0,0,0.10) 62%, rgba(0,0,0,0) 80%);
}
.hero-text { position: absolute; inset-inline: 0; bottom: 0; padding: 1.25rem 1.1rem; color: #fff; }
.brand { font-size: 0.78rem; opacity: 0.88; margin-bottom: 0.35rem; letter-spacing: 0.02em; }
.hero-text h1 { margin: 0; font-size: 1.5rem; line-height: 1.35; font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.chip {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px; padding: 0.2rem 0.7rem;
  font-size: 0.8rem; font-weight: 600;
}

.body { padding: 1.25rem 1.1rem 3rem; }
.title-plain { margin: 0 0 1rem; font-size: 1.45rem; }
.summary { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.9; }

.section { margin-bottom: 2rem; }
.section h2 {
  margin: 0 0 0.85rem; font-size: 1.1rem; font-weight: 700; color: var(--primary);
  border-inline-start: 3px solid var(--primary); padding-inline-start: 0.6rem;
}

.video { width: 100%; border-radius: 8px; background: #000; display: block; }
.caption { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }

.gallery { display: grid; gap: 0.75rem; }
@media (min-width: 34rem) { .gallery { grid-template-columns: 1fr 1fr; } }
.shot { margin: 0; }
.shot img {
  width: 100%; display: block; border-radius: 8px; border: 1px solid var(--border);
  /* Renders arrive in mixed aspect ratios; a fixed ratio keeps the grid even
     without cropping anyone's kitchen out of frame on a phone. */
  aspect-ratio: 4 / 3; object-fit: cover;
}
.shot figcaption { margin-top: 0.4rem; font-size: 0.85rem; color: var(--muted); }

.rooms { display: flex; flex-direction: column; gap: 0.85rem; }
.room { border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem; background: var(--bg); }
.room header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.room h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.room-area { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.room-note { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--muted); }

.finishes { margin: 0.7rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.finishes > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.6rem; align-items: baseline; }
.finishes dt { font-size: 0.83rem; color: var(--muted); font-weight: 600; }
.finishes dd { margin: 0; font-size: 0.92rem; line-height: 1.6; }
.finish-note { color: var(--muted); font-size: 0.85rem; }

.cta {
  margin: 2.5rem 0 1.5rem; padding: 1.25rem;
  border: 2px solid var(--primary); border-radius: 10px; background: var(--bg);
}
.cta h2 { margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--primary); }
.cta p { margin: 0; font-size: 0.95rem; line-height: 1.85; }
.cta-hint { margin-top: 0.6rem !important; font-weight: 600; }

.foot { border-top: 1px solid var(--border); padding-top: 1rem; font-size: 0.85rem; }
.foot-muted { color: var(--muted); margin-top: 0.3rem; line-height: 1.7; }

/* ---- Showroom: the public front door ----------------------------------- */

.show { max-width: 62rem; margin: 0 auto; padding: 0 1rem 3rem; }

.show-head { text-align: center; padding: 2.25rem 0 1.75rem; }
.show-mark {
  width: 3rem; height: 3rem; margin: 0 auto 0.75rem; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700;
}
.show-head h1 { margin: 0; font-size: 1.6rem; }
.show-head p { margin: 0.4rem auto 0; color: var(--muted); max-width: 32rem; font-size: 0.95rem; }

.show-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .show-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) { .show-grid { grid-template-columns: repeat(3, 1fr); } }

.show-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.show-card:hover { border-color: var(--primary); transform: translateY(-2px); }

.show-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--border); }
.show-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.show-thumb img.thumb-plan { background: #fff; }
.show-thumb-empty {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--muted);
}
.show-area {
  position: absolute; inset-inline-start: 0.6rem; bottom: 0.6rem;
  background: rgba(0,0,0,0.62); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 0.15rem 0.65rem;
  font-size: 0.8rem; font-weight: 600;
}

.show-body { padding: 0.8rem 0.9rem 1rem; }
.show-body h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.show-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.show-tags span {
  font-size: 0.75rem; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.55rem;
}
.show-meta { margin-top: 0.5rem; font-size: 0.82rem; color: var(--muted); }

.show-empty { text-align: center; color: var(--muted); padding: 3rem 0; }

.show-cta {
  margin: 2.5rem 0 1.5rem; padding: 1.25rem; text-align: center;
  border: 2px solid var(--primary); border-radius: 12px; background: var(--card);
}
.show-cta h2 { margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--primary); }
.show-cta p { margin: 0 auto; max-width: 34rem; font-size: 0.95rem; line-height: 1.85; }

.show-foot {
  border-top: 1px solid var(--border); padding-top: 1rem;
  text-align: center; font-size: 0.85rem;
}
.show-foot-muted { color: var(--muted); margin-top: 0.3rem; }
.show-staff {
  /* Deliberately quiet, but still tappable: it was 20px tall, which the office
     cannot reliably hit on a phone either. Padding gives it a 44px target
     without making it any louder to a client. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1rem; margin-top: 0.5rem;
  color: var(--muted); font-size: 0.78rem; text-decoration: none; opacity: 0.65;
}
.show-staff:hover { color: var(--primary); opacity: 1; }

/* A way back to the showroom from a unit page. */
.pres-back {
  display: inline-block; padding: 0.9rem 1.1rem 0;
  color: var(--muted); text-decoration: none; font-size: 0.85rem;
}
.pres-back:hover { color: var(--primary); }

/* ---- Floor plans are portrait and must not be cropped ------------------- */
/* A render is composed to be cropped; a floor plan is a document. Filling a
   4:3 frame with `cover` slices the top and bottom off the drawing, which is
   exactly the part a buyer is trying to read. These fit the whole sheet inside
   the frame instead, on white, because the drawings are line art on white and
   any other backdrop reads as a border round the paper. */

.hero-fit { background: #fff; }
.hero-fit img { object-fit: contain; }
/* The gradient exists to make white text readable over a photograph. Over a
   letterboxed white drawing it just dirties the sheet, so it goes — and the
   headline moves to its own solid band underneath. */
.hero-fit .hero-veil {
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 12%, rgba(0,0,0,0) 26%);
}

.shot-plan img {
  object-fit: contain;
  background: #fff;
  /* Taller frame: A3 portrait is 1:1.41, so a 3:4 box wastes far less space
     than 4:3 and keeps the plan legible on a phone. */
  aspect-ratio: 3 / 4;
}

/* NOT the same on the showroom card. A card is an invitation, not a document:
   letterboxing the whole A3 sheet into it shrinks the line work until the
   drawing is literally invisible white-on-white — verified on the live site.
   So the card CROPS to the middle band of the sheet, which is where the
   apartment is, and the title block and margins fall outside the frame. 

/* ---- Plain header, used when there is no photographic hero -------------- */
.plain-head { padding: 0.5rem 0 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.brand-plain { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; margin-bottom: 0.3rem; }
.title-plain { margin: 0; font-size: 1.45rem; line-height: 1.35; }
/* The chips were white-on-photograph; on paper they need real borders. */
.chips-plain { margin-top: 0.7rem; }
.chips-plain .chip {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--fg); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.shot a { display: block; }
.zoom-hint { opacity: 0.75; }

/* ---- Specification by trade -------------------------------------------- */
.spec-intro { margin: -0.4rem 0 0.9rem; font-size: 0.9rem; color: var(--muted); }
.spec { display: flex; flex-direction: column; gap: 0.7rem; }
.spec-group { border: 1px solid var(--border); border-radius: 8px; padding: 0.85rem 1rem; background: var(--bg); }
.spec-group h3 { margin: 0 0 0.5rem; font-size: 0.98rem; font-weight: 700; }
.spec-note { margin: -0.25rem 0 0.5rem; font-size: 0.85rem; color: var(--muted); }
.spec-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.spec-group li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem;
  border-top: 1px solid var(--border); padding-top: 0.45rem; font-size: 0.9rem;
}
.spec-group li:first-child { border-top: 0; padding-top: 0; }
.spec-item { flex: 1 1 9rem; }
/* The brand is the part a buyer is scanning for, so it gets the emphasis and
   never wraps away from its item. */
.spec-brand {
  font-weight: 600; color: var(--primary);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.82rem; white-space: nowrap;
}
.spec-extra { color: var(--muted); font-size: 0.82rem; }
.spec-foot { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.7; }

/* ---- Navigation --------------------------------------------------------- */
/* The unit pages got long — 17 photos and 14 material groups on one of them.
   Everything below exists so a client never has to scroll back up to move. */

.navbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--card); border-bottom: 1px solid var(--border);
  /* The bar sits over photographs as the page scrolls under it. */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}
.navbar-back {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.88rem;
  /* 44px in BOTH directions. Height alone is not a tap target: with the label
     hidden this collapsed to 19px wide — measured at 360px, which is a very
     common Android width. */
  min-height: 2.75rem; min-width: 2.75rem;
  padding-inline-end: 0.35rem;
}
.navbar-arrow { font-size: 1.05rem; line-height: 1; }
.navbar-title {
  margin-inline-start: auto; font-weight: 700; font-size: 0.9rem;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "كل النماذج" is short enough to keep at 360px; only the narrowest phones
   (≈320px) drop it, and even then the arrow keeps a 44px target. */
@media (max-width: 20.5rem) { .navbar-back-text { display: none; } }

/* Horizontally scrollable so it never wraps to two rows and never truncates. */
.jump {
  position: sticky; top: 3.35rem; z-index: 19;
  display: flex; gap: 0.4rem; overflow-x: auto;
  padding: 0.55rem 1rem;
  background: var(--bg); border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.jump::-webkit-scrollbar { display: none; }
.jump a {
  flex: 0 0 auto;
  /* 40px minimum height — these are the main way a client moves around a long
     page, and 33px was measurably too small for a thumb. */
  display: inline-flex; align-items: center; min-height: 2.5rem;
  padding: 0 0.9rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--fg); text-decoration: none; font-size: 0.85rem; font-weight: 600;
}
.jump a:hover, .jump a:focus { border-color: var(--primary); color: var(--primary); }

/* Anchors must not land under the two sticky bars. */
.section, .cta { scroll-margin-top: 8.4rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  margin: 2rem 0 0.75rem;
}
.pager-link {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); text-decoration: none; color: inherit;
}
.pager-link:hover { border-color: var(--primary); }
.pager-next { text-align: end; }
.pager-dir { font-size: 0.75rem; color: var(--muted); }
.pager-name { font-weight: 700; font-size: 0.92rem; }

.all-units {
  display: block; text-align: center; margin: 0 0 1.5rem;
  padding: 0.7rem; border: 1px solid var(--primary); border-radius: 10px;
  color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.9rem;
}
.all-units:hover { background: var(--primary); color: #fff; }

/* Project heading on the showroom. */
.show-project {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; margin: 1.75rem 0 0.7rem;
}
.show-project h2 {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--primary);
  border-inline-start: 3px solid var(--primary); padding-inline-start: 0.6rem;
}
.show-project span { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.show-body h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }