/* Multicolumn — the picture-and-text rows on the B1 page.
 *
 * Every number is from aeke.com's `/products/buy-aeke-b1`, where the section appears four times.
 * Colour comes from `tokens.css`; the one panel colour this section needs is named there, not here.
 */

/* The wrapper exists to keep the panel's own margins inside it. Upstream's `.shopify-section`
   behaves the same way — its section box measures 718px against 648px of content, i.e. the 70px
   top margin did not escape — and without `flow-root` it would collapse out of ours and land in
   the gap between sections instead, which is where the K1's toggle row lost 140px. */
.multicolumn-section {
  display: flow-root;
}

/* The spacing is a margin, not padding: with a background set, padding would paint the gap. */
.multicolumn--spacing-both {
  margin-top: var(--section-spacing-mobile);
  margin-bottom: var(--section-spacing-mobile);
}

.multicolumn--spacing-top-only {
  margin-top: var(--section-spacing-mobile);
}

.multicolumn--spacing-bottom-only {
  margin-bottom: var(--section-spacing-mobile);
}

/* The one instance that has a panel: measured `background: #ffffff` with `--color-text: #333333`.
   The other three are transparent and their copy is white on the page's own ground. */
.multicolumn--panel-light {
  background: var(--surface-tile-light);
  color: var(--color-specs-value);
}

.multicolumn--panel-dark {
  background: var(--color-product-card-bg);
  color: var(--color-heading);
}

/* Measured: `display: flex`, `margin: 0 -15px` — the columns escape the container so that their
   own 15px padding puts the first picture exactly on the page gutter. */
.multicolumn__row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

/* Measured: `width: 50%`, `padding: 0 15px`, `margin: 0 0 40px`. The bottom margin is not
   decoration — it is 40 of a 618px section. */
.multicolumn__column {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 15px;
  margin: 0 0 40px;
}

/* Measured: `display: inline-block`, `margin: 0 0 15px`. The inline-block is deliberate: it leaves
   the column's line box under the picture, which is where 8 of the 578px column comes from.
   Making it a block would shave 8px off every instance. */
.multicolumn__image {
  display: inline-block;
  width: 100%;
  margin: 0 0 15px;
}

.multicolumn__image-inner {
  width: 100%;
}

.multicolumn__text {
  font-size: var(--type-small);
  line-height: 24px;
}

.multicolumn__text p {
  margin: 0 0 12px;
}

/* The last paragraph's 12px bottom margin is NOT reset. It is 12 of the 803px that live's third
   multicolumn section measures: the column keeps it, because the theme's column is a float and
   therefore a block formatting context. Dropping it here made that section 791. */

/* ------------------------------------------------------------------- breakpoints */
@media (min-width: 48em) {
  /* `medium-6`: two up. */
  .multicolumn__column {
    /* Measured: `width: 50%` on the two-up instances. The count is data (`settings.columns`), and
       the row carries it as `--multicolumn-columns`, so this rule divides the row by it — 2 is the
       two-up default the measured pages use. About-us is the one three-up instance. */
    flex: 0 0 calc(100% / var(--multicolumn-columns, 2));
    max-width: calc(100% / var(--multicolumn-columns, 2));
  }

  .multicolumn--spacing-both {
    margin-top: var(--section-spacing-desktop);
    margin-bottom: var(--section-spacing-desktop);
  }

  .multicolumn--spacing-top-only {
    margin-top: var(--section-spacing-desktop);
  }

  .multicolumn--spacing-bottom-only {
    margin-bottom: var(--section-spacing-desktop);
  }
}

/* Upstream's `swipe-on-mobile`: at 375 the row is a scrollable strip with each column ~90% of the
   viewport, so a phone gets one picture at a time with the next peeking. Same behaviour, and the
   same snap strip the other horizontal rows on this site use. */
@media (max-width: 47.99em) {
  .multicolumn__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* The strip is the full width of the viewport, so its own scrollbar must not become the
       page's. */
    scrollbar-width: none;
  }

  .multicolumn__row::-webkit-scrollbar {
    display: none;
  }

  .multicolumn__column {
    flex: 0 0 90%;
    max-width: 90%;
    min-width: 0;
    scroll-snap-align: start;
  }
}