/* ============================================================================
   Solution pages — delta on top of st-authority.css
   ----------------------------------------------------------------------------
   Solution pages reuse the knowledge component layer wholesale: st-section,
   st-grid-2, st-cap, st-usecase, st-steps, st-table, st-callout, st-figure,
   st-list, st-related and the whole st-side sidebar are already defined there
   and are NOT redefined here.

   This file adds only the five components that did not exist before:
     .st-hero-facts      proof strip under the hero CTAs
     .st-section-figure  the alternating body image that breaks up long prose
     .st-cta-actions     button row in the closing CTA
     .st-cluster         pillar-page cluster block
     .st-cluster-links   the links inside one cluster

   Written with logical properties so one definition serves LTR and RTL, matching
   the convention in st-ui.css.
   ========================================================================== */

/* --- hero proof strip ---------------------------------------------------- */
.st-hero-facts {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.st-hero-facts li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.st-hero-facts li i {
  flex: 0 0 16px;
  color: var(--primary);
}

/* --- body image between sections ----------------------------------------
   Deliberately not a card and not a grid: it is a single full-width image whose
   job is to interrupt prose. A grid here would reintroduce the card wall the
   card limit exists to prevent. */
.st-section-figure {
  margin: 26px 0 4px;
}
.st-section-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.st-section-figure figcaption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

/* Image restraint used to live here as a pair of hand-written caps for
   body.postid-3378 and body.postid-3407 — the two pages someone had got
   round to fixing. That does not scale to 690 URLs, so the cap is now a
   site-wide budget in the theme:
     themes/swetech-old/css/st-photo-budget.css
   It holds every content photo inside 520 x 380 (a quarter of what the
   uncapped hero used to occupy) on every template, in every language.
   Nothing per-post is needed here any more. */

/* --- closing CTA --------------------------------------------------------- */
.st-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 6px;
}

/* Gold is the shared colour for consultation actions; WhatsApp remains an
   outlined neutral action for clear visual separation. */
.st-solution a[data-st-cta] {
  background: #e8a317;
  border-color: #e8a317;
  color: #fff;
}
.st-solution a[data-st-cta]:hover,
.st-solution a[data-st-cta]:focus-visible {
  background: #c9850d;
  border-color: #c9850d;
  color: #fff;
}

/* --- pillar page: one cluster ------------------------------------------- */
.st-cluster {
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 20px 24px;
  margin: 16px 0;
  /* Anchored from the header menu, so keep the heading clear of the sticky nav. */
  scroll-margin-top: 110px;
}
.st-cluster h3 {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 18px;
  margin: 0 0 8px;
}
.st-cluster h3 i {
  flex: 0 0 20px;
  color: var(--primary);
}
.st-cluster > p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.st-cluster-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 20px;
}
.st-cluster-links li a {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}
.st-cluster-links li a i {
  flex: 0 0 15px;
  color: var(--primary);
}
.st-cluster-links li a:hover {
  color: var(--primary);
}

/* --- RTL ----------------------------------------------------------------
   The arrow glyph inside cluster links points away from the reading direction
   on an Arabic page; mirror the icon rather than shipping a second markup path. */
.st-rtl .st-cluster-links li a i,
[dir="rtl"] .st-cluster-links li a i {
  transform: scaleX(-1);
}

/* ============================================================================
   Interactive & Smart Visitor Solutions — About-style experience
   ----------------------------------------------------------------------------
   The visitor pillar is a flagship page, so it uses the same visual language as
   the About page: photographic hero, generous split layouts, rounded cards,
   alternating emphasis panels and scroll reveals. The scope is intentional so
   the 50+ individual solution pages keep their compact knowledge layout.
   ========================================================================== */
body.postid-3378 .section.st-solution {
  padding: 0 0 104px;
  background: var(--bg-secondary);
}
body.postid-3378 .st-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body.postid-3378 .st-main { width: 100%; }
body.postid-3378 .st-side {
  order: initial;
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 20px;
  margin-top: 0;
}
body.postid-3378 .st-toc,
body.postid-3378 .st-side-card {
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 24px 26px;
}
body.postid-3378 .st-toc { grid-column: 1; }
body.postid-3378 .st-toc h3,
body.postid-3378 .st-side-card h3 {
  font-size: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary);
}
body.postid-3378 .st-toc ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.postid-3378 .st-toc li { margin: 0; }
body.postid-3378 .st-toc a {
  display: block;
  padding: 7px 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  transition: color .2s ease, transform .2s ease;
}
body.postid-3378 .st-toc a:hover { color: var(--primary); transform: translateX(3px); }
body.postid-3378 .st-side-card { grid-column: 2; }
body.postid-3378 .st-side-card p { line-height: 1.7; }
body.postid-3378 .st-side-related {
  grid-column: 1 / -1;
  display: none;
}

body.postid-3378 .st-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 52px;
  margin: 0 0 42px;
  padding: 72px 0 30px;
}
body.postid-3378 .st-answer {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.4;
  letter-spacing: -.025em;
  font-weight: 800;
}
body.postid-3378 .st-value {
  max-width: 58ch;
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.8;
}
body.postid-3378 .st-hero-actions { margin-top: 26px; }
/* Flagship treatment: rounded, tilted, lifted on hover. Sizing is not set
   here — st-photo-budget.css holds every hero visual to the same ceiling. */
body.postid-3378 .st-hero-visual {
  border-radius: 26px;
  border: 0;
  box-shadow: var(--shadow-lg);
  transform: rotate(1deg);
  transition: transform .5s ease, box-shadow .5s ease;
}
body.postid-3378 .st-hero-visual:hover {
  transform: rotate(0) translateY(-6px);
  box-shadow: 0 24px 50px rgba(16,31,54,.18);
}
body.postid-3378 .st-hero-visual img,
body.postid-3378 .st-hero-visual svg {
  object-fit: cover;
}
body.postid-3378 .st-hero-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.postid-3378 .st-hero-facts li {
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  min-width: 0;
  font-size: 12px;
}

body.postid-3378 .st-section {
  position: relative;
  overflow: hidden;
  padding: 64px 48px 48px;
  margin: 0 0 24px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 110px;
}
body.postid-3378 .st-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
body.postid-3378 .st-section h2 {
  max-width: 18ch;
  margin: 0 0 20px;
  font-size: clamp(27px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: -.025em;
}
body.postid-3378 .st-section h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 14px;
  border-radius: 99px;
  background: var(--primary);
}
body.postid-3378 .st-section > p,
body.postid-3378 .st-section > .st-list {
  max-width: 78ch;
}
body.postid-3378 .st-section-figure {
  margin: 30px 0 4px;
}
body.postid-3378 .st-section-figure img {
  border-radius: 18px !important;
  object-fit: cover;
}
body.postid-3378 .st-grid-2 { gap: 18px; }
body.postid-3378 .st-cap,
body.postid-3378 .st-usecase {
  min-height: 100%;
  border-radius: 18px;
  padding: 24px;
  box-shadow: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.postid-3378 .st-cap:hover,
body.postid-3378 .st-usecase:hover {
  transform: translateY(-5px);
  border-color: rgba(226,29,38,.35);
  box-shadow: var(--shadow-md);
}
body.postid-3378 .st-cap > i { width: 28px; height: 28px; flex-basis: 28px; }
body.postid-3378 .st-table-wrap {
  border-radius: 18px;
  box-shadow: none;
}
body.postid-3378 .st-table th { padding: 15px 16px; }
body.postid-3378 .st-table td { padding: 14px 16px; }
body.postid-3378 .st-cluster {
  padding: 22px 24px;
  margin: 14px 0;
  border-inline-start-width: 4px;
  border-radius: 18px;
  transition: transform .25s ease, box-shadow .25s ease;
}
body.postid-3378 .st-cluster:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
body.postid-3378 #overview,
body.postid-3378 #benefits {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}
body.postid-3378 #overview h2,
body.postid-3378 #benefits h2,
body.postid-3378 #overview p,
body.postid-3378 #benefits p,
body.postid-3378 #overview .st-list li,
body.postid-3378 #benefits .st-list li { color: #fff; }
body.postid-3378 #overview h2::after,
body.postid-3378 #benefits h2::after { background: var(--accent); }
body.postid-3378 #overview .st-section-figure,
body.postid-3378 #benefits .st-section-figure { border-color: rgba(255,255,255,.2); }
body.postid-3378 #uae-gcc {
  border-color: rgba(232,163,23,.35);
  background: linear-gradient(135deg, #fffaf0, #fff);
}
body.postid-3378 #next-step {
  border-color: transparent;
  background: linear-gradient(135deg, #101f36 0%, #183a67 100%);
}
body.postid-3378 #next-step .cta-box {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
}
body.postid-3378 #next-step h3,
body.postid-3378 #next-step p { color: #fff; }
body.postid-3378 #next-step h3 { font-size: 30px; }

/* A gentle image drift makes the flagship hero feel alive without competing
   with the call to action. All section reveals remain disabled for users who
   request reduced motion. */
body.postid-3378 .page-header-bg {
  animation: st-visitor-hero-drift 18s ease-in-out infinite alternate;
}
@keyframes st-visitor-hero-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}
body.postid-3378 .animate-on-scroll {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.25,1);
  will-change: opacity, transform;
}
body.postid-3378 .animate-on-scroll.animate-in {
  opacity: 1;
  transform: none;
}
body.postid-3378 .st-section:nth-of-type(3n + 1) { transition-delay: .04s; }
body.postid-3378 .st-section:nth-of-type(3n + 2) { transition-delay: .09s; }
body.postid-3378 .st-section:nth-of-type(3n) { transition-delay: .14s; }

@media (max-width: 899px) {
  body.postid-3378 .st-side {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
  body.postid-3378 .st-toc,
  body.postid-3378 .st-side-card,
  body.postid-3378 .st-side-related { grid-column: 1; }
  body.postid-3378 .st-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.postid-3378 .st-hero {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 48px;
  }
  body.postid-3378 .st-hero-visual { transform: none; }
  body.postid-3378 .st-section { padding: 48px 24px 34px; border-radius: 20px; }
}
@media (max-width: 520px) {
  body.postid-3378 .st-toc ol { grid-template-columns: 1fr; }
  body.postid-3378 .st-answer { font-size: 24px; }
  body.postid-3378 .st-hero-facts { grid-template-columns: 1fr; }
  body.postid-3378 .st-section { padding-inline: 18px; }
  body.postid-3378 .st-section h2 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  body.postid-3378 .page-header-bg { animation: none; }
  body.postid-3378 .animate-on-scroll,
  body.postid-3378 .animate-on-scroll.animate-in { opacity: 1; transform: none; transition: none; }
  body.postid-3378 .st-hero-visual,
  body.postid-3378 .st-hero-visual:hover,
  body.postid-3378 .st-cap:hover,
  body.postid-3378 .st-usecase:hover,
  body.postid-3378 .st-cluster:hover { transform: none; }
}

/* ============================================================================
   Pillar solution page — compact layout
   ----------------------------------------------------------------------------
   Scoped to `.st-solution.is-pillar`, which the template sets only on a pack that
   carries clusters: the visitor-solutions pillar, in English and in Arabic. The
   50 other solution pages never match these rules.

   The flagship treatment above (photographic hero, generous panels, scroll
   reveals) was written for a page you read top to bottom. This pillar outgrew
   that: 20+ sections and a 17-entry directory is several screens before a buyer
   reaches anything actionable. So the same panels become disclosures, and the two
   longest blocks — the environment directory and the industry scenarios — become
   sliding rows.

   Nothing here introduces a new colour, radius or shadow: the disclosure bar is
   the site's FAQ row, the tile is the homepage's .service-icon-card, and the
   slider is the theme's .st-slider. One page, one vocabulary.
   ========================================================================== */

/* --- a section as a disclosure ------------------------------------------- */

/* Collapsed from the stylesheet, not from script, so the page never renders open
   and then snaps shut a moment later. The <noscript> block in the template hands
   the page back in full when there is no script to reopen it. */
.st-solution.is-pillar .st-section.st-collapsible > :not(h2) { display: none; }
.st-solution.is-pillar .st-section.st-collapsible.is-ready > .st-collapse-body { display: block; }
.st-solution.is-pillar .st-section.st-collapsible > .st-collapse-body[hidden] { display: none; }

.st-solution.is-pillar .st-section.st-collapsible {
  padding: 0;
  margin: 0 0 12px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 96px;
}
/* The gradient hairline reads as a section opener. A shut drawer is not one, and
   17 of them stacked is a barcode. */
.st-solution.is-pillar .st-section.st-collapsible::before { content: none; }

.st-solution.is-pillar .st-section.st-collapsible > h2 {
  max-width: none;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
}
.st-solution.is-pillar .st-section.st-collapsible > h2::after { content: none; }

.st-collapse-toggle {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 32px;
  border: 0;
  background: #fff;
  color: var(--text-primary);
  font-family: inherit;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.015em;
  text-align: start;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.st-collapse-toggle:hover { background: var(--bg-secondary); }
.st-collapse-toggle:focus-visible { outline: 2px solid var(--secondary, #002f6c); outline-offset: -3px; }

.st-collapsible.is-open > h2 > .st-collapse-toggle {
  background: var(--primary);
  color: #fff;
}

.st-collapse-icon {
  flex: 0 0 30px;
  inline-size: 30px;
  block-size: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  transition: transform .3s ease, background-color .2s ease, color .2s ease;
}
.st-collapse-icon i,
.st-collapse-icon svg { inline-size: 17px; block-size: 17px; }

/* Plus rotated a quarter turn is the close cross, which is how the FAQ row on
   this site already signals "open". One icon, two states, no icon swap. */
.st-collapsible.is-open > h2 > .st-collapse-toggle .st-collapse-icon {
  transform: rotate(45deg);
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.st-collapse-body { padding: 26px 32px 34px; }
.st-collapse-body > :first-child { margin-block-start: 0; }
.st-collapse-body > :last-child { margin-block-end: 0; }

/* The inverted panels stay inverted, but only once opened — a solid red or navy
   bar sitting shut in a column of white ones reads as an error, not a section. */
.st-solution.is-pillar #overview.st-collapsible,
.st-solution.is-pillar #benefits.st-collapsible,
.st-solution.is-pillar #uae-gcc.st-collapsible { background: #fff; }
.st-solution.is-pillar #overview.st-collapsible.is-open,
.st-solution.is-pillar #benefits.st-collapsible.is-open {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}
.st-solution.is-pillar #uae-gcc.st-collapsible.is-open {
  background: linear-gradient(135deg, #fffaf0, #fff);
}

/* --- the environment explorer -------------------------------------------- */

.st-cluster-explorer { margin-block-start: 20px; }
.st-cluster-slider { padding-block-end: 4px; }

.st-cluster-track {
  grid-auto-columns: minmax(158px, 1fr);
  gap: 14px;
  padding-block-end: 10px;
}

/* .service-icon-card is written for an <a>; these are the resets a <button> needs
   to inherit it cleanly, plus a tighter box because seventeen of them share a row
   rather than six. */
.st-cluster-tile {
  padding: 18px 12px 16px;
  font-family: inherit;
  cursor: pointer;
  gap: 2px;
  justify-content: flex-start;
  scroll-margin-inline: 20px;
}
/* The theme strips the tinted chip from every decorative icon wrapper on the site
   (style.css, "no tile or circle behind them") with !important. That is a design
   decision, not an accident, so the wrapper here is sizing and spacing only and the
   selected state is carried by the card instead. */
.st-cluster-tile .icon-wrap {
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: 10px;
}
.st-cluster-tile .icon-wrap i,
.st-cluster-tile .icon-wrap svg { inline-size: 24px; block-size: 24px; }
.st-cluster-tile-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}
.st-cluster-tile-count {
  margin-block-start: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.st-cluster-tile:focus-visible { outline: 2px solid var(--secondary, #002f6c); outline-offset: 2px; }

.st-cluster-tile.is-active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.st-cluster-tile.is-active .st-cluster-tile-name { color: var(--primary); }
.st-cluster-tile.is-active .st-cluster-tile-count { color: var(--primary); opacity: .8; }

.st-cluster-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.st-cluster-hint i,
.st-cluster-hint svg { inline-size: 15px; block-size: 15px; flex: 0 0 15px; }

/* One panel at a time. It gets a tinted ground so the pair reads as tiles feeding
   a result, rather than as two unrelated blocks that happen to sit together. */
.st-solution.is-pillar .st-cluster-panel {
  margin: 0;
  padding: 24px 26px;
  background: var(--bg-secondary);
  border-color: transparent;
  border-inline-start-color: var(--primary);
}
.st-solution.is-pillar .st-cluster-panel:hover { transform: none; box-shadow: none; }
.st-cluster-panel h3 { font-size: 20px; margin-block-end: 10px; }
.st-cluster-panel > p { max-width: 80ch; }
.st-cluster-panel .st-cluster-links li a { padding-block: 8px; }

/* Swapping panels of different heights makes the page jump under the tiles the
   reader is still pointing at; a floor keeps the row still. */
.st-cluster-panels { min-block-size: 208px; }

/* --- industry scenarios as a row ----------------------------------------- */

.st-usecase-track {
  grid-auto-columns: minmax(300px, 1fr);
  gap: 18px;
  padding-block-end: 10px;
}
.st-usecase-slider .st-usecase { block-size: 100%; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 899px) {
  .st-collapse-toggle { padding: 17px 20px; }
  .st-collapse-body { padding: 20px 20px 26px; }
  .st-cluster-track { grid-auto-columns: minmax(140px, 46%); }
  .st-usecase-track { grid-auto-columns: minmax(250px, 88%); }
  .st-cluster-panels { min-block-size: 0; }
}
@media (max-width: 520px) {
  .st-collapse-toggle { padding: 15px 16px; font-size: 16px; gap: 12px; }
  .st-collapse-body { padding: 18px 16px 24px; }
  .st-solution.is-pillar .st-cluster-panel { padding: 20px 18px; }
}

/* --- motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .st-collapse-toggle,
  .st-collapse-icon,
  .st-cluster-tile,
  .st-cluster-tile .icon-wrap { transition: none; }
  .st-cluster-tile.is-active { transform: none; }
}