/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://proyectokoalo.com/
Description: Tema hijo para tienda de portabebés ergonómicos.
Author: PK
Template: twentytwentyfive
Version: 1.0.0
*/

/* ==========================================================================
   ESTILOS GENERALES Y BASE (Móvil Primero - Se aplica a todo por defecto)
   ========================================================================== */

/* --- Estructura Base para el Shortcode de Categorías (Móvil) --- */
.wp-block-columns.fila-cat {
    display: flex;
    flex-direction: column; /* Apila las tarjetas verticalmente en móviles */
    gap: 20px;
    margin-bottom: 20px;
}

.wp-block-column.tienda-cat-card {
    width: 100% !important; /* Ocupa todo el ancho en smartphones */
    padding: 15px !important;
    background-color: #ffffff !important;
    border-radius: 15px !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0px 4px 0px 1px rgba(0, 0, 0, 0.15) !important;
}

.tienda-cat-card .wp-block-image-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9; /* Formato panorámico cómodo para scroll en móvil */
    background: #f0f0f0;
    border-radius: 10px;
}


/* ==========================================================================
   ESTRUCTURA DE RESPONSIVE MEDIA QUERIES (AQUÍ EMPIEZAN TUS CORTES)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Dispositivos Móviles Grandes / Phablets (MinWidth: 600px)
   A partir de aquí, WordPress suele pasar las columnas de 1 a 2 filas.
-------------------------------------------------------------------------- */
@media (min-width: 600px) {
    /* Aquí puedes meter el comportamiento de rejilla 2x2 para tablets si quieres */
    .wp-block-columns.fila-cat {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .wp-block-column.tienda-cat-card {
        width: calc(50% - 10px) !important; /* 2 columnas por fila */
    }
    
    .tienda-cat-card .wp-block-image-placeholder {
        aspect-ratio: 1 / 1; /* Cuadrado en tablets */
    }
}

/* --------------------------------------------------------------------------
   2. Tablets / iPads (MinWidth: 782px)
-------------------------------------------------------------------------- */
@media (min-width: 782px) {
    /* Tus ajustes previos de aire... */
}

/* --------------------------------------------------------------------------
   3. Ordenadores Portátiles / Escritorio Estándar (MinWidth: 960px)
   Aquí el diseño de revista expande a las 4 columnas horizontales reales.
-------------------------------------------------------------------------- */
@media (min-width: 960px) {
    .wp-block-columns.fila-cat {
        flex-direction: row; /* Fuerza las 4 en línea */
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .wp-block-column.tienda-cat-card {
        width: calc(25% - 15px) !important; /* 4 columnas perfectas */
        box-shadow: 0px 6px 0px 1px rgba(0, 0, 0, 0.15) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .wp-block-column.tienda-cat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0px 8px 0px 1px rgba(0, 0, 0, 0.2) !important;
    }

    .tienda-cat-card .wp-block-image-placeholder {
        aspect-ratio: 3 / 4; /* Proporción vertical de revista */
    }
}
}