/**
 * StreamVerse — Why Choose Us / Features Banner
 *
 * Restyled to match guarantee-banner.css's visual system exactly, so
 * the two four-item rows on this page (this one, right after the
 * Hero, and the Trust/Guarantee banner near the end) read as the same
 * component family: solid elevated panel (no backdrop-filter glass),
 * subtle border, the site's large radius, a soft ambient glow via the
 * same existing shadow token, circular icon badges with their own
 * glow, identical title/description type scale, identical item
 * padding, and the same two-tier responsive collapse to a 2x2 grid.
 * Content, copy, icons, and this section's position in the page
 * (between Hero and Popular Movies) are unchanged — only the visual
 * treatment moved onto guarantee-banner's system.
 *
 * The previous version's own signature details (glass/blur panel,
 * the decorative top hairline, --radius-md, 22px icons with no badge)
 * are intentionally dropped here rather than kept alongside the new
 * treatment — per request, this should look like it was designed
 * together with the Guarantee banner, not like two different styles
 * layered on the same markup.
 */

.trust-banner {
  /* Section-level padding is intentionally left as it was (tighter
     than the other sections) rather than matched to
     guarantee-banner's — that gap was deliberately tuned earlier as
     the compact seam between Hero and Popular Movies, a page-level
     rhythm decision distinct from this banner's own visual style. */
  padding-block: var(--space-6);
}

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

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

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

/* The panel — identical treatment to .guarantee-banner__grid: solid
   elevated surface, subtle border, --radius-lg, ambient glow via the
   same existing shadow token. */
.trust-banner__panel {
  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);
}

.trust-banner__stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start, not center: anchors every column's icon to the same
     vertical position regardless of whether its title wraps to one
     line or two (see .trust-banner__title's reserved height below). */
  justify-content: flex-start;
  text-align: center;
  /* Second, deeper compacting pass, per explicit request for a
     "significantly", "noticeably" smaller banner that takes "much less
     vertical space":
       padding-block:  --space-5 (24px) -> --space-4 (16px) -> --space-2 (8px)
       padding-inline: --space-3 (12px) -> --space-2 (8px)
     Top/bottom padding is what actually sets the panel's own height;
     horizontal padding is what sets the gap on either side of the
     dividers between the 4 items (there's no separate flex `gap` in
     this layout — the items sit flush against their border-left
     dividers — so tightening each item's own inline padding is what
     reduces that between-item spacing). Still existing scale tokens,
     not arbitrary values. --space-2 (8px) is a deliberately assertive
     cut given the explicit "significantly"/"noticeably" wording, while
     stopping short of --space-1 (4px) so the panel still reads "tight
     but still comfortable" rather than cramped against the border. */
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
  border-radius: var(--radius-lg);
  transition: background-color var(--duration-micro) var(--ease-standard);
}

/* Subtle vertical separators — between items only. */
.trust-banner__stat:not(:first-child) {
  border-left: 1px solid var(--color-border-subtle);
}

/* Minimal hover, matching the Guarantee banner's: a faint surface
   lift on the item plus a slightly brighter icon glow — no motion. */
.trust-banner__stat:hover {
  background-color: var(--color-bg-elevated-hover);
}

/* Icon badge — same circular glow treatment as
   .guarantee-banner__icon-wrap. */
.trust-banner__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Badge shrunk slightly, 56px -> 48px (~14%), per explicit request
     to reduce icon size — the icon glyph below is scaled down by the
     same ratio so the glyph still sits at 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 further: --space-2 (8px) -> --space-1
     (4px), the smallest step on the spacing scale. */
  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;
}

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

/* Icon — same outline language (24x24 viewBox, stroke-width 1.75,
   round caps) as the Guarantee banner's icons; the glyphs themselves
   are unchanged, only rendered slightly smaller (28px -> 24px, the
   same ~14% reduction as the badge above, so the glyph keeps the same
   visual proportion within it), per explicit request to reduce icon
   size. */
.trust-banner__icon {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Title — per explicit request, sized slightly down from the shared
   17px guarantee-banner__title treatment (this is now the one
   property where the two components diverge; family/weight/color are
   still identical). min-height stays calc(1.25em * 2) — since it's in
   em, it scales down automatically with the smaller font-size, so the
   reserved two-line height shrinks along with everything else here
   rather than needing its own edit. */
.trust-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 per request */
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Description — font-size nudged down slightly (13px -> 12px) per
   explicit request; family/weight/color/line-height ratio unchanged.
   margin-top: the previous pass left this at --space-1 (4px), already
   the smallest step on the spacing scale. This pass explicitly asks
   again to tighten icon/title/description spacing further, so this
   one gap is dropped below the token scale to an explicit 2px — there
   is no smaller existing token to reach for, and leaving it at 4px a
   second time wouldn't honor "reduce spacing... between title and
   description." Every other value in this file stays on-scale. */
.trust-banner__description {
  margin-top: 2px;
  max-width: 30ch;
  font-family: var(--font-body);
  font-size: 0.75rem; /* 13px -> 12px, slightly down per request */
  line-height: 1.5;
  font-weight: 400;
  color: #A3AED0;
}

/* Responsive collapse — same two-tier breakpoint as
   guarantee-banner.css: a 2x2 grid from the point four columns get
   too narrow (below 768px) down to the smallest phones, rather than
   the previous version's single break at 480px. Dividers become
   column-left/row-top only where two tiles actually meet. */
@media (max-width: 767.98px) {
  .trust-banner__panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

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

  .trust-banner__stat:nth-child(odd) {
    border-left: none;
  }

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

  /* Mobile-only alignment fix: in this 2x2 grid, a one-line title (e.g.
     "Support All Devices") was vertically centered inside the title's
     reserved two-line box, which visually pushed it down to roughly the
     second line's height — noticeably lower than a two-line title's
     first line (e.g. "34K+ Channels &") directly beside or above it in
     the grid. Top-aligning the text instead means every title's first
     line starts at the exact same height regardless of whether it wraps
     to one or two lines, so icon, title, and description all line up
     consistently across all four items. Desktop/tablet (>= 768px) keeps
     the original centered rule untouched. */
  .trust-banner__title {
    align-items: flex-start;
  }
}