/* =========================================================================
   AIDiveForge — Unified Card System
   Base class + 8 semantic variant types + sub-element patterns + motion
   modifiers. Tokens are defined in aidiveforge-2026.css (:root +
   html[data-theme=*]). Apply classes directly to existing markup:

     <article class="adf-card adf-card--listing">
       <img class="adf-card__thumbnail" …>
       <h3 class="adf-card__title">…</h3>
       <p class="adf-card__desc">…</p>
       <div class="adf-card__meta">…</div>
     </article>

   Legacy class names (e.g. .hp-listing--view-block, .adf-skill-card) can
   coexist during migration — sub-element rules below apply via class
   selectors and compose cleanly with the existing markup.
   ========================================================================= */

/* ----------------------------------------------------------------
   Base rule — every .adf-card variant inherits this.
   ---------------------------------------------------------------- */
.adf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--adf-card-gap);
  padding: var(--adf-card-padding);
  background: var(--adf-card-bg, var(--adf-surface-raised));
  color: var(--adf-card-fg, var(--adf-ink-strong));
  border: 1px solid var(--adf-card-bd, var(--adf-hairline));
  border-radius: var(--adf-card-radius);
  box-shadow: var(--adf-card-shadow-resting);
  text-decoration: none;
  transition:
    background    var(--adf-card-transition),
    color         var(--adf-card-transition),
    border-color  var(--adf-card-transition),
    transform     var(--adf-card-transition),
    box-shadow    var(--adf-card-transition);
}

/* Anchor-cards get no underline on the card itself */
a.adf-card { color: var(--adf-card-fg, var(--adf-ink-strong)); }
a.adf-card:hover { color: var(--adf-card-fg-h, var(--adf-ink-strong)); }

.adf-card:hover,
.adf-card:focus-within {
  background:   var(--adf-card-bg-h, var(--adf-card-bg, var(--adf-surface-raised)));
  color:        var(--adf-card-fg-h, var(--adf-card-fg, var(--adf-ink-strong)));
  border-color: var(--adf-card-bd-h, var(--adf-card-bd, var(--adf-hairline)));
  transform:    var(--adf-card-lift);
  box-shadow:   var(--adf-card-shadow-hover);
}

.adf-card:focus-visible {
  outline: 2px solid var(--adf-focus);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------
   Sub-element patterns — shared across all variants.
   Variants can override sizing/weight as needed.
   ---------------------------------------------------------------- */

.adf-card__head,
.adf-card__header {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.adf-card__thumbnail,
.adf-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--adf-hairline-soft);
  display: grid;
  place-items: center;
}
.adf-card__thumbnail img,
.adf-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adf-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--adf-card-fg, var(--adf-ink-strong));
}

.adf-card__desc,
.adf-card__description {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--adf-ink-body);
  /* Default 2-line clamp; variants can override */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.adf-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
}

.adf-card__meta,
.adf-card__footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: var(--text-xs);
  color: var(--adf-ink-muted);
}

.adf-card__badges {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.adf-card__badge,
.adf-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--adf-link-wash-10);
  color: var(--adf-link);
  border: 1px solid var(--adf-link-wash-25);
}
.adf-card__badge--verified,
.adf-card-badge--verified { background: linear-gradient(135deg, var(--adf-link-wash-14), var(--adf-link-wash-04)); color: var(--adf-link); border-color: rgba(34, 211, 238, 0.38); }
.adf-card__badge--oss,
.adf-card-badge--oss      { background: linear-gradient(135deg, rgba(74, 222, 128, 0.14), rgba(74, 222, 128, 0.04)); color: #4ade80; border-color: rgba(74, 222, 128, 0.38); }
.adf-card__badge--freemium,
.adf-card-badge--freemium { background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.04)); color: #f59e0b; border-color: rgba(245, 158, 11, 0.38); }
.adf-card__badge--popular  { background: rgba(220, 38, 38, 0.10); color: var(--adf-danger); border-color: rgba(220, 38, 38, 0.30); }

.adf-card__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Favorite-heart overlay (top-right absolute, shared with listing type) */
.adf-card__fav {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
}

/* ----------------------------------------------------------------
   Per-type variants — token overrides only, no direct styling.
   ---------------------------------------------------------------- */

.adf-card--listing {
  --adf-card-bg:    var(--adf-card-listing-bg);
  --adf-card-fg:    var(--adf-card-listing-fg);
  --adf-card-bd:    var(--adf-card-listing-bd);
  --adf-card-bg-h:  var(--adf-card-listing-bg-h);
  --adf-card-fg-h:  var(--adf-card-listing-fg-h);
  --adf-card-bd-h:  var(--adf-card-listing-bd-h);
  /* Match skill-card rhythm (compact layout with tight vertical gap and
     footer pinned to the bottom). The inner .hp-listing__* sub-elements
     still render in HP's natural order — we just set the shell. */
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.15rem 1.2rem 1.05rem;
  overflow: hidden;
}

.adf-card--artifact {
  --adf-card-bg:    var(--adf-card-artifact-bg);
  --adf-card-fg:    var(--adf-card-artifact-fg);
  --adf-card-bd:    var(--adf-card-artifact-bd);
  --adf-card-bg-h:  var(--adf-card-artifact-bg-h);
  --adf-card-fg-h:  var(--adf-card-artifact-fg-h);
  --adf-card-bd-h:  var(--adf-card-artifact-bd-h);
  padding: var(--adf-card-padding-lg);
}

.adf-card--teaser {
  --adf-card-bg:    var(--adf-card-teaser-bg);
  --adf-card-fg:    var(--adf-card-teaser-fg);
  --adf-card-bd:    var(--adf-card-teaser-bd);
  --adf-card-bg-h:  var(--adf-card-teaser-bg-h);
  --adf-card-fg-h:  var(--adf-card-teaser-fg-h);
  --adf-card-bd-h:  var(--adf-card-teaser-bd-h);
  --adf-card-lift:  var(--adf-card-lift-dramatic);
  padding: var(--adf-card-padding-lg);
  overflow: hidden;
}

/* Teaser spotlight — ambient radial gradient overlay */
.adf-card--teaser::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--adf-card-teaser-spotlight);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity var(--adf-card-transition);
}
.adf-card--teaser:hover::after { opacity: 1; }
.adf-card--teaser > * { position: relative; z-index: 1; }

.adf-card--index {
  --adf-card-bg:    var(--adf-card-index-bg);
  --adf-card-fg:    var(--adf-card-index-fg);
  --adf-card-bd:    var(--adf-card-index-bd);
  --adf-card-bg-h:  var(--adf-card-index-bg-h);
  --adf-card-fg-h:  var(--adf-card-index-fg-h);
  --adf-card-bd-h:  var(--adf-card-index-bd-h);
}

.adf-card--comparison {
  --adf-card-bg:    var(--adf-card-comparison-bg);
  --adf-card-fg:    var(--adf-card-comparison-fg);
  --adf-card-bd:    var(--adf-card-comparison-bd);
  --adf-card-bg-h:  var(--adf-card-comparison-bg-h);
  --adf-card-fg-h:  var(--adf-card-comparison-fg-h);
  --adf-card-bd-h:  var(--adf-card-comparison-bd-h);
  flex-direction: row;  /* dense horizontal layout */
  align-items: center;
  padding: 0.6rem 0.85rem;
  --adf-card-lift: translateY(0);  /* dense rows don't lift */
}

.adf-card--media {
  --adf-card-bg:    var(--adf-card-media-bg);
  --adf-card-fg:    var(--adf-card-media-fg);
  --adf-card-bd:    var(--adf-card-media-bd);
  --adf-card-bg-h:  var(--adf-card-media-bg-h);
  --adf-card-fg-h:  var(--adf-card-media-fg-h);
  --adf-card-bd-h:  var(--adf-card-media-bd-h);
  padding: 0;
  overflow: hidden;
}
.adf-card--media:hover { transform: scale(1.02); }
.adf-card--media .adf-card__thumbnail {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: inherit;
}

.adf-card--utility {
  --adf-card-bg:    var(--adf-card-utility-bg);
  --adf-card-fg:    var(--adf-card-utility-fg);
  --adf-card-bd:    var(--adf-card-utility-bd);
  --adf-card-bg-h:  var(--adf-card-utility-bg-h);
  --adf-card-fg-h:  var(--adf-card-utility-fg-h);
  --adf-card-bd-h:  var(--adf-card-utility-bd-h);
  border-style: dashed;
  --adf-card-lift: translateY(-1px);  /* quieter hover */
}

.adf-card--skeleton {
  background: var(--adf-card-skeleton-bg);
  border: none;
  pointer-events: none;
  overflow: hidden;
}
.adf-card--skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--adf-card-skeleton-sheen), transparent);
  animation: adf-card-shimmer 1.4s linear infinite;
}
@keyframes adf-card-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ----------------------------------------------------------------
   Motion / state modifiers
   ---------------------------------------------------------------- */

.adf-card--no-lift:hover,
.adf-card--no-lift:focus-within { transform: none; }

/* Featured state — accent gradient top strip */
.adf-card--featured::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--adf-gradient);
  border-radius: var(--adf-card-radius) var(--adf-card-radius) 0 0;
  pointer-events: none;
}

/* ----------------------------------------------------------------
   Reduced-motion respect
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .adf-card { transition: none; }
  .adf-card:hover, .adf-card:focus-within { transform: none; }
  .adf-card--teaser::after { transition: none; }
  .adf-card--skeleton::after { animation: none; }
}

/* ----------------------------------------------------------------
   TODO after migrations land + verified:
   - Port .hp-listing--view-block hover + featured-image styling as
     .adf-card--listing component hooks (HivePress DOM compat layer)
   - Port .adf-skill-card spotlight + accent strip as .adf-card.adf-skill-card
     overrides
   - Port .adf-stack-teaser__card 2-col grid + chip row as
     .adf-card--teaser compositional helpers
   - Delete ~2,600 lines of legacy card CSS in aidiveforge-2026.css,
     ai-background.css, hivepress-dark.css, and inline PHP <style> blocks
   ---------------------------------------------------------------- */