/* ==========================================================================
   trust-band.css — the four shop promises, in a band above the footer.
   Rendered by inc/trust-band.php on the `get_footer` action, i.e. inside
   <main> and immediately before the </main> that footer.php closes.

   WHY THIS FILE EXISTS: the header trust bar (inc/woocommerce.php:596,
   `ostugrupp_trust_bar`) was taken off the header strip when the category rail
   moved in — inc/category-rail.php:307 removes it on template_redirect. On the
   front page nothing was lost, because .home-props (front-page.php:238) states
   the same four promises larger and better. Everywhere else — shop, category,
   tag, search, blog, single post, static page, account, 404 — the shop stopped
   making any promise at all. This band restores them there and only there.

   DESIGN INTENT: a closing statement, not a decoration. The band takes the page
   background so the four cards are the only surfaces in it; each card is a real
   white plate with a hairline border and the resting card shadow, so it reads as
   an object rather than as text on grey. One icon size (20px in a 40px tile),
   one radius per role, one type step per role. Nothing here moves, hovers, or
   is clickable — 73% of this shop's traffic is phones, where hover does not
   exist, and a promise is not a control.

   TOKENS: every var() carries its literal as a fallback. Deploys here are a
   hand-built zip uploaded by hand, and a custom property that cannot resolve
   does not fall back to an older value — it becomes the guaranteed-invalid
   value and takes every consumer down with it. Every literal below was read
   from assets/css/tokens.css (and, for --shadow-card, from main.css:98, which
   redefines it and loads last), never from a comment or a README.

   SPECIFICITY (CLAUDE.md Trap 1, paid for three times): every rule is prefixed
   with the section class, so descendants are (0,2,0) rather than (0,1,0).
   Generic `ul`/`li` rules from a plugin or from WooCommerce core outrank a bare
   single class on any page carrying the `woocommerce-page` body class, and this
   band renders on shop, category, search and account pages — all of which carry
   it. inc/trust-band.php additionally declares ostugrupp-woocommerce as a
   dependency whenever that handle exists, so on WooCommerce pages this file is
   printed AFTER woocommerce.css and wins an equal-specificity tie on source
   order too.
   NOT VERIFIED IN A BROWSER: there is no browser in this session. The
   arithmetic above is arithmetic, not a computed value — read the computed
   value on a real shop/category page before calling any of it "applied".

   NO TABLES ARE INVOLVED (CLAUDE.md Trap 11): this band is a <ul> of <li>, so
   no `display` value here can generate an anonymous table cell.
   ========================================================================== */

/* ---- The band itself ---------------------------------------------------- */

.ostu-trust-band {
  /* Same colour as the page, so the band is defined by its hairline and its
     air rather than by a fifth surface tone nobody asked for. */
  background: var(--surface-page, #f8fafc);
  border-top: 1px solid var(--border, #e2e8f0);
  /* Air above the rule. Collapses with the preceding section's margin, which is
     what we want: templates that already end in .section-y padding do not get
     a double gap. */
  margin-top: var(--space-32, 32px);
  padding-block: var(--space-32, 32px);
}

@media (min-width: 940px) {
  .ostu-trust-band {
    padding-block: var(--space-40, 40px);
  }
}

/* ---- The 2 → 4 column grid ---------------------------------------------- */

/*
 * FOUR COLUMNS START AT 940px, NOT 1024px. This is a MEASURED exception, not a
 * stray number: --bp-trustbar in assets/css/tokens.css:75 and the same note in
 * the design pack (tokens/ostugrupp-tokens.json). At 768px the four boxes need
 * ~870px of min-content — the binding word is the Estonian compound
 * "Pakiautomaadi" — against 720px available, and body{overflow-x:clip} in
 * main.css:124 then denies any way to scroll to the fourth card, so it was
 * simply cut off the screen. Two columns until there is genuinely room for
 * four. Do not "harmonise" this to --bp-lg. The same exception is already
 * live for .home-props (main.css:343).
 *
 * minmax(0, 1fr), never a bare 1fr: a bare 1fr is minmax(auto, 1fr) and refuses
 * to shrink below its content, which is exactly how the fourth card escaped the
 * viewport the first time.
 */
.ostu-trust-band .ostu-trust-band__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12, 12px);
  align-items: stretch; /* four cards, one height, whatever the copy does */
}

@media (min-width: 940px) {
  .ostu-trust-band .ostu-trust-band__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-16, 16px);
  }
}

/* ---- The card ----------------------------------------------------------- */

.ostu-trust-band .ostu-trust-band__card {
  list-style: none;
  margin: 0;
  padding: var(--space-16, 16px);
  min-width: 0; /* let the grid track shrink; long compounds wrap, not overflow */
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-16, 16px);
  /* --shadow-card is declared in BOTH tokens.css and main.css; main.css loads
     last and wins, so the fallback below is main.css:98's value, not the
     pack's. The var() fallback may contain commas — everything after the first
     comma is the fallback, which is why both shadow layers survive. */
  box-shadow: var(--shadow-card, 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12, 12px);
}

/* Defensive: parent themes and plugins like to hang a bullet glyph on every
   list item, and this band renders inside content areas we do not own. */
.ostu-trust-band .ostu-trust-band__card::before {
  content: none;
}

@media (min-width: 940px) {
  .ostu-trust-band .ostu-trust-band__card {
    padding: var(--space-20, 20px);
  }
}

/* ---- Icon tile ---------------------------------------------------------- */

/*
 * ONE icon size in this component: a 20px glyph centred in a 40px tile. The
 * inventory that opened this design pass counted 14, 16, 18, 20, 23 and 46px
 * glyphs sitting in the same row elsewhere in the theme; this file adds exactly
 * one more size to that list and it is the pack's own step.
 * The tile is --brand-a1 (the pack's "gentle tint" role) with a --brand-a3
 * hairline (its "border on a tinted surface" role) — the ring is what stops a
 * 6%-alpha fill from reading as a smudge instead of an object.
 */
.ostu-trust-band .ostu-trust-band__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* --space-40 IS 40px in this pack ("nimi = väärtus"), which keeps the tile on
     the 4px grid instead of inventing a component size. */
  width: var(--space-40, 40px);
  height: var(--space-40, 40px);
  border-radius: var(--radius-12, 12px);
  background: var(--brand-a1, rgb(4 120 87 / .06));
  box-shadow: inset 0 0 0 1px var(--brand-a3, rgb(4 120 87 / .20));
  color: var(--brand, #047857);
}

/* Explicit size on the SVG: the helper already writes width/height attributes,
   but main.css:128 sets `img, picture, svg { max-width:100%; height:auto }` and
   height:auto on an inline SVG inside a flex box is a size negotiation we would
   rather not have. */
.ostu-trust-band .ostu-trust-band__icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* ---- Copy --------------------------------------------------------------- */

.ostu-trust-band .ostu-trust-band__text {
  display: block;
  min-width: 0;
}

/* Longhands, not the `font:` shorthand: with the shorthand a single
   unresolvable token invalidates size, weight, line-height and family at once. */
.ostu-trust-band .ostu-trust-band__title {
  display: block;
  font-family: var(--font-text, 'DM Sans', 'Segoe UI', sans-serif);
  font-size: var(--fs-sm, 14px);
  font-weight: var(--fw-semibold, 600);
  line-height: var(--lh-sm, 20px);
  color: var(--text, #0f172a); /* 17,85:1 on white — the promise is the loud part */
  overflow-wrap: break-word;   /* "Pakiautomaadi" must wrap, never overflow */
}

.ostu-trust-band .ostu-trust-band__note {
  display: block;
  margin-top: var(--space-4, 4px);
  font-family: var(--font-text, 'DM Sans', 'Segoe UI', sans-serif);
  font-size: var(--fs-xs, 13px);
  font-weight: var(--fw-regular, 400);
  line-height: var(--lh-xs, 18px);
  /* --text-muted (7,58:1), not --text-subtle (4,76:1): this sits on white
     inside a card on a grey band, and the AA-floor tone reads as washed out
     there. "Lifeless" is the complaint this whole pass exists to answer. */
  color: var(--text-muted, #475569);
  overflow-wrap: break-word;
}

/* ---- Print -------------------------------------------------------------- */

/* A printed order confirmation or info page does not need the shop's marketing
   promises taking up a third of the page. assets/css/print.css strips the rest
   of the chrome; this band is new, so it removes itself. */
@media print {
  .ostu-trust-band {
    display: none;
  }
}