@media (max-width: 1350px) and (min-width: 1100px) {
    .weather-stage {
        grid-template-columns: 1fr 0.85fr;
    }

    .hero-temp {
        font-size: clamp(2.6rem, 5vw, 4rem);
    }

    .weather-icon {
        width: 88px;
        height: 88px;
    }
}

/* ---- Tablet and below: release the fixed-height constraint ---- */
@media (max-width: 1099px) {

    html,
    body {
        height: auto;
    }

    .app-shell {
        min-height: 100dvh;
        height: auto;
        padding: var(--sp-4);
    }

    .dashboard {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .sidebar {
        flex-direction: row;
        gap: var(--sp-4);
    }

    .sidebar .panel {
        flex: 1;
    }

    .panel-list {
        max-height: 220px;
    }

    .weather-stage {
        display: flex;
        flex-direction: column;
    }

    .hero {
        order: 1;
    }

    .metrics {
        order: 2;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .forecast {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ---- Tablet portrait ---- */
@media (max-width: 860px) {
    .topbar {
        display: inline-flex;
        align-items: stretch;
    }

    .search-cluster {
        max-width: none;
    }

    .sidebar {
        flex-direction: column;
    }

    .metrics {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
    .app-shell {
        padding: var(--sp-3);
        gap: var(--sp-4);
    }

    .brand-name {
        font-size: 1.1rem;
    }

    .locate-btn span {
        display: none;
    }

    .locate-btn {
        padding: 12px;
    }

    .hero-mid {
        gap: var(--sp-3);
    }

    .weather-icon {
        width: 76px;
        height: 76px;
    }

    .hero-temp {
        font-size: clamp(2.4rem, 12vw, 3.2rem);
    }

    .hero-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-3);
    }

    .local-clock {
        text-align: left;
    }

    .metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .forecast {
        grid-template-columns: repeat(2, 1fr);
    }

    .forecast-card:nth-child(5) {
        grid-column: span 2;
    }

    .panel-list {
        max-height: 160px;
    }
}

@media (max-width: 400px) {
    .forecast {
        grid-template-columns: 1fr 1fr;
    }
}