/**
 * StreamVerse — Trust / Guarantee Banner (4 items)
 *
 * Structurally this is the same proven pattern as trust-banner.css's
 * own four-stat row (icon -> title -> description, equal-width flex
 * items, thin dividers on desktop, 2x2 grid on mobile) — reused
 * deliberately rather than invented fresh, including the same
 * top-anchored alignment fix (justify-content: flex-start + a
 * reserved two-line title height) so every icon/title/description
 * lines up identically across all four items regardless of which
 * title wraps. Sits at the end of the page (there is no pricing
 * section yet to place it directly against).
 *
 * No new design tokens: background, border, radius, glow, and type
 * are all existing tokens/colors already used elsewhere on the site
 * (--color-accent is StreamVerse's actual primary accent — Electric
 * Violet — reused here instead of introducing a separate "electric
 * blue" that doesn't exist in tokens.css; no gold accent was needed
 * for four support/guarantee/activation/security items, so none was
 * added). The #A3AED0 description color matches the exact value
 * already used sitewide for every other section's secondary text.
 */

.guarantee-banner {
  padding-block: var(--space-7);
}

.guarantee-banner__inner {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .guarantee-banner__inner {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .guarantee-banner__inner {
    padding-inline: var(--space-7);
  }
}

/* The panel — solid elevated surface (no backdrop-filter/glass), a
   subtle border, the site's own large radius, and a soft ambient glow
   using the existing shadow token already named for exactly this
   purpose elsewhere in the design system. */
.guarantee-banner__grid {
  display: flex;
  align-items: stretch;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero-media-glow);
}

.guarantee-banner__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start, not center: anchors every item's icon to the same
     vertical position regardless of whether its title wraps to one
     line or two (see .guarantee-banner__title's reserved height
     below) — the same fix trust-banner.css uses for its own row. */
  justify-content: flex-start;
  text-align: center;
  /* Compacting pass — mirrors trust-banner.css's own item padding
     exactly, per explicit request to bring this banner to
     approximately the same height/compactness as that one:
       padding-block:  --space-5 (24px) -> --space-2 (8px)
       padding-inline: --space-3 (12px) -> --space-2 (8px)
     Top/bottom padding is what sets the panel's own height; horizontal
     padding sets the gap on either side of the dividers between the 4
     items (there's no separate flex `gap` here — items sit flush
     against their border-left dividers, same as trust-banner.css).
     Still existing scale tokens, not arbitrary values. */
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
  border-radius: var(--radius-lg);
  transition: background-color var(--duration-micro) var(--ease-standard);
}

.guarantee-banner__item:not(:first-child) {
  border-left: 1px solid var(--color-border-subtle);
}

/* Subtle hover only: a faint surface lift on the item itself, plus a
   slightly brighter icon + stronger (still soft) glow — no motion,
   no scale, nothing that reads as a "moving" effect. */
.guarantee-banner__item:hover {
  background-color: var(--color-bg-elevated-hover);
}

.guarantee-banner__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Badge shrunk slightly, 56px -> 48px (~14%), matching
     trust-banner.css's own icon reduction exactly — the icon glyph
     below is scaled down by the same ratio so it keeps the same
     visual proportion inside its badge. Border, background, and glow
     filter values are untouched, just applied to a smaller circle. */
  width: 48px;
  height: 48px;
  /* icon-to-title gap tightened: --space-3 (12px) -> --space-1 (4px),
     the smallest step on the spacing scale — same value trust-banner
     uses now, for visual consistency between the two banners. */
  margin-bottom: var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-elevated-hover);
  border: 1px solid var(--color-border-subtle);
  filter: drop-shadow(0 0 8px var(--color-accent-glow));
  transition: filter var(--duration-micro) var(--ease-standard);
  flex-shrink: 0;
}

.guarantee-banner__item:hover .guarantee-banner__icon-wrap {
  filter: drop-shadow(0 0 14px var(--color-accent-glow)) brightness(1.1);
}

/* Glyphs unchanged, only rendered slightly smaller (28px -> 24px, the
   same ~14% reduction as the badge above), matching trust-banner.css's
   own icon size exactly. */
.guarantee-banner__icon {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
}

/* Title — bold but restrained (matches trust-banner.css's own title
   size exactly, so the site's two "4-stat row" components read as
   the same family of component). width:100% + the flex centering and
   min-height reserve exactly two lines, so a one-line title
   ("Instant Activation") and a two-line one ("30-Day Money-Back
   Guarantee") sit in an identical box and every description below
   still starts at the same offset in every column. */
/* Title — sized slightly down, matching trust-banner.css's own title
   size exactly (17px -> 15px), so the two banners read at the same
   scale again. min-height stays calc(1.25em * 2) — being in em, it
   scales down automatically with the smaller font-size, so the
   reserved two-line height shrinks along with everything else. */
.guarantee-banner__title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(1.25em * 2);
  font-family: var(--font-heading);
  font-size: 0.9375rem; /* 17px -> 15px, slightly down, matches trust-banner */
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Description — font-size nudged down slightly (13px -> 12px),
   matching trust-banner.css's own value. margin-top drops below the
   token scale to an explicit 2px for the same reason as
   trust-banner.css: --space-1 (4px) is already the smallest existing
   spacing token, and the request to tighten icon/title/description
   spacing further needs a value smaller than that. Every other value
   here stays on-scale. max-width (24ch) is left as-is — it's a
   content-width control, not part of the size/spacing being changed. */
.guarantee-banner__description {
  margin-top: 2px;
  max-width: 24ch;
  font-family: var(--font-body);
  font-size: 0.75rem; /* 13px -> 12px, slightly down, matches trust-banner */
  line-height: 1.5;
  font-weight: 400;
  color: #A3AED0;
}

/* Mobile — same 2x2 grid technique as trust-banner.css: dividers
   become column-left/row-top only where two tiles actually meet. */
@media (max-width: 479.98px) {
  .guarantee-banner__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .guarantee-banner__item {
    border-left: 1px solid var(--color-border-subtle);
  }

  .guarantee-banner__item:nth-child(odd) {
    border-left: none;
  }

  .guarantee-banner__item:nth-child(n + 3) {
    border-top: 1px solid var(--color-border-subtle);
  }
}

/* Tablet — a clean 2x2 grid once the row gets too narrow for four
   comfortable columns, per request. */
@media (min-width: 480px) and (max-width: 767.98px) {
  .guarantee-banner__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .guarantee-banner__item {
    border-left: 1px solid var(--color-border-subtle);
  }

  .guarantee-banner__item:nth-child(odd) {
    border-left: none;
  }

  .guarantee-banner__item:nth-child(n + 3) {
    border-top: 1px solid var(--color-border-subtle);
  }
}

/* Mobile-only alignment fix (both 2x2-grid ranges above, < 768px):
   matches the same fix applied to trust-banner.css's title. A one-line
   title (e.g. "Instant Activation") was vertically centered inside the
   title's reserved two-line box, which visually pushed it down toward
   the second line's height — noticeably lower than a two-line title
   (e.g. "30-Day Money-Back Guarantee") directly beside it in the grid.
   Top-aligning the text instead means every title's first line starts
   at the same height regardless of how many lines it wraps to, so
   icon, title, and description all line up consistently across all
   four items. Desktop (>= 768px, single row) keeps the original
   centered rule untouched.

   min-height: 0 removes the reserved two-line box itself. That
   reservation is what was leaving an empty gap between a one-line
   title (e.g. "Instant Activation", "Secure & Reliable") and its own
   description — the description starts right after the title's box,
   and that box stayed two lines tall even when the text only used one.
   Dropping it lets each item's title take its own natural height, so
   every description sits immediately below its own title with the
   same close spacing description/title everywhere. Icon position stays
   anchored (each item is a top-anchored flex column, unrelated to this
   min-height), and the grid still stretches each row to match its
   tallest item, so items stay vertically balanced without forcing a
   fixed text height. */
@media (max-width: 767.98px) {
  .guarantee-banner__title {
    align-items: flex-start;
    min-height: 0;
  }
}