/*
Theme Name: Steeler
Theme URI: http://demo.7iquid.com/steeler/
Author: 7iquid
Author URI: http://themeforest.net/user/7iquid
Description: Steeler is a WordPress theme exclusively built for manufacture, industry, factory, laboratory or construction company websites. The theme helps you to get your site up and running in less than minutes with the One Click Demo Importer. Create pages easily with the Drag & Drop Page Builder (Elementor Free) and fully responsive, retina ready and easy to customize.
Version: 3.1
Requires at least: 5.8
Requires PHP: 7.4
Tested up to: 6.9
License: ThemeForest
License URI: https://themeforest.net/licenses
Text Domain: steeler
Tags: elementor, factory, industrial, gas, chemical, company, construction, engineering, industry, laboratory, manufacture, mechanical, mining, oil, pharmaceutical, refinery, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*
==================================================
INDEX
==================================================

1. GRID SERVICIOS HOME (BASE)
2. AJUSTES DE ALTURA (DESKTOP)
3. RESPONSIVE - TABLET
4. RESPONSIVE - MOBILE

==================================================
*/


/*
==================================================
1. GRID SERVICIOS HOME (BASE)
Estructura en flex para igualar alturas de cards
==================================================
*/

#grid_servicios_home .cms-grid-inner {
    display: flex;           /* Convierte la fila en flex */
    flex-wrap: wrap;         /* Permite salto de línea */
}

#grid_servicios_home .grid-item {
    display: flex;           /* Cada columna se comporta como contenedor flexible */
}

#grid_servicios_home .grid-item-inner {
    display: flex;
    flex-direction: column;  /* Organización vertical del contenido */
    width: 100%;
}

#grid_servicios_home .entry-body {
    display: flex;
    flex-direction: column;  /* Permite empujar elementos hacia abajo */
    height: 100%;            /* Ocupa toda la altura disponible */
}

#grid_servicios_home .action-buttons {
    margin-top: auto;        /* Empuja el botón al final de la card */
}


/*
==================================================
2. AJUSTES DE ALTURA (DESKTOP)
Control visual para evitar efecto escalonado
==================================================
*/

#grid_servicios_home .entry-title {
    min-height: 48px;        /* Igualamos altura de títulos */
}

#grid_servicios_home .entry-content {
    min-height: 70px;        /* Igualamos altura de descripciones */
}


/*
==================================================
3. RESPONSIVE - TABLET
Ajuste ligero de alturas para evitar espacios excesivos
==================================================
*/

@media (max-width: 1024px) {

    #grid_servicios_home .entry-title {
        min-height: 44px;
    }

    #grid_servicios_home .entry-content {
        min-height: 60px;
    }
}


/*
==================================================
4. RESPONSIVE - MOBILE
Se elimina el sistema de alturas forzadas para mejorar UX
==================================================
*/

@media (max-width: 767px) {

    #grid_servicios_home .cms-grid-inner {
        display: block;      /* Volvemos a flujo normal */
    }

    #grid_servicios_home .grid-item {
        display: block;
    }

    #grid_servicios_home .grid-item-inner,
    #grid_servicios_home .entry-body {
        display: block;
        height: auto;        /* Altura automática según contenido */
    }

    #grid_servicios_home .action-buttons {
        margin-top: 15px;    /* Separación natural en mobile */
    }

    #grid_servicios_home .entry-title,
    #grid_servicios_home .entry-content {
        min-height: auto;    /* Eliminamos alturas forzadas */
    }
}