/* ==========================================================================
   Star Musical Entertainer — hero trust badges
   Loaded last. Scope is deliberately limited to the three badges
   ("Since 1990", "150+ Artists & musicians", "Delhi NCR & destination
   events"); nothing else on the page is touched.

   The problem: below 400px the badges collapsed to a single column, so three
   icon-and-two-line blocks stacked into a tall stripe. That consumed most of
   the hero's lower half and pushed the carousel controls down.

   The approach: keep all three visible in a compact arrangement at every
   width, shrinking the type and icon rather than stacking. Three short
   labels fit comfortably across a 320px screen once they are sized for it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tablet and below
   A three-column grid keeps the badges on one line and reads as a single
   trust strip rather than three separate blocks.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
    width: 100%;
    /* A hairline above separates the strip from the buttons without adding
       the visual weight of a full divider. */
    padding-top: var(--sp-4);
    border-top: 1px solid rgba(212,165,66,.18);
  }

  .hero-trust-item {
    /* Icon above the text: side by side, three across is too cramped for
       the longer labels. */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 4px;
    min-width: 0;
  }

  .hero-trust-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .hero-trust-num {
    font-size: .92rem;
    line-height: 1.15;
    white-space: nowrap;
  }

  .hero-trust-label {
    font-size: .6rem;
    line-height: 1.25;
    /* Two lines maximum so one long label cannot make the strip taller. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   2. Standard phones (390–414px)
   -------------------------------------------------------------------------- */

@media (max-width: 430px) {
  .hero-trust { gap: 6px; padding-top: var(--sp-3); }
  .hero-trust-num { font-size: .86rem; }
  .hero-trust-label { font-size: .57rem; }
  .hero-trust-item svg { width: 16px; height: 16px; }
}

/* --------------------------------------------------------------------------
   3. Narrow phones (320–360px)
   Still three across — the labels are short enough once scaled down, and
   stacking here is what created the original problem.
   -------------------------------------------------------------------------- */

@media (max-width: 360px) {
  .hero-trust { gap: 4px; }
  .hero-trust-num { font-size: .78rem; }
  .hero-trust-label { font-size: .53rem; letter-spacing: -.01em; }
  .hero-trust-item svg { width: 15px; height: 15px; }
}

/* --------------------------------------------------------------------------
   4. Very narrow (below 320px)
   Only here does the strip drop to two columns, with the third badge
   spanning beneath, because three columns genuinely stop fitting.
   -------------------------------------------------------------------------- */

@media (max-width: 319px) {
  .hero-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-trust-item:last-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   5. Landscape phones
   Vertical space is scarce, so the badges return to a single inline row.
   -------------------------------------------------------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
  .hero-trust {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--sp-4);
    padding-top: var(--sp-2);
    border-top: 0;
  }
  .hero-trust-item { flex-direction: row; align-items: center; gap: var(--sp-2); }
  .hero-trust-label { -webkit-line-clamp: 1; line-clamp: 1; }
}