/* `text-with-icons` — a row of icon-led blocks.
 *
 * The theme's own `text-with-icons.css` was fetched and mined, then **overruled in three places**
 * because the rendering disagreed with it. Every number below that carries a "measured" comment was
 * read off the live page at 1440 rather than out of the stylesheet:
 *
 *   inner        grid, `gap: 40px 20px`, `justify-content: center`, `padding: 0 15px` -> `0 50px`
 *                from 768, capped at the theme's row width (1325px of content at 1440)
 *   columns      `icon-columns-4` is 300px each; `icon-columns-2` fills the row (652.4px each)
 *   block        column flexbox, `padding: 64px 16px` (32px across at two columns)
 *   icon         64px at `icon-large`, 80px at `icon-xlarge`, `object-fit: contain`
 *   heading      `h6` at 18px on a line-height of 1 — not the 20px the theme declares
 *   link         17px/27.2px, no underline
 *
 * The section's height comes from the block *padding*, not from its content: 64 + icon + 20 + copy
 * + link + 64 is the 277px the live page reports, against ~150 for the parts alone.
 */

.text-with-icons-section {
  /* The spacing is a margin on the inner element, so the wrapper has to hold it — the lesson the
     video, FAQ, multicolumn and scrolling-content wrappers each taught separately. */
  display: flow-root;
}

.text-with-icons {
  background: var(--color-bg, transparent);
}

.text-with-icons__inner {
  display: grid;
  gap: 40px 20px;
  justify-content: center;
  padding: 0 15px;
  max-width: var(--grid-width-row, 1380px);
  margin-left: auto;
  margin-right: auto;
  /* Below 768 the blocks are a column of 300px-wide cells. */
  grid-auto-columns: minmax(250px, 300px);
  grid-template-columns: repeat(auto-fill, minmax(250px, 300px));
}

.text-with-icons__block {
  display: flex;
  align-items: center;
  /* Measured. Not in the theme's stylesheet at all, and it is most of the section's height. */
  padding: 64px 16px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.text-with-icons__block-content {
  font-size: 0.9375rem;
}

.text-with-icons__block-content h6 {
  /* Measured 18px on a line-height of 1. The theme's `.heading-large h6` says 20px and the page
     renders 18px, so the rendering is what is written here. */
  font-size: 18px;
  line-height: 1;
  font-weight: var(--font-body-bold-weight);
  margin: 0 0 10px;
  color: var(--color-heading);
}

.text-with-icons__block-content p {
  font-size: inherit;
  line-height: 1.6;
  margin: 0 0 10px;
  color: var(--color-body);
}

/* A heading with nothing under it keeps no bottom margin — which is why the four-column row's
   blocks are 18px shorter than the two headings that do have an address beneath them. */
.text-with-icons__block-content > *:last-child {
  margin-bottom: 0;
}

.text-with-icons__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}

.text-with-icons.icon-top .text-with-icons__icon {
  margin-bottom: 20px;
}

.text-with-icons__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.text-with-icons__block-btn {
  margin-top: 20px;
}

.text-with-icons__block-btn a {
  /* The merchant's own green, carried per section. 8.6:1 on the page ground, so unlike the
     section's heading colour there is nothing to correct. */
  color: var(--icon-link-color, var(--color-icon-link));
  font-size: 17px;
  line-height: 1.6;
  text-decoration: none;
}

.text-with-icons__block-btn a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------- alignment */

.text-with-icons.text-left .text-with-icons__block  { align-items: flex-start; }
.text-with-icons.text-center .text-with-icons__block { align-items: center; }
.text-with-icons.text-right .text-with-icons__block  { align-items: flex-end; }

.text-with-icons.text-left   { text-align: left; }
.text-with-icons.text-center { text-align: center; }
.text-with-icons.text-right  { text-align: right; }

.text-with-icons.icon-top .text-with-icons__block { flex-direction: column; }

/* ------------------------------------------------------------------ icon sizes */

.text-with-icons.icon-small .text-with-icons__icon  { width: 32px;  height: 32px; }
.text-with-icons.icon-medium .text-with-icons__icon { width: 48px;  height: 48px; }
.text-with-icons.icon-large .text-with-icons__icon  { width: 64px;  height: 64px; }
.text-with-icons.icon-xlarge .text-with-icons__icon { width: 80px;  height: 80px; }

/* ------------------------------------------------------------------- breakpoints */

@media (min-width: 48em) {
  .text-with-icons__inner {
    padding: 0 50px;
  }

  /* Measured: the two-column row's blocks fill the 1325px content box at 652.4px each, so its
     tracks are `1fr` rather than capped. A section that picks another column count keeps the
     theme's 300px cap. */
  .text-with-icons.icon-columns-2 .text-with-icons__inner {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }

  .text-with-icons.icon-columns-2 .text-with-icons__block {
    padding: 64px 32px;
  }

  .text-with-icons.icon-columns-3 .text-with-icons__inner {
    grid-template-columns: repeat(3, minmax(200px, 300px));
  }

  /* Four across needs the width: the theme stacks them 2 + 2 until 1068. */
  .text-with-icons.icon-columns-4 .text-with-icons__inner {
    grid-template-columns: repeat(2, minmax(200px, 300px));
  }
}

@media (min-width: 66.75em) {
  .text-with-icons.icon-columns-4 .text-with-icons__inner {
    grid-template-columns: repeat(4, minmax(200px, 300px));
  }
}

/* ---------------------------------------------------------------- swipe on mobile */

/* Upstream's `swipe-on-mobile`: below 768 the blocks become a snapping strip. CSS only, so it
   still works without script. */
@media (max-width: 47.99em) {
  .text-with-icons.swipe-on-mobile .text-with-icons__inner {
    justify-content: flex-start;
    grid-auto-flow: column;
    grid-template-columns: repeat(auto-fill, minmax(250px, 300px));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .text-with-icons.swipe-on-mobile .text-with-icons__inner::-webkit-scrollbar {
    display: none;
  }
}