/* =========================================================================
   responsive.css — breakpoints driven by layout needs, not device names
   Mobile (default in style.css): single column, full-width cards,
   vertical forecast, large touch targets.
   ========================================================================= */

/* Very narrow phones (~320px): keep the price readable without overflow. */
@media (max-width: 359px) {
    .estimate__value {
        font-size: 28px;
    }

    .hero h1 {
        font-size: 27px;
    }

    .card__head {
        padding: 14px 12px;
        gap: 10px;
    }
}

/* More room: wider gutters, side-by-side totals. Cards remain a stack. */
@media (min-width: 700px) {
    :root {
        --space: 24px;
    }

    .estimate {
        grid-template-columns: 2fr 1fr;
        align-items: end;
        padding: 24px;
    }

    .summary__totals {
        grid-template-columns: 2fr 1fr;
        align-items: end;
    }

    .hero {
        padding-top: 56px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .actions {
        justify-content: flex-start;
    }

    .button {
        flex: 0 0 auto;
        min-width: 160px;
    }
}

/* Desktop: horizontal forecast, more whitespace. Topic cards stay stacked. */
@media (min-width: 960px) {
    .forecast {
        grid-template-columns: repeat(4, 1fr);
    }

    .estimate__value {
        font-size: 44px;
    }

    .section-title {
        margin-top: 48px;
    }

    section {
        margin-bottom: 56px;
    }
}

/* Wide screens: cap content width, keep line length comfortable. */
@media (min-width: 1440px) {
    :root {
        --content-width: 1040px;
    }
}

/* Pointer-based devices only: hover affordances are never required. */
@media (hover: none) {
    .button:hover,
    .icon-button:hover,
    .lang-button:hover {
        background: inherit;
    }

    .card:hover {
        background: linear-gradient(180deg, var(--card-top) 0%, var(--card-bottom) 100%);
        border-color: var(--border);
        box-shadow: var(--shadow-card);
    }

    .card.is-open:hover,
    .card.is-selected:hover {
        border-color: var(--accent);
    }

    .card.is-open:hover {
        box-shadow: inset 3px 0 0 0 var(--accent), var(--shadow-open);
    }

    .button--primary:hover {
        background: var(--accent);
    }
}