/**
 * Page Bike Area Styles - Kenkatsu
 * Estilos específicos para la página de Bike Area - Zona Especializada para Ciclistas
 * 
 * @package KenkatsuTheme
 * @version 1.0
 */

/* ============================================
   RESPONSIVE GRID BENEFICIOS
   ============================================ */

@media (min-width: 768px) {
    .kenkatsu-page-bike-area .kenkatsu-section-beige > .kenkatsu-container > div[style*="grid-template-columns: 1fr"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 992px) {
    .kenkatsu-page-bike-area .kenkatsu-section-beige > .kenkatsu-container > div[style*="grid-template-columns: 1fr"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================
   RESPONSIVE GRID INSTALACIONES Y SERVICIOS
   ============================================ */

@media (min-width: 768px) {
    .kenkatsu-page-bike-area .kenkatsu-section-light > .kenkatsu-container > div[style*="grid-template-columns: 1fr"],
    .kenkatsu-page-bike-area .kenkatsu-section > .kenkatsu-container > div[style*="grid-template-columns: 1fr"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   MEJORAS DE ESPACIADO Y READABILIDAD
   ============================================ */

.kenkatsu-page-bike-area .kenkatsu-card {
    height: 100%;
}

.kenkatsu-page-bike-area .kenkatsu-card h3 {
    margin-top: 0;
}

/* ============================================
   HERO SECTION ESPECÍFICO
   ============================================ */

.kenkatsu-page-bike-area .kenkatsu-hero-section {
    min-height: 70vh;
}

/* 
 * Estilos específicos para Bike Area
 * El fondo, overlay, opacidad y filtros se controlan desde hero-unified.css
 * NO añadir overrides del hero aquí - dejar que hero-unified.css maneje todo
 */

@media (max-width: 768px) {
    .kenkatsu-page-bike-area .kenkatsu-hero-section {
        min-height: 60vh;
    }
    
    .kenkatsu-page-bike-area .hero-content {
        padding-top: 100px !important;
    }
}