/* ============================================================================
   Swedish Technology — shared UI component system
   ----------------------------------------------------------------------------
   One component layer for buttons, chips, status badges and eyebrows.

   Before this file the site carried 364 button/chip/badge rules across 25 files:
   every page template invented its own (.crm-btn, .am-btn, .fm-btn, .ehc-rd-pill,
   .ehc-owms-pill …), which produced 22 border-radius values, 23 font sizes and
   8 letter-spacing values for what are really four components.

   Design intent: restraint. Controlled fills, one radius scale, title case, normal
   tracking, no decorative shadows, no full-pill geometry on actions. Pill geometry
   is reserved for genuine status and taxonomy chips.

   Written with logical properties (padding-inline, margin-inline) so a single
   definition serves both English LTR and Arabic RTL without a mirrored copy.
   ========================================================================== */

:root {
  /* --- UI type scale (components only; page headings stay in style.css) --- */
  --st-ui-xs: 12px;
  --st-ui-sm: 13px;
  --st-ui-md: 14px;
  --st-ui-lg: 15px;

  --st-fw-regular: 400;
  --st-fw-medium: 500;
  --st-fw-semibold: 600;
  --st-fw-bold: 700;          /* reserved: numerals and status text only */

  /* --- Spacing scale --- */
  --st-space-1: 4px;
  --st-space-2: 8px;
  --st-space-3: 12px;
  --st-space-4: 16px;
  --st-space-5: 20px;
  --st-space-6: 24px;
  --st-space-8: 32px;
  --st-space-10: 40px;
  --st-space-12: 48px;
  --st-space-16: 64px;

  /* --- Radius: four steps, plus pill for chips only --- */
  --st-radius-sm: 6px;
  --st-radius-md: 8px;
  --st-radius-lg: 12px;
  --st-radius-xl: 16px;
  --st-radius-pill: 999px;

  /* --- Control heights --- */
  --st-control-compact: 38px;
  --st-control-standard: 44px;
  --st-control-large: 48px;

  /* --- Borders --- */
  --st-border-subtle: #e6e8ee;
  --st-border-strong: #cfd4de;
  --st-border-primary: var(--primary-dark, #b81818);

  /* --- Surfaces and text --- */
  --st-surface-quiet: #f6f7f9;
  --st-surface-sunken: #eef0f4;
  --st-ink: #16202e;
  --st-ink-muted: #5b6675;

  /* --- Semantic --- */
  --st-success: #12724a;
  --st-success-bg: #e7f4ed;
  --st-warning: #8a5a00;
  --st-warning-bg: #fdf3e0;
  --st-error: #a8232a;
  --st-error-bg: #fdecec;
  --st-info: #1b4f86;
  --st-info-bg: #e8f0f9;

  /* --- Shadows: two, both restrained. Buttons use neither by default. --- */
  --st-shadow-rest: 0 1px 2px rgba(20, 28, 40, .06);
  --st-shadow-raised: 0 6px 18px rgba(20, 28, 40, .10);

  /* --- Icons --- */
  --st-icon-sm: 16px;
  --st-icon-md: 18px;
  --st-icon-lg: 20px;

  --st-ease: 160ms cubic-bezier(.2, 0, .2, 1);
}

/* ============================================================================
   BUTTONS
   ========================================================================== */

.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-2);
  min-height: var(--st-control-standard);
  padding-block: 0;
  padding-inline: var(--st-space-5);
  border: 1px solid transparent;
  border-radius: var(--st-radius-md);
  font-family: inherit;
  font-size: var(--st-ui-md);
  font-weight: var(--st-fw-semibold);
  line-height: 1.2;
  letter-spacing: 0;              /* no decorative tracking */
  text-transform: none;           /* title case, never shouted */
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  transition: background-color var(--st-ease), border-color var(--st-ease),
              color var(--st-ease), transform var(--st-ease);
}

.st-btn:focus-visible {
  outline: 2px solid var(--secondary, #002f6c);
  outline-offset: 2px;
}

.st-btn:active { transform: translateY(1px); }

.st-btn[disabled],
.st-btn[aria-disabled="true"],
.st-btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Icons sit optically level with the label and never set their own size. */
.st-btn i,
.st-btn svg,
.st-btn .lucide {
  inline-size: var(--st-icon-md);
  block-size: var(--st-icon-md);
  flex: 0 0 auto;
  stroke-width: 2;
}

/* Directional icons flip with the writing mode; symbolic ones do not. */
[dir="rtl"] .st-btn .lucide-arrow-right,
[dir="rtl"] .st-btn .lucide-arrow-left,
[dir="rtl"] .st-btn .lucide-chevron-right,
[dir="rtl"] .st-btn .lucide-chevron-left,
[dir="rtl"] .st-btn .lucide-move-right,
[dir="rtl"] .st-btn .lucide-move-left { transform: scaleX(-1); }

/* --- Variants --------------------------------------------------------- */

.st-btn--primary {
  background: var(--primary, #E22222);
  border-color: var(--primary, #E22222);
  color: #fff;
}
.st-btn--primary:hover,
.st-btn--primary:focus-visible {
  background: var(--primary-dark, #b81818);
  border-color: var(--primary-dark, #b81818);
  color: #fff;
}

.st-btn--secondary {
  background: var(--secondary, #002f6c);
  border-color: var(--secondary, #002f6c);
  color: #fff;
}
.st-btn--secondary:hover,
.st-btn--secondary:focus-visible {
  background: #002250;
  border-color: #002250;
  color: #fff;
}

/* Outline is a neutral control, not a pale-red echo of the primary. */
.st-btn--outline {
  background: #fff;
  border-color: var(--st-border-strong);
  color: var(--st-ink);
}
.st-btn--outline:hover,
.st-btn--outline:focus-visible {
  background: var(--st-surface-quiet);
  border-color: #b6bdca;
  color: var(--st-ink);
}

.st-btn--ghost {
  background: var(--st-surface-quiet);
  border-color: transparent;
  color: var(--st-ink);
}
.st-btn--ghost:hover,
.st-btn--ghost:focus-visible {
  background: var(--st-surface-sunken);
  color: var(--st-ink);
}

.st-btn--text {
  min-height: auto;
  padding-inline: 0;
  border-color: transparent;
  color: var(--primary, #E22222);
  font-weight: var(--st-fw-semibold);
}
.st-btn--text:hover,
.st-btn--text:focus-visible {
  color: var(--primary-dark, #b81818);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* On dark hero photography a solid white control reads better than an outline. */
.st-btn--on-dark {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
  backdrop-filter: blur(2px);
}
.st-btn--on-dark:hover,
.st-btn--on-dark:focus-visible {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
.st-btn--on-dark:focus-visible { outline-color: #fff; }

/* --- Sizes ------------------------------------------------------------- */

.st-btn--compact {
  min-height: var(--st-control-compact);
  padding-inline: var(--st-space-4);
  font-size: var(--st-ui-sm);
}
.st-btn--compact i, .st-btn--compact svg, .st-btn--compact .lucide {
  inline-size: var(--st-icon-sm);
  block-size: var(--st-icon-sm);
}

.st-btn--large {
  min-height: var(--st-control-large);
  padding-inline: var(--st-space-6);
  font-size: var(--st-ui-lg);
}
.st-btn--large i, .st-btn--large svg, .st-btn--large .lucide {
  inline-size: var(--st-icon-lg);
  block-size: var(--st-icon-lg);
}

.st-btn--icon {
  padding-inline: 0;
  inline-size: var(--st-control-standard);
  min-inline-size: var(--st-control-standard);
  gap: 0;
}

.st-btn--block { display: flex; inline-size: 100%; }

/* Action rows: consistent gap, wraps rather than overflowing on small screens. */
.st-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--st-space-3);
}

/* ============================================================================
   CHIPS — taxonomy, metadata, filters. Never a call to action.
   ========================================================================== */

.st-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--st-space-2);
  min-height: 28px;
  padding-block: 4px;
  padding-inline: var(--st-space-3);
  border: 1px solid var(--st-border-subtle);
  border-radius: var(--st-radius-pill);   /* pill is correct here */
  background: #fff;
  color: var(--st-ink-muted);
  font-size: var(--st-ui-xs);
  font-weight: var(--st-fw-medium);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.st-chip i, .st-chip svg, .st-chip .lucide {
  inline-size: 14px;
  block-size: 14px;
  flex: 0 0 auto;
  opacity: .75;
}

.st-chip--neutral { background: var(--st-surface-quiet); border-color: transparent; }
.st-chip--brand {
  background: #fff;
  border-color: rgba(226, 34, 34, .28);
  color: var(--primary-dark, #b81818);
}
.st-chip--on-dark {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .92);
}

/* Interactive chips (filters) get affordance; static ones must not look clickable. */
a.st-chip, button.st-chip { cursor: pointer; transition: border-color var(--st-ease), background-color var(--st-ease); }
a.st-chip:hover, button.st-chip:hover { border-color: var(--st-border-strong); background: var(--st-surface-quiet); }
a.st-chip:focus-visible, button.st-chip:focus-visible { outline: 2px solid var(--secondary, #002f6c); outline-offset: 2px; }
.st-chip[aria-pressed="true"], .st-chip.is-active {
  background: var(--secondary, #002f6c); border-color: var(--secondary, #002f6c); color: #fff;
}

.st-chips { display: flex; flex-wrap: wrap; gap: var(--st-space-2); }

/* ============================================================================
   STATUS BADGES — factual state only (In Stock, New, Enterprise).
   Deliberately quieter than the product title they sit beside.
   ========================================================================== */

.st-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 3px;
  padding-inline: var(--st-space-2);
  border-radius: var(--st-radius-sm);
  background: var(--st-surface-quiet);
  color: var(--st-ink-muted);
  font-size: var(--st-ui-xs);
  font-weight: var(--st-fw-semibold);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.st-status::before {
  content: "";
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
  opacity: .85;
}
.st-status--success { background: var(--st-success-bg); color: var(--st-success); }
.st-status--warning { background: var(--st-warning-bg); color: var(--st-warning); }
.st-status--error   { background: var(--st-error-bg);   color: var(--st-error); }
.st-status--info    { background: var(--st-info-bg);    color: var(--st-info); }
.st-status--plain::before { display: none; }

/* ============================================================================
   EYEBROW — the small line above a heading.
   This replaces the pale-red outlined pill that read as a broken button.
   It is typography, not a control, so it gets no border and no fill.
   ========================================================================== */

.st-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--st-space-2);
  margin-block-end: var(--st-space-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary, #E22222);
  font-size: var(--st-ui-sm);
  font-weight: var(--st-fw-semibold);
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: none;
}
.st-eyebrow i, .st-eyebrow svg, .st-eyebrow .lucide {
  inline-size: var(--st-icon-sm);
  block-size: var(--st-icon-sm);
  flex: 0 0 auto;
}
/* A hairline rule reads as intent; an outlined pill reads as a mistake. */
.st-eyebrow::after {
  content: "";
  inline-size: 22px;
  block-size: 1px;
  background: currentColor;
  opacity: .4;
  margin-inline-start: var(--st-space-1);
}
.st-eyebrow--on-dark { color: var(--accent, #e8a317); }
.st-eyebrow--quiet { color: var(--st-ink-muted); }

/* ============================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .st-btn, .st-chip { transition: none; }
  .st-btn:active { transform: none; }
}

/* Touch targets stay at least 44px on coarse pointers. */
@media (pointer: coarse) {
  .st-btn { min-height: var(--st-control-standard); }
  .st-btn--compact { min-height: 40px; }
}

/* ============================================================================
   CARD RHYTHM BREAKS
   ----------------------------------------------------------------------------
   Inserted between groups of at most 6 cards. These must not read as "another
   card": no tinted panel, no border and no shadow around the pair. The media
   carries the section and the copy sits in plain type.
   ========================================================================== */
.st-rhythm-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--st-space-10);
  align-items: center;
  margin-block: 44px;
}
.st-rhythm-split--reverse .st-rhythm-media { order: 2; }
.st-rhythm-split .st-rhythm-media { margin: 0; }
.st-rhythm-split .st-rhythm-media img {
  width: 100%; height: 340px; object-fit: cover; display: block;
  border-radius: var(--st-radius-lg);
}
.st-rhythm-copy h4 {
  margin: 0 0 var(--st-space-3);
  font-size: 22px; line-height: 1.25; font-weight: var(--st-fw-bold);
  color: var(--st-ink); letter-spacing: -.01em;
}
.st-rhythm-copy p {
  margin: 0 0 var(--st-space-3);
  font-size: var(--st-ui-lg); line-height: 1.75; color: #475569; max-width: 56ch;
}
.st-rhythm-copy p:last-child { margin-bottom: 0; }

.st-rhythm-wide { margin-block: var(--st-space-12); }
.st-rhythm-wide img {
  width: 100%; height: 420px; object-fit: cover; display: block;
  border-radius: var(--st-radius-lg);
}
.st-rhythm-wide figcaption {
  margin-top: var(--st-space-3);
  font-size: var(--st-ui-md); line-height: 1.7; color: #64748b; max-width: 78ch;
}
@media (max-width: 900px) {
  .st-rhythm-split { grid-template-columns: 1fr; gap: var(--st-space-6); margin-block: var(--st-space-8); }
  .st-rhythm-split--reverse .st-rhythm-media { order: 0; }
  .st-rhythm-split .st-rhythm-media img { height: 220px; }
  .st-rhythm-wide img { height: 240px; }
  .st-rhythm-copy h4 { font-size: 19px; }
}

/* Legal clause list — editorial type, not cards. */
.st-ar-clauses { margin: 0 0 var(--st-space-6); }
.st-ar-clauses dt {
  margin-block-start: var(--st-space-5);
  font-size: var(--st-ui-lg); font-weight: var(--st-fw-semibold); color: var(--st-ink);
}
.st-ar-clauses dd {
  margin: var(--st-space-2) 0 0;
  padding-inline-start: 0;
  font-size: var(--st-ui-lg); line-height: 1.8; color: #475569; max-width: 74ch;
}
.st-ar-clauses dt + dd { border-inline-start: 2px solid var(--st-border-subtle); padding-inline-start: var(--st-space-4); }

/* ============================================================================
   GROUP LABEL
   ----------------------------------------------------------------------------
   The structural break for a navigator. A photograph dropped into the middle of
   a link grid is decoration; a labelled group is how a person would organise it.
   ========================================================================== */
.services-icon-groups { display: block; }
.st-group-label {
  margin-block: var(--st-space-10) var(--st-space-5);
  padding-block-end: var(--st-space-3);
  border-block-end: 1px solid var(--st-border-subtle);
}
.st-group-label:first-child { margin-block-start: 0; }
.st-group-label h3 {
  margin: 0 0 var(--st-space-1);
  font-size: 18px; font-weight: var(--st-fw-semibold); color: var(--st-ink);
  letter-spacing: -.01em;
}
.st-group-label p {
  margin: 0;
  font-size: var(--st-ui-md); line-height: 1.6; color: var(--st-ink-muted); max-width: 68ch;
}
@media (max-width: 700px) {
  .st-group-label { margin-block: var(--st-space-8) var(--st-space-4); }
  .st-group-label h3 { font-size: 16px; }
}

/* Inside a grouped navigator the grid must align with its label, not re-centre
   itself inside the section (the standalone grid uses max-width + margin:auto). */
.services-icon-groups { max-width: 900px; margin-inline: auto; }
.services-icon-groups .services-icon-grid { max-width: none; margin-inline: 0; }
@media (max-width: 700px) {
  .services-icon-groups .services-icon-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   SLIDER
   ----------------------------------------------------------------------------
   Horizontal row for tile groups. Keeps each group to a single line instead of
   wrapping into a ragged 4 + 2 block, and doubles as the mobile treatment so a
   long group never becomes an endless vertical scroll.

   Native overflow scrolling does the work: touch and trackpad swipe for free,
   scroll-snap for alignment, arrows only as a desktop affordance. Logical
   properties keep it correct in RTL.
   ========================================================================== */
.st-slider { position: relative; }
.st-slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 1fr);
  gap: var(--st-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  padding-block-end: var(--st-space-2);
  /* Keep the scrollbar out of the composition; the arrows communicate affordance. */
  scrollbar-width: none;
}
.st-slider-track::-webkit-scrollbar { display: none; }
.st-slider-track > * { scroll-snap-align: start; }

.st-slider-arrow {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 36px; block-size: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--st-border-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--st-ink);
  cursor: pointer;
  box-shadow: var(--st-shadow-rest);
  transition: background-color var(--st-ease), border-color var(--st-ease), opacity var(--st-ease);
  z-index: 2;
}
.st-slider-arrow:hover { background: var(--st-surface-quiet); border-color: #b6bdca; }
.st-slider-arrow:focus-visible { outline: 2px solid var(--secondary, #002f6c); outline-offset: 2px; }
.st-slider-arrow[disabled] { opacity: 0; pointer-events: none; }
.st-slider-arrow i, .st-slider-arrow svg { inline-size: 18px; block-size: 18px; }
.st-slider-prev { inset-inline-start: -18px; }
.st-slider-next { inset-inline-end: -18px; }
[dir="rtl"] .st-slider-arrow i, [dir="rtl"] .st-slider-arrow svg { transform: scaleX(-1); }

/* Touch devices scroll directly; hide the arrows rather than overlap the tiles. */
@media (max-width: 900px), (pointer: coarse) {
  .st-slider-arrow { display: none; }
  .st-slider-track { grid-auto-columns: minmax(150px, 46%); }
}
@media (prefers-reduced-motion: reduce) { .st-slider-track { scroll-behavior: auto; } }