/* ==========================================================================
   Service detail pages — Arabic / RTL
   Loaded after vsl.css, which supplies the fonts, tokens, button, logo,
   footer, sticky bar, reveal animation and the .svc tile grid. Everything
   below is only what the detail pages add on top.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Masthead with a way back
   -------------------------------------------------------------------------- */
.masthead--nav .masthead__inner {
  justify-content: space-between;
  gap: var(--s-4);
}
.masthead--nav .logo { font-size: 1.75rem; }

.backlink {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-mute);
  padding: 0.4rem 0.2rem;
  transition: color 0.2s var(--ease);
}
.backlink:hover { color: var(--fg); }
.backlink svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* --------------------------------------------------------------------------
   2. Hero — no video here, so it stays short and gets straight to the point
   -------------------------------------------------------------------------- */
.svp-hero {
  position: relative;
  padding-block: var(--s-8) var(--s-12);
  text-align: center;
  isolation: isolate;
}

/* Same single accent bloom as the landing page, kept faint.
   Width caps at 100%, never more: a wider centred pseudo-element overflows
   both sides, and while body's overflow-x hides it, the layout viewport still
   grows — which drags the fixed sticky bar off-centre with it. */
.svp-hero::before {
  content: '';
  position: absolute;
  inset-block-start: -30%;
  left: 50%;                       /* physical: centring must not flip in RTL */
  transform: translateX(-50%);
  width: min(44rem, 100%);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(222, 239, 32, 0.06) 0%, transparent 62%);
  z-index: -1;
  pointer-events: none;
}

.svp-hero__title {
  margin-block-start: var(--s-6);
  font-size: clamp(2.125rem, 8vw, 3.75rem);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.svp-hero__lead {
  margin-block-start: var(--s-6);
  font-size: clamp(1.0625rem, 3.5vw, 1.25rem);
  line-height: 1.95;
  color: var(--fg-soft);
  max-width: 46ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   3. Logo wall — every platform and tool as one monochrome chip
      Monochrome on purpose: eleven full-colour logos side by side is noise,
      and the hover state is what earns the colour back.
   -------------------------------------------------------------------------- */
.wall {
  padding-block: 0 var(--s-12);
  text-align: center;
}

.wall__note {
  font-size: 0.8125rem;
  color: var(--fg-mute);
  margin-block-end: var(--s-6);
}

/* Flex-wrap rather than grid: eleven logos never divide evenly into a column
   count, and a wrapped flex row centres its remainder instead of leaving a
   ragged hole at the end of the last row. */
.wall__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  /* Narrower than the shell on purpose: the cap sets how many fit per row, and
     the goal is always two balanced rows rather than a full row plus orphans.
     46rem holds six across (11 logos → 6 + 5); the compact cap holds four
     (8 logos → 4 + 4). */
  max-width: 46rem;
  margin-inline: auto;
}
.wall__grid--compact { max-width: 31rem; }
@media (min-width: 40rem) {
  .wall__grid { gap: var(--s-3); }
}

.wall__item {
  flex: 1 1 6.25rem;
  max-width: 9rem;
  /* The colour the Clarity ribbon is knocked out with — see inc/brand-marks.php */
  --mark-knock: #101318;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 6.25rem;
  padding: var(--s-4) var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-raised);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.wall__item:hover {
  border-color: var(--line-strong);
  background: #12161C;
}

.mark__glyph {
  width: 1.625rem;
  height: 1.625rem;
  color: var(--fg-soft);
  transition: color 0.25s var(--ease);
  flex: none;
}
.wall__item:hover .mark__glyph { color: var(--fg); }

/* Wordmarks (WooCommerce, Wix) are 3:1 or wider. Give them the width and let
   the viewBox set the height, or they end up two pixels tall in a square slot.
   The max-height is what keeps a squarer wordmark like Wix from reading twice
   as heavy as the icon marks sitting next to it. */
.mark__glyph--wide {
  width: 3.6rem;
  height: auto;
  max-height: 1.375rem;
}

/* Line icons stand in for capability cards that have no product behind them. */
.mark__glyph--line {
  fill: none;
  stroke: currentColor;
}

.wall__label {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg-mute);
  direction: ltr;              /* brand names are Latin */
  text-align: center;
}

/* Deliverable chips carry Arabic labels, so those go back to the page's own
   direction. */
.wall__item--line .wall__label {
  direction: rtl;
  font-size: 0.75rem;
}
.wall__item--line .mark__glyph { color: var(--fg-soft); }
.wall__item--line:hover .mark__glyph { color: var(--accent); }

/* --------------------------------------------------------------------------
   4. Detail blocks — alternating surfaces give the page its rhythm
   -------------------------------------------------------------------------- */
.block {
  padding-block: var(--s-12);
  border-block-start: 1px solid var(--line);
}
.block:nth-of-type(even) { background: var(--ink-deep); }

.block__head {
  max-width: 44ch;
  margin-inline: auto;
  text-align: center;
}

.block__kicker {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(222, 239, 32, 0.28);
  border-radius: 999px;
  background: rgba(222, 239, 32, 0.05);
  line-height: 1.6;
}

.block__title {
  margin-block-start: var(--s-4);
  font-size: clamp(1.375rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  text-wrap: balance;
}

.block__lead {
  margin-block-start: var(--s-4);
  color: var(--fg-soft);
  font-size: 1.0625rem;
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   5. Item cards
   -------------------------------------------------------------------------- */
.cards {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-4);
}

.card {
  --mark-knock: #101318;

  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-raised);
  transition: border-color 0.25s var(--ease);
}
.card:hover { border-color: var(--line-strong); }

.card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.card__mark .mark__glyph {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--fg);
}

/* A wordmark needs a letterbox chip, not a square one. */
.card__mark--wide {
  width: auto;
  min-width: 2.75rem;
  padding-inline: 0.7rem;
}
.card__mark .mark__glyph--wide {
  width: 4rem;
  height: auto;
  max-height: 1.375rem;
}

.card__title {
  margin-block-start: var(--s-4);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.6;
}

.card__text {
  margin-block-start: var(--s-2);
  font-size: 0.9375rem;
  line-height: 1.95;
  color: var(--fg-soft);
}

/* --------------------------------------------------------------------------
   6. Section overrides for this page
   -------------------------------------------------------------------------- */
.close { border-block-start: 1px solid var(--line); }

.svc--more {
  padding-block: 0 var(--s-16);
}
/* Same column count as the landing grid so the two read as one system — just
   shorter, because this is a footer-ish block and not the main event. */
.svc--more .svc__grid { grid-auto-rows: minmax(8rem, 1fr); }
@media (min-width: 48rem) {
  .svc--more .svc__grid { grid-auto-rows: minmax(9rem, 1fr); }
}