/*!
 * wpv-core — feature card grid for wpv-berlin.de
 * Adapted from the jdt-ui card system. Self-contained, theme-independent.
 * All selectors scoped under .wpv-cards / .wpv-card. Accent presets tuned to the
 * wpv palette (primary blue #2f7fd6). Light + dark via data-color-mode.
 */

/* ---- Container (query context + design tokens) ----------------------- */
.wpv-cards {
  --wpv-card-bg: #ffffff;
  --wpv-card-border: #e3e9ef;
  --wpv-card-radius: 14px;
  --wpv-card-pad: 28px;
  --wpv-gap: 24px;
  --wpv-title: #16323f;
  --wpv-subtitle: #50697a;
  --wpv-body: #2c4250;
  --wpv-divider: #eef2f6;
  --wpv-font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --wpv-mono: ui-monospace, "Roboto Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --wpv-cols-desktop: 3;
  --wpv-cols-tablet: 2;
  --wpv-cols-mobile: 1;

  display: block;
  container-type: inline-size;
  container-name: wpvcards;
  box-sizing: border-box;
}
.wpv-cards *, .wpv-cards *::before, .wpv-cards *::after { box-sizing: border-box; }

/* ---- Grid ------------------------------------------------------------ */
.wpv-cards__grid {
  display: grid;
  gap: var(--wpv-gap);
  align-items: stretch;
  grid-template-columns: repeat(var(--wpv-cols, var(--wpv-cols-mobile, 1)), minmax(0, 1fr));
}
.wpv-cards[data-gap="s"] { --wpv-gap: 16px; }
.wpv-cards[data-gap="l"] { --wpv-gap: 32px; }
.wpv-cards[data-align="top"] .wpv-cards__grid { align-items: start; }

@container wpvcards (min-width: 640px)  { .wpv-cards__grid { --wpv-cols: var(--wpv-cols-tablet, 2); } }
@container wpvcards (min-width: 1024px) { .wpv-cards__grid { --wpv-cols: var(--wpv-cols-desktop, 3); } }

@supports not (container-type: inline-size) {
  .wpv-cards__grid { --wpv-cols: var(--wpv-cols-desktop, 3); }
  @media (max-width: 1023px) { .wpv-cards__grid { --wpv-cols: var(--wpv-cols-tablet, 2); } }
  @media (max-width: 639px)  { .wpv-cards__grid { --wpv-cols: var(--wpv-cols-mobile, 1); } }
}

/* ---- Card ------------------------------------------------------------ */
.wpv-card {
  --wpv-accent: #2f7fd6;
  --wpv-tint: color-mix(in srgb, var(--wpv-accent) 10%, #fff);
  /* Darker for small accent text (subtitle, refs) on light backgrounds (>=4.5:1). */
  --wpv-accent-text: color-mix(in srgb, var(--wpv-accent) 62%, #16323f);

  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: var(--wpv-card-bg);
  border: 1px solid var(--wpv-card-border);
  border-radius: var(--wpv-card-radius);
  padding: var(--wpv-card-pad);
  color: var(--wpv-body);
  font-family: var(--wpv-font);
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.wpv-card:hover {
  border-color: color-mix(in srgb, var(--wpv-accent) 38%, var(--wpv-card-border));
  background-color: color-mix(in srgb, var(--wpv-accent) 4%, var(--wpv-card-bg));
}
a.wpv-card { color: var(--wpv-body); }
.wpv-card--linked { cursor: pointer; }
a.wpv-card:focus-visible { outline: 2px solid var(--wpv-accent); outline-offset: 2px; }

/* accent presets — tuned to the wpv palette */
.wpv-card--accent-wpv    { --wpv-accent: #2f7fd6; }
.wpv-card--accent-blue   { --wpv-accent: #2f7fd6; }
.wpv-card--accent-teal   { --wpv-accent: #14b8a6; }
.wpv-card--accent-amber  { --wpv-accent: #d3722b; }
.wpv-card--accent-orange { --wpv-accent: #d3722b; }
.wpv-card--accent-slate  { --wpv-accent: #64748b; }
.wpv-card--accent-green  { --wpv-accent: #1f9d72; }
.wpv-card--accent-sun    { --wpv-accent: #e8a32a; }
.wpv-card--accent-cyan   { --wpv-accent: #06b6d4; }

/* ---- Header (icon badge + titles) ------------------------------------ */
.wpv-card__head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }
.wpv-card__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--wpv-tint);
  color: var(--wpv-accent);
}
.wpv-card__icon svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wpv-card__titles { min-width: 0; padding-top: 2px; }
.wpv-card__title { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--wpv-title); letter-spacing: -.003em; }
.wpv-card__title a { color: inherit; text-decoration: none; }
.wpv-card__title a:hover { color: var(--wpv-accent-text); }
.wpv-card__subtitle { margin: 3px 0 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--wpv-subtitle); }

/* ---- Bullet list ----------------------------------------------------- */
.wpv-card__list { list-style: none; margin: 0 0 16px; padding: 0; }
.wpv-card__item {
  position: relative;
  padding: 8px 0 8px 17px;
  font-size: 13.5px; line-height: 1.4;
  color: var(--wpv-body);
}
.wpv-card__item + .wpv-card__item { border-top: 1px solid var(--wpv-divider); }
.wpv-card__item::before {
  content: "·";
  position: absolute; left: 2px; top: 6px;
  color: var(--wpv-accent); font-weight: 700; font-size: 17px; line-height: 1;
}

/* ---- Tag pill -------------------------------------------------------- */
.wpv-card__tags {
  margin-top: auto;
  align-self: flex-start;
  max-width: 100%;
  display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px;
  padding: 7px 11px;
  border-radius: 7px;
  background: var(--wpv-tint);
  color: var(--wpv-accent-text);
  font-family: var(--wpv-mono);
  font-size: 12px; line-height: 1.5;
}
.wpv-card__tag { white-space: nowrap; max-width: 100%; overflow-wrap: anywhere; }
.wpv-card__tag + .wpv-card__tag::before { content: "·"; margin: 0 7px; opacity: .5; }

/* ---- Reference / proof line ------------------------------------------ */
.wpv-card__ref {
  margin-top: 12px;
  font-size: 13px; line-height: 1.45;
  color: var(--wpv-subtitle);
}
.wpv-card__ref strong { color: var(--wpv-accent-text); font-weight: 600; }

/* ---- Dark mode ------------------------------------------------------- */
.wpv-cards[data-color-mode="dark"],
.wpv-cards[data-color-mode="auto"].wpv-is-dark {
  --wpv-card-bg: #16242c;
  --wpv-card-border: rgba(255, 255, 255, .08);
  --wpv-title: #eaf2f7;
  --wpv-subtitle: #a7bcc8;
  --wpv-body: #cdd9e1;
  --wpv-divider: rgba(255, 255, 255, .07);
}
.wpv-cards[data-color-mode="dark"] .wpv-card,
.wpv-cards[data-color-mode="auto"].wpv-is-dark .wpv-card {
  --wpv-tint: color-mix(in srgb, var(--wpv-accent) 20%, #16242c);
  --wpv-accent-text: color-mix(in srgb, var(--wpv-accent) 62%, #eaf2f7);
}
.wpv-cards[data-color-mode="dark"] .wpv-card__icon,
.wpv-cards[data-color-mode="auto"].wpv-is-dark .wpv-card__icon {
  color: color-mix(in srgb, var(--wpv-accent) 82%, #fff);
}
@media (prefers-color-scheme: dark) {
  .wpv-cards[data-color-mode="auto"] {
    --wpv-card-bg: #16242c;
    --wpv-card-border: rgba(255, 255, 255, .08);
    --wpv-title: #eaf2f7;
    --wpv-subtitle: #a7bcc8;
    --wpv-body: #cdd9e1;
    --wpv-divider: rgba(255, 255, 255, .07);
  }
  .wpv-cards[data-color-mode="auto"] .wpv-card {
    --wpv-tint: color-mix(in srgb, var(--wpv-accent) 20%, #16242c);
    --wpv-accent-text: color-mix(in srgb, var(--wpv-accent) 62%, #eaf2f7);
  }
  .wpv-cards[data-color-mode="auto"] .wpv-card__icon { color: color-mix(in srgb, var(--wpv-accent) 82%, #fff); }
}

/* ---- Fallback for browsers without color-mix() ----------------------- */
@supports not (color: color-mix(in srgb, red, blue)) {
  .wpv-card--accent-wpv,
  .wpv-card--accent-blue   { --wpv-tint: #e6f1fb; --wpv-accent-text: #1f5fa6; }
  .wpv-card--accent-teal   { --wpv-tint: #f0fdfa; --wpv-accent-text: #0f766e; }
  .wpv-card--accent-amber,
  .wpv-card--accent-orange { --wpv-tint: #fbf0e6; --wpv-accent-text: #9c531f; }
  .wpv-card--accent-slate  { --wpv-tint: #f1f5f9; --wpv-accent-text: #475569; }
  .wpv-card--accent-green  { --wpv-tint: #e9f8f2; --wpv-accent-text: #157a52; }
  .wpv-card--accent-sun    { --wpv-tint: #fcf3e0; --wpv-accent-text: #8a5a12; }
  .wpv-card--accent-cyan   { --wpv-tint: #ecfeff; --wpv-accent-text: #0e7490; }
}

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wpv-card { transition: none; }
  .wpv-card:hover { transform: none; }
}