/* ============================================================
   Article card — below-image (Fase 1, 2026-08).
   Extraído do header.php inline pra parar de acumular dívida de CSS.
   Card CLARO via tokens (não #fff): imune à luminosidade das imagens
   do pipeline, e inverte sozinho se um dia entrar dark mode.
   Grid = categoria + título (clamp 3) + data curta. Sem excerpt/read-time.
   ============================================================ */

.a-card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.a-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(15,23,42,.12);
  border-color:color-mix(in srgb, var(--purple, #7c3aed) 40%, var(--border));
}
.a-card:focus-visible{
  outline:2px solid var(--purple, #7c3aed);
  outline-offset:2px;
}

/* imagem no topo, 16:9 cover */
.a-card__media{
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--surface2);
  position:relative;
}
.a-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.a-card:hover .a-card__media img{transform:scale(1.04);}
.a-card__media-fallback{
  width:100%;height:100%;
  background:linear-gradient(135deg, rgba(124,58,237,.18) 0%, rgba(168,85,247,.06) 100%);
}

/* corpo: categoria, título, data ancorada na base */
.a-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:7px;
  padding:13px 15px 14px;
}
.a-card__cat{
  color:var(--purple, #7c3aed);
  font-size:.67rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.a-card__title{
  margin:0;
  font-size:1rem;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--text);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-wrap:pretty;
}
.a-card__date{
  margin-top:auto;
  padding-top:3px;
  color:var(--text-muted);
  font-size:.78rem;
  font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion: reduce){
  .a-card{transition:none;}
  .a-card:hover{transform:none;}
  .a-card:hover .a-card__media img{transform:none;}
}

/* ============================================================
   Homepage hero — feature card + side list. Moved from header.php
   inline CSS (Fase 2.x) to finish the card-CSS extraction.
   ============================================================ */
.hero-section { padding: 48px 0; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: stretch;  /* sidebar column stretches to match the hero's height */
}
.hero-main {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}
.hero-main .hero-img,
.hero-main .hero-fallback {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.hero-main .hero-fallback {
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(168,85,247,0.06));
}
.hero-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
}
.hero-cat {
  color: var(--purple);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  width: fit-content;
}
.hero-title {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin: 0;
}
.hero-title a { color: var(--text); transition: color var(--transition); }
.hero-title a:hover { color: var(--purple); }
.hero-excerpt {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.95rem;
  max-width: 60ch;
}
.hero-meta { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.hero-sidebar { display: flex; flex-direction: column; gap: 12px; }
.hero-side-item {
  flex: 1 1 0;   /* the 5 items divide the sidebar height so it fills down to the hero */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition);
}
.hero-side-item:hover { border-color: rgba(155,143,232,0.3); }
.hero-side-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.hero-side-title {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.hero-side-title a { color: var(--text); transition: color var(--transition); }
.hero-side-title a:hover { color: var(--text); }
.hero-side-meta { font-size: 0.85rem; color: var(--text-muted); }

/* hero responsivo (movido dos @media compartilhados do header) */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr 280px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-sidebar { flex-direction: row; flex-wrap: wrap; }
  .hero-side-item { flex: 1 1 calc(50% - 6px); min-width: 0; }
}
@media (max-width: 600px) {
  .hero-sidebar { flex-direction: column; }
  .hero-side-item { flex: none; }
  .hero-title { font-size: 1.2rem; }
}