/* ==========================================================================
   Glass Card — global utility. Add the class `glass-card` to any element.
   ========================================================================== */

.glass-card {
  border-radius: 20px;
  box-shadow:
    0 2px 4px 0 rgba(0, 0, 0, 0.10),
    0 8px 24px 0 rgba(0, 0, 0, 0.12),
    0 16px 48px 0 rgba(0, 0, 0, 0.10);
  position: relative;
  overflow: hidden;
  transition: 0.3s ease all;
}

.glass-card:hover {
  /* transform: scale(1.01); */
}

/* The .fx-container is the backdrop-filter layer injected by glassfilter.js —
   keep it behind the card's own content. */
.glass-card .fx-container {
  z-index: 0 !important;
}

/* Keep the card's own content above the JS glass layer (fx-container, z-index 0).
   position: relative is required for z-index to take effect on the children. */
.glass-card > * {
  position: relative;
  z-index: 1;
}

/* Glass border — a thin specular rim like Figma's native Glass effect: a clean
   light edge, brightest along the top / upper-left where the light hits, faint
   on the sides, with a subtle catch on the far (lower-right) edge. No inner glow
   or dark band, so the edge stays crisp instead of glowing. */
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.80) 0%,
    rgba(255, 255, 255, 0.20) 22%,
    rgba(255, 255, 255, 0.05) 52%,
    rgba(255, 255, 255, 0.10) 80%,
    rgba(255, 255, 255, 0.35) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
}

/* Small glass pills (hero tags / eyebrows) get a thinner 1px rim vs the card's
   1.5px — keeps the delicate edge in proportion to the smaller shape. */
.site-hero__tag::before,
.case-hero-x__tag::before,
.service-hero__eyebrow::before { padding: 1px; }