/**
 * Post Card Component - v3.2
 *
 * Estiliza o componente parts/loop-post-card.php.
 * Classe raiz: .focofy-post-card
 *
 * Diferenca de sec-blog-feed.css:
 *   - Este arquivo estiliza o CARD (componente reutilizavel)
 *   - sec-blog-feed.css estiliza o LAYOUT da secao (grid, header, CTA)
 *
 * @package FocofyFactory
 * @version 3.2
 */

/* ==================================================================
   BASE
   ================================================================== */

.focofy-post-card {
  display:        flex;
  flex-direction: column;
  background:     var(--card-bg);
  border:         1px solid var(--card-border);
  border-radius:  var(--card-radius);
  overflow:       hidden;
  transition:
    box-shadow   var(--card-transition) ease,
    transform    var(--card-transition) ease,
    border-color var(--card-transition) ease;
}

.focofy-post-card:hover {
  box-shadow:   var(--card-shadow-hover);
  transform:    translateY(-3px);
  border-color: var(--color-border-strong);
}

/* ==================================================================
   THUMBNAIL
   ================================================================== */

.focofy-post-card__media {
  display:    block;
  overflow:   hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-3);
  flex-shrink: 0;
}

.focofy-post-card__media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-slow) ease;
}

.focofy-post-card:hover .focofy-post-card__media img {
  transform: scale(1.04);
}

/* Fallback sem imagem */
.focofy-post-card__media:empty,
.focofy-post-card__media--fallback {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      180px;
  background:      color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-3));
}

/* ==================================================================
   BODY
   ================================================================== */

.focofy-post-card__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        var(--space-6);
  gap:            var(--space-3);
}

/* ==================================================================
   META - data e categoria
   ================================================================== */

.focofy-post-card__meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--font-size-xs);
  color:       var(--color-text-muted);
}

.focofy-post-card__meta .dot {
  color: color-mix(in srgb, var(--color-text-muted) 50%, transparent);
}

.focofy-post-card__meta a {
  color:      var(--color-accent);
  font-weight: var(--fw-medium);
  transition:  color var(--transition-fast);
}

.focofy-post-card__meta a:hover {
  color: var(--color-accent-hover);
}

/* ==================================================================
   TITULO
   ================================================================== */

.focofy-post-card__title {
  font-family:   var(--font-heading);
  font-weight:   var(--fw-bold);
  font-size:     var(--font-size-lg);
  line-height:   var(--lh-snug);
  color:         var(--color-heading);
  margin:        0;

  /* Limita a 3 linhas */
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.focofy-post-card__title a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.focofy-post-card__title a:hover {
  color: var(--color-accent);
}

/* ==================================================================
   EXCERPT
   ================================================================== */

.focofy-post-card__excerpt {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  line-height: var(--lh-normal);
  margin:      0;
  flex:        1;

  /* Limita a 3 linhas */
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* ==================================================================
   "LER MAIS" - link no final do card
   ================================================================== */

.focofy-post-card__read,
.focofy-postcard__read {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  font-size:       var(--font-size-sm);
  font-weight:     var(--fw-medium);
  color:           var(--color-accent);
  text-decoration: none;
  margin-top:      auto;
  padding-top:     var(--space-2);
  transition:      color var(--transition-fast), gap var(--transition-fast);
}

.focofy-post-card__read:hover,
.focofy-postcard__read:hover {
  color: var(--color-accent-hover);
  gap:   var(--space-2);
}

/* ==================================================================
   VARIANTE - post-card horizontal (lista)
   ================================================================== */

.focofy-post-card--horizontal {
  flex-direction: row;
}

.focofy-post-card--horizontal .focofy-post-card__media {
  width:        140px;
  min-width:    140px;
  aspect-ratio: auto;
}

.focofy-post-card--horizontal .focofy-post-card__body {
  padding: var(--space-4);
}

/* ==================================================================
   VARIANTE - featured (destaque, maior)
   ================================================================== */

.focofy-post-card--featured .focofy-post-card__title {
  font-size:          var(--font-size-xl);
  -webkit-line-clamp: 2;
}

.focofy-post-card--featured .focofy-post-card__excerpt {
  -webkit-line-clamp: 4;
}

/* ==================================================================
   POSTCARD - classe alternativa usada em algumas secoes (NRB)
   Mapeia para os mesmos estilos de post-card
   ================================================================== */

.focofy-postcard {
  display:        flex;
  flex-direction: column;
  background:     var(--card-bg);
  border:         1px solid var(--card-border);
  border-radius:  var(--card-radius);
  overflow:       hidden;
  transition:
    box-shadow   var(--card-transition) ease,
    transform    var(--card-transition) ease;
}

.focofy-postcard:hover {
  box-shadow: var(--card-shadow-hover);
  transform:  translateY(-3px);
}

.focofy-postcard__thumb {
  display:      block;
  overflow:     hidden;
  aspect-ratio: 16 / 9;
  background:   var(--color-surface-3);
}

.focofy-postcard__thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-slow) ease;
}

.focofy-postcard:hover .focofy-postcard__thumb img {
  transform: scale(1.04);
}

.focofy-postcard__thumb-fallback {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      160px;
  background:      color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-3));
}

.focofy-postcard__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        var(--space-5);
  gap:            var(--space-2);
}

.focofy-postcard__meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--font-size-xs);
  color:       var(--color-text-muted);
}

.focofy-postcard__dot {
  color: color-mix(in srgb, var(--color-text-muted) 40%, transparent);
}

.focofy-postcard__cat {
  color:       var(--color-accent);
  font-weight: var(--fw-medium);
}

.focofy-postcard__title {
  font-family:        var(--font-heading);
  font-weight:        var(--fw-bold);
  font-size:          var(--font-size-lg);
  line-height:        var(--lh-snug);
  color:              var(--color-heading);
  margin:             0;
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.focofy-postcard__title a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.focofy-postcard__title a:hover { color: var(--color-accent); }

.focofy-postcard__excerpt {
  font-size:          var(--font-size-sm);
  color:              var(--color-text-muted);
  line-height:        var(--lh-normal);
  margin:             0;
  flex:               1;
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* ==================================================================
   CTA "Ler artigo" no card
   ================================================================== */

.focofy-post__cta {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  margin-top:      auto;
  padding-top:     var(--space-3);
  font-size:       var(--font-size-sm);
  font-weight:     var(--fw-semibold);
  color:           var(--color-accent);
  text-decoration: none;
  transition:      color var(--transition-fast), gap var(--transition-fast);
  border-top:      1px solid var(--color-border-subtle);
}

.focofy-post__cta:hover {
  color: var(--color-accent-hover);
  gap:   var(--space-2);
}

/* ==================================================================
   Tempo de leitura no card
   ================================================================== */

.focofy-post__readtime {
  white-space: nowrap;
}

/* ==================================================================
   Badge de categoria sobre imagem (featured)
   ================================================================== */

.focofy-post__media {
  position: relative;
}

.focofy-post__badge {
  position:      absolute;
  bottom:        var(--space-3);
  left:          var(--space-3);
  background:    var(--color-accent);
  color:         #fff;
  font-size:     var(--font-size-xs);
  font-weight:   var(--fw-semibold);
  padding:       .2em .7em;
  border-radius: var(--radius-full);
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ==================================================================
   Fallback sem imagem (featured)
   ================================================================== */

.focofy-post__media-fallback {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  min-height:      260px;
  background:      color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-3));
  font-size:       4rem;
  color:           var(--color-accent);
  opacity:         0.5;
}

/* ==================================================================
   Paginacao com texto legivel
   ================================================================== */

.focofy-blog__pagination .page-numbers {
  padding:       var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size:     var(--font-size-sm);
  font-weight:   var(--fw-medium);
  transition:    background var(--transition-fast);
}

.focofy-blog__pagination .page-numbers.current {
  background: var(--color-accent);
  color:      #fff;
}

.focofy-blog__pagination .page-numbers:hover:not(.current) {
  background: var(--color-surface-2);
}