/*
Theme Name: Blogo Child
Template: hostinger-ai-theme
Description: Tema hijo para personalización de blogooeats
Author: Matías Vendres
Version: 1.0
*/
@import url('css/global.css');
@import url('css/header.css');
@import url('css/body.css');
@import url('css/footer.css');
/* --- CSS para Uniformizar las Tarjetas de Restaurante BlogoEats --- */

/* 1. Selector principal para la cuadrícula de restaurantes */
.restaurante-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* 2. Selector para CADA tarjeta individual */
.restaurante-grid .restaurante-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    background: #fff;
    transition: transform 0.2s;

    /* ESTO HACE QUE TODAS LAS TARJETAS TENGAN EL MISMO ALTO */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Alinea contenido superior e inferior */
}

/* 3. Selector para el contenedor de la imagen/logo */
.restaurante-grid .restaurante-card .card-image-container {
    aspect-ratio: 16/9; /* Mantiene la proporción */
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Corta si algo sobresale */
}

/* 4. Selector para la imagen/logo real */
.restaurante-grid .restaurante-card .card-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* ESCALA EL LOGO PARA QUE QUEPA SIN DEFORMARSE */
}

/* 5. Selector para el título del restaurante */
.restaurante-grid .restaurante-card h3 {
    color: #2c3e50;
    margin: 0 0 15px 0;
    font-size: 20px;
    flex-grow: 1; /* El título ocupa el espacio disponible */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 6. Selector para el botón 'Ver Carta' */
.restaurante-grid .restaurante-card .card-button {
    display: block;
    padding: 10px 15px;
    background: #ff6600;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    margin-top: auto; /* Empuja el botón al fondo si el título es corto */
}