/**
 * WS40 Saharan Dust template styles
 *
 * Card frame aligned with the Forecast template (forecast.css): same width,
 * border, radius, top-accent treatment, typography and scrollbar. The top
 * accent colour is set inline per card by ws40-dust.js to the severity band.
 *
 * @package WS40
 * @author  Pasqualino De Marco <info@weatherstation40.live>
 */

/* ------------------------------------------------------------------ */
/* Grid                                                                 */
/* ------------------------------------------------------------------ */

.ws40-dust {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 100%;
    margin: 0 auto;
}

.ws40-dust__title {
    font-size: 1.1em;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 14px;
}

.ws40-dust__grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    gap: 12px;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    scrollbar-width: thin;
    scrollbar-color: var(--ws40con-blue, #1D9E75) #e0e0e0;
}

.ws40-dust__grid::-webkit-scrollbar { height: 6px; }
.ws40-dust__grid::-webkit-scrollbar-track { background: #e0e0e0; border-radius: 3px; }
.ws40-dust__grid::-webkit-scrollbar-thumb { background: var(--ws40con-blue, #1D9E75); border-radius: 3px; }
.ws40-dust__grid::-webkit-scrollbar-button { display: none; }

/* ------------------------------------------------------------------ */
/* Card — same frame as .ws40-forecast__card                            */
/* ------------------------------------------------------------------ */

.ws40-dust__card {
    flex: 0 0 168px;
    min-width: 168px;
    max-width: 168px;
    scroll-snap-align: start;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dcdcde;
    border-top: 3px solid #9e9e9e; /* colour overridden inline by JS (severity) */
    border-radius: 8px;
    padding: 14px 12px 12px;
    text-align: center;
    transition: box-shadow 0.15s ease;
}

.ws40-dust__card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* "Now" card kept uniform with the others (no special background). */
.ws40-dust__card--now {
    background: #ffffff;
}

/* Day & date — match forecast (uppercase day, grey date) */
.ws40-dust__day {
    font-size: 13px;
    font-weight: 700;
    color: #1d2327;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ws40-dust__date {
    font-size: 11px;
    color: #8c8f94;
    margin-bottom: 8px;
}

/* Value (hero metric, coloured inline by severity) */
.ws40-dust__value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    margin: 6px 0 6px;
}

.ws40-dust__unit {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #8c8f94;
    margin-top: 2px;
    letter-spacing: .02em;
}

/* Severity band pill */
.ws40-dust__band {
    display: inline-block;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 12px;
    border-radius: 999px;
    margin: 2px 0 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
}

/* AOD — styled like the forecast moon footer (divider + small grey text) */
.ws40-dust__aod {
    border-top: 1px solid #f0f0f1;
    padding-top: 8px;
    margin-top: 8px;
    font-size: 11px;
    color: #8c8f94;
}

/* Data attribution (CC-BY: CAMS / Open-Meteo) */
.ws40-dust__attr {
    margin: 8px 0 0;
    font-size: 12px;
    color: #646970;
}

/* ------------------------------------------------------------------ */
/* Skeleton loader — match forecast pulse                               */
/* ------------------------------------------------------------------ */

.ws40-dust__loading .ws40-dust__skeleton {
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-top: 3px solid #dcdcde;
    border-radius: 8px;
    min-height: 150px;
    animation: ws40du-pulse 1.4s ease-in-out infinite;
}

@keyframes ws40du-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Error — match forecast error box */
.ws40-dust__error {
    color: #b32d2e;
    font-size: 13px;
    background: #fef2f2;
    border: 1px solid #f7bdbd;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
    .ws40-dust__value { font-size: 23px; }
}