/* hostgator/assets/css/pages/seznam_v2.css */
/* VARIABLES IN KARTICE SO PREMAKNJENE V core_v2.css */

.seznam-v2-container {
    max-width: 600px;
    min-height: 100vh;
    margin: 0 auto;
    font-family: var(--font-main);
    color: var(--text-main);
    padding: 20px 15px 40px 15px; /* Odmiki okoli celega seznama */
    overflow-x: hidden;
}

.v2-seznam-header {
    margin-bottom: 24px;
}

.v2-seznam-header h1 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 5px 0;
    color: var(--text-main);
}

.v2-seznam-header p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.v2-list-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centriranje kartic */
    gap: 24px; /* Razmik med posameznimi karticami v seznamu */
}

/* Na mobilniku omejimo širino na širino kartice v swimlanu (cca 85% zaslona) */
.v2-list-wrapper .v2-list-card {
    width: 85%;
    max-width: 380px; /* Dodatna varnostna omejitev */
}

/* ==========================================================================
   DESKTOP / TABLET OPTIMIZACIJE (Samo za grid in layout)
   ========================================================================== */
@media (min-width: 768px) {
    .seznam-v2-container {
        max-width: 1200px; /* Razširimo kontejner za desktop */
        padding: 40px 30px;
    }
    
    .v2-list-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 320px)); /* Fiksirana širina na desktopu, podobno kot swimlane (320px) */
        justify-content: center; /* Centriranje grida */
        gap: 30px;
    }

    .v2-list-wrapper .v2-list-card {
        width: 100%; /* V gridu na desktopu zasedejo celotno širino grid celice */
        max-width: none;
    }
}