/* =========================================
   Relatórios – Frontend CSS (ASKAD Theme)
   Paleta: Vermelho #d91414 · Preto #0d0d0d · Dourado #ffcc00
   ========================================= */

/*
 * Variáveis definidas em :root para ficarem disponíveis
 * em TODOS os elementos do plugin (incluindo o botão
 * "Carregar mais" que fica fora do .relatorios-wrapper).
 */
:root {
    --rel-primary:    hsl(0, 84%, 50%);
    --rel-accent:     hsl(45, 100%, 51%);
    --rel-card:       hsl(0, 0%, 8%);
    --rel-fg:         hsl(0, 0%, 98%);
    --rel-muted:      hsl(0, 0%, 65%);
    --rel-border:     hsl(0, 0%, 20%);
    --rel-primary-10: hsla(0, 84%, 50%, .10);
    --rel-primary-20: hsla(0, 84%, 50%, .20);
    --rel-primary-40: hsla(0, 84%, 50%, .40);
}

/* ── Wrapper / Grid ───────────────────────── */
.relatorios-wrapper {
    display: grid !important;
    gap: 24px !important;
    margin: 24px 0 !important;
}

.relatorios-cols-1 { grid-template-columns: 1fr !important; }
.relatorios-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.relatorios-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.relatorios-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* ── Card ─────────────────────────────────── */

/*
 * !important nos itens críticos impede que o CSS do tema
 * (ex: .entry-content article { background: white; color: #111 })
 * sobrescreva a paleta do plugin.
 */
.relatorio-card {
    background: linear-gradient(
        150deg,
        var(--rel-primary-10) 0%,
        var(--rel-card) 45%
    ) !important;
    border: 1px solid var(--rel-border) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow:
        0 2px 8px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
    transition:
        box-shadow   .25s ease,
        transform    .25s ease,
        border-color .25s ease !important;
    position: relative !important;
}

/* Linha gradiente no topo — aparece no hover */
.relatorio-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--rel-primary) 0%, var(--rel-accent) 100%);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 2;
    pointer-events: none;
}

.relatorio-card:hover {
    box-shadow:
        0 12px 40px rgba(0,0,0,.65),
        0 0 0 1px var(--rel-primary),
        0 0 32px var(--rel-primary-20) !important;
    transform: translateY(-5px) !important;
    border-color: var(--rel-primary) !important;
}

.relatorio-card:hover::before {
    opacity: 1;
}

/* ── Imagem ───────────────────────────────── */
.relatorio-card .relatorio-card__imagem {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: hsl(0, 0%, 11%) !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

/* Gradiente escurecedor na base da imagem */
.relatorio-card .relatorio-card__imagem::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(to top, var(--rel-card) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.relatorio-card .relatorio-card__imagem a {
    display: block;
    width: 100%;
    height: 100%;
}

.relatorio-card .relatorio-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.relatorio-card:hover .relatorio-thumb {
    transform: scale(1.06);
}

/* ── Placeholder (sem thumbnail) ─────────── */
.relatorio-card .relatorio-card__placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: hsl(0, 0%, 10%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.relatorio-card .relatorio-card__placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--rel-primary-10) 0%, transparent 60%);
}

.relatorio-card .relatorio-card__placeholder svg {
    color: var(--rel-primary) !important;
    fill: none !important;
    opacity: .35;
    width: 52px;
    height: 52px;
    position: relative;
    z-index: 1;
    transition: opacity .25s ease, transform .25s ease;
}

.relatorio-card:hover .relatorio-card__placeholder svg {
    opacity: .6;
    transform: scale(1.08);
}

/* ── Corpo ────────────────────────────────── */
.relatorio-card .relatorio-card__corpo {
    padding: 20px 22px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 !important;
    background: transparent !important;
}

/* ── Data ─────────────────────────────────── */
.relatorio-card .relatorio-card__data {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--rel-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .9px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.relatorio-card .relatorio-card__data svg {
    color: var(--rel-primary) !important;
    fill: none !important;
    flex-shrink: 0;
}

/* ── Título ───────────────────────────────── */
.relatorio-card .relatorio-card__titulo {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--rel-fg) !important;
    margin: 0 !important;
    line-height: 1.45 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ── Descrição ────────────────────────────── */
.relatorio-card .relatorio-card__descricao {
    font-size: 14px !important;
    color: var(--rel-muted) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex: 1 !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ── Divisor ──────────────────────────────── */
.relatorio-card .relatorio-card__divider {
    height: 1px !important;
    background: var(--rel-border) !important;
    margin: 2px 0 !important;
    border: none !important;
}

/* ── Botão "Acessar" ──────────────────────── */
.relatorio-card .relatorio-card__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 4px !important;
    padding: 9px 18px !important;
    background: var(--rel-primary) !important;
    color: var(--rel-fg) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    align-self: flex-start !important;
    letter-spacing: .2px !important;
    transition:
        background .2s ease,
        box-shadow .2s ease,
        transform  .2s ease !important;
}

.relatorio-card .relatorio-card__btn:hover {
    background: hsl(0, 84%, 42%) !important;
    color: var(--rel-fg) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 18px var(--rel-primary-40) !important;
    transform: translateY(-1px) !important;
}

.relatorio-card .relatorio-card__btn svg {
    transition: transform .2s ease;
    flex-shrink: 0;
    fill: none !important;
    color: var(--rel-fg) !important;
}

.relatorio-card .relatorio-card__btn:hover svg {
    transform: translateX(3px);
}

/* ── Vazio ────────────────────────────────── */
.relatorios-vazio {
    color: var(--rel-muted);
    font-style: italic;
    text-align: center;
    padding: 48px 0;
}

/* =========================================
   Load More
   ========================================= */
.relatorios-loadmore-wrap {
    text-align: center;
    margin-top: 36px;
}

.relatorios-loadmore-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 12px 32px !important;
    background: transparent !important;
    border: 1.5px solid var(--rel-primary) !important;
    color: var(--rel-fg) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    letter-spacing: .3px !important;
    transition:
        background .2s ease,
        box-shadow .2s ease,
        transform  .2s ease !important;
}

.relatorios-loadmore-btn:hover {
    background: var(--rel-primary) !important;
    box-shadow: 0 4px 24px var(--rel-primary-40) !important;
    transform: translateY(-2px) !important;
    color: var(--rel-fg) !important;
}

.relatorios-loadmore-btn.is-loading {
    pointer-events: none !important;
    opacity: .65 !important;
}

.relatorios-loadmore-btn .rel-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: var(--rel-fg);
    border-radius: 50%;
    animation: rel-spin .6s linear infinite;
    flex-shrink: 0;
}

.relatorios-loadmore-btn.is-loading .rel-spinner {
    display: block;
}

.relatorios-loadmore-btn svg {
    fill: none !important;
    color: inherit !important;
    flex-shrink: 0;
}

@keyframes rel-spin {
    to { transform: rotate(360deg); }
}

/* ── Animação de entrada (novos cards via AJAX) */
@keyframes rel-fadein {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.relatorio-card--new {
    animation: rel-fadein .4s ease both;
}

/* =========================================
   Responsivo
   ========================================= */
@media (max-width: 1024px) {
    .relatorios-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    .relatorios-cols-3,
    .relatorios-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 520px) {
    .relatorios-cols-2,
    .relatorios-cols-3,
    .relatorios-cols-4 { grid-template-columns: 1fr !important; }
}