/* BR Times — Cards (card base, row, text, tags) (portado 1:1 do bundle BR Times Design System) */

/* ── Cards ────────────────────────────────────────── */
.brt-card { display:block; text-decoration:none; color:inherit; cursor:pointer; }
.brt-card__image { width:100%; aspect-ratio: 445/149; border-radius: 14px; background-color: var(--surface); overflow: hidden; }
.brt-card--feature-tall .brt-card__image { aspect-ratio: 406/228; }
.brt-card__image--hero { aspect-ratio: 715/402; }
.brt-card__image--secondary { aspect-ratio: 715/536; }
.brt-card__image-inner { width:100%; height:100%; background-size:cover; background-position:center; transform: scale(1); transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; }
.brt-card:hover .brt-card__image-inner { transform: scale(1.04); }
/* zoom handled via background-size above */

.brt-card__body { padding-top: 24px; display:flex; flex-direction:column; gap:12px; }
.brt-card__title { font-weight:700; font-size:20px; line-height:28px; color: var(--fg); margin:0; letter-spacing:-0.005em; }
.brt-card__title--xl { font-size: 28px; line-height: 1.25; }
.brt-card__title--sm { font-size: 14px; line-height: 23.4px; }
.brt-dek { font-size:15px; line-height:22.5px; color: var(--fg-muted); margin: 0; }

/* Row card (96px thumb left) — used in SecondaryFeatured side list */
.brt-card--row { display:grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--border); }
.brt-card--row:first-child { padding-top: 0; }
.brt-card--row:last-child { border-bottom: 0; }
.brt-card--row .brt-card__thumb { width:96px; height:96px; border-radius: 10px; background-color: var(--surface); overflow: hidden; flex-shrink: 0; }
.brt-card--row .brt-card__thumb-img { width:100%; height:100%; background-size:cover; background-position:center; transform: scale(1); transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; }
.brt-card--row:hover .brt-card__thumb-img { transform: scale(1.06); }
.brt-card--row .brt-card__body { padding-top: 0; gap: 8px; justify-content: center; }

/* Text card (eyebrow + title + date, no image) */
.brt-card--text { display:flex; flex-direction:column; gap:8px; padding: 20px 0; border-top: 1px solid var(--border); }
.brt-card--text .brt-card__title { font-size:16px; line-height:22.4px; }
.brt-card--text:first-child { border-top: 0; padding-top: 0; }

/* ── Card tag chips (3 tags + "…" overflow) ───────── */
.brt-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.brt-card__tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 9999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--fg-muted);
  font-size: 11px; line-height: 1; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.brt-card__tag:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.brt-card__tag--more {
  padding: 4px 10px 6px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--fg-muted); cursor: default;
}
.brt-card__tag--more:hover { background: transparent; border-color: var(--border); color: var(--fg-muted); }

/* Hero / secondary feature cards: slightly larger chips to balance the bigger type */
.brt-card--hero .brt-card__tag,
.brt-card--secondary .brt-card__tag {
  font-size: 12px; padding: 5px 12px;
}

/* Row card chips are tighter — meta is small and image is fixed */
.brt-card--row .brt-card__tags { margin-top: 6px; gap: 4px; }
.brt-card--row .brt-card__tag { font-size: 10px; padding: 3px 8px; }