/* ================================================================
   RDC News Grid — CSS v1.0.0
   ================================================================ */

.rdc-news-grid { width: 100%; font-family: inherit; }

/* ── Título da seção ── */
.rdc-ng-section-title { margin: 0; padding: 0; line-height: 1.1; }

/* ── Abas ── */
.rdc-ng-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.rdc-ng-tab { appearance: none; -webkit-appearance: none; outline: none; font-family: inherit; }
.rdc-ng-tab:hover:not(.is-active) { opacity: .8; }
.rdc-ng-tab:focus-visible { outline: 2px solid #FF6A00; outline-offset: 2px; }

/* ── Grid ── */
.rdc-ng-grid {
    display: grid;
    grid-template-columns: repeat(var(--rdc-ng-cols, 5), 1fr);
    gap: var(--rdc-ng-gap, 20px);
    transition: opacity .2s ease;
}
.rdc-ng-grid.is-loading {
    opacity: .45;
    pointer-events: none;
}

/* ── Card ── */
.rdc-ng-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Imagem ── */
.rdc-ng-img-wrap { display: block; width: 100%; }
.rdc-ng-img-wrap img { border-radius: inherit; }

/* ── Badge + tempo ── */
.rdc-ng-meta-row { line-height: 1; }
.rdc-ng-badge    { display: inline-block; }

/* ── Título do card ── */
.rdc-ng-title a:hover { text-decoration: underline; }

/* ── Reading time ── */
.rdc-ng-reading svg { flex-shrink: 0; }

/* ── Loading skeleton ── */
@keyframes rdc-ng-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}
.rdc-ng-grid.is-loading .rdc-ng-card {
    animation: rdc-ng-pulse .9s ease infinite;
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1024px) {
    .rdc-ng-grid {
        grid-template-columns: repeat(var(--rdc-ng-cols-t, 3), 1fr);
    }
}
@media (max-width: 640px) {
    .rdc-ng-grid {
        grid-template-columns: repeat(var(--rdc-ng-cols-m, 2), 1fr);
    }
    .rdc-ng-tabs { gap: 6px; }
}
@media (max-width: 380px) {
    .rdc-ng-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Acessibilidade ── */
@media (prefers-reduced-motion: reduce) {
    .rdc-ng-grid, .rdc-ng-grid.is-loading .rdc-ng-card { animation: none; transition: none; }
}