/*
 * Restyles the "posters" section (real data/behaviour from local_volgmed_guides'
 * homepage afisha bundle) to look like the vsmu-main-frontend kursorium-links tile
 * grid. Scoped entirely under .vmh-posters--guides so local_volgmed_guides itself
 * is never touched — story-open/video/navigation behaviour keeps working as-is,
 * only the resting-state card layout changes.
 *
 * Must be linked AFTER local_volgmed_guides's own CSS (which uses !important
 * heavily) to win the cascade.
 */

/* .vmh-posters used to be a standalone top-level block (own max-width/negative
   margin/padding to sit directly under <main>). It now lives inside the
   kursorium app-section/.container layout, which already handles width and
   horizontal padding, so neutralise the old self-contained positioning. */
.vmh-posters.vmh-posters--guides {
    max-width: none;
    margin: 0;
    padding: 0;
}

.vmh-posters--guides .volgmed-guides {
    margin-bottom: 0;
}

.vmh-posters--guides .volgmed-guides-track {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    overflow: visible !important;
    padding: 0;
}

.vmh-posters--guides .volgmed-guide-card-wrap,
.vmh-posters--guides .volgmed-guide-card-wrap--afisha {
    flex: 0 0 180px;
    max-width: 180px;
}

@media (max-width: 767px) {
    .vmh-posters--guides .volgmed-guides-track {
        gap: 12px;
    }

    .vmh-posters--guides .volgmed-guide-card-wrap,
    .vmh-posters--guides .volgmed-guide-card-wrap--afisha {
        flex: 0 0 140px;
        max-width: 140px;
    }
}

.vmh-posters--guides .volgmed-guide-card {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 24px;
    box-shadow: none !important;
    outline: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vmh-posters--guides .volgmed-guide-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 8px 21px rgba(0, 0, 0, 0.2) !important;
}

.vmh-posters--guides .volgmed-guide-card .volgmed-guide-background-image {
    object-fit: cover !important;
}