/**
 * Page Luz Roja Styles - Kenkatsu
 * Estilos específicos para la página de Terapia de Luz Roja
 * 
 * @package KenkatsuTheme
 * @version 1.0
 */

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

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

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

/* ============================================
   RESPONSIVE GRID PROTOCOLOS
   ============================================ */

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

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

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

.kenkatsu-page-luz-roja .kenkatsu-card {
    height: 100%;
}

.kenkatsu-page-luz-roja .kenkatsu-card h3 {
    margin-top: 0;
}

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

.kenkatsu-page-luz-roja .kenkatsu-hero-section {
    min-height: 70vh;
}

/* 
 * Estilos específicos para Luz Roja
 * El fondo, overlay y visibilidad se controlan desde hero-unified.css
 * Solo agregar overrides específicos si es necesario
 */

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