/* ==========================================================
   HERO.CSS - Componente Maestro v1.0
   Centraliza la estructura visual de todos los encabezados.
   Los valores dinámicos (colores, imágenes) se inyectan 
   como variables CSS desde hero.php
   ========================================================== */

/* --- 1. CONTENEDOR MAESTRO --- */
.master-hero {
    position: relative;
    width: 100%;
    /* Altura por defecto (móvil/fallback) */
    min-height: var(--h-height-mobile, 300px);
    
    /* FONDO Y OVERLAY:
       Aquí está la magia. Usamos variables para el gradiente y la imagen.
       El PHP se encargará de definir --h-grad-start, --h-grad-end, etc. */
    background-image: 
        linear-gradient(
            var(--h-grad-dir, to right), 
            rgba(var(--h-grad-start-rgb), var(--h-overlay-opacity, 0.6)), 
            rgba(var(--h-grad-end-rgb), var(--h-overlay-opacity, 0.6))
        ),
        var(--h-bg-image, none);
        
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Layout */
    display: flex;
    align-items: center; /* Centrado vertical */
    overflow: hidden;
    padding: 4rem 0;
    transition: min-height 0.3s ease;
    
    /* Borde Inferior Configurable */
    border-bottom: var(--h-border-width, 3px) solid var(--h-border-color, #d6a354);
}

/* --- 2. CONTENEDOR INTERNO --- */
.master-hero-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 2; /* Sobre el overlay */
    color: var(--h-text-color, #fff);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* --- 3. TIPOGRAFÍA --- */
.master-hero h1 {
    font-family: var(--h-font-title, sans-serif);
    color: var(--h-text-color, #fff);
    font-size: var(--h-size-title, 2.5rem);
    margin-bottom: 0.8rem;
    line-height: 1.1;
    text-wrap: balance;
}

.hero-subtitle {
    font-family: var(--h-font-sub, sans-serif);
    font-size: var(--h-size-sub, 1.2rem);
    color: var(--h-sub-color, rgba(255,255,255,0.9));
    max-width: 800px;
    font-weight: 400;
    margin-bottom: 2rem;
    line-height: 1.5;
}

/* Eyebrow (Texto pequeño sobre el título en Home) */
.hero-eyebrow {
    color: var(--h-accent, #d6a354);
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid var(--h-accent, #d6a354);
    padding: 0.3rem 1rem;
    border-radius: 99px;
    margin-bottom: 1.5rem;
    display: inline-block;
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(2px);
}

/* --- 4. LAYOUTS ESPECÍFICOS --- */

/* Layout Home (2 Columnas: Texto | Tarjetas) */
.hero-layout-home {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Layout Estándar (Listados/Detalle) */
.hero-layout-standard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* En detalle alineamos abajo, en listado al centro. 
       Esto se puede controlar con una clase extra si se requiere */
}

.hero-layout-standard.align-bottom {
    justify-content: flex-end;
    min-height: var(--h-height, 450px);
    padding-bottom: 3rem;
}

/* --- 5. ELEMENTOS UI (Tags, Metas, Pills) --- */

/* Etiquetas (Pastillas amarillas) */
.hero-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.hero-pill {
    background-color: var(--h-accent, #d6a354);
    color: var(--color-bg-main, #fff);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.3rem 1rem;
    border-radius: 99px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Metadatos (Iconos: Tiempo, Chef...) */
.hero-metas-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1.5rem;
}

.hero-meta-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    background: rgba(255,255,255,0.1);
    padding: 0.5rem 1rem;
    border-radius: 99px;
    backdrop-filter: blur(4px);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
}

.hero-meta-item i {
    color: var(--h-accent, #d6a354);
}

/* Pastilla "UN PROYECTO DE" */
.hero-project-box {
    display: inline-flex;
    align-items: center;
    background-color: var(--pill-bg, #f8fafc);
    border-radius: var(--pill-radius, 99px);
    padding: var(--pill-padding, 0.8rem) 2rem;
    max-width: var(--pill-width, 600px);
    width: 100%;
    gap: var(--pill-gap, 1.5rem);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    margin-top: 2rem;
}

.hero-project-label {
    font-size: 0.85rem;
    font-weight: 800;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.hero-project-logos {
    display: flex;
    align-items: center;
    gap: var(--pill-gap, 1.5rem);
    flex: 1;
    justify-content: flex-end;
}

.hero-project-logos img {
    height: var(--pill-logo-h, 50px);
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply; /* Truco para eliminar fondo blanco si lo tienen */
}

/* Botones CTA (Home) */
.hero-ctas {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --- 6. RESPONSIVE --- */
@media (max-width: 992px) {
    .master-hero {
        min-height: var(--h-height-mobile, auto); 
        padding: 3rem 0;
        text-align: center;
    }
    
    .hero-layout-home {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        gap: 2rem;
    }
    
    .hero-tags, .hero-metas-wrapper, .hero-ctas {
        justify-content: center;
    }
    
    /* Ocultar pastilla de proyecto en móvil si ocupa mucho */
    .hero-project-box {
        display: none; 
    }
    
    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
}