/* METEO SANTA SUSANNA v1.0.1 STABLE */

/* Dynamic warning */
.weather-warning-v101[hidden]{
    display:none !important;
}

.weather-warning-v101{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin:14px 0 22px;
    padding:12px 15px;
    border:1px solid transparent;
    border-radius:13px;
    box-shadow:0 7px 20px rgba(65,25,25,.12);
}

.weather-warning-heading-v101{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.weather-warning-messages-v101{
    flex:1 1 auto;
    min-width:0;
}

.weather-warning-messages-v101 ul{
    margin:0;
    padding-left:18px;
}

.weather-warning-red{
    background:linear-gradient(180deg,#c20d18,#a7000b);
    color:#fff;
}

.weather-warning-orange{
    background:linear-gradient(180deg,#f58b14,#dc7000);
    color:#fff;
}

.weather-warning-yellow{
    background:linear-gradient(180deg,#ffe470,#ffd02c);
    color:#4b3900;
}

/*
 * Wind details stay inside their original container.
 * Only the layout is changed so they visually sit below Direcció.
 * No HTML containers are moved, therefore the outer dashboard grid
 * and webcam position remain untouched.
 */
.wind-card-stable-v101 .wind-overview{
    display:grid !important;
    grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr) !important;
    grid-template-areas:
        "compass data"
        "details details";
    gap:12px 14px !important;
    align-items:start !important;
}

.wind-card-stable-v101 .wind-compass-column{
    grid-area:compass;
}

.wind-card-stable-v101 .wind-data-column{
    grid-area:data;
    display:contents;
}

.wind-card-stable-v101 .wind-main-row{
    grid-area:data;
    align-self:start;
}

.wind-card-stable-v101 .wind-details-under-direction-v101{
    grid-area:details;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100%;
    margin-top:0 !important;
}

.wind-card-stable-v101 .wind-direction-line{
    margin-top:8px;
}

@media (max-width:760px){
    .weather-warning-v101{
        flex-direction:column;
    }

    .wind-card-stable-v101 .wind-overview{
        grid-template-columns:1fr !important;
        grid-template-areas:
            "compass"
            "data"
            "details";
    }

    .wind-card-stable-v101 .wind-details-under-direction-v101{
        grid-template-columns:1fr !important;
    }
}