/* ============ Home (index) page styles — shared for EN + AR (widescreen-tuned) ============ */

/* Hero */
.home-hero {
  position: relative;
  z-index: 0; /* keeps menu overlay above it */
  padding-block: clamp(56px, 12vw, 180px); /* ↑ max from 120px -> 180px */
  text-align: center;
  border-bottom: 1px solid var(--border);
  /* Scale the spotlight with viewport while keeping a sensible floor/ceiling */
  background: radial-gradient(
      clamp(800px, 50vw, 1400px) clamp(400px, 30vw, 700px) at 50% -10%,
      rgba(92, 195, 255, 0.15),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%),
    transparent;
  border-radius: 0 0 22px 22px;
}
.home-hero h1 {
  letter-spacing: 0.2px;
  font-weight: 700;
  text-wrap: balance;
}
/* Arabic headings shouldn’t track-letter; keep natural spacing */
:root[dir="rtl"] .home-hero h1 {
  letter-spacing: normal;
}

/* =========================================
   Metrics (At a Glance) — cleaned & fixed
   - Consistent card layout
   - Prevent broken numbers (e.g., 220,000 / 4,000,000)
   - Fully responsive
========================================= */

/* Wrapper spacing */
.metrics {
  padding-top: clamp(24px, 4vw, 56px); /* ↑ max 36px -> 56px */
}

/* Grid of metric cards */
.metrics-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.4vw, 28px); /* ↑ max 20px -> 28px, slightly lower slope */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Metric card */
.metric {
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 28px); /* ↑ max 20px -> 28px */
  display: grid;
  grid-template-columns: auto 1fr; /* icon + content (auto aligns to inline-start in both LTR/RTL) */
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px); /* make gap gently scale */
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

/* Icon */
.metric img {
  inline-size: clamp(48px, 3.2vw, 64px); /* scales up on wide screens */
  block-size: clamp(48px, 3.2vw, 64px);
  flex: 0 0 auto;
}

/* Titles & text reset */
.metric h3,
.metric p {
  margin: 0;
  min-width: 0; /* allow shrinking in grid */
}

/* Title */
.metric h3 {
  /* Preserve base token but allow modest growth on very wide screens */
  font-size: clamp(var(--fs-3), 1.2vw, calc(var(--fs-3) + 6px));
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: balance;
}
/* Arabic: avoid artificial tracking on headings if any inherited */
:root[dir="rtl"] .metric h3 {
  letter-spacing: normal;
}

/* ---- Numbers: KEEP IN ONE PIECE ----
   - No forced breaks inside comma-separated numbers
   - Value + unit kept on one line
   - Tabular numerals for aligned digits
*/
.metric p {
  margin-top: 2px;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;

  /* override previous aggressive wrapping */
  overflow-wrap: normal;
  word-break: normal;

  /* keep value + unit together */
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.metric .value,
.metric .unit {
  white-space: nowrap; /* don’t split 220,000 or “m²” */
  font-variant-numeric: tabular-nums;
}

.metric .unit {
  opacity: 0.9; /* subtle de-emphasis */
}

/* Hover feedback */
.metric:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent), white 60%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

/* ====== Responsiveness ====== */

/* Very small screens: stack to 1 column, smaller icon */
@media (max-width: 485px) {
  .metrics-list {
    grid-template-columns: 1fr;
  }
  .metric {
    grid-template-columns: 40px 1fr;
  }
  .metric img {
    inline-size: 40px;
    block-size: 40px;
  }
}

/* Large screens: 4 columns */
@media (min-width: 860px) {
  .metrics-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .metric {
    grid-template-columns: 48px 1fr;
  }
}

/* Why Scorpion Venom */
.venom-intro {
  background: color-mix(in oklab, var(--surface), black 4%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.venom-intro p {
  color: var(--text);
  text-wrap: pretty;
}

/* Highlights */
.venom-highlights ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(10px, 1.6vw, 16px); /* allow a bit more space on wide */
}
.venom-highlights li {
  padding: clamp(12px, 1.4vw, 18px); /* ↑ ceiling a bit */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.venom-highlights li::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
/* mirror the accent bar for RTL */
:root[dir="rtl"] .venom-highlights li::before {
  inset-inline-start: auto;
  inset-inline-end: 0;
}
.venom-highlights a {
  font-weight: 600;
}

/* Sections */
.about-company,
.research-publications,
.products-capacity,
.partners-recognitions {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

/* Slightly relax readable line-length on very wide displays via media queries below */
.about-company > *,
.research-publications > *,
.products-capacity > *,
.partners-recognitions > * {
  max-width: 75ch;
}

/* Lists inside content */
.products-capacity ul {
  padding: 0;
  margin: 0.6rem 0 0;
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
}
.products-capacity li {
  list-style: none;
  padding: clamp(10px, 1.2vw, 16px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Partners logos (home) */
.partners-recognitions p {
  color: var(--muted);
}
.partners-recognitions .recognitions-list {
  margin-top: 10px;
}
.partners-recognitions img {
  filter: saturate(1) contrast(1.06);
  transform: translateZ(0);
}

/* Link emphasis in body copy */
.about-company a,
.research-publications a,
.products-capacity a {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--accent), white 40%);
  text-decoration-thickness: 1.2px;
}
.about-company a:hover,
.research-publications a:hover,
.products-capacity a:hover {
  text-decoration-color: var(--accent);
}

/* Section spacing rhythm */
.about-company {
  margin-block-end: 6px;
}
.research-publications {
  margin-block: 6px;
}
.products-capacity {
  margin-block-start: 6px;
}

/* Small screens tweaks */
@media (max-width: 520px) {
  .home-hero {
    padding-block: 56px;
  }
  .venom-highlights li {
    padding: 10px 12px;
  }
  .products-capacity li {
    padding: 10px 12px;
  }
}

/* Comfortable long lines */
.about-company p,
.research-publications p,
.products-capacity p {
  text-wrap: pretty;
}

/* Better focus within cards */
.metric a,
.venom-highlights a,
.products-capacity a {
  outline-offset: 3px;
}

/* =========================
   Wide & Ultra-wide tuning
   ========================= */

/* 1440px+: relax text column width a bit & add breathing room */
@media (min-width: 1440px) {
  .home-hero {
    padding-block: clamp(72px, 10vw, 200px);
  }
  .about-company > *,
  .research-publications > *,
  .products-capacity > *,
  .partners-recognitions > * {
    max-width: 82ch; /* ↑ from 75ch, still readable */
  }
  .metric {
    gap: clamp(14px, 1.2vw, 22px);
  }
  .metric img {
    inline-size: clamp(56px, 3vw, 72px);
    block-size: clamp(56px, 3vw, 72px);
  }
}

/* 1920px+: a bit more room without breaking readability */
@media (min-width: 1920px) {
  .about-company > *,
  .research-publications > *,
  .products-capacity > *,
  .partners-recognitions > * {
    max-width: 88ch;
  }
  .metrics {
    padding-top: clamp(36px, 3vw, 72px);
  }
  .metrics-list {
    gap: clamp(16px, 2vw, 32px);
  }
  .metric {
    padding: clamp(18px, 1.8vw, 32px);
  }
}