/* assets/css/v2/components-cards.css — Buttons, chips and article cards of the news skin (aspect-ratio media, text placeholder, stretched title link)
   keywords: card, btn, chip, aspect-ratio, placeholder, CLS, 44px targets, logical properties, hover without transform
   Needs tokens-news.css and base.css. Hover changes colour only: no transform, opacity or animation, so no card can ever disturb an ad. */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--sp-2) var(--sp-5);
  border: 2px solid var(--c-text); border-radius: var(--radius);
  font-weight: var(--fw-strong); text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.btn--primary:hover { background: var(--c-brand-strong); border-color: var(--c-brand-strong); color: var(--c-brand-ink); }
.btn--ghost { background: transparent; color: var(--c-text); }
.btn--ghost:hover { background: var(--c-text); color: var(--c-bg); }
.btn--light { background: var(--c-bg); border-color: var(--c-bg); color: var(--c-text); }
.btn--light:hover { background: var(--c-brand-soft); border-color: var(--c-brand-soft); color: var(--c-text); }
.btn:disabled { cursor: wait; background: var(--c-muted); border-color: var(--c-muted); color: var(--c-bg); }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-1) var(--sp-4);
  border: 1px solid var(--c-text); border-radius: 999px;
  color: var(--c-text); font-weight: var(--fw-strong); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip span { color: var(--c-brand); font-size: var(--fs-sm); }
.chip:hover { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.chip:hover span { color: var(--c-brand-ink); }

/* ---- card ---- */
.card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.card-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--c-brand-soft); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-ph {
  display: grid; place-items: center; width: 100%; height: 100%; padding: var(--sp-4);
  background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(36, 51, 255, .1) 11px 12px), var(--c-brand-soft);
  color: var(--c-brand); font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--fs-h3); line-height: 1.2; text-align: center; text-wrap: balance;
}
.card-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.card-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.5; }
.card-cat { color: var(--c-brand); font-weight: var(--fw-strong); }
.card-title { font-size: var(--fs-lg); line-height: 1.35; overflow-wrap: anywhere; }
.card-title a { color: var(--c-text); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; }   /* whole card is one tap target */
.card:hover .card-title a, .card-title a:focus-visible { color: var(--c-brand); text-decoration: underline; }
.card-excerpt { color: var(--c-muted); font-size: 1rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.card--lead .card-title { font-size: var(--fs-h2); line-height: 1.2; }

/* keyboard focus: the stretched link outlines the whole card */
.card-title a:focus-visible { outline: none; }
.card-title a:focus-visible::after { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.btn:focus-visible, .chip:focus-visible { outline-offset: 3px; }

/* compact: phones show a square thumbnail (96px) beside meta and title, so lists stay short */
@media (max-width: 599px) {
  .card--compact { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
  .card--compact .card-media { flex: 0 0 96px; aspect-ratio: 1 / 1; }
  .card--compact .card-title { font-size: 1.0625rem; }
  .card--compact .card-body { gap: var(--sp-1); }
  .card--compact .card-excerpt { display: none; }
  /* a 96px box cannot hold a category name: show only its first letter */
  .card--compact .card-ph { font-size: 0; padding: 0; }
  .card--compact .card-ph::first-letter { font-size: 2.4rem; text-transform: uppercase; }
}

/* ---- breadcrumbs (article, listings) ---- */
.pg-crumbs { padding-block: var(--sp-4) 0; font-size: var(--fs-sm); }
.pg-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); list-style: none; }
.pg-crumbs li { display: inline-flex; align-items: center; min-block-size: 32px; min-inline-size: 0; }
.pg-crumbs li + li::before { content: "/"; margin-inline-end: var(--sp-2); color: var(--c-muted); }
.pg-crumbs a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; color: var(--c-brand); font-weight: var(--fw-strong); text-decoration: none; }
.pg-crumbs span { color: var(--c-muted); overflow-wrap: anywhere; }