/*
 * card.css — the blog card atom + the grid that holds them.
 *
 * Variants:
 *   .card--default   (grid cards on home/tag/search/related)
 *   .card--featured  (the single large card on the home "Featured" row)
 *   .card--compact   (small stacked cards next to a featured one)
 *
 * Equal-height contract: the parent grid uses `1fr` columns and default
 * `stretch` alignment, which already makes cells the same height. We then
 * (a) let the body grow via `flex: 1`, and (b) reserve a fixed-height
 * zone for the 3-line subtitle, so short copy can't collapse a card.
 */

/* ---------- Card grid (shared by home, tag, search, related) ---------- */

.card-grid {
  display: grid;
  gap: var(--space-5);
}

.card-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .card-grid--3 { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;               /* inherit grid cell height */
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
}

/* ---------- Media (thumbnail + tag overlay) ---------- */

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface);
}

/* Placeholder gradient keyed off --hue (set inline from blog.id). Sits
   under the <img> so a broken URL still renders a pleasant tile. */
.card__thumb {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg,
      hsl(var(--hue, 210deg) 45% 40%) 0%,
      hsl(calc(var(--hue, 210deg) + 45deg) 55% 65%) 100%);
}

.card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease-out;
}
.card:hover .card__img { transform: scale(1.04); }

/* Stack of up to 3 glass badges in the top-left corner of the thumbnail.
   Wraps to a second row on the narrow compact variant rather than forcing
   horizontal overflow. */
.card .card__tags {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);     /* lets the row wrap cleanly on narrow tiles */
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  pointer-events: none;      /* badges don't intercept the <a>'s click */
}

/* Glass badge — semi-transparent + backdrop blur, one uniform style. */
.tag-badge--glass {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  color: var(--color-ink);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Smaller variant used when stacking multiple tags on a card. */
.tag-badge--sm {
  padding: 3px 8px;
  font-size: 10px;            /* slightly tighter than --type-xs */
  letter-spacing: 0.04em;
}

/* ---------- Body ---------- */

.card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;                    /* push footer to the bottom */
}

.card__title {
  font-family: var(--font-serif);
  font-size: var(--type-xl);
  line-height: var(--leading-snug);
  margin: 0;

  /* 2-line clamp so a very long title can't push every card taller. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--type-xl) * var(--leading-snug) * 2);
}
.card__title a {
  color: var(--color-ink);
}
.card__title a:hover { color: var(--color-brand); }

.card__subtitle {
  color: var(--color-ink-muted);
  font-size: var(--type-sm);
  line-height: 1.55;
  margin: 0;

  /* Three-line clamp + reserved height so every card has identical body
     geometry, regardless of subtitle length. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--type-sm) * 1.55 * 3);
}

.card__meta {
  font-size: var(--type-xs);
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: var(--space-2) 0 0;
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}
.card__meta-sep { opacity: .6; }

.card__more {
  margin-top: auto;           /* anchor to bottom of body */
  padding-top: var(--space-3);
  font-size: var(--type-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  border-top: 1px solid var(--color-border);
  width: 100%;
}
.card__more:hover { color: var(--color-brand); }
.card__more svg {
  transition: transform var(--transition-base);
}
.card__more:hover svg { transform: translateX(3px); }

/* ---------- Featured variant (larger, used on home "Featured Blogs") --- */

/* 5/4 keeps the lead tile noticeably less rectangular than 4/3 so the
   image reads "almost square" beside the 3-tile stacked column on its
   right; the whole featured row is correspondingly a touch shorter. */
.card--featured .card__media { aspect-ratio: 5 / 4; }
.card--featured .card__title {
  font-size: var(--type-2xl);
  min-height: calc(var(--type-2xl) * var(--leading-snug) * 2);
}

/* ---------- Compact variant (row of 3 small cards next to the featured) - */

.card--compact {
  flex-direction: row;
  align-items: stretch;
}
.card--compact .card__media {
  aspect-ratio: 1;
  width: 40%;
  flex-shrink: 0;
}
.card--compact .card__body {
  padding: var(--space-4);
  gap: var(--space-1);        /* tighter stack when the row is shallow */
}
.card--compact .card__title {
  font-size: var(--type-lg);
  min-height: 0;              /* compact rows don't need reserved title space */
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
/* Show subtitle + Read-More on compact cards too, but with smaller
   type + a 2-line clamp so the row stays the right height alongside
   the big featured tile to its left. */
.card--compact .card__subtitle {
  font-size: var(--type-xs);
  line-height: 1.5;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: 0;              /* drop the reserved 3-line space */
}
.card--compact .card__more {
  padding-top: var(--space-2);
  font-size: var(--type-xs);
}

@media (max-width: 640px) {
  .card--compact { flex-direction: column; }
  .card--compact .card__media { width: 100%; aspect-ratio: 16 / 10; }
}