/* resorts/templates/resorts/resort_list.html */

.snow-card {
        transition: transform 0.3s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow 0.3s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
        border: none;
        border-radius: 15px;
        overflow: hidden;
    }
    
    .snow-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    }
    
    .snow-badge {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    .stat-box {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        padding: 1rem;
        border-radius: 10px;
        text-align: center;
    }
    
    .weather-widget {
        background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
        border-radius: 15px;
        padding: 1.5rem;
        color: white;
    }
    
    .snow-report-box {
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    /* La url() DEBE ser relativa al .css, no un tag Django: los ficheros estáticos
       no pasan por el motor de plantillas, así que un {% static %} aquí invalida
       toda la declaración `background` y el hero se queda sin fondo (texto blanco
       sobre el body claro). La ruta relativa la reescribe ManifestStaticFilesStorage
       al hashear en collectstatic. Overlay burgundy (marca) opaco para garantizar
       contraste AA del texto blanco sobre la panorámica. */
    .hero-gradient {
        background: linear-gradient(135deg, rgba(90,0,23,0.92) 0%, rgba(128,0,32,0.88) 45%, rgba(168,55,28,0.9) 100%), url("../images/estaciones/astun-panorama.a86a15cd3413.jpg") center/cover no-repeat;
        color: #fff;
        padding: 4rem 0;
        margin-bottom: 3rem;
    }

    .hero-gradient h1,
    .hero-gradient p {
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    }

    /* El .text-muted de Bootstrap (gris ~#6c757d) caía a ~2.9:1 sobre el extremo
       lavanda (#c3cfe2) del gradiente de esta sección. Slate más oscuro para AA
       en toda la superficie. Requiere !important porque Bootstrap lo marca así. */
    .resort-info-section .text-muted {
        color: #44506b !important;
    }
    
    .feature-icon {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        color: white;
        font-size: 1.5rem;
    }
    
    .btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }