/* ==========================================================================
   TUOIL — what we bring
   Four, five or six points in a row, separated by hairlines rather than boxed
   into identical cards: icon over a
   centred title over centred body copy, columns level with each other and
   divided by a straight hairline.
   ========================================================================== */

.s-adv {
  padding-block: var(--section-pad);
  background: var(--c-surface-2);
}

.s-adv__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.s-adv__list--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-adv__list--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.s-adv__list--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.s-adv__item {
  position: relative;
  padding-inline: var(--sp-3);
  text-align: center;
  /* Icon, title and body sit in the row's own three lines, so they line up
     across the columns whether a title takes one line or two. */
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}

.s-adv__item:first-child { padding-left: 0; }
.s-adv__item:last-child { padding-right: 0; }

/* The divider runs the whole height of the tallest column, so the row reads
   as one rank rather than as separate cards. */
.s-adv__item + .s-adv__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--c-border-strong);
}

.s-adv__icon {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto var(--sp-2);
  color: var(--c-base);
}

/* Two-colour icons. Every file shares one 844 x 649 canvas,
   already balanced for optical size (see tools/icons.py), so one size here
   sets all five -- lines of about 1.7px at the full height. They are drawn in
   more detail than a 24px line icon and are set larger to keep it. */
.s-adv__icon--art {
  width: auto;
  height: clamp(46px, 3.9vw, 56px);
  aspect-ratio: 844 / 649;
  margin-bottom: var(--sp-3);
}

.s-adv__title {
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

.s-adv__text {
  font-size: var(--fs-small);
  color: var(--c-muted);
  text-wrap: pretty;
}

/* Six columns are narrower than five, so the gutter and the type come in a
   step earlier than they do for the other counts. */
@media (max-width: 1440px) {
  .s-adv__list--six .s-adv__item { padding-inline: var(--sp-2); }
  .s-adv__list--six .s-adv__title { font-size: 1.0625rem; }
  .s-adv__list--six .s-adv__text { font-size: var(--fs-caption); }
}

@media (max-width: 1024px) {
  .s-adv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-5); }
  /* the gap belongs between the rows of items, not inside one */
  .s-adv__item { padding-left: var(--sp-3); }
  .s-adv__item:nth-child(odd) { padding-left: 0; }
  .s-adv__item:nth-child(odd)::before { display: none; }

  /* Five and six go three across rather than two: fewer rows, and the columns
     come out no narrower than the four-item row's are. */
  .s-adv__list--five,
  .s-adv__list--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-adv__list--five .s-adv__item,
  .s-adv__list--six .s-adv__item { padding-inline: var(--sp-3); }
  .s-adv__list--five .s-adv__item:nth-child(3n + 1),
  .s-adv__list--six .s-adv__item:nth-child(3n + 1) { padding-left: 0; }
  .s-adv__list--five .s-adv__item:nth-child(odd)::before,
  .s-adv__list--six .s-adv__item:nth-child(odd)::before { display: block; }
  .s-adv__list--five .s-adv__item:nth-child(3n + 1)::before,
  .s-adv__list--six .s-adv__item:nth-child(3n + 1)::before { display: none; }
}

@media (max-width: 600px) {
  .s-adv__list,
  .s-adv__list--four,
  .s-adv__list--five,
  .s-adv__list--six { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); }

  /* In one column the divider turns and goes over the item instead. */
  .s-adv__list .s-adv__item,
  .s-adv__list .s-adv__item:nth-child(odd) { padding: var(--sp-4) 0 0; }
  .s-adv__list .s-adv__item:first-child { padding-top: 0; }

  .s-adv__list .s-adv__item + .s-adv__item::before,
  .s-adv__list .s-adv__item:nth-child(odd)::before {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--c-border);
  }
  .s-adv__list .s-adv__item:first-child::before { display: none; }

  /* one column has the width for them at full size again */
  .s-adv__icon--art { height: 56px; }
}