/* Customer stories (#stories). Prefix: hs-
   "Who uses it?" Four real merchants in their own words (the official site's quotes, word for word).
   Calm on purpose: a centred heading, then one grid of equal cards on one surface. Every card has one
   anatomy: a light blue opening mark (the only ornament), the quote, then the person pinned to the bottom
   (logo tile, name, title). No stars (these are quotes, not ratings) and no highlights.
   The logo files arrive in different shapes and margins; trimmed to their artwork (_tools/hs-logos.js), each
   sits on the same small white tile with the same padding, so all four carry the same weight.
   >= 768px: a 2 x 2 grid, every card as tall as the tallest, so the footers line up.
   < 768px: a swipe row with the next card peeking in, and position dots. */

.hs {
  --hs-pad: clamp(24px, 2.8vw, 40px);
  --hs-gap: clamp(16px, 1.7vw, 24px);
  --hs-card: var(--surface-2);
  --hs-card-line: rgba(10, 10, 10, .07);
  --hs-name-fs: .9375rem;
  --hs-name-lh: 1.35;
  --hs-role-fs: .875rem;
  --hs-role-lh: 1.4;
  --hs-mark: var(--z-blue-200);
  --hs-mark-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 414 285'%3E%3Cpath d='M78 285Q37 285 18.5 265.5Q0 246 0 217V198Q0 171 8 143.5Q16 116 29.5 90Q43 64 62 41Q81 18 103 0H189Q157 31 135 61Q113 91 102 128Q131 134 144 152.5Q157 171 157 195V217Q157 246 138.5 265.5Q120 285 78 285ZM303 285Q262 285 243.5 265.5Q225 246 225 217V198Q225 171 233 143.5Q241 116 254.5 90Q268 64 287 41Q306 18 328 0H414Q382 31 360 61Q338 91 327 128Q356 134 369 152.5Q382 171 382 195V217Q382 246 363.5 265.5Q345 285 303 285Z'/%3E%3C/svg%3E");
}
:lang(ar) .hs { --hs-name-lh: 1.6; --hs-role-lh: 1.6; }
[data-theme="dark"] .hs {
  --hs-card: #17171E;
  --hs-card-line: rgba(255, 255, 255, .07);
  --hs-mark: rgba(111, 137, 255, .42);
}

/* Two balanced lines at every width. */
.hs-head .t-h2 { max-width: 11em; }

/* ---------- The grid ---------- */
.hs-list { display: grid; gap: var(--hs-gap); }
.hs-item { display: flex; min-width: 0; }   /* the card fills its cell */

.hs-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: var(--hs-pad);
  border-radius: var(--r-lg);
  background: var(--hs-card);
  border: 1px solid var(--hs-card-line);
}

/* The quote. The opening mark is IBM Plex Sans's own (600), as a mask, so it takes the light blue;
   mirrored in Arabic, where the quote opens on the right. */
.hs-quote { margin: 0; padding-block-end: 28px; }
.hs-quote::before {
  content: "";
  display: block;
  width: 40px;
  aspect-ratio: 414 / 285;
  margin-block-end: 20px;
  background: var(--hs-mark);
  -webkit-mask: var(--hs-mark-svg) center / contain no-repeat;
  mask: var(--hs-mark-svg) center / contain no-repeat;
}
[dir="rtl"] .hs-quote::before { transform: scaleX(-1); }
.hs-quote p {
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -.011em;
  color: var(--g-800);
  text-wrap: pretty;
}
:lang(ar) .hs-quote p { letter-spacing: 0; line-height: 1.9; }

/* The person, pinned to the bottom so the footers line up across the row. */
.hs-who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-start: auto;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--hs-card-line);
}
.hs-logo {
  flex: none;
  display: block;   /* not grid: an auto row would grow to the image's natural height */
  width: 48px;
  height: 48px;
  padding: 7px;
  border-radius: 12px;
  background: #fff;   /* the logos are drawn on white, so the tile stays white in both themes */
  box-shadow: inset 0 0 0 1px rgba(10, 10, 30, .08);
  filter: brightness(var(--img-dim, 1));   /* tile and logo dim together on dark pages */
}
.hs-logo img { width: 100%; height: 100%; object-fit: contain; }   /* centred in the 34px box */
/* Room for a title on two lines in every card, so a long title (narrow cards, phones) never lifts its
   footer out of line with its neighbour's. */
.hs-who__text {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: calc(var(--hs-name-fs) * var(--hs-name-lh) + 2 * var(--hs-role-fs) * var(--hs-role-lh));
}
.hs-name { font-size: var(--hs-name-fs); font-weight: 600; line-height: var(--hs-name-lh); letter-spacing: -.01em; color: var(--ink); }
.hs-role { font-size: var(--hs-role-fs); line-height: var(--hs-role-lh); color: var(--g-500); }
:lang(ar) .hs-name, :lang(ar) .hs-role { letter-spacing: 0; }

/* Position dots: phones only */
.hs-dots { display: none; }

/* ---------- Two columns (tablets and wide) ---------- */
@media (min-width: 768px) {
  .hs-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;   /* every row as tall as the tallest: four equal cards */
    max-width: 72rem;
    margin-inline: auto;
  }
}

/* ---------- Phones: a swipe row ---------- */
@media (max-width: 767px) {
  .hs { --hs-pad: 22px; }
  .hs-list {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 28px;   /* room below, inside the scroller, for the cards' rise */
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hs-list::-webkit-scrollbar { display: none; }
  .hs-list:focus-visible { outline-offset: -3px; border-radius: var(--r-lg); }
  .hs-item { flex: 0 0 86%; scroll-snap-align: start; }
  .hs-quote { padding-block-end: 24px; }
  .hs-quote::before { width: 34px; margin-block-end: 16px; }

  /* One blue dot slides along four grey ones (js sets --i). */
  .hs-dots { --i: 0; position: relative; display: flex; justify-content: center; gap: 8px; margin-block-start: -6px; }
  .hs-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-300); }
  .hs-dots__on {
    position: absolute;
    top: 0;
    inset-inline-start: calc(50% - 24px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--z-blue-text);
    transform: translateX(calc(var(--i) * 14px));
    transition: transform .45s var(--ease-out);
  }
  [dir="rtl"] .hs-dots__on { transform: translateX(calc(var(--i) * -14px)); }
}
@media (max-width: 380px) {
  .hs { --hs-pad: 20px; }
  .hs-item { flex-basis: 88%; }
}