/* cards.css — estilos complementares de cards */

/* ============================================================
   LAZY LOAD — fade-in suave ao carregar imagem
   ============================================================ */
.ppnv2-card__thumb,
img[loading="lazy"] {
    transition: opacity .4s ease, transform var(--dur-slow) var(--ease-out);
}
img[loading="lazy"]:not(.is-loaded) { opacity: .7; }
img[loading="lazy"].is-loaded { opacity: 1; }

.ppnv2-card__thumb:not(.is-loaded) { opacity: .85; }
.ppnv2-card__thumb.is-loaded { opacity: 1; }

/* ============================================================
   SCROLL REVEAL — seções com data-reveal
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   META ICONS — ícones nos cards de artigos
   ============================================================ */
.ppnv2-meta-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}
.ppnv2-meta-icon svg {
    flex-shrink: 0;
    vertical-align: middle;
    margin-bottom: 1px;
}

/* ============================================================
   Card hover glow no índigo
   ============================================================ */
.ppnv2-card:hover {
    border-color: rgba(36,29,121,.15);
}

/* Card de destaque 1/3 no grid lead */
.ppnv2-grid--lead .ppnv2-card:first-child {
    grid-row: span 2;
}
.ppnv2-grid--lead .ppnv2-card:first-child .ppnv2-card__thumb-wrap {
    aspect-ratio: 3/4;
}
.ppnv2-grid--lead .ppnv2-card:first-child .ppnv2-card__title {
    font-size: var(--text-2xl);
    -webkit-line-clamp: 5;
}

/* Número do card (ranking) */
.ppnv2-card__rank {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    background: var(--clr-indigo);
    color: var(--clr-white);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--fw-black);
    width: 40px; height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    line-height: 1;
}

/* Grid 4 colunas responsivo */
@media (max-width: 1100px) {
    .ppnv2-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ppnv2-grid--4,
    .ppnv2-grid--3,
    .ppnv2-grid--2 { grid-template-columns: 1fr; }
    .ppnv2-grid--lead { grid-template-columns: 1fr; }
    .ppnv2-grid--lead .ppnv2-card:first-child { grid-row: auto; }
    .ppnv2-grid--lead .ppnv2-card:first-child .ppnv2-card__thumb-wrap { aspect-ratio: 16/9; }
}

/* Card skeleton loading (placeholder) */
.ppnv2-card--skeleton {
    pointer-events: none;
}
.ppnv2-card--skeleton .ppnv2-card__thumb-wrap,
.ppnv2-card--skeleton .ppnv2-card__title,
.ppnv2-card--skeleton .ppnv2-card__excerpt,
.ppnv2-card--skeleton .ppnv2-card__meta {
    background: linear-gradient(90deg, var(--clr-gray-100) 25%, var(--clr-gray-200) 50%, var(--clr-gray-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-md);
    color: transparent;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   HOVER ZOOM — efeito de zoom leve nas imagens dos cards
   ============================================================ */
.ppnv2-card-img-wrap {
    overflow: hidden;
    border-radius: inherit;
}
.ppnv2-card-img-wrap img,
a[href] div[style*="overflow: hidden"] > img,
a[href] div[style*="overflow:hidden"] > img {
    transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .4s ease !important;
}
a[href]:hover div[style*="overflow: hidden"] > img,
a[href]:hover div[style*="overflow:hidden"] > img,
.ppnv2-card-img-wrap:hover img {
    transform: scale(1.05) !important;
}