/* =============================================
   RSS — CATEGORY GRID  v1.2.0
   Copia exacta del diseño React/TS original
   Solo colores --theme-palette-color-1 a 4
   ============================================= */

/* ── Grid ── */
.rss-catgrid-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 24px 64px;
    list-style: none;
}

.rss-catgrid-wrap[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.rss-catgrid-wrap[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.rss-catgrid-wrap[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }

/* ── Tarjeta ──
   bg-white rounded-lg overflow-hidden
   transition-all duration-300
   hover:shadow-xl
   border border-transparent hover:border-[color-4]
*/
.rss-catgrid-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid transparent;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;

    opacity: 0;
    animation: rssCardIn 0.3s ease forwards;
    animation-delay: calc(var(--i, 0) * 0.05s);
}

@keyframes rssCardIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rss-catgrid-card:hover {
    box-shadow:
        0 20px 25px -5px rgba(0,0,0,0.10),
        0 10px 10px -5px rgba(0,0,0,0.04);
    border-color: var(--theme-palette-color-4, #F4C430);
    text-decoration: none !important;
    color: inherit;
}

/* ── Zona de imagen ──
   aspect-square  bg-white  p-6
   flex items-center justify-center
*/
.rss-catgrid-img-wrap {
    aspect-ratio: 1 / 1;
    background: #ffffff;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.rss-catgrid-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.rss-catgrid-card:hover .rss-catgrid-img {
    transform: scale(1.05);
}

/* elementos no presentes en el diseño React — ocultar */
.rss-catgrid-overlay,
.rss-catgrid-count,
.rss-catgrid-cta { display: none; }

/* ── Franja inferior ──
   p-6  text-center  bg-white  border-t border-[#E5E7EB]
*/
.rss-catgrid-body {
    padding: 24px;
    text-align: center;
    background: #ffffff;
    border-top: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* text-base font-semibold text-[color-1]
   group-hover:text-[color-2] */
.rss-catgrid-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--theme-palette-color-1, #0D1B2A);
    margin: 0 !important;
    padding: 0 !important;
    transition: color 0.3s ease;
}

.rss-catgrid-card:hover .rss-catgrid-name {
    color: var(--theme-palette-color-2, #1B3A57);
}

/* descripción discreta */
.rss-catgrid-desc {
    font-size: 12px;
    line-height: 1.5;
    color: var(--theme-palette-color-3, #6B7280);
    margin: 0 !important;
    padding: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Estado vacío ── */
.rss-catgrid-empty {
    text-align: center;
    color: var(--theme-palette-color-3, #9CA3AF);
    font-size: 14px;
    padding: 40px 20px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .rss-catgrid-wrap[data-cols="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .rss-catgrid-wrap,
    .rss-catgrid-wrap[data-cols="3"],
    .rss-catgrid-wrap[data-cols="4"] {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 16px 16px 40px;
    }
}

@media (max-width: 480px) {
    .rss-catgrid-wrap,
    .rss-catgrid-wrap[data-cols="2"],
    .rss-catgrid-wrap[data-cols="3"],
    .rss-catgrid-wrap[data-cols="4"] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}