/* ============================================================
   ZOXA.AI — CARD COMPONENTS

   All card designs live here, out of site.css, so work on one
   card cannot disturb another. Loaded after site.css.

   Templates: src/_includes/components/cards/
   ============================================================ */

/* ============================================================
   CARD SYSTEM
   A media panel with a tab notched out of its top-left corner.
   The notch is a block of card surface laid over the panel, with
   two radial-gradient fillers bridging it back into the edge — that
   gives a true concave joint without mask-composite, which is still
   inconsistent across engines. Every corner resolves from a token,
   so the whole family re-tunes from tokens.css alone.
   ============================================================ */
.zx-card {
  --notch-h: 46px;            /* height of the tab strip */
  --notch-r: var(--r-sm);     /* every concave + convex joint on the notch */
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s4);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.zx-card:hover,
.zx-card:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow-lg); }

/* ---------- media panel ---------- */
.zx-card-head { position: relative; }
.zx-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 88% 108%, rgba(239, 90, 25, .30) 0%, transparent 62%),
    linear-gradient(158deg, var(--card-media) 0%, var(--card-media-2) 100%);
}
.zx-card-art { position: absolute; inset: 0; }

/* ---------- the notch ---------- */
.zx-card-notch {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-raised);
  height: var(--notch-h);
  display: flex;
  align-items: center;
  padding-right: var(--s3);
  background: var(--surface);
  /* The top-left MUST carry the card's own radius. This block is absolutely
     positioned at top:0 left:0 and painted opaque, so a square corner here
     paints straight over the card's rounded corner and shears it flat.
     Minus the 1px border, because absolute positioning resolves against the
     padding box while --r-card describes the border box. */
  border-radius: calc(var(--r-card) - 1px) 0 var(--notch-r) 0;
}
.zx-card-notch::before,
.zx-card-notch::after {
  content: "";
  position: absolute;
  width: var(--notch-r);
  height: var(--notch-r);
  background: radial-gradient(circle at 100% 100%,
    transparent calc(var(--notch-r) - .5px), var(--surface) var(--notch-r));
}
.zx-card-notch::after  { top: 0;    left: 100%; }
.zx-card-notch::before { top: 100%; left: 0; }

.zx-card-tab {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding-right: var(--s2);
}

/* ---------- tags: tucked in the notch, revealed on hover ---------- */
.zx-card-chips {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns var(--dur-base) var(--ease-out);
}
.zx-card-chips > span { overflow: hidden; display: flex; gap: var(--s2); min-width: 0; }
.zx-card:hover .zx-card-chips,
.zx-card:focus-within .zx-card-chips { grid-template-columns: 1fr; }

.zx-tag {
  padding: var(--s1) var(--s3);
  border-radius: var(--r-chip);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.zx-card:hover .zx-tag,
.zx-card:focus-within .zx-tag { opacity: 1; }
.zx-card:hover .zx-tag:nth-child(2),
.zx-card:focus-within .zx-tag:nth-child(2) { transition-delay: 60ms; }

/* Without a hover pointer there is no reveal to trigger, so the tags
   simply stay open — nothing is hidden from touch or assistive tech. */
@media (hover: none) {
  .zx-card-chips { grid-template-columns: 1fr; }
  .zx-tag { opacity: 1; }
}

/* ---------- body ---------- */
.zx-card-body {
  padding: var(--s5) var(--s3) var(--s5);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.zx-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  margin: 0 0 var(--s3);
}
.zx-card-title h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); margin: 0; }
.zx-card-badge {
  flex: none;
  margin-top: 3px;
  padding: var(--s1) var(--s3);
  border-radius: var(--r-chip);
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  white-space: nowrap;
}
.zx-card-body > p { margin: 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---------- footer action ---------- */
.zx-card-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s4);
  border-radius: var(--r-button);
  border: 0;
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.zx-card-cta svg { width: 16px; height: 16px; flex: none; }

/* ---------- variant: no media panel, for quotes ---------- */
.zx-card--plain { padding: var(--s6); }
.zx-card--plain .zx-card-body { padding: 0; }
/* The notch is absolutely positioned at left:0, so it ignores the card's
   padding and its label was sitting flush against the border while the copy
   below it was inset 32px. Match the card's padding so the two line up. */
.zx-card--plain .zx-card-notch { padding-left: var(--s6); }
.zx-feature--lead .zx-card-body { justify-content: center; }

/* ---------- variant: flat — keeps the tab row, drops the carve ----------
   With no media panel there is nothing to notch into, so the tab row
   simply becomes the first line of the card rather than a fake cut-out. */
.zx-card--flat .zx-card-notch {
  position: static;
  height: auto;
  background: none;
  border-radius: 0;
  padding: 0 0 var(--s4);
}
.zx-card--flat .zx-card-notch::before,
.zx-card--flat .zx-card-notch::after { display: none; }
.zx-card--flat .zx-card-body { padding-top: 0; }
.zx-card--flat .zx-card-body > h3 { margin: 0 0 var(--s3); font-size: var(--fs-h3); line-height: var(--lh-heading); }

/* icon tile — squared to the same family as the buttons, not a circle */
.zx-card-icon {
  width: var(--s7);
  height: var(--s7);
  border-radius: var(--r-icon);
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin-bottom: var(--s5);
  flex: none;
}
.zx-card-icon svg { width: var(--s5); height: var(--s5); }

/* where the tags ARE the content rather than a reveal, they stay open */
.zx-card-taglist { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; padding-top: var(--s5); }
.zx-card-taglist .zx-tag { opacity: 1; transform: none; }

/* ---------- mini product UI, drawn rather than photographed ---------- */
.zx-art {
  position: absolute;
  inset: 0;
  padding: calc(var(--notch-h) + var(--s3)) var(--s5) var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  justify-content: center;
}
.zx-art-row { display: flex; align-items: center; gap: var(--s2); }
.zx-art-dot { width: 18px; height: 18px; border-radius: var(--r-full); background: rgba(var(--bone-rgb, 251, 250, 246), .14); flex: none; }
.zx-art-dot.is-hot { background: var(--ember-400); }
.zx-art-ln { height: 6px; border-radius: var(--r-full); background: rgba(var(--bone-rgb, 251, 250, 246), .20); }
.zx-art-ln.is-hot { background: rgba(255, 158, 113, .55); }
.zx-art-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: var(--s1) var(--s2);
  border-radius: var(--r-chip);
  background: rgba(239, 90, 25, .20);
  border: 1px solid rgba(255, 158, 113, .35);
  color: var(--ember-300);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
}
.zx-art-bars { display: flex; align-items: center; gap: var(--s1); height: 52px; }
.zx-art-bars i { display: block; width: 5px; border-radius: var(--r-full); background: rgba(var(--bone-rgb, 251, 250, 246), .22); }
.zx-art-bars i.is-hot { background: var(--ember-400); }
.zx-art-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s1); }
.zx-art-cal i { aspect-ratio: 1; border-radius: var(--r-2xs); background: rgba(var(--bone-rgb, 251, 250, 246), .10); }
.zx-art-cal i.is-on { background: var(--ember-400); }
.zx-art-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(var(--bone-rgb, 251, 250, 246), .42);
}

@media (max-width: 767px) {
  .zx-card { --notch-h: 42px; }
  .zx-card-media { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .zx-card,
  .zx-card-chips,
  .zx-tag { transition: none; }
}