/* ==========================================================================
   SCIO Lazy Widget Skeleton Placeholders
   Shows animated skeleton cards while widget content loads via AJAX.
   ========================================================================== */

/* Container: 4-column grid matching the loaded carousel/grid layout */
.scio-lazy-widget .scio-carousel-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.scio-lazy-widget .scio-skeleton-card {
    flex: 1 1 calc(25% - 10px);
    min-width: 0;
    overflow: hidden;
}

/* 16:9 aspect ratio placeholder for the image */
.scio-lazy-widget .scio-skeleton-img {
    width: 100%;
    padding-top: 56.25%; /* 9/16 = 0.5625 */
    border-radius: 6px;
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: scio-shimmer 1.4s ease-in-out infinite;
}

.scio-lazy-widget .scio-skeleton-title {
    width: 80%;
    height: 16px;
    margin-top: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: scio-shimmer 1.4s ease-in-out infinite;
    animation-delay: 0.15s;
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 1024px) {
    .scio-lazy-widget .scio-skeleton-card {
        flex: 1 1 calc(50% - 10px);
    }
}
@media (max-width: 600px) {
    .scio-lazy-widget .scio-skeleton-card {
        flex: 1 1 100%;
    }
}

/* Fade in the real content once loaded */
.scio-lazy-widget.scio-lazy-loaded .scio-skeleton-card {
    display: none;
}

.scio-lazy-widget.scio-lazy-loaded .scio-carousel-container {
    animation: scio-fade-in 0.3s ease-out;
}

@keyframes scio-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes scio-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}