/* CARTÕES-LINK DE FUNCIONALIDADES (compartilhado) (v0.45.0)
   Grade 3 x 2 de cartões-link: preto (PMS), papel e laranja (fechamento). */

.uos-fcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 24px);
}

.uos-fcard {
  display: flex;
  min-height: clamp(360px, 29vw, 420px);
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 2.8vw, 44px);
  border-radius: var(--hm-radius);
  background: var(--uos-paper);
  color: var(--uos-black);
  text-decoration: none;
  transition: background-color 350ms var(--uos-ease);
}

.uos-fcard--black { background: var(--uos-black); color: var(--uos-white); }
.uos-fcard--orange { background: var(--uos-orange); }

.uos-fcard__tag {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--uos-red);
}

.uos-fcard--black .uos-fcard__tag { color: var(--uos-orange); }
.uos-fcard--orange .uos-fcard__tag { color: var(--uos-black); }

.uos-main .uos-fcard h3 {
  margin: 18px 0 0;
  font-family: var(--uos-font-display);
  font-size: clamp(1.6rem, 2.1vw, 2.05rem);
  font-weight: 300;
  line-height: 1.15;
}

.uos-main .uos-fcard p {
  margin: 14px 0 0;
  color: var(--uos-gray-800);
  font-size: 1rem;
  line-height: 1.55;
}

.uos-main .uos-fcard--black p { color: rgba(255, 255, 255, 0.78); }
.uos-main .uos-fcard--orange p { color: var(--uos-black); }

.uos-main .uos-fcard .uos-fcard__topics {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--uos-line);
  font-size: 0.875rem;
  line-height: 1.55;
}

.uos-fcard--black .uos-fcard__topics { border-top-color: var(--uos-line-inverse); }
.uos-fcard--orange .uos-fcard__topics { border-top-color: rgba(0, 0, 0, 0.25); }

.uos-fcard__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--uos-red);
  font-size: 0.9375rem;
  font-weight: 600;
}

.uos-fcard--black .uos-fcard__more { color: var(--uos-orange); }
.uos-fcard--orange .uos-fcard__more { color: var(--uos-black); }

.uos-fcard__more svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 300ms var(--uos-ease);
}

.uos-fcard:focus-visible {
  outline: 2px solid var(--uos-focus);
  outline-offset: 3px;
}

@media (hover: hover) {
  a.uos-fcard:not(.uos-fcard--black):not(.uos-fcard--orange):hover { background: var(--uos-orange-15); }
  a.uos-fcard:hover .uos-fcard__more svg { transform: translateX(4px); }
}

/* Cartão sem link (apenas informativo): sem altura mínima e sem efeito de hover. */
.uos-fcard--static { min-height: 0; }
.uos-main .uos-fcard--static > p:nth-of-type(1) { margin-bottom: 24px; }
.uos-main .uos-fcard--static .uos-fcard__metric { margin-top: auto; }

/* Variante com quatro cartões na linha (menos altura). */
.uos-fcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uos-fcards--4 .uos-fcard { min-height: clamp(300px, 24vw, 360px); padding: clamp(24px, 2.2vw, 36px); }
.uos-main .uos-fcards--4 .uos-fcard h3 { font-size: clamp(1.35rem, 1.65vw, 1.7rem); }

/* Grade compacta: cartões só com a altura do conteúdo (precisa vir depois de --4). */
.uos-fcards--compact .uos-fcard { min-height: 0; }

/* Destaque numérico no rodapé do cartão (case ou sinal). */
.uos-main .uos-fcard .uos-fcard__metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--uos-line);
  font-size: 0.875rem;
  line-height: 1.5;
}

.uos-fcard--black .uos-fcard__metric { border-top-color: var(--uos-line-inverse); }
.uos-fcard--orange .uos-fcard__metric { border-top-color: rgba(0, 0, 0, 0.25); }

.uos-fcard__metric strong {
  color: var(--uos-black);
  font-family: var(--uos-font-display);
  font-size: clamp(1.4rem, 1.7vw, 1.7rem);
  font-weight: 300;
  line-height: 1.15;
}

.uos-fcard--black .uos-fcard__metric strong { color: var(--uos-orange); }

@media (max-width: 1100px) {
  .uos-fcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .uos-fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .uos-fcards,
  .uos-fcards--4 { grid-template-columns: minmax(0, 1fr); }
  .uos-fcard,
  .uos-fcards--4 .uos-fcard { min-height: 0; }
}