/* ==========================================================================
   features.css — the three feature cards and their scrims
   Split out of the original components.css; load order is preserved
   exactly, because several rules here depend on source order.
   ========================================================================== */

/* ---- Feature cards ---- */
.feature-card {
  position: relative;
  aspect-ratio: 432 / 600;          /* design ratio, held at every width */
  height: auto;
  max-height: calc(100vh - 200px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  color: var(--white);
  isolation: isolate;
}
/* Card artwork is a real <img> (not a background) so paths resolve against the
   document and the gradient above it can sample it correctly. */
.card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s var(--ease);
}
.feature-card:hover .card-media { transform: scale(1.05); }
/* Shared scrim (Figma 698:628) — same treatment as the community tiles, just
   taller here because these cards carry heading, body and button.
   ::before = blur (masked by the ramp), ::after = the gradient itself. */
.feature-card::before,
.feature-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 224px;
  z-index: 1;
  pointer-events: none;
}
.feature-card::before {
  backdrop-filter: var(--scrim-blur);
  -webkit-backdrop-filter: var(--scrim-blur);
  mask-image: var(--scrim-mask);
  -webkit-mask-image: var(--scrim-mask);
}
.feature-card::after { background: var(--scrim); }

/* Copy sits above the artwork and its gradient */
.feature-card-body,
.feature-card .btn { position: relative; z-index: 2; }

/* Card with content anchored to the top (App powered) — scrim flipped up.
   290px per the design. */
.feature-card--top { justify-content: flex-start; }
.feature-card--top::before,
.feature-card--top::after {
  top: 0;
  bottom: auto;
  height: 290px;
}
.feature-card--top::before {
  mask-image: var(--scrim-mask-flipped);
  -webkit-mask-image: var(--scrim-mask-flipped);
}
.feature-card--top::after { background: var(--scrim-flipped); }
.feature-card--top .btn--glass { order: 2; align-self: flex-start; margin-top: 24px; }
.feature-card--top .feature-card-body { order: 1; }

/* App Powered sits on a solid field (#181818) rather than full-bleed art,
   so the product shot floats on the colour (Figma 698:567). */
.feature-card--solid { background: var(--ink-700); }
.feature-card--solid .card-media { object-fit: cover; }


/* Design: Aeonik Regular 32 / 44, tracking -0.64px, capitalize */
.feature-card-title {
  font-size: 32px;
  font-weight: var(--w-regular);
  line-height: 44px;
  letter-spacing: -0.64px;
  text-transform: capitalize;
  margin-bottom: 12px;
}
.feature-card-text {
  font-size: 16px;
  line-height: 22px;
  color: var(--text-on-dark);
  max-width: 374px;
}
.feature-card .btn--glass { align-self: flex-start; }