/* ========================================
   CASES ARCHIVE - Minimal Custom CSS
   Most styling via Tailwind - only extreme cases here
   ======================================== */

/* Gradient Overlay - Exact Figma spec: 55.578% → 86.901% */
.case-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 55.578%,
        rgba(0, 0, 0, 1) 86.901%
    );
    pointer-events: none;
    z-index: 1;
}

/* CTA Button - Black/Red gradient (23px black accent) */
.case-card-cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 186px;
    height: 40px;
    border-radius: 90px;
    background:#C4161C;
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 17px;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.case-card-cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 22, 28, 0.3);
}

/* Filter tabs - gradient background animation (same as footer-buttons-strip) */
.cases-filter-tab {
    background-image: linear-gradient(to right, #C4161C 50%, #FFFFFF 50%);
    background-size: 225% 100%;
    background-position: right;
    transition: background-position 0.7s ease-out, color 0.3s ease-out, border-color 0.3s ease-out;
}

.cases-filter-tab:hover {
    background-position: left;
}

/* Special styling for "Όλα τα έργα" button */
.cases-filter-tab.cases-filter-all {
    background-image: linear-gradient(to right, #1F1F1F 50%, #1F1F1F 50%) !important;
    background-size: 100% 100% !important;
    background-position: left !important;
}

/* Filter tabs - active state (can't do conditional :has() in TW) */
.cases-filter-tab.active {
    background-position: left;
    color: #FFFFFF;
    font-weight: 700;
    border-color: #C4161C;
}

/* Grid loading state for AJAX */
.cases-grid--loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Empty state spans full grid */
.cases-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    color: #666;
}

/* Skeleton loading cards */
.skeleton-card {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
            opacity: 0.7;
        }
}