/* Mobile/tablet masthead — supplements app.css responsive rules */
@media (max-width: 980px) {
    .masthead {
        display: grid !important;
        grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
        grid-template-rows: auto auto !important;
        align-items: center;
        gap: 10px 12px;
        padding-top: 14px !important;
        padding-bottom: 12px !important;
    }

    .masthead .brand {
        grid-column: 1; grid-row: 1;
        min-width: 0 !important;
        width: 100%; max-width: 100%;
        align-self: center;
    }

    .masthead .brand--logo {
        display: flex; align-items: center;
        justify-content: flex-start;
        width: 100%; max-width: 100%;
    }

    .masthead .brand--logo img {
        display: block; width: 100%; max-width: 100%;
        height: auto; max-height: clamp(52px, 14vw, 78px);
        object-fit: contain; object-position: left center;
    }

    .masthead__edition {
        grid-column: 2; grid-row: 1;
        justify-self: stretch; align-self: center;
        width: 100%; text-align: right;
        border: 0 !important; padding: 0 0 0 4px !important;
        gap: 4px;
    }

    .masthead__edition span   { display: block; font-size: 10px; letter-spacing: .05em; line-height: 1.2; }
    .masthead__edition strong { display: block; font-size: 12px; line-height: 1.35; font-weight: 700; }

    .masthead .search-box { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}

@media (max-width: 640px) {
    .masthead {
        grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
        gap: 8px 10px;
        padding-top: 12px !important;
        padding-bottom: 10px !important;
    }

    .masthead .brand--logo img { max-height: clamp(60px, 22vw, 88px); }
    .masthead__edition span   { font-size: 9px; }
    .masthead__edition strong { font-size: 11px; line-height: 1.3; }
}