/* ==========================================================
   IROZON DESIGN SYSTEM — Surface & Card (canonical, v1)
   Every card must earn its border or background. Plain whitespace +
   typography + a hairline separator remains the preferred grouping
   mechanism — reach for .iz-surface or .iz-card only when enclosure
   adds real meaning, not by default.

   Public API:
     <section class="iz-surface">                quiet grouping, no card feel
     <article class="iz-card">                   discrete content unit
     <article class="iz-card" data-variant="subtle|outlined|elevated">
     <a class="iz-card" data-interactive href="...">   clickable card
     <button class="iz-card" data-interactive type="button">selectable card
   ========================================================== */

.iz-surface {
  background: var(--color-surface-subtle);
  border-radius: var(--r-md);
  padding: 20px;
}

.iz-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: 20px;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-body);
  text-align: start;
  width: 100%;
}

/* ---------- Variants ---------- */
/* Default (no attribute) is the plain bordered surface above. */
.iz-card[data-variant="subtle"] {
  background: var(--color-surface-subtle);
  border-color: transparent;
}
.iz-card[data-variant="outlined"] {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}
.iz-card[data-variant="elevated"] {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* ---------- Interactive card ----------
   Opt-in via data-interactive, and only on a real <a> or <button> —
   never a bare <div> with a click handler. Reference: irozon-website
   src/components/Services.tsx (homepage service cards). Shadow feedback
   only: no card translation/scale or hover border/background change.
   Optional .iz-card__title carries the heading response; use the
   accessible, theme-adaptive link color rather than low-contrast Green. */
a.iz-card[data-interactive],
button.iz-card[data-interactive] {
  border-radius: var(--r-lg);
  padding: var(--space-6);
  cursor: pointer;
  transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
/* Variants keep their original fill/border/elevation roles. */
a.iz-card[data-interactive]:not([data-variant]),
button.iz-card[data-interactive]:not([data-variant]) {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
a.iz-card[data-interactive]:hover,
button.iz-card[data-interactive]:hover {
  box-shadow: var(--shadow-card-hover);
}
a.iz-card[data-interactive] .iz-card__title,
button.iz-card[data-interactive] .iz-card__title {
  color: var(--color-text-primary);
  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
a.iz-card[data-interactive]:hover .iz-card__title,
button.iz-card[data-interactive]:hover .iz-card__title {
  color: var(--color-link);
}
a.iz-card[data-interactive]:focus-visible,
button.iz-card[data-interactive]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  a.iz-card[data-interactive],
  button.iz-card[data-interactive],
  a.iz-card[data-interactive] .iz-card__title,
  button.iz-card[data-interactive] .iz-card__title {
    transition: none;
  }
}