/**
 * MEDAS Saudi Arabia landing page
 * Loaded only by /sa/ and /ar/sa/, after styles.css (and rtl.css on the Arabic page).
 *
 * Everything here is built from the tokens already declared in styles.css. Only
 * blocks with no existing equivalent live in this file - the rest of the page
 * runs on the shared component library.
 */

/* -------------------------------------------------------------------------
   Hero
   The Saudi headline is long - two proper nouns and a product pair. At the
   shared h1 size it runs to five lines and swamps the fold, so it is scaled
   down a step here only.
   ------------------------------------------------------------------------- */
.page-hero-split .page-hero-content h1 {
  font-size: clamp(2.125rem, 3.4vw, 3rem);
}

/* -------------------------------------------------------------------------
   Hero trust points
   The five compliance/scale claims sit under the hero CTAs as a wrapping row
   rather than the stacked column .check-list gives by default.
   ------------------------------------------------------------------------- */
.saudi-trust-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
}

.saudi-trust-list li {
  position: relative;
  /* 18px marker + 10px gutter; the scale has no 1.75rem step of its own. */
  padding-inline-start: 1.75rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-700);
}

.saudi-trust-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

/* -------------------------------------------------------------------------
   Regional compliance
   styles.css ships badge colours for the platforms it knew about - NPHIES
   green, CBAHI bronze, ZATCA slate. Cloud is the fourth card on this page
   only, so its colour lives here: the brand cyan, which none of the others
   use.
   ------------------------------------------------------------------------- */
.gcc-logo.cloud {
  background: linear-gradient(135deg, #0891b2 0%, #065f7d 100%);
  color: white;
}

/* -------------------------------------------------------------------------
   Business figures
   Visually identical to .stat-number inside .stats-section, but under its own
   class so the counter animation in main.js leaves it alone - that routine
   rebuilds each .stat-number from its own text content and turns "5,000+" into
   "5000,+". These four figures carry thousands separators, so they read as
   authored instead.
   ------------------------------------------------------------------------- */
.stat-figure {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-2);
  color: var(--white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .stat-figure {
    font-size: 2.25rem;
  }
}

/* -------------------------------------------------------------------------
   Card sub-points
   The recommendation hides these two lines per solution behind a "View details"
   toggle. Rendered inline instead: no disclosure JS, and every line stays in
   the crawlable HTML.
   ------------------------------------------------------------------------- */
.card-points {
  list-style: none;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-100);
}

.card-points li {
  position: relative;
  padding-inline-start: var(--space-4);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.card-points li:last-child {
  margin-bottom: 0;
}

.card-points li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Compact variant of .feature-card for the twelve-module solutions grid and the
   eight AccreHealth cards - the default 3rem padding makes those grids very tall. */
.feature-card.feature-card-compact {
  padding: var(--space-6);
}

.feature-card.feature-card-compact h3 {
  font-size: var(--text-lg);
}

.feature-card.feature-card-compact .feature-icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
}

.feature-card.feature-card-compact .feature-icon svg {
  width: 22px;
  height: 22px;
}

.features-grid.features-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .features-grid.features-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .features-grid.features-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   Small print
   Used by the AI section and Saudi Vision 2030 - both carry scope disclaimers
   that must stay visible but must not read as body copy.
   ------------------------------------------------------------------------- */
.saudi-note {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--gray-500);
  max-width: 65ch;
}

.section-header + .saudi-note,
.saudi-note.center {
  margin-inline: auto;
  text-align: center;
}

/* -------------------------------------------------------------------------
   OXARD ERP - HR and Finance capability columns
   ------------------------------------------------------------------------- */
.erp-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

@media (max-width: 768px) {
  .erp-columns {
    grid-template-columns: 1fr;
  }
}

.erp-column {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.erp-column h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
}

.erp-column > p {
  color: var(--gray-600);
  margin-bottom: var(--space-6);
}

/* -------------------------------------------------------------------------
   Saudi Vision 2030 pillars
   ------------------------------------------------------------------------- */
.vision-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

@media (max-width: 560px) {
  .vision-list {
    grid-template-columns: 1fr;
  }
}

.vision-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-800);
  transition: transform var(--transition), border-color var(--transition);
}

.vision-list li:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
}

.vision-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--primary);
}

/* The official mark is a stacked lockup - wordmark over the Arabic line over
   "KINGDOM OF SAUDI ARABIA" - so it needs real height for the bottom line to
   stay legible. The source SVG shipped on a 1000x1000 canvas with the artwork
   filling barely a third of it; its viewBox is cropped to the artwork bounds
   in the file itself, so this height is the drawn height. */
.vision-logo {
  height: 100px;
  width: auto;
  margin-bottom: var(--space-6);
}

@media (max-width: 560px) {
  .vision-logo {
    height: 78px;
  }
}

/* -------------------------------------------------------------------------
   GCC presence chips
   .gcc-country in styles.css is built for a dark band; this is the light
   equivalent for the Saudi presence section.
   ------------------------------------------------------------------------- */
.gcc-chip-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.gcc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-800);
  transition: transform var(--transition), border-color var(--transition);
}

.gcc-chip:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.gcc-chip img {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--gray-200);
}

/* Saudi region cards inside the presence section */
.region-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (max-width: 560px) {
  .region-list {
    grid-template-columns: 1fr;
  }
}

.region-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.region-list svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--primary);
}

.region-list strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--gray-900);
}

.region-list span {
  display: block;
  font-size: var(--text-xs);
  color: var(--gray-500);
}

.presence-panel {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-top: var(--space-6);
}

.presence-panel h3 {
  font-size: var(--text-base);
  margin: 0;
}

/* -------------------------------------------------------------------------
   Interoperability board

   A hub-and-spoke diagram: six connected systems either side of MEDAS Core,
   joined by curved links whose dashes travel inward on the left and outward on
   the right, so the whole figure reads as data passing through the platform.

   The links are one absolutely positioned SVG behind the nodes. They are
   aria-hidden and purely decorative - every relationship they draw is also
   written in a node label - and they are dropped below 1024px, where the
   columns stack and the curves would no longer line up with anything.
   ------------------------------------------------------------------------- */
.interop-board {
  position: relative;
  overflow: hidden;
  padding: var(--space-12) var(--space-8);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 640px) {
  .interop-board {
    padding: var(--space-8) var(--space-4);
  }
}

.interop-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--primary);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .interop-links {
    display: none;
  }
}

/* RTL: mirroring the whole layer keeps each curve attached to its column and
   sends the travelling dashes right-to-left with the reading direction. */
[dir="rtl"] .interop-links {
  transform: scaleX(-1);
}

.interop-link-base {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.3;
}

.interop-link-flow {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-dasharray: 6 10;
  animation: interop-flow 2.4s linear infinite;
}

.interop-link:nth-child(2) .interop-link-flow { animation-delay: -0.4s; }
.interop-link:nth-child(3) .interop-link-flow { animation-delay: -0.8s; }
.interop-link:nth-child(4) .interop-link-flow { animation-delay: -1.2s; }
.interop-link:nth-child(5) .interop-link-flow { animation-delay: -1.6s; }
.interop-link:nth-child(6) .interop-link-flow { animation-delay: -2s; }

@keyframes interop-flow {
  to {
    stroke-dashoffset: -32px;
  }
}

.interop-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-8);
}

@media (max-width: 1024px) {
  .interop-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* Capped and pushed to the outer edge so the connector runs stay visible
   rather than disappearing under full-width cards. */
.interop-column {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: 320px;
}

.interop-column:first-child {
  justify-self: start;
}

.interop-column:last-child {
  justify-self: end;
}

@media (max-width: 1024px) {
  .interop-column {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }
}

@media (max-width: 560px) {
  .interop-column {
    grid-template-columns: 1fr;
  }
}

.interop-node {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-800);
  transition: transform var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}

.interop-node:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.interop-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: rgba(15, 76, 129, 0.1);
  color: var(--primary);
  transition: background var(--transition), color var(--transition);
}

.interop-node:hover .interop-node-icon {
  background: var(--primary);
  color: var(--white);
}

.interop-node-icon svg {
  width: 18px;
  height: 18px;
}

/* Hub */
.interop-hub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  height: 172px;
  margin-inline: auto;
}

.interop-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--accent);
}

.interop-rings circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.interop-ring {
  opacity: 0.35;
}

.interop-ring-spin {
  stroke-dasharray: 4 8;
  transform-origin: 50% 50%;
  animation: interop-spin 22s linear infinite;
}

@keyframes interop-spin {
  to {
    transform: rotate(360deg);
  }
}

.interop-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, var(--accent) 100%);
  color: var(--white);
  text-align: center;
  box-shadow: 0 18px 40px -12px rgba(15, 76, 129, 0.55);
  animation: interop-pulse 4s ease-in-out infinite;
}

.interop-core strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.interop-core span {
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}

@keyframes interop-pulse {
  0%, 100% {
    box-shadow: 0 18px 40px -12px rgba(15, 76, 129, 0.55);
  }
  50% {
    box-shadow: 0 18px 52px -8px rgba(8, 145, 178, 0.6);
  }
}

/* Motion is decoration here; the diagram is fully legible without it. */
@media (prefers-reduced-motion: reduce) {
  .interop-link-flow,
  .interop-ring-spin,
  .interop-core {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   Contact card with map
   ------------------------------------------------------------------------- */
.saudi-contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 900px) {
  .saudi-contact-split {
    grid-template-columns: 1fr;
  }
}

.saudi-contact-details {
  padding: var(--space-10);
}

.saudi-contact-details h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-6);
}

.saudi-contact-list {
  list-style: none;
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.saudi-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--gray-700);
}

.saudi-contact-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary);
}

.saudi-contact-list address {
  font-style: normal;
  line-height: 1.7;
}

.saudi-contact-list a {
  color: var(--gray-700);
}

.saudi-contact-list a:hover {
  color: var(--primary);
}

.saudi-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.saudi-contact-map {
  min-height: 340px;
  border-inline-start: 1px solid var(--gray-200);
}

.saudi-contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
}

@media (max-width: 900px) {
  .saudi-contact-map {
    border-inline-start: 0;
    border-top: 1px solid var(--gray-200);
  }
}

/* -------------------------------------------------------------------------
   Implementation path - six steps, where .process-grid assumes five
   ------------------------------------------------------------------------- */
.process-grid.process-grid-6 {
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1024px) {
  .process-grid.process-grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .process-grid.process-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -------------------------------------------------------------------------
   RTL
   .check-list in styles.css positions its tick with physical left/padding-left
   and rtl.css carries no override for it, so the marker would strand itself on
   the far side of right-aligned Arabic text. Fixed here for these two pages.
   ------------------------------------------------------------------------- */
[dir="rtl"] .check-list li {
  padding-left: 0;
  padding-inline-start: var(--space-8);
}

[dir="rtl"] .check-list li::before {
  left: auto;
  inset-inline-start: 0;
}