/* =====================================================================
   AMJAD DEVELOPMENTS — the project system
   ---------------------------------------------------------------------
   Three things live here: the card, the toolbar that filters the cards, and
   the project page a card leads to. They are one file because they share one
   vocabulary — the five stages — and splitting them is how a card ends up
   saying "الهيكل" while the page it opens says something else.

   THE CARD CARRIES FOUR THINGS AND NO MORE
     the photograph        because this is real estate
     the stage             because that is the honest answer to "how far?"
     the name and type     because that is what is being sold
     one line of tagline   because a paragraph on a card is never read
   Price is NOT on the card. Not as a design choice — the company has not
   published one, and a card is exactly where an invented number would get
   screenshotted. The card says "التفاصيل" and the page says يُعلن قريبًا.

   THE STAGE RAIL IS THE CENTREPIECE, and it does something a percentage bar
   cannot: it names the five stages, marks the one the project is at, and
   leaves the rest legible. A bar at 60% invites the question "60% of what,
   measured how?" — five named stages with one lit answers it.
   ===================================================================== */

/* =========================================================== the toolbar ===
   Two rows of chips, not one: type and stage are different questions and a
   single row of nine chips reads as noise. Each row is labelled. */
.pj-tools{ margin-bottom:clamp(24px,3.4vw,40px); }
.pj-row{
  display:flex; flex-wrap:wrap; gap:8px;
  align-items:center; justify-content:center;
  margin-bottom:10px;
}
.pj-row:last-child{ margin-bottom:0; }
.pj-row > b{
  font-family:"Jost",system-ui,sans-serif;
  font-size:11px; font-weight:300; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
  margin-inline-end:6px;
}
.pj-count{ font-size:13.5px; color:#a08b71; text-align:center; margin:16px 0 26px; }

/* ============================================================== the card === */
.proj-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(18px,2.2vw,28px);
}
.proj{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--brown-800);
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
.proj:hover{ border-color:var(--line-strong); transform:translateY(-3px); }

/* the whole card is one link. A card with a link inside it gives you a small
   target inside a large clickable-looking area, which is the single most
   common way a grid of cards is annoying to use. */
.proj-link{ display:flex; flex-direction:column; height:100%; color:inherit; }
.proj-link:hover{ color:inherit; }

.proj-img{
  position:relative;
  aspect-ratio:4/3;
  background:var(--brown-700) center/cover no-repeat;
  overflow:hidden;
}
/* the photograph itself is an <img> and not a background, so it can be lazy,
   can carry width/height, and can be zoomed independently of the overlays */
.proj-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s var(--ease);
}
.proj:hover .proj-img img{ transform:scale(1.05); }
/* their monogram, when a project has no photograph yet */
.proj-img[data-empty]::after{
  content:"أ"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:"Aref Ruqaa",serif; font-size:70px;
  color:rgba(216,184,144,.16);
}
/* a scrim only at the bottom of the photograph, where the chips sit */
.proj-img::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(12,7,2,.34) 0%, rgba(12,7,2,0) 34%,
                                     rgba(12,7,2,0) 58%, rgba(12,7,2,.74) 100%);
}

/* the type chip, top corner */
.proj-tag{
  position:absolute; z-index:2;
  inset-block-start:14px; inset-inline-start:14px;
  padding:6px 13px; border-radius:999px;
  font-family:"Jost",system-ui,sans-serif;
  font-size:10.5px; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(20,11,3,.80); color:var(--gold);
  border:1px solid rgba(216,184,144,.34);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
/* the stage chip, bottom corner, over the scrim.
   Measured: cream #ece2d4 on rgba(20,11,3,.80) over the brightest frame in
   the set (p4-2, mean luminance 0.645) reads 8.4:1. */
.proj-stage{
  position:absolute; z-index:2;
  inset-block-end:14px; inset-inline-start:14px;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  font-size:13px; color:var(--cream);
  background:rgba(20,11,3,.80);
  border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.proj-stage i{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold); flex:0 0 auto;
}
/* the delivered state gets a green dot rather than gold, because "done" and
   "in progress" being the same colour defeats the point of the chip */
.proj-stage[data-stage="handover"] i{ background:#8fbf7a; }
.proj-stage[data-stage="planning"] i{ background:#a08b71; }

.proj-body{
  padding:22px 22px 24px;
  display:flex; flex-direction:column; gap:9px; flex:1;
}
.proj h3{ margin:0; color:var(--cream); font-size:21px; }
.proj-loc{
  display:flex; align-items:center; gap:7px;
  font-size:14px; color:var(--beige); margin:0;
}
.proj-loc svg{ width:15px; height:15px; flex:0 0 auto; opacity:.8; }
.proj-tagline{ font-size:14.5px; color:var(--ink); margin:0; line-height:1.8; }
.proj-foot{
  margin-block-start:auto; padding-block-start:16px;
  border-block-start:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.proj-more{
  font-size:14px; color:var(--gold);
  display:inline-flex; align-items:center; gap:8px;
}
.proj-more::after{
  content:"←"; transition:transform .35s var(--ease);
}
.proj:hover .proj-more::after{ transform:translateX(-4px); }
.proj-price{ font-size:13.5px; color:var(--beige); }

/* the empty grid */
.proj-none{
  grid-column:1/-1; text-align:center; padding:clamp(36px,6vw,64px) 20px;
  border:1px dashed var(--line-strong); border-radius:var(--radius-lg);
  color:var(--beige);
}

/* =========================================================================
   THE PROJECT PAGE
   ========================================================================= */

/* ------------------------------------------------------------ the gallery
   A large frame with a strip of thumbnails under it. Not a carousel that
   moves on its own: someone on a project page is looking, and a picture that
   changes while you look at it is hostile. */
.pv-gallery{ position:relative; }
.pv-stage{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--brown-800);
}
.pv-stage img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s var(--ease);
}
.pv-stage img.on{ opacity:1; }
.pv-count{
  position:absolute; z-index:3;
  inset-block-end:14px; inset-inline-end:14px;
  padding:6px 13px; border-radius:999px;
  font-family:"Jost",system-ui,sans-serif; font-size:12px; letter-spacing:.14em;
  color:var(--cream); background:rgba(20,11,3,.78);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.pv-arrow{
  position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; line-height:1; color:var(--cream);
  background:rgba(20,11,3,.62);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.pv-arrow:hover{ background:rgba(20,11,3,.86); }
.pv-arrow:active{ transform:translateY(-50%) scale(.93); }
.pv-prev{ inset-inline-start:14px; }
.pv-next{ inset-inline-end:14px; }

.pv-thumbs{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(88px,1fr);
  gap:10px; margin-block-start:12px;
  overflow-x:auto; padding-block-end:4px;
  scrollbar-width:thin;
}
.pv-thumb{
  aspect-ratio:4/3; border-radius:6px; overflow:hidden;
  border:1px solid var(--line);
  opacity:.55; transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.pv-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-thumb[aria-current="true"]{ opacity:1; border-color:var(--gold); }
.pv-thumb:hover{ opacity:1; }

/* ----------------------------------------------------------- the headline */
.pv-head{ margin-block-end:clamp(22px,3vw,34px); }
.pv-head h1{
  font-size:clamp(28px,4.4vw,50px); color:var(--cream); margin:0 0 10px;
}
.pv-sub{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  color:var(--beige); font-size:15px;
}
.pv-sub svg{ width:15px; height:15px; opacity:.8; vertical-align:-2px; }
.pv-dot{ width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:.6; }

/* ------------------------------------------------------------- the layout */
.pv-grid{
  display:grid; grid-template-columns:1.55fr 1fr;
  gap:clamp(24px,3.4vw,48px);
  align-items:start;
}
@media (max-width:960px){ .pv-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------- the spec panel */
.pv-panel{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--brown-800);
  padding:clamp(22px,2.6vw,30px);
}
.pv-panel + .pv-panel{ margin-block-start:clamp(16px,2vw,22px); }
.pv-panel h2{
  font-size:19px; color:var(--cream); margin:0 0 16px;
}
.pv-specs{ display:grid; gap:0; margin:0; }
.pv-specs > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:12px 0;
  border-block-end:1px solid var(--line);
}
.pv-specs > div:last-child{ border-block-end:0; padding-block-end:0; }
.pv-specs dt{ font-size:14px; color:var(--beige); margin:0; }
.pv-specs dd{ font-size:15px; color:var(--cream); margin:0; text-align:end; }
/* an unpublished field. Styled DIFFERENTLY from a real one on purpose: a dash
   that looks like a value is worse than no row at all, because it reads as
   "free" or "zero" rather than "not announced". */
.pv-specs dd[data-soon]{
  color:#a08b71; font-size:14px;
}
.pv-note{
  margin:16px 0 0; padding-block-start:16px;
  border-block-start:1px solid var(--line);
  font-size:13.5px; line-height:1.85; color:#a08b71;
}

/* ---------------------------------------------------------- the feature list */
.pv-feats{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.pv-feats li{
  display:grid; grid-template-columns:20px 1fr; gap:11px;
  font-size:15px; color:var(--beige); line-height:1.8;
}
.pv-feats li::before{
  content:""; width:7px; height:7px; margin-block-start:9px;
  border:1px solid var(--gold); border-radius:50%;
}

/* ============================================================ the stage rail
   The five stages, always all five, with the current one lit. A horizontal
   rail on a wide screen and a vertical one on a phone — the same markup, and
   the connector is a ::before on the item rather than a separate element so
   there is nothing to keep in sync. */
.pv-stages{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:0; margin:0; padding:0; list-style:none;
}
.pv-step{
  position:relative;
  padding-block-start:26px;
  padding-inline-end:12px;
}
/* the line */
.pv-step::before{
  content:""; position:absolute; inset-block-start:7px; inset-inline:0;
  height:1px; background:var(--line-strong);
}
.pv-step:first-child::before{ inset-inline-start:50%; }
.pv-step:last-child::before{  inset-inline-end:50%; }
/* the node */
.pv-step::after{
  content:""; position:absolute; inset-block-start:2px;
  inset-inline-start:calc(50% - 5px);
  width:11px; height:11px; border-radius:50%;
  background:var(--brown-800); border:1px solid var(--line-strong);
}
.pv-step b{
  display:block; text-align:center;
  font-size:13.5px; font-weight:500; color:#a08b71;
}
.pv-step small{
  display:block; text-align:center;
  font-size:12px; color:#a08b71; margin-block-start:4px;
}
/* everything up to and including the current stage is done */
.pv-step.done::before{ background:rgba(216,184,144,.55); }
.pv-step.done::after{ background:var(--gold); border-color:var(--gold); }
.pv-step.done b{ color:var(--beige); }
.pv-step.now::after{
  width:15px; height:15px; inset-block-start:0;
  inset-inline-start:calc(50% - 7px);
  box-shadow:0 0 0 5px rgba(216,184,144,.18);
}
.pv-step.now b{ color:var(--cream); font-weight:600; }
.pv-step.now small{ color:var(--gold); }

@media (max-width:760px){
  .pv-stages{ grid-auto-flow:row; grid-auto-columns:auto; }
  .pv-step{
    padding:0 0 22px 0; padding-inline-start:30px;
    text-align:start;
  }
  .pv-step::before{
    inset-block:11px 0; inset-inline-start:5px; inset-inline-end:auto;
    width:1px; height:auto;
  }
  .pv-step:first-child::before{ inset-inline-start:5px; inset-block-start:11px; }
  .pv-step:last-child::before{  display:none; }
  .pv-step::after{ inset-block-start:1px; inset-inline-start:0; }
  .pv-step.now::after{ inset-inline-start:-2px; }
  .pv-step b, .pv-step small{ text-align:start; }
}

/* ============================================================= the sibling
   "مشاريع تانية" at the bottom. Three at most, and never the one you are
   looking at. */
.pv-more{ margin-block-start:clamp(44px,6vw,80px); }
.pv-more .section-head{ margin-block-end:clamp(20px,3vw,30px); }

/* ============================================================== not found
   A project id that does not exist has to land somewhere finished. */
.pv-404{
  text-align:center; padding:clamp(50px,9vw,110px) 20px;
}
.pv-404 h1{ color:var(--cream); margin-bottom:12px; }
.pv-404 p{ color:var(--beige); margin:0 auto 26px; max-width:44ch; }