/* ==========================================================================
   CARD SLIDER (.st-card-slider)

   The horizontal rail used by every repeated icon-card group: key capabilities,
   enterprise systems, technologies, features, integrations, use cases, related
   solutions, industries, services.

   It deliberately adds as little as possible on top of .st-slider in st-ui.css:
   that primitive already owns the scroll container, the scroll-snap, the arrow
   shape and the RTL handling, and js/main.js already drives it. What is added
   here is the part the tile rail could not express — column widths tuned so a
   card stays readable (4-5 across on desktop, a partial card on mobile so the
   rail reads as swipeable), and cards of equal height regardless of text length.

   Loaded after st-ui.css, so these rules win on order without !important.
   ========================================================================== */

/* The template writes --st-cs-n / --st-cs-w / --st-cs-g inline, and these read
   them into the properties the layout actually uses.

   The indirection is the whole point: an inline custom property beats a media
   query, so a template writing --st-cs-per directly would pin the card count at
   its desktop value on every screen. Writing a *different* property inline and
   resolving it here leaves the breakpoints below free to override. */
.st-card-slider {
  --st-cs-per: var(--st-cs-n, 4);                          /* cards visible */
  --st-cs-min: var(--st-cs-w, 240px);                      /* width floor */
  --st-cs-gap: var(--st-cs-g, var(--st-space-5, 20px));
  position: relative;
}

/* Column width is derived from the visible-card count rather than a fixed
   px value, so the rail fills the container exactly at every width and the
   partial card on mobile is a deliberate fraction, not a leftover. */
.st-card-slider-track {
  --st-cs-col: calc(
    (100% - (var(--st-cs-per) - 1) * var(--st-cs-gap)) / var(--st-cs-per)
  );
  grid-auto-columns: minmax(min(100%, var(--st-cs-min)), var(--st-cs-col));
  gap: var(--st-cs-gap);
  /* Room for the hover lift and the card shadow, which would otherwise be
     clipped by the scroll container. */
  padding-block: 4px var(--st-space-2, 8px);
  padding-inline: 2px;
}

/* Equal height across the visible cards: the track is a grid, so stretching the
   items is enough — no fixed height, so nothing clips when text runs long. */
.st-card-slider-track > * {
  block-size: auto;
  align-self: stretch;
  min-inline-size: 0;
}

/* Both arrows stay visible for the whole life of the rail. The base component
   hides a spent arrow outright (opacity:0); here it is muted instead, so the
   control pair never collapses to a single arrow mid-section. */
.st-card-slider .st-slider-arrow[disabled] {
  opacity: .3;
  pointer-events: none;
}

/* ...except when the rail does not scroll at all, which happens when every card
   already fits (a four-card group on a wide desktop). Two permanently dead
   controls flanking a static row is worse than no controls, so the controller
   marks that case and both arrows go. */
.st-card-slider.is-static .st-slider-arrow { opacity: 0; pointer-events: none; }

/* Brand accent on the control, matching the red used across the site. */
.st-card-slider .st-slider-arrow:hover:not([disabled]) {
  border-color: var(--primary, #E22222);
  color: var(--primary, #E22222);
}

/* ---- Breakpoints -------------------------------------------------------
   Card count steps down as the viewport narrows. Below 600px the count is
   fractional on purpose: the next card is partly visible, which is what tells
   a touch visitor the row scrolls.
   ------------------------------------------------------------------------ */
@media (min-width: 1440px) { .st-card-slider { --st-cs-per: calc(var(--st-cs-n, 4) + 1); } }
@media (max-width: 1199px) { .st-card-slider { --st-cs-per: 3; } }
@media (max-width: 899px)  { .st-card-slider { --st-cs-per: 2; } }
@media (max-width: 599px) {
  .st-card-slider {
    --st-cs-per: 1.15;
    --st-cs-gap: var(--st-space-4, 16px);
    /* Lowered with the count: a 240-280px desktop floor would otherwise beat the
       fractional column on a narrow phone and swallow the peek of the next card
       that tells a touch visitor the row scrolls. */
    --st-cs-min: 200px;
  }
}

/* The arrows sit outside the track (inset -18px from the base component). On
   viewports where the container has no room for that they would push the page
   wide, so from here down the rail is swipe-only — consistent with how the
   front-page tile rails already behave on touch. */
@media (max-width: 900px), (pointer: coarse) {
  .st-card-slider .st-slider-arrow { display: none; }
}

/* ==========================================================================
   DEFAULT CARD (.st-card-slide)

   Only used by the data-driven st_card_slider() renderer. Sections converted
   from existing markup keep their own card classes untouched, which is what
   keeps a converted section visually identical to what it replaced.
   ========================================================================== */

.st-card-slide {
  display: flex;
  flex-direction: column;
  gap: var(--st-space-2, 8px);
  padding: var(--st-space-6, 24px);
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,.06));
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition, 200ms ease),
              box-shadow var(--transition, 200ms ease),
              border-color var(--transition, 200ms ease);
}

/* Restrained hover: a small lift and a slightly stronger shadow. No zoom, no
   glow — the rest of the site's cards behave the same way. */
a.st-card-slide:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 4px 15px rgba(0,0,0,.1));
  border-color: var(--st-border-strong, #cfd4de);
}
a.st-card-slide:focus-visible {
  outline: 2px solid var(--secondary, #002f6c);
  outline-offset: 2px;
}

/* The icon carries the brand accent and sits directly on the card — no tile or
   circle behind it, matching the home page's icon treatment. Sizing lives in
   st-icon-style.css, which owns this for every icon wrapper on the site. */
.st-card-slide-icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--primary, #E22222);
  margin-block-end: 14px;
  flex: none;
}

.st-card-slide-tag {
  align-self: flex-start;
  font-size: var(--st-ui-xs, 12px);
  font-weight: var(--st-fw-semibold, 600);
  color: var(--primary, #E22222);
  background: var(--primary-light, #fde8e8);
  border-radius: var(--st-radius-sm, 6px);
  padding: 2px 8px;
}

.st-card-slide-title {
  font-size: var(--st-ui-lg, 15px);
  font-weight: var(--st-fw-bold, 700);
  color: var(--text-primary, #1e293b);
  margin: 0;
  line-height: 1.4;
}

.st-card-slide-text {
  font-size: var(--st-ui-md, 14px);
  color: var(--text-secondary, #555);
  line-height: 1.7;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Use-case cards on the authority templates.

   .st-usecase was heading + paragraph only. Inside the rail it gains the same
   icon-beside-content shape .st-cap already uses, so a use-case row and a
   capability row read as the same component rather than two similar ones.
   -------------------------------------------------------------------------- */
.st-usecase--rail { display: flex; gap: 14px; }
.st-usecase--rail > *:not(i) { min-width: 0; }
.st-usecase--rail > i {
  flex: 0 0 22px;
  inline-size: 22px;
  color: var(--primary, #E22222);
  margin-block-start: 3px;
}

/* Project sub-page cards: the icon joins the existing label chip rather than
   taking a row of its own, so the card keeps the proportions it had as a grid
   item. Column layout pins the "open" link to the bottom at equal heights. */
.st-card-slider-track > .st-project-subpage-card {
  display: flex;
  flex-direction: column;
}
.st-card-slider-track > .st-project-subpage-card .st-project-subpage-link {
  margin-block-start: auto;
}
.st-project-subpage-label i {
  inline-size: 15px;
  block-size: 15px;
  margin-inline-end: 6px;
  vertical-align: -2px;
  color: var(--primary, #E22222);
}

/* --------------------------------------------------------------------------
   Arabic page cards (.st-ar-card) inside the rail.

   These shipped with no icon at all, so the rail adds one above the heading —
   the layout the rest of the site's icon cards already use. Column layout pins
   the "read more" link to the bottom so a row of cards ends on one line.
   -------------------------------------------------------------------------- */
.st-card-slider-track > .st-ar-card--rail {
  display: flex;
  flex-direction: column;
}
.st-card-slider-track > .st-ar-card--rail > a {
  margin-block-start: auto;
  padding-block-start: 6px;
}
.st-ar-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--primary, #E22222);
  margin-block-end: 14px;
  flex: none;
}

/* ==========================================================================
   GRID FALLBACK (.st-card-grid)

   What st_card_slider_open() emits when a group is below the slider threshold,
   so the same call site produces a sensible layout either way.
   ========================================================================== */
.st-card-grid {
  display: grid;
  /* Reads the inline properties directly: unlike the slider this element is not
     breakpoint-driven, so there is nothing for an inline value to override. */
  gap: var(--st-cs-g, var(--st-space-5, 20px));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--st-cs-w, 240px)), 1fr));
}

@media (prefers-reduced-motion: reduce) {
  .st-card-slide,
  a.st-card-slide:hover { transition: none; transform: none; }
}