/* =========================================================
   STORM — PARTNERS (Our Trusted Distributors)
   -----------------------------------------------------------
   Loads ON TOP of base-web-style.css.

   Nearly all of this page is base: .spi-section-padded +
   .spi-container for the shell (and for each region band),
   .spi-section-header.is-center for the titles, .spi-toggle
   for the region filter, .ui-card (+ .has-action) for the 65
   distributor cards, .spi-grid-4 for the card grid, .spi-h3 /
   .spi-body / .spi-eyebrow for the type and .btn.default for
   the website links.

   What remains is only what base has no equivalent for: the
   grey band behind each region, the floating panel the filter
   sits in, and two guards for the cards.
   ========================================================= */

/* ---------------------------------------------------------
   1. REGION BAND (.partners-region)
   Each region sits on its own light grey ground, which is what
   separates "North America" from "Mexico" from "South America"
   when they run one after another inside a single filter panel.
   The band is a base .spi-section-padded, so its padding and its
   three breakpoints are base's; only the ground is added here.

   Base has .spi-section-learning, which is the same idea, but it
   is named and documented for one specific homepage section —
   reusing it here would tie two unrelated pages to one rule. The
   colour is taken from base's own --spi-gray-200 rather than the
   original's #f2f2f2f2, so it re-themes with everything else.
--------------------------------------------------------- */
.partners-region {
  background: var(--spi-gray-200);
}

/* Regions butt straight up against each other, so a second band
   in the same panel must not double the gap between them. Two
   classes, so it outranks base's padding at every breakpoint. */
.partners-region + .partners-region {
  padding-top: 0;
}

/* The bands are built from partners.json after the page has drawn.
   Until they arrive, hold a screen's worth of room for them, so the
   store footer starts below the fold instead of being shoved off
   the screen when they land (a 0.2 layout shift on the live page).
   Every region is taller than a screen at every width, so the
   reserve is always used up; :empty lets go of it the moment the
   bands — or the error notice — are written in. */
#partners-panels:empty {
  min-height: 100vh;
}

/* ---------------------------------------------------------
   2. FILTER PANEL (.partners-filter)
   The filter rides in a raised white panel that overlaps the
   grey bands below it. Base's .ui-card supplies the surface,
   radius and padding, and .spi-container its width; the lift
   is the part base has no modifier for.
--------------------------------------------------------- */
.partners-filter-wrap {
  /* the panel provides its own breathing room; the section
     wrapper is here only for the page's edge padding */
  padding-top: 0;
  padding-bottom: 24px;
}

.partners-filter {
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 4px 32px 2px rgba(0, 0, 0, 0.12);
}

/* "Filter by" labels the group; it should not be pushed onto its
   own line while pills are still wrapping beside it. */
.partners-filter .spi-eyebrow {
  margin: 0;
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  .partners-filter {
    padding: 16px;
    flex-direction: column;
  }
}

/* ---------------------------------------------------------
   3. DISTRIBUTOR CARD
   Base's .ui-card and .has-action do the work — surface, border,
   radius, and the auto top margin that drops every website
   button onto the card's bottom edge so a row of them lines up.
   That last part is why the original's `style="height:240px"` is
   gone: it existed only because the old .storm-button-container-2
   was absolutely positioned, so every card had to be padded out
   to a fixed height whether its address needed it or not.

   The addresses are the content here, so they get full-strength
   text rather than base's muted body colour.
--------------------------------------------------------- */

/* A grid track will not shrink below the widest unbreakable thing
   in its cards, so one long URL or address token pushed the fourth
   column off the screen: 66px over at 1024 and 190px at 1200 on the
   live page. min-width: 0 lets the track keep its share; the text
   then wraps inside the card instead of widening it. */
.partners-region .ui-card {
  min-width: 0;
  overflow-wrap: break-word;
}

.partners-region .ui-card .spi-body {
  margin: 8px 0 0;
  color: var(--spi-black);
}

/* A floor under the gap between the address and the button.
   It has to come from `gap`, NOT from a margin-top on the button:
   base pins that button with `margin-top: auto`, and any margin-top
   here would outrank it and break the bottom alignment across the
   row — which is the whole reason .has-action exists. */
.partners-region .ui-card.has-action {
  gap: 12px;
}

/* The label on these buttons is a whole URL — much longer than a
   button normally carries — so it must wrap instead of forcing the
   card wider than its grid track. On the live site the store theme
   gives every .btn.default `width: max-content`, which holds the
   URL on one line however narrow the card is; `width: auto` hands
   it back. align-self stops the button stretching edge to edge as
   a flex item in the card's column. */
.partners-region .btn.default {
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

/* The label sits in one <span> (see the page script) so the theme's
   flex .btn treats it as a single item. The store theme also sets
   `a, i, p, span { font-size: 16px; font-weight: 400 }`, which would
   land on that span directly and render the URL at 16px regular
   inside a 12px bold button — the same theme rule base guards its
   own span components against (base, SPAN FONT-SIZE GUARD). */
.partners-region .btn.default > span {
  font: inherit;
}