/**
 * WS40 Air Quality template styles.
 *
 * Single unified block: EEA index, PM (station), European AQI and gases
 * (Open-Meteo / CAMS) rendered as one scrollable card grid, with the same
 * frame, typography and scrollbar as the Forecast and Saharan-dust templates.
 * The top-accent colour and pill colours are set inline per card (severity).
 *
 * @package WS40
 * @author  Pasqualino De Marco <info@weatherstation40.live>
 */

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

.ws40-aq__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 12px;
    gap: 10px;
}

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

.ws40-aq__time {
    font-size: 12px;
    color: #8c8f94;
}

.ws40-aq__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;
    align-items: stretch;
    scrollbar-width: thin;
    scrollbar-color: var(--ws40con-blue, #1D9E75) #e0e0e0;
}

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

/* Card — same frame as .ws40-forecast__card / .ws40-dust__card */
.ws40-aq__card {
    flex: 0 0 132px;
    min-width: 132px;
    max-width: 132px;
    scroll-snap-align: start;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #dcdcde;
    border-top: 4px solid #9e9e9e; /* colour overridden inline (severity) */
    border-radius: 8px;
    padding: 12px 10px 12px;
    text-align: center;
    transition: box-shadow 0.15s ease;
}

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

.ws40-aq__label {
    font-size: 12px;
    font-weight: 600;
    color: #50575e;
    letter-spacing: .02em;
}

/* Level pill — light tint + dark text (bg/fg set inline per band) */
.ws40-aq__band {
    display: inline-block;
    align-self: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 11px;
    border-radius: 999px;
    margin: 6px 0 4px;
}

.ws40-aq__value {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
    color: #1d2327;
    margin: 4px 0 2px;
}

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

/* Bottom block (media/max rows or source tag) — aligned to card bottom */
.ws40-aq__foot {
    margin-top: auto;
    border-top: 1px solid #f0f0f1;
    padding-top: 7px;
    margin-top: 10px;
    font-size: 11px;
    color: #8c8f94;
    line-height: 1.5;
}
.ws40-aq__foot--push { margin-top: auto; }

.ws40-aq__cap {
    margin-top: 6px;
    font-size: 12px;
    color: #646970;
}

.ws40-aq__nodata {
    padding: 16px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    font-size: 13px;
    color: #50575e;
}

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