/* APF Academy v3.5 — live responsive polish
   Keeps the existing desktop/mobile design intact and only protects the
   intermediate desktop/tablet widths where brand/App/search can collide. */

@media (min-width: 781px) and (max-width: 1040px) {
    .apfa-topbar-grid {
        grid-template-columns: minmax(116px, .72fr) minmax(260px, 1.65fr) minmax(116px, .72fr);
        gap: 12px;
    }

    /* Compact the brand before the mobile breakpoint instead of allowing
       the brand copy to push the App launcher into the search field. */
    .apfa-brand-copy {
        display: none !important;
    }

    .apfa-brand-zone {
        gap: 9px;
        min-width: 0;
    }

    .apfa-brand,
    .apfa-app-launcher,
    .apfa-left-zone {
        min-width: 0;
    }

    .apfa-search {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .apfa-start-button {
        width: 42px;
        min-width: 42px;
        padding: 0;
    }

    .apfa-start-button span {
        display: none !important;
    }
}

/* Extra safety for narrow laptop / split-screen widths just above mobile. */
@media (min-width: 781px) and (max-width: 880px) {
    .apfa-topbar-grid {
        grid-template-columns: 112px minmax(235px, 1fr) 112px;
        gap: 9px;
    }

    .apfa-dynamic-logo {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .apfa-app-button {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }
}