/**
 * Блок категорий на главной — мобильная вёрстка.
 *
 * @package MedikLife
 */

@media (max-width: 768px) {
    .categories-section {
        padding: 1.5rem 10px 2rem;
    }

    .categories-grid {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
        border-radius: 16px;
        overflow: visible;
        background: transparent;
    }

    .category-block {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(180deg, #6d6d6d 0%, #929291 100%);
    }

    .category-image,
    .category-men .category-image,
    .category-women .category-image {
        order: 0;
        width: 100%;
        height: auto;
        min-height: 0;
        flex: 0 0 auto;
        aspect-ratio: 4 / 3;
        max-height: 240px;
        background: rgba(255, 255, 255, 0.04);
    }

    .category-image img,
    .category-placeholder {
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: contain;
        object-position: center bottom;
    }

    .category-overlay,
    .category-men .category-overlay,
    .category-women .category-overlay {
        order: 0;
        position: relative;
        inset: auto;
        width: 100%;
        flex: 1 1 auto;
        align-items: flex-start !important;
        text-align: left !important;
        justify-content: flex-start;
        padding: 1rem 1rem 1.25rem;
        pointer-events: auto;
    }

    .category-men .category-overlay .category-title,
    .category-men .category-overlay .category-list,
    .category-women .category-overlay .category-title,
    .category-women .category-overlay .category-list {
        padding: 0;
        width: 100%;
    }

    .category-title {
        margin-bottom: 0.75rem;
        font-size: 1.35rem;
        line-height: 1.2;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    .category-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 0.75rem;
        width: 100%;
    }

    .category-list a {
        font-size: 0.9rem;
        line-height: 1.35;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .category-women .category-list {
        justify-items: start;
    }
}

@media (max-width: 380px) {
    .category-image {
        aspect-ratio: 1 / 1;
        max-height: 200px;
    }

    .category-list {
        grid-template-columns: 1fr;
    }
}