/* Dubai Islands — base
   Fonts, type scale, containers, buttons, badges, the mobile swipe row.
   Component styles live in assets/css/components/. */

/* ---------- fonts, self-hosted, latin subset ---------- */
/* Instrument Sans is variable: 400–700 from one 30 KB file, one preload. */
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-var.woff2') format('woff2-variations'),
       url('../fonts/instrument-sans-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

body.di {
  margin: 0;
  background: var(--paper);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.di img, .di svg { max-width: 100%; height: auto; display: block; }

/* The link reset lives on the bare element selector (0,0,1) so that every component class
   outranks it. Scoping it as `.di a` makes it 0,1,1 — higher than a lone class — which
   silently repainted buttons, nav items and the lockup. Accent is opted into, via .di-link
   or inside prose. */
a { color: inherit; text-decoration: none; }
.di-prose a, .di-body a, .di-sm a, .di-micro a { color: var(--accent); }
.di-prose a:hover, .di-body a:hover, .di-sm a:hover, .di-micro a:hover { color: var(--accent-hover); }
.di a:focus-visible,
.di button:focus-visible,
.di [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-badge);
}

/* ---------- type ---------- */
.di h1, .di h2, .di h3, .di h4 {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.di-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); font-weight: var(--fw-semibold); }
.di-display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: var(--ls-display-lg); font-weight: var(--fw-semibold); }
.di-heading-lg { font-size: var(--fs-heading-lg); line-height: var(--lh-heading-lg); letter-spacing: var(--ls-heading-lg); font-weight: var(--fw-semibold); }
.di-heading-md { font-size: var(--fs-heading-md); line-height: var(--lh-heading-md); letter-spacing: var(--ls-heading-md); font-weight: var(--fw-semibold); }
.di-heading-sm { font-size: var(--fs-heading-sm); line-height: var(--lh-heading-sm); letter-spacing: var(--ls-heading-sm); font-weight: var(--fw-semibold); }
.di-body-lg    { font-size: var(--fs-body-lg);    line-height: var(--lh-body-lg); }
.di-body       { font-size: var(--fs-body);       line-height: var(--lh-body); }
.di-label      { font-size: var(--fs-label);      line-height: var(--lh-label); font-weight: var(--fw-semibold); }
.di-sm         { font-size: var(--fs-sm);         line-height: var(--lh-sm); color: var(--text-secondary); }
.di-micro      { font-size: var(--fs-micro);      line-height: var(--lh-micro); color: var(--text-muted); }

.di-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Prices, yields, sizes — mono and tabular so columns line up. */
.di-data, .di-usd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.di-usd { font-size: var(--fs-micro); color: var(--text-muted); }

@media (max-width: 767px) {
  .di-display-xl { font-size: var(--fs-display-xl-m); }
  .di-display-lg { font-size: var(--fs-display-lg-m); }
  .di-heading-lg { font-size: var(--fs-heading-lg-m); }
  .di-heading-md { font-size: var(--fs-heading-md-m); }
  .di-heading-sm { font-size: var(--fs-heading-sm-m); }
  /* The class has to move too — it sets font-size explicitly, so the body rule alone
     would leave .di-body copy at 16px on mobile. */
  body.di, .di-body { font-size: var(--fs-body-m); }
}

/* ---------- layout ---------- */
.di-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-section-x);
}
.di-section { padding-block: var(--pad-section-y); }

@media (max-width: 767px) {
  .di-container { padding-inline: var(--pad-section-x-m); }
  .di-section   { padding-block: calc(var(--pad-section-y-m) * 2); }
}

/* Every multi-item group is flex/grid with gap — never margins between siblings. */
.di-stack  { display: flex; flex-direction: column; gap: var(--sp-4); }
.di-row    { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.di-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.di-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

@media (max-width: 1023px) { .di-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .di-grid-3, .di-grid-4 { grid-template-columns: 1fr; } }

/* ---------- buttons · five variants, no others ---------- */
.di-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.di-btn--accent    { background: var(--accent); color: #fff; }
.di-btn--accent:hover    { background: var(--accent-hover); color: #fff; }
.di-btn--ink       { background: var(--ink); color: var(--paper); }
.di-btn--ink:hover       { background: #000; color: var(--paper); }
.di-btn--gold      { background: var(--gold); color: var(--ink); }   /* gated content only */
.di-btn--gold:hover      { background: var(--gold-light); color: var(--ink); }
.di-btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.di-btn--secondary:hover { border-color: var(--ink); color: var(--ink); }
.di-btn--whatsapp  { background: var(--whatsapp); color: #fff; }
.di-btn--whatsapp:hover  { background: #17643f; color: #fff; }
.di-btn--block     { width: 100%; }

/* ---------- badges and pills ---------- */
.di-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-badge);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  white-space: nowrap;
}
.di-badge--positive { background: var(--positive-soft); color: var(--positive); border-color: var(--positive-border); }
.di-badge--caution  { background: var(--caution-soft);  color: var(--caution);  border-color: var(--caution-border); }
.di-badge--negative { background: var(--negative-soft); color: var(--negative); border-color: var(--negative-border); }
.di-badge--accent   { background: var(--accent-soft);   color: var(--accent);   border-color: var(--accent-border); }
.di-badge--neutral  { background: var(--neutral-soft);  color: var(--neutral-tag); border-color: var(--neutral-border); }

/* Status pill sits on the image, top-left, and is never colour-coded —
   colour belongs to the verdict. Card rule 01. */
.di-pill-status {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.94);
  color: var(--text-primary);
  backdrop-filter: blur(6px);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
}
/* Verdict pill, top-right, always coloured. Card rule 02. Never omitted. */
.di-pill-verdict {
  position: absolute; top: 12px; right: 12px;
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
}

/* ---------- yield, always labelled ---------- */
.di-yield strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.di-yield-basis  { font-size: var(--fs-micro); color: var(--text-muted); }
.di-yield-flag {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--caution);
  background: var(--caution-soft);
  border-radius: var(--r-badge);
  padding: 2px 6px;
}

/* ---------- cards ---------- */
.di-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* Reserve the image box so nothing shifts while it loads. CLS budget is 0.05. */
.di-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-muted); }
.di-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the core mobile pattern ---------- */
/* 90% of traffic is mobile and vertical stacking made the home page nine screens long.
   Native scroll-snap only — no carousel library ships. */
.di-swipe {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline-start: var(--pad-section-x-m);
  scroll-padding-inline-start: var(--pad-section-x-m);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.di-swipe::-webkit-scrollbar { display: none; }
.di-swipe > * { flex: 0 0 auto; scroll-snap-align: start; }

/* ---------- Ber note ---------- */
.di-ber-note {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ---------- utility ---------- */
.di-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}