/* ==========================================================================
   BAR3AM — Section: trust ("شريط الثقة" — big-number stat bar)
   Depends on tokens.css + base.css (.container .section .section--bg
   .sec-head .sec-title .reveal)

   THE ONE IDEA: a single knob, --trust-size, drives BOTH the digits in cell 1
   and the icon box in cells 2-4, and every cell reserves the same figure slot.
   So the number and the three glyphs land on one optical line and the row
   reads as four statements of equal weight — "أرقام كبيرة" all the way across.

   DIRECTION: the page runs `direction: rtl`, so cell 1 (the 40+) is the
   RIGHTMOST cell and every hairline below is expressed inline-relative — the
   divider on a cell's inline-START edge is the one facing the cell before it.

   COLOUR: each cell carries two inline custom properties, exactly like
   .skills__card does — --trust-accent paints the soft halo, --trust-ink paints
   the glyph. They are split because the raw orange/pink accents sit near 2:1
   against white and would fail non-text contrast as a 60px icon; the *-ink
   tokens are the darkened pair the library already ships for that job.
   ========================================================================== */

.trust {
  /* Figure size = number font-size = icon box. Nothing else sets a glyph size. */
  --trust-size: clamp(44px, 6vw, 72px);
  /* Hairline: a purple whisper rather than --c-line, which disappears on the
     --c-bg band. Kept as one token so all three dividers stay in sync. */
  --trust-rule: color-mix(in srgb, var(--c-primary) 26%, transparent);
}

.trust .sec-head { margin-block-end: clamp(26px, 3.2vw, 42px); }

.trust .sec-title {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: var(--lh-tight);
}

/* ---- Row ----------------------------------------------------------------
   No gap: the dividers are painted ON the cell edge, so a gutter would push
   each hairline off-centre between its two neighbours. The cells' own
   padding-inline is what does the spacing.
   ------------------------------------------------------------------------- */
.trust__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
}

.trust__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.3vw, 16px);
  padding-inline: clamp(12px, 2.4vw, 30px);
  padding-block: clamp(16px, 2.6vw, 28px);
  text-align: center;
}

/* ---- Hairlines ----------------------------------------------------------
   ::before = the vertical rule between columns (default layout)
   ::after  = the horizontal rule between rows (only once the row wraps to 2)
   Both fade at their ends so they read as a whisper, not a table border.
   Visibility is driven by `opacity` alone so the breakpoints below only ever
   flip one value and never fight over `display`.
   ------------------------------------------------------------------------- */
.trust__item::before,
.trust__item::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.trust__item::before {
  inset-block: 4%;
  inset-inline-start: 0;
  inline-size: 1px;
  /* symmetric gradient — the 180deg axis carries no direction meaning */
  background: linear-gradient(180deg, transparent, var(--trust-rule), transparent);
  opacity: 1;
}

/* the first cell has nothing before it */
.trust__item:first-child::before { opacity: 0; }

.trust__item::after {
  inset-block-start: 0;
  inset-inline: 8%;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--trust-rule), transparent);
  opacity: 0;
}

/* ---- Figure slot --------------------------------------------------------
   Fixed block-size, so cell 1's digits and cells 2-4's icons occupy an
   identical box and the four labels start on the same baseline.
   ------------------------------------------------------------------------- */
.trust__figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: calc(var(--trust-size) * 1.42);
}

/* Soft accent pill behind the glyph. `inset-inline: 0` + `margin-inline: auto`
   centres it without a transform, so it stays correct in either direction;
   `inset-block: 0` lets it take the figure's height exactly. A pill (not a
   circle) because "40+" is far wider than it is tall. */
.trust__figure::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: min(100%, calc(var(--trust-size) * 1.95));
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--trust-accent) 10%, var(--c-card));
  transition: transform var(--dur) var(--ease);
}

/* lift the glyphs above the halo without a stacking-context surprise */
.trust__num,
.trust__icon { position: relative; }

.trust__num {
  font-size: var(--trust-size);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--trust-ink);
  /* the coordinator animates this from 0 to 40 — tabular figures stop the
     glyph box from twitching on every frame of the count */
  font-variant-numeric: tabular-nums;
}

/* 0.84 rather than 1: a full-bleed 24-box icon reads visibly taller than
   Tajawal's cap height at the same font-size, so it is trimmed to match. */
.trust__icon {
  inline-size: calc(var(--trust-size) * 0.84);
  block-size: calc(var(--trust-size) * 0.84);
  color: var(--trust-ink);
  transition: transform var(--dur) var(--ease);
}

.trust__label {
  max-inline-size: 24ch;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--c-text-2);
  text-wrap: balance;
}

/* ---- Hover polish ------------------------------------------------------- */
.trust__item:hover .trust__figure::before { transform: scale(1.05); }
.trust__item:hover .trust__icon { transform: scale(1.05); }

/* ---- Responsive: 4 → 2 → 1 ---------------------------------------------- */
@media (max-width: 1024px) {
  .trust__row { grid-template-columns: repeat(2, 1fr); }
}

/* The 2-column divider set is bounded at BOTH ends on purpose: bounding it
   keeps these higher-specificity :nth-child rules out of the phone layout,
   where they would otherwise out-rank the blanket "hide everything" rule
   below no matter what order the file is in. */
@media (max-width: 1024px) and (min-width: 561px) {
  .trust__item:nth-child(odd)::before  { opacity: 0; }
  .trust__item:nth-child(even)::before { opacity: 1; }
  .trust__item:nth-child(n + 3)::after { opacity: 1; }
}

@media (max-width: 768px) {
  .trust__item {
    padding-inline: clamp(10px, 3vw, 20px);
    gap: 12px;
  }
  .trust__label { max-inline-size: 26ch; }
}

/* Phones: one column and every hairline goes away — vertical spacing alone
   separates the four statements. */
@media (max-width: 560px) {
  .trust__row { grid-template-columns: 1fr; }
  .trust__item {
    padding-block: clamp(14px, 4vw, 22px);
    padding-inline: 0;
  }
  .trust__item::before,
  .trust__item::after { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .trust__item:hover .trust__figure::before,
  .trust__item:hover .trust__icon { transform: none; }
}