/* ==========================================================================
   glass-card.css — Glass Surface Component
   The brand's signature reusable surface.
   Reference: docs/components/glass-card.md
   ========================================================================== */

.fidyat-glass-card {
  position:      relative;
  border-radius: var(--radius-lg);
  background:    var(--gradient-glass);
  isolation:     isolate;
  overflow:      hidden;
  box-shadow:    var(--shadow-card);
}

/* 1-px gradient stroke ring via masked pseudo-element */
.fidyat-glass-card::before {
  content:  "";
  position: absolute;
  inset:    0;
  border-radius: inherit;
  padding:  1px; /* stroke thickness */
  background: var(--gradient-glass-stroke);

  /* Punch out the inner area so only the 1px border is visible */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite:  exclude;

  pointer-events: none;
  z-index: 1;
}

/* Inner wrapper sits above the ::before stroke */
.fidyat-glass-card__inner {
  position: relative;
  z-index:  2;
  padding:  var(--space-5);
}

/* ── Modifiers ───────────────────────────────────────────────────────────── */

/* Square aspect ratio — used by product card media */
.fidyat-glass-card--square {
  aspect-ratio: 1 / 1;
}

/* Softer surface for dense/secondary contexts */
.fidyat-glass-card--flat {
  box-shadow: none;
  background: rgba(149, 146, 255, 0.10);
}

/* Solid indigo accent surface */
.fidyat-glass-card--accent {
  background: var(--gradient-main);
}

/* Wider radius variant */
.fidyat-glass-card--rounded {
  border-radius: var(--radius-lg);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Slightly smaller radius on very small screens */
@media (max-width: 374px) {
  .fidyat-glass-card {
    border-radius: var(--radius-md);
  }
}