/* ==========================================================================
   Glassmorphism — BEM block: .glass
   Shape     = --pill / --panel / --card  (mimics a React `shape` prop)
   Intensity = --strong / --subtle        (mimics a React `intensity` prop)
   Tint      = --tint-red                 (mimics a React `tint` prop)
   ========================================================================== */

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

/* Shape modifiers */
.glass--pill {
  border-radius: var(--radius-pill);
}

.glass--panel {
  border-radius: var(--radius-lg);
}

.glass--card {
  border-radius: var(--radius-md);
}

/* Intensity modifiers */
.glass--strong {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
}

.glass--subtle {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Light glass — frosted white instead of the default dark tint, for glass
   panels that sit as their own card on the light page background rather
   than needing dark-on-light contrast (that's what the default .glass,
   tuned for the navbar, is for). */
.glass--light {
  background: rgba(255, 255, 255, 0.55);
  border-color: var(--glass-border);
}

/* Tint modifier — a faint brand-color wash over the glass */
.glass--tint-red {
  background: linear-gradient(180deg, rgba(227, 0, 27, 0.14) 0%, rgba(227, 0, 27, 0.04) 100%);
}

/* Featured modifier — a slightly whiter background than the plain card + a
   pale red border, for calling out one card among a set (e.g. one
   .hero__fit-card). Paired with .glass--card for specificity, so it wins
   over a component's own background rule regardless of file order. */
.glass--card.glass--featured-red {
  background: #fcfcfc;
  border-color: rgba(227, 0, 27, 0.25);
}

/* Fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--color-surface-100);
  }
}