/* =============================================================
   SyntexDev Category Cards — Frontend CSS
   Author: SyntexDev | Version: 1.0.0
   All colour/size values driven by CSS variables set dynamically
   in wp_head from saved DB settings (class-sdcc-assets.php).
   ============================================================= */

/* ── Grid ──────────────────────────────────────────────────── */
.sdcc-grid {
    display: grid;
    gap: 20px;
    width: 100%;
}
.sdcc-grid.sdcc-cols-1 { grid-template-columns: repeat(1, 1fr); }
.sdcc-grid.sdcc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sdcc-grid.sdcc-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sdcc-grid.sdcc-cols-4 { grid-template-columns: repeat(4, 1fr); }
.sdcc-grid.sdcc-cols-5 { grid-template-columns: repeat(5, 1fr); }
.sdcc-grid.sdcc-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1200px) {
    .sdcc-grid.sdcc-cols-5,
    .sdcc-grid.sdcc-cols-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .sdcc-grid.sdcc-cols-4,
    .sdcc-grid.sdcc-cols-5,
    .sdcc-grid.sdcc-cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .sdcc-grid                               { gap: 14px; }
    .sdcc-grid[class*="sdcc-cols-"] {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 420px) {
    .sdcc-grid[class*="sdcc-cols-"] {
        grid-template-columns: 1fr;
    }
}

/* ── Card base ──────────────────────────────────────────────── */
.sdcc-card {
    background: var(--sdcc-card-bg, #fff);
    border-radius: var(--sdcc-radius, 12px);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Card style variants */
.sdcc-card-style-shadow {
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.sdcc-card-style-shadow:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.sdcc-card-style-border {
    border: 1.5px solid #e5e7eb;
}
.sdcc-card-style-border:hover {
    border-color: var(--sdcc-primary, #2271b1);
}
.sdcc-card-style-flat {
    box-shadow: none;
    border: none;
}

/* Hover lift */
.sdcc-hover-lift:hover {
    transform: translateY(-5px);
}

/* ── Image ──────────────────────────────────────────────────── */
.sdcc-card-image {
    height: var(--sdcc-img-height, 200px);
    overflow: hidden;
    background: #f3f4f6;
}
.sdcc-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.sdcc-card:hover .sdcc-card-image img {
    transform: scale(1.04);
}

/* ── Body ───────────────────────────────────────────────────── */
.sdcc-card-body {
    padding: 18px 20px 20px;
}
.sdcc-card-title {
    /*margin: 0 0 6px;*/
    font-size: 1rem;
    font-weight: 600 !important;
    line-height: 1.3;
    color: var(--sdcc-title, #000) !important;
}
.sdcc-card-title a {
    color: inherit;
    text-decoration: none;
}
.sdcc-card-title a:hover {
    color: var(--sdcc-primary, #002E5E) !important;
}
.sdcc-card-count {
    display: inline-block;
    font-size: .78rem;
    color: #888;
    margin-bottom: 6px;
}
.sdcc-card-desc {
    font-size: .875rem;
    color: var(--sdcc-desc, #666);
    margin: 0 0 12px;
    line-height: 1.5;
}
.sdcc-card-link {
    display: inline-block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--sdcc-primary, #2271b1);
    text-decoration: underline !important;
    transition: color .2s ease;
}
.sdcc-card-link:hover {
    color: var(--sdcc-hover, #2271b1);
}

/* ── Scroll-in animation (driven by frontend.js) ───────────── */
.sdcc-card.sdcc-animate {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .4s ease var(--sdcc-delay, 0ms),
                transform .4s ease var(--sdcc-delay, 0ms),
                box-shadow .25s ease,
                border-color .2s ease;
}
.sdcc-card.sdcc-animate.sdcc-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Keep hover-lift working after animation */
.sdcc-hover-lift.sdcc-visible:hover {     
    opacity: 1;
    transform: translateY(0) !important;
    border: 1px solid #E6E7E8; 
}

/* ── No categories message ──────────────────────────────────── */
.sdcc-no-categories {
    color: #888;
    font-style: italic;
}