.heat-wave-banner {
    container-type: inline-size;
    border-radius: var(--radius-control);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--line);
    color: var(--text);
}

.heat-wave-banner__inner {
    display: flex;
    gap: 10px;
    padding: var(--space-2) var(--space-3);
}

.heat-wave-banner__icon {
    margin-top: 1px;
    color: var(--heat-high);
}

.heat-wave-banner__body {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
    min-width: 0;
}

.heat-wave-banner__title {
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
}

.heat-wave-banner__source {
    font-size: 13px;
    line-height: 18px;
}

.heat-wave-banner__link {
    position: relative;
    justify-self: start;
    font-size: 14px;
    line-height: 20px;
}

/* The link keeps a target of 44px without taking that height in the banner: its target reaches 12px above and below its line. */
.heat-wave-banner__link::before {
    position: absolute;
    inset: -12px 0;
    content: '';
}

@container (width >= 40rem) {
    .heat-wave-banner__inner {
        gap: var(--space-3);
        padding: 14px var(--space-4);
    }

    .heat-wave-banner__icon {
        width: 22px;
        height: 22px;
        margin-top: 2px;
    }

    .heat-wave-banner__body {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: var(--space-5);
    }

    .heat-wave-banner__title {
        font-size: 17px;
        line-height: 24px;
    }

    .heat-wave-banner__source,
    .heat-wave-banner__link {
        font-size: 15px;
        line-height: 22px;
    }

    .heat-wave-banner__link {
        grid-row: 1 / span 2;
        grid-column: 2;
    }
}

body > .heat-wave-banner {
    margin: var(--space-4) var(--space-4) 0;
}

.map-shell__panel > .heat-wave-banner {
    flex: none;
    margin-bottom: var(--space-2);
}

.readings__call {
    margin: 0 0 var(--space-2);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 24px;
    font-size: clamp(24px, 6cqi, 30px);
    font-stretch: 112%;
    font-weight: 800;
    line-height: 1.1;
}

.readings__call-tip {
    max-width: 36rem;
    margin-bottom: var(--space-4);
}

@media (width < 48rem) {
    /* On a phone the banner heads the bottom sheet, as one card: the sheet keeps for the building the room of a gap and of a second rounded top. */
    .has-map .map-shell__panel > .heat-wave-banner {
        margin: 0;
        border-radius: var(--radius-panel) var(--radius-panel) 0 0;
        box-shadow: var(--shadow-sheet);
    }

    .has-map .map-shell__panel > .heat-wave-banner .heat-wave-banner__inner {
        padding: 10px var(--space-4) var(--space-2);
    }

    .has-map .map-shell__panel:has(> .heat-wave-banner) .zn-panel {
        padding-top: var(--space-4);
        border-radius: 0;
        box-shadow: inset 0 1px 0 0 var(--line);
    }

    /* A questionnaire step fills the screen of a phone with its buttons at the bottom: the banner takes its height from the step, so that the buttons stay on the screen. */
    .report-page:has(> .heat-wave-banner) {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .report-page:has(> .heat-wave-banner) .report {
        flex: 1;
        width: 100%;
        min-height: auto;
    }
}

/* A small phone held sideways keeps a sheet of 24vh, too short for the banner and the panel: the sheet then scrolls as a whole, the banner first. */
@media (width < 48rem) and (height < 30rem) {
    .has-map .map-shell__panel:has(> .heat-wave-banner) {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .has-map .map-shell__panel:has(> .heat-wave-banner) .zn-panel {
        flex: none;
        max-height: none;
    }
}