/* ERYX PREFA — shared design tokens */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
  --eryx-cobalt: #0047AB;
  --eryx-cobalt-deep: #00337a;
  --eryx-cobalt-tint: #e6edf7;
  --eryx-rose: #F3D9DF;
  --eryx-black: #0B0B0B;
  --eryx-graphite: #1a1a1c;
  --eryx-steel: #2a2d33;
  --eryx-concrete: #f5f4f0;
  --eryx-bone: #faf8f3;
  --eryx-line: #d8d4ca;
  --eryx-mute: #8b8a85;
}

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

img { max-width: 100%; display: block; }

/* Striped placeholder for missing assets */
.placeholder-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.04) 0,
    rgba(0,0,0,0.04) 1px,
    transparent 1px,
    transparent 12px
  );
}

/* ===== Mobile responsive overrides =====
   NOTE: React serializes inline styles to kebab-case in the DOM, so all
   [style*="…"] selectors below MUST use kebab-case property names
   (e.g. "grid-template-columns", "min-height") — camelCase never matches. */

/* Universal safety: never let the page scroll sideways.
   Use overflow-x: clip (NOT hidden) — hidden turns the body into a
   scroll container and breaks the sticky header on mobile. clip does not. */
html, body { max-width: 100%; overflow-x: clip; }

/* Universal grid-blowout guard (all widths): grid children may not be forced
   wider than their track by intrinsic content (aspect-ratio images, long
   strings). Without this, 2-col cards overflow in the 1025–1130px range. */
section [style*="grid-template-columns"] > * { min-width: 0; }

@media (max-width: 1024px) {
  /* 1 — Stack every multi-column grid into a single column */
  section [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Fields set to span 2 columns must not create a phantom 2nd column once stacked */
  section [style*="grid-column: span 2"] { grid-column: auto !important; }

  /* 2 — Prevent grid/flex blowout. Grid & flex items default to
     min-width:auto, so intrinsic content (long strings, aspect-ratio
     images) can force a track far wider than the viewport. Reset it. */
  section [style*="grid-template-columns"] > *,
  section [style*="display: flex"] > * {
    min-width: 0 !important;
  }

  /* 3 — Image panels are sized by aspect-ratio: drop the desktop
     min-height so width (not height) drives their size on mobile.
     This is what fixes the product-card overflow. */
  section [style*="aspect-ratio"] {
    min-height: 0 !important;
  }
  /* Stacked product/photo panels: cap the desktop min-height so they aren't huge */
  [style*="min-height: 460"] { min-height: 240px !important; }
  [style*="min-height: 480"] { min-height: 260px !important; }

  /* 3b — Stacked cards: always put the photo FIRST (on top).
     On desktop the photo alternates left/right via `order`; once the
     grid collapses to one column that order would drop the photo to the
     bottom on every other card. Force the photo panel above the text. */
  section article > [style*="background-image"] {
    order: -1 !important;
  }

  /* 4 — Section + container padding */
  section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  section > div[style*="1440"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 5 — Tame large inner padding on cards/panels */
  [style*="padding: 80px 64px"] { padding: 36px 22px !important; }
  [style*="padding: 64px 56px"] { padding: 32px 22px !important; }
  [style*="padding: 56px 56px 56px"] { padding: 32px 22px !important; }
  [style*="padding: 56px 56px"] { padding: 32px 22px !important; }
  [style*="padding: 48px"] { padding: 24px !important; }
  [style*="padding: 40px 36px"] { padding: 26px 20px !important; }
  [style*="padding: 40px 32px"] { padding: 24px 20px !important; }
  [style*="padding: 36px 32px"] { padding: 24px 20px !important; }
  [style*="padding: 32px"] { padding: 22px !important; }

  /* 6 — Tame oversized gaps */
  [style*="gap: 100px"] { gap: 28px !important; }
  [style*="gap: 80px"]  { gap: 28px !important; }
  [style*="gap: 64px"]  { gap: 24px !important; }
  [style*="gap: 36px"]  { gap: 20px !important; }

  /* 7 — Headings scale down */
  h1 { font-size: clamp(34px, 8.5vw, 46px) !important; }
  h2 { font-size: clamp(26px, 7vw, 36px) !important; }
  h3 { font-size: clamp(21px, 5.5vw, 26px) !important; }

  /* 8 — Big stat / display numbers (kebab-case to match React output) */
  [style*="font-size: 96"] { font-size: 52px !important; }
  [style*="font-size: 64"] { font-size: 40px !important; }
  [style*="font-size: 56"] { font-size: 38px !important; }
  [style*="font-size: 40"] { font-size: 30px !important; }

  /* 9 — KPI / spec cells: drop separators & indents once stacked */
  section [style*="border-right"] { border-right: none !important; }
  section [style*="padding-left: 32"] { padding-left: 0 !important; }
  section [style*="padding-left: 28"] { padding-left: 0 !important; }
  section [style*="padding: 56px 32px 56px 0"] { padding: 28px 0 !important; }
}

/* Small phones */
@media (max-width: 480px) {
  section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  h1 { font-size: clamp(30px, 9vw, 40px) !important; }
}

/* ===== Right-to-left (Arabic) ===== */
html[dir="rtl"] { direction: rtl; }

/* Use an Arabic-capable typeface site-wide in RTL mode (covers Latin too,
   so technical tokens like kVA / C13-100 / TGBT still render cleanly). */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] p, html[dir="rtl"] span, html[dir="rtl"] a,
html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] textarea,
html[dir="rtl"] select, html[dir="rtl"] li, html[dir="rtl"] label, html[dir="rtl"] div {
  font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif !important;
}

/* In RTL, default text alignment follows the reading direction */
html[dir="rtl"] p, html[dir="rtl"] h1, html[dir="rtl"] h2,
html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] li {
  text-align: right;
}

/* Keep the dropdown caret on the correct side for RTL selects */
html[dir="rtl"] select {
  background-position: left 16px center !important;
  padding-right: 16px !important;
  padding-left: 40px !important;
}