/* ================================================================
   DataHints DS — Article Listing Cards
   Requires: tokens.css
   Optional: badges.css (for .dh-badge-* tags in card footers)
   ================================================================ */

/* ── Grid Layouts ─────────────────────────────────────────────── */

.al-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.al-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

/* 1 featured card (left, spans 2 rows) + 2 compact cards (right column) */
.al-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-4);
}
.al-featured-grid > .al-card--featured {
  grid-row: 1 / 3;
}

.al-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ── Base Article Card ────────────────────────────────────────── */

.al-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    background var(--ease-fast),
    border-color var(--ease-fast),
    box-shadow var(--ease-fast),
    transform var(--ease-fast);
}

.al-card:hover {
  background: var(--bg-card-h);
  border-color: var(--border-a);
  box-shadow: var(--shadow-card-h), var(--shadow-glow);
  transform: translateY(-2px);
}

.al-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-color: var(--border-a);
}

/* ── Left Accent Strip ────────────────────────────────────────── */

.al-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
}

.al-card[data-accent="primary"]::before { background: var(--accent); }
.al-card[data-accent="fx"]::before      { background: var(--fx); }
.al-card[data-accent="insight"]::before { background: var(--insight); }
.al-card[data-accent="mint"]::before    { background: var(--mint); }
.al-card[data-accent="amber"]::before   { background: var(--micro-amber); }
.al-card[data-accent="coral"]::before   { background: var(--micro-coral); }
.al-card[data-accent="grad"]::before    { background: var(--grad-fx); }

/* ── Card Body ────────────────────────────────────────────────── */

.al-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-6);
}

/* ── Top Row: category eyebrow + read time ───────────────────── */

.al-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.al-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-3);
}

/* Eyebrow color follows accent */
.al-card[data-accent="primary"] .al-card__eyebrow { color: var(--accent-text); }
.al-card[data-accent="fx"]      .al-card__eyebrow { color: var(--fx-h); }
.al-card[data-accent="insight"] .al-card__eyebrow { color: var(--insight); }
.al-card[data-accent="mint"]    .al-card__eyebrow { color: var(--mint); }
.al-card[data-accent="amber"]   .al-card__eyebrow { color: var(--micro-amber-text); }
.al-card[data-accent="coral"]   .al-card__eyebrow { color: var(--micro-coral-text); }
.al-card[data-accent="grad"]    .al-card__eyebrow { color: var(--fx-h); }

.al-card__meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--fg-3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Title ───────────────────────────────────────────────────── */

.al-card__title {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--fg-heading);
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.005em;
}

/* ── Lead / Excerpt ──────────────────────────────────────────── */

.al-card__lead {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 var(--sp-5);
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Card Footer ─────────────────────────────────────────────── */

.al-card__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ── Tags Row ────────────────────────────────────────────────── */

.al-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ── Tool Logos Strip ────────────────────────────────────────── */

.al-card__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-s);
}

.al-tool-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.55;
  transition: opacity var(--ease-fast);
  flex: 0 0 auto;
}

.al-card:hover .al-tool-logo { opacity: 0.9; }

/* ── Featured Card ───────────────────────────────────────────── */

/* Gradient border replaces default border */
.al-card--featured {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--grad-fx) border-box;
  border-color: transparent;
}

/* Top bar instead of left strip */
.al-card--featured::before {
  inset: 0 0 auto 0;
  width: auto;
  height: 3px;
  background: var(--grad-fx) !important;
}

.al-card--featured .al-card__eyebrow { color: var(--fx-h); }

.al-card--featured .al-card__title {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.25;
  margin-bottom: var(--sp-4);
}

.al-card--featured .al-card__lead {
  -webkit-line-clamp: 4;
  font-size: 1rem;
  margin-bottom: var(--sp-6);
}

/* ── Compact Card (for side column in featured layout) ────────── */

.al-card--compact .al-card__body {
  padding: var(--sp-5);
}

.al-card--compact .al-card__title {
  font-size: 1rem;
  margin-bottom: var(--sp-2);
}

.al-card--compact .al-card__lead {
  font-size: 0.875rem;
  -webkit-line-clamp: 2;
  margin-bottom: var(--sp-4);
}

/* ── Horizontal Row Card ─────────────────────────────────────── */

.al-card--row {
  flex-direction: row;
  align-items: stretch;
  min-height: 90px;
}

.al-card--row .al-card__body {
  flex-direction: column;
  padding: var(--sp-4) var(--sp-6);
}

.al-card--row .al-card__top { margin-bottom: var(--sp-2); }

.al-card--row .al-card__title {
  font-size: 1rem;
  margin-bottom: var(--sp-2);
}

.al-card--row .al-card__lead {
  font-size: 0.875rem;
  -webkit-line-clamp: 2;
  margin-bottom: var(--sp-3);
}

.al-card--row .al-card__footer {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ── Accent Column Card ──────────────────────────────────────── */
/* Horizontal card with a tinted left column: category label + tool logos */

.al-card--col {
  flex-direction: row;
  align-items: stretch;
}

/* Suppress left strip; the colored column replaces it */
.al-card--col::before { display: none; }

.al-card__accent-col {
  width: 88px;
  flex: 0 0 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-3);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-s);
  gap: var(--sp-4);
}

/* Accent column bg + border tinted by accent */
.al-card--col[data-accent="primary"] .al-card__accent-col {
  background: var(--accent-sub);
  border-right-color: var(--accent-sub);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.al-card--col[data-accent="fx"] .al-card__accent-col {
  background: var(--fx-sub);
  border-color: color-mix(in srgb, var(--fx) 22%, transparent);
}
.al-card--col[data-accent="insight"] .al-card__accent-col {
  background: var(--insight-sub);
  border-color: color-mix(in srgb, var(--insight) 22%, transparent);
}
.al-card--col[data-accent="mint"] .al-card__accent-col {
  background: var(--mint-sub);
  border-color: color-mix(in srgb, var(--mint) 22%, transparent);
}
.al-card--col[data-accent="amber"] .al-card__accent-col {
  background: var(--micro-amber-sub);
  border-color: color-mix(in srgb, var(--micro-amber) 22%, transparent);
}
.al-card--col[data-accent="coral"] .al-card__accent-col {
  background: var(--micro-coral-sub);
  border-color: color-mix(in srgb, var(--micro-coral) 22%, transparent);
}

/* Vertical category label */
.al-accent-col__label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  line-height: 1;
  color: var(--fg-3);
}

.al-card--col[data-accent="primary"] .al-accent-col__label { color: var(--accent-text); }
.al-card--col[data-accent="fx"]      .al-accent-col__label { color: var(--fx-h); }
.al-card--col[data-accent="insight"] .al-accent-col__label { color: var(--insight); }
.al-card--col[data-accent="mint"]    .al-accent-col__label { color: var(--mint); }
.al-card--col[data-accent="amber"]   .al-accent-col__label { color: var(--micro-amber-text); }
.al-card--col[data-accent="coral"]   .al-accent-col__label { color: var(--micro-coral-text); }

/* Tool logos stacked in the accent column */
.al-accent-col__logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.al-tool-logo--col {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity var(--ease-fast);
  flex: 0 0 auto;
}

.al-card:hover .al-tool-logo--col { opacity: 1; }

/* ── Page Layout with Filter Sidebar ────────────────────────── */
/* Two-column: article list on left, sticky filter on right      */

.al-page-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: var(--sp-10);
  align-items: start;
}

/* Page-level heading: "Все статьи [18]" */
.al-page-heading {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--fg-heading);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-5);
}
.al-page-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--fg-3);
  margin-left: var(--sp-2);
  letter-spacing: 0;
}

/* ── Filter Panel ────────────────────────────────────────────── */

.al-filter {
  position: sticky;
  top: var(--sp-8);
}

.al-filter__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  margin-bottom: var(--sp-3);
  display: block;
}

.al-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-s);
}

.al-filter__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-s);
  cursor: pointer;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1;
  transition: color var(--ease-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.al-filter__item:hover { color: var(--fg); }

.al-filter__item-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.al-filter__prefix {
  color: var(--fg-3);
  transition: color var(--ease-fast);
  font-size: 0.875rem;
  line-height: 1;
}

.al-filter__count {
  font-size: 0.625rem;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

/* Active filter item */
.al-filter__item.is-active {
  color: var(--accent-text);
}
.al-filter__item.is-active .al-filter__prefix {
  color: var(--accent-text);
}
.al-filter__item.is-active .al-filter__count {
  color: var(--accent-text);
  opacity: 0.7;
}

/* Hidden card (filtered out) */
.al-card.is-hidden {
  display: none;
}

/* Empty state when no results */
.al-filter-empty {
  padding: var(--sp-8) 0;
  font-size: 0.875rem;
  color: var(--fg-3);
  display: none;
}
.al-filter-empty.is-visible { display: block; }

/* ── Responsive: filter collapses below list on mobile ────────── */
@media (max-width: 768px) {
  .al-page-layout {
    grid-template-columns: 1fr;
  }
  .al-filter {
    position: static;
    order: -1; /* filter above list on mobile */
  }
  .al-filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    border-top: none;
  }
  .al-filter__item {
    border-bottom: none;
    border: 1px solid var(--border-s);
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
  }
  .al-filter__item.is-active {
    background: var(--accent-sub);
    border-color: var(--border-a);
  }
  .al-filter__prefix { display: none; }
}

/* ── Feed Filter (horizontal, above grid) ────────────────────── */

.al-feed-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.al-feed-filter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.al-feed-filter .al-filter__item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 10px;
  border: 1px solid var(--border-s);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
  cursor: pointer;
  user-select: none;
  transition: color var(--ease-base), border-color var(--ease-base), background var(--ease-base);
}

.al-feed-filter .al-filter__item:hover {
  color: var(--fg);
  border-color: var(--border);
}

.al-feed-filter .al-filter__item.is-active {
  color: var(--accent-text);
  border-color: var(--border-a);
  background: var(--accent-sub);
}

.al-feed-filter .al-filter__prefix { display: none; }

.al-feed-filter .al-filter__count {
  opacity: 0.5;
}

/* ── Mosaic Grid ─────────────────────────────────────────────── */
/* 3-col base; cards with .al-card--vis span 2 cols and get a cover */

.al-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}

/* In mosaic, vis card is horizontal: cover left, body right */
.al-mosaic .al-card--vis {
  grid-column: span 2;
  flex-direction: row;
}

/* Re-enable left strip (hidden on standalone vis cards) */
.al-mosaic .al-card--vis::before {
  display: block;
}

/* Cover fills full card height in horizontal layout */
.al-mosaic .al-card--vis .al-card__cover {
  aspect-ratio: auto;
  width: 45%;
  flex-shrink: 0;
  min-height: 200px;
}

/* Top accent bar not needed in horizontal mode (left strip takes over) */
.al-mosaic .al-card--vis .al-card__cover::before {
  display: none;
}

/* ── Mosaic-2 Grid ───────────────────────────────────────────── */
/* 2-col base; vis cards span full row (2 cols) horizontally       */

.al-mosaic-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}

.al-mosaic-2 .al-card--vis {
  grid-column: span 2;
  flex-direction: row;
}

.al-mosaic-2 .al-card--vis::before {
  display: block;
}

.al-mosaic-2 .al-card--vis .al-card__cover {
  aspect-ratio: auto;
  width: 42%;
  flex-shrink: 0;
  min-height: 220px;
}

.al-mosaic-2 .al-card--vis .al-card__cover::before {
  display: none;
}

/* ── Cover / Vis Card ─────────────────────────────────────────── */
/* Use when the article has a chart, screenshot, or illustration   */

/* No left strip — cover image is the visual anchor */
.al-card--vis::before { display: none; }

/* Thin top accent line sits above the cover */
.al-card--vis .al-card__cover {
  position: relative;
}
.al-card--vis .al-card__cover::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 1;
}
.al-card--vis[data-accent="primary"] .al-card__cover::before { background: var(--accent); }
.al-card--vis[data-accent="fx"]      .al-card__cover::before { background: var(--fx); }
.al-card--vis[data-accent="insight"] .al-card__cover::before { background: var(--insight); }
.al-card--vis[data-accent="mint"]    .al-card__cover::before { background: var(--mint); }
.al-card--vis[data-accent="amber"]   .al-card__cover::before { background: var(--micro-amber); }
.al-card--vis[data-accent="coral"]   .al-card__cover::before { background: var(--micro-coral); }
.al-card--vis[data-accent="grad"]    .al-card__cover::before { background: var(--grad-fx); }

/* Cover image container */
.al-card__cover {
  aspect-ratio: 5 / 2;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-elevated);
}

.al-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ease-base);
}

@media (prefers-reduced-motion: no-preference) {
  .al-card--vis:hover .al-card__cover img {
    transform: scale(1.03);
  }
}

/* Gradient placeholder — used when no real image is available */
.al-card__cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  /* Fallback solid bg first, then gradient */
  background: var(--bg-elevated);
}

.al-card--vis[data-accent="primary"] .al-card__cover-placeholder {
  background: var(--accent-sub);
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 18%, var(--bg-card)) 0%, var(--bg-elevated) 100%);
}
.al-card--vis[data-accent="fx"] .al-card__cover-placeholder {
  background: var(--fx-sub);
  background: linear-gradient(140deg, color-mix(in srgb, var(--fx) 16%, var(--bg-card)) 0%, var(--bg-elevated) 100%);
}
.al-card--vis[data-accent="insight"] .al-card__cover-placeholder {
  background: var(--insight-sub);
  background: linear-gradient(140deg, color-mix(in srgb, var(--insight) 14%, var(--bg-card)) 0%, var(--bg-elevated) 100%);
}
.al-card--vis[data-accent="mint"] .al-card__cover-placeholder {
  background: var(--mint-sub);
  background: linear-gradient(140deg, color-mix(in srgb, var(--mint) 12%, var(--bg-card)) 0%, var(--bg-elevated) 100%);
}
.al-card--vis[data-accent="amber"] .al-card__cover-placeholder {
  background: var(--micro-amber-sub);
  background: linear-gradient(140deg, color-mix(in srgb, var(--micro-amber) 14%, var(--bg-card)) 0%, var(--bg-elevated) 100%);
}
.al-card--vis[data-accent="coral"] .al-card__cover-placeholder {
  background: var(--micro-coral-sub);
  background: linear-gradient(140deg, color-mix(in srgb, var(--micro-coral) 14%, var(--bg-card)) 0%, var(--bg-elevated) 100%);
}

/* Mini chart SVG inside placeholder */
.al-cover-chart {
  width: 100%;
  max-width: 320px;
  height: auto;
  opacity: 0.55;
  transition: opacity var(--ease-fast);
}
.al-card--vis:hover .al-cover-chart { opacity: 0.8; }

/* Chart color follows accent */
.al-card--vis[data-accent="primary"] .al-cover-chart { color: var(--accent); }
.al-card--vis[data-accent="fx"]      .al-cover-chart { color: var(--fx); }
.al-card--vis[data-accent="insight"] .al-cover-chart { color: var(--insight); }
.al-card--vis[data-accent="mint"]    .al-cover-chart { color: var(--mint); }
.al-card--vis[data-accent="amber"]   .al-cover-chart { color: var(--micro-amber); }
.al-card--vis[data-accent="coral"]   .al-cover-chart { color: var(--micro-coral); }

/* Eyebrow color on vis cards */
.al-card--vis[data-accent="primary"] .al-card__eyebrow { color: var(--accent-text); }
.al-card--vis[data-accent="fx"]      .al-card__eyebrow { color: var(--fx-h); }
.al-card--vis[data-accent="insight"] .al-card__eyebrow { color: var(--insight); }
.al-card--vis[data-accent="mint"]    .al-card__eyebrow { color: var(--mint); }
.al-card--vis[data-accent="amber"]   .al-card__eyebrow { color: var(--micro-amber-text); }
.al-card--vis[data-accent="coral"]   .al-card__eyebrow { color: var(--micro-coral-text); }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 960px) {
  .al-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .al-featured-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .al-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* span-2 in 2-col = full width → revert to vertical layout */
  .al-mosaic .al-card--vis {
    flex-direction: column;
  }
  .al-mosaic .al-card--vis .al-card__cover {
    aspect-ratio: 5 / 2;
    width: 100%;
  }
  .al-mosaic .al-card--vis .al-card__cover::before {
    display: block;
  }
  .al-mosaic .al-card--vis::before {
    display: none;
  }
  /* vis cards stay span-2 in 2-col mosaic = full width */
  .al-featured-grid > .al-card--featured {
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .al-grid,
  .al-grid-2,
  .al-mosaic,
  .al-mosaic-2 {
    grid-template-columns: 1fr;
  }
  .al-mosaic .al-card--vis,
  .al-mosaic-2 .al-card--vis {
    grid-column: span 1;
    flex-direction: column;
  }
  .al-mosaic .al-card--vis .al-card__cover,
  .al-mosaic-2 .al-card--vis .al-card__cover {
    aspect-ratio: 5 / 2;
    width: 100%;
  }

  .al-card--row {
    flex-direction: column;
  }
  .al-card--row .al-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Accent column cards: collapse to stacked, show top bar */
  .al-card--col {
    flex-direction: column;
  }
  .al-card--col::before {
    display: block;
    inset: 0 0 auto 0;
    width: auto;
    height: 3px;
  }
  .al-card__accent-col {
    width: 100%;
    flex: none;
    height: auto;
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--sp-3) var(--sp-5);
    border-right: none;
    border-bottom: 1px solid var(--border-s);
    gap: var(--sp-4);
  }
  .al-accent-col__label {
    writing-mode: horizontal-tb;
    transform: none;
    letter-spacing: 0.10em;
  }
  .al-accent-col__logos {
    flex-direction: row;
    gap: var(--sp-3);
  }
}

/* ── Accessibility ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .al-card { transition: none; }
  .al-tool-logo,
  .al-tool-logo--col { transition: none; }
}