/* Climate Module */

/* Current weather card */
.clima-atual {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-6);
    align-items: center;
    padding: var(--sp-6);
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-6);
}

.clima-temp-big {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.clima-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
}

/* 7-day forecast strip */
.forecast-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.forecast-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-2);
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--radius);
    text-align: center;
    transition: border-color var(--transition);
}

.forecast-day:first-child {
    border-color: var(--color-primary);
}

.forecast-day-name {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-on-dark-secondary);
}

.forecast-day-temp {
    font-size: var(--fs-lg);
    font-weight: 700;
}

.forecast-day-detail {
    font-size: var(--fs-xs);
    color: var(--text-on-dark-secondary);
}

.forecast-day-rain {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--fs-xs);
    color: var(--color-secondary);
}

/* Alerts section */
.clima-alerts {
    margin-bottom: var(--sp-6);
}

.clima-alerts-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-on-dark-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-3);
}

/* Chart */
.clima-chart-container {
    background: var(--dark-card);
    border: 1px solid var(--dark-card-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}

.clima-chart-container canvas {
    max-height: 300px;
}

@media (max-width: 768px) {
    .clima-atual {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .clima-temp-big { font-size: 3rem; }
    .clima-stats { grid-template-columns: repeat(3, 1fr); }

    .forecast-strip {
        grid-template-columns: repeat(4, 1fr);
        overflow-x: auto;
    }
    .forecast-day:nth-child(n+5) { display: none; }
}

@media (max-width: 480px) {
    .clima-stats { grid-template-columns: 1fr 1fr; }
}