/* ==================================
   💀 SKELETON LOADING STYLES
================================== */

/* Skeleton container - grid stejný jako newsletter-list */
.skeleton-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    gap: 1rem;
    padding-bottom: 4rem;
    position: relative;
    z-index: 10; /* Nad obsahem při zobrazení */
}

/* Když je skeleton skrytý, úplně ho odstranit z flow */
.skeleton-grid.hidden {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}

/* Jednotlivé skeleton karty */
.newsletter-skeleton {
    background: var(--card-color); /* #1A1A1A */
    padding: 1.5rem;
    border-radius: var(--border-radius);
    width: calc(33.333% - 11px);
    min-width: 280px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Shimmer animace - podle tvých úprav */
@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}

.skeleton-animate {
    animation-duration: 1.8s; /* Tvoje úprava z prototypu */
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: linear-gradient(
        to right,
        #212121 8%,     /* Tvoje úpravy */
        #262626 22%,    /* Tvoje úpravy */
        #212121 40%     /* Tvoje úpravy */
    );
    background-size: 800px 104px;
    position: relative;
    will-change: background-position; /* GPU acceleration */
    transform: translateZ(0); /* Force GPU */
    backface-visibility: hidden; /* Prevent flickering */
}

/* Skeleton elementy */
.skeleton-title {
    width: 70%;
    height: 28px;
    margin-bottom: 20px;
    border-radius: 6px;
}

.skeleton-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.skeleton-dot {
    width: 14px; /* Stejně jako .category-dot */
    height: 14px;
    border-radius: 50%;
}

.skeleton-author {
    width: 50%;
    height: 18px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.skeleton-description {
    height: 16px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-description:nth-child(1) {
    width: 90%;
}

.skeleton-description:nth-child(2) {
    width: 75%;
}

.skeleton-description:nth-child(3) {
    width: 60%;
}

/* Fade out animace pro skeletony */
.skeleton-grid.fade-out {
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none; /* Zabránit interakci během fade out */
}

/* Fade in animace pro newsletter items - POUZE při prvním načtení */
.newsletter-item.fade-in-initial {
    opacity: 0;
}

.newsletter-item.loaded {
    animation: fadeIn 0.4s ease-out forwards;
}

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

/* Hidden state */
.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ==================================
   📱 RESPONSIVE - Mobile
================================== */

@media (max-width: 768px) {
    .skeleton-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .newsletter-skeleton {
        width: 100%;
        min-width: 0;
        flex: none;
    }

    .skeleton-title {
        width: 85%;
    }

    .skeleton-author {
        width: 65%;
    }
}