/* ═══════════════════════════════════════════════════════════════════════
   PAVILION BY RAMS — the typology pages

   Linked ONLY by /villas/<typology>/, never by the site itself, which is the
   whole point of it being a fourth file: the landing page, the two iframes
   and the inner pages cannot be reached by anything written here, so a page
   type added for search could not change a pixel of what was already there.

   It rides on 00-shared.css (palette, faces, tokens) and pavilion.css (the
   baseline: body, links, .btn, .h2, .eyebrow, .body) so a typology page is
   the same design as the site rather than a lookalike of it. Everything
   below is layout for a document that has no rail, no overlay and no film —
   a page a crawler and a reader can both finish in one pass.

   Every rule is scoped under .vp, which exists on no other page.
   ═══════════════════════════════════════════════════════════════════════ */

.vp{background:var(--navy-900);color:var(--ivory);
  font-family:var(--f-firma);line-height:1.6;-webkit-font-smoothing:antialiased}
.vp__wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,5vw,60px)}

/* ── the bar ──────────────────────────────────────────────────────────────
   Not the site's nav: that one is fixed, measures itself, drives a scroll spy
   and carries the burger's whole menu. None of that has anything to do here,
   and lifting it would mean lifting the app with it. A mark that goes home
   and the three languages is the entire requirement. */
.vp__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:clamp(16px,2.5vh,26px);border-bottom:1px solid var(--rule)}
.vp__home{display:flex;align-items:center;flex:none}
.vp__home svg{height:clamp(44px,7vw,58px);width:auto;color:var(--ivory);
  filter:drop-shadow(0 0 14px rgba(96,237,244,.36))}
.vp__lang{display:inline-flex;padding:3px;border:1px solid rgba(255,255,255,.16);
  border-radius:999px;flex:none}
.vp__lang a{font-family:var(--f-sub);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  color:var(--faint);padding:7px 13px;border-radius:999px;
  transition:color .3s var(--e),background .3s var(--e)}
.vp__lang a[aria-current]{color:var(--navy-950);background:var(--ivory)}
.vp__lang a:not([aria-current]):hover{color:var(--ivory)}

/* ── the head of the page ─────────────────────────────────────────────── */
.vp__crumb{font-family:var(--f-sub);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin:clamp(28px,5vh,56px) 0 0}
.vp__crumb a{color:var(--faint);transition:color .3s var(--e)}
.vp__crumb a:hover{color:var(--ivory)}
.vp__crumb span{opacity:.5;padding-inline:8px}
.vp h1{font-family:var(--f-firma);font-weight:300;line-height:1;letter-spacing:-.02em;
  font-size:clamp(2.4rem,7vw,4.6rem);margin:clamp(10px,1.6vh,18px) 0 0}
.vp__lead{font-weight:300;font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.5;
  color:rgba(255,255,255,.84);max-width:52ch;margin:clamp(14px,2.4vh,26px) 0 0;
  white-space:pre-line}

/* ── the figures ──────────────────────────────────────────────────────────
   A definition list, because that is what it is: three labelled numbers. The
   numerals stay Western in all three languages — the site's rule everywhere
   a figure appears — which is why the value carries its own direction. */
/* SEPARATE BOXES, NOT ONE GRID ON A GOLD GROUND. The tempting build here is
   a grid whose background is the hairline colour showing through 1px gaps —
   it is what the delivery bar does. It has one failure and this page would
   hit it on every screen: an item count the column count does not divide
   leaves an EMPTY CELL, and an empty cell is a solid block of the ground
   colour where a card should be. Three figures in two columns, fourteen
   features in five, five typologies in four — every grid on this page has a
   width where that happens. Each box carrying its own border and a real gap
   cannot: what is left over is the page. */
.vp__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;margin:clamp(26px,4.5vh,46px) 0 0}
.vp__stats>div{background:var(--navy-950);border:1px solid var(--rule);
  border-radius:14px;padding:clamp(16px,2.4vw,26px)}
.vp__stats dt{font-family:var(--f-sub);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin:0}
.vp__stats dd{margin:8px 0 0;font-family:var(--f-firma);font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1;
  direction:ltr;unicode-bidi:isolate;text-align:start}

/* ── pictures ─────────────────────────────────────────────────────────────
   The hero is the full-size photograph. The grid below is the 400px
   thumbnails the villa panel uses, each linking to its own full-size file —
   so the page stays light on a phone abroad while every full-resolution
   image keeps a crawlable address of its own. A fixed ratio on the frame
   means no layout shift without having to know each file's dimensions. */
.vp__fig{margin:clamp(26px,4.5vh,46px) 0 0;border:1px solid var(--rule);
  border-radius:18px;overflow:hidden;background:var(--navy-950)}
.vp__fig img{display:block;width:100%;height:auto}
.vp h2{font-family:var(--f-sub);font-size:clamp(11px,1.2vw,12.5px);font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ivory);
  margin:clamp(38px,6vh,68px) 0 clamp(14px,2vh,22px)}
/* TWO UP ON A PHONE, not one. A flat 210px minimum gives a 428px screen a
   single column, and a Diamond typology is twenty-five photographs — a page
   ten thousand pixels long that nobody reaches the end of. min(46%,210px)
   keeps the 210px tile everywhere there is room for it and falls to two
   columns on a phone, which halves the page without shrinking anything on a
   desktop. */
.vp__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,210px),1fr));
  gap:clamp(8px,1.2vw,14px)}
.vp__grid a{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:12px;border:1px solid var(--rule-2);background:var(--navy-950)}
.vp__grid img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--e)}
.vp__grid a:hover img{transform:scale(1.04)}
.vp__grid figcaption{position:absolute;inset-inline-start:10px;bottom:8px;
  font-family:var(--f-sub);font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.82);
  text-shadow:0 1px 8px rgba(0,0,0,.9);pointer-events:none}

/* ── the features ─────────────────────────────────────────────────────── */
/* Fourteen short labels are a set, not a table: chips wrap to whatever room
   there is and leave no cell to be empty. */
.vp__feats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.vp__feats li{background:var(--navy-950);border:1px solid var(--rule-2);
  border-radius:999px;padding:10px 18px;font-size:.92rem;color:rgba(255,255,255,.86)}

/* ── the two actions ──────────────────────────────────────────────────── */
.vp__cta{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(30px,5vh,54px) 0 0}
.vp__cta .btn{flex:0 1 auto}

/* ── the rest of the collection ───────────────────────────────────────── */
.vp__more{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.vp__more a{display:block;background:var(--navy-950);border:1px solid var(--rule);
  border-radius:14px;padding:clamp(16px,2.4vw,24px);
  transition:background .35s var(--e),border-color .35s var(--e)}
.vp__more a:hover{background:var(--navy-900);border-color:rgba(195,162,86,.45)}
.vp__more b{display:block;font-family:var(--f-firma);font-weight:300;
  font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.15;color:var(--ivory)}
.vp__more span{display:block;margin-top:7px;font-family:var(--f-sub);font-size:10px;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  direction:ltr;unicode-bidi:isolate;text-align:start}

/* ── the foot ─────────────────────────────────────────────────────────── */
.vp__foot{margin-top:clamp(48px,8vh,96px);padding-block:clamp(24px,4vh,40px);
  border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:14px 26px;
  align-items:center;justify-content:space-between;
  font-family:var(--f-sub);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.vp__foot a{color:var(--faint);transition:color .3s var(--e)}
.vp__foot a:hover{color:var(--ivory)}
.vp__foot nav{display:flex;flex-wrap:wrap;gap:14px 22px}

@media (prefers-reduced-motion:reduce){
  .vp__grid img,.vp__more a,.vp__lang a{transition:none}
  .vp__grid a:hover img{transform:none}
}

/* ── the development, and the two questions ───────────────────────────────
   Carried from the landing page's own description and FAQ, translated there
   and reused here rather than rewritten — a typology page is arrived at cold
   from a search, and the three lines of copy a typology owns cannot say
   where Erbil is or who is allowed to buy. */
.vp__about{font-weight:300;font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.6;
  color:rgba(255,255,255,.84);max-width:62ch;margin:0}
.vp__qa{margin:clamp(20px,3vh,34px) 0 0;display:grid;gap:10px}
.vp__qa>div{background:var(--navy-950);border:1px solid var(--rule);
  border-radius:14px;padding:clamp(16px,2.4vw,26px)}
.vp__qa dt{margin:0;font-family:var(--f-firma);font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.3rem);color:var(--ivory)}
.vp__qa dd{margin:10px 0 0;color:rgba(255,255,255,.78);max-width:70ch;line-height:1.65}