.container{
    width: min(var(--container), 100% - (var(--gutter) * 2));
    margin-inline: auto;
}

.topbar{
    height: var(--topbar-h, 64px);
    min-height: var(--topbar-h, 64px);
    background: var(--primary-color);
    display: flex;
    align-items: center;
    position: fixed;     /* było sticky */
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}


.topbar__inner{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.brand{
    position: static;
    transform: none;
    font-weight: 600;
    letter-spacing: .08em;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

.main{
    flex: 1;
    padding-top: calc(var(--topbar-h, 64px) + var(--space-5));
    padding-bottom: var(--space-5);
}
.section{ padding-block: var(--space-5); }

.grid{
    display:grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}
@media (min-width: 768px){
    .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* MOBILE: topbar zawsze widoczny, bez bugów sticky */
@media (max-width: 899px){
    .topbar__inner{
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
        gap: 0;
    }

    .nav-toggle{
        grid-column: 1;
        justify-self: start;
    }

    .brand{
        grid-column: 2;
        justify-self: center;
        text-align: center;
    }

    .topbar__right{
        grid-column: 3;
        justify-self: end;
        min-width: 44px; /* balansuje burgera */
    }

    /* nav overlay (jeśli masz drawer) niech nie psuje layoutu */
    .nav{
        grid-column: 1 / -1;
    }
}

/* Topbar: tryb hero (transparent) */
.topbar.is-hero{
    background: var(--topbar-hero-bg, transparent);
}

/* (opcjonalnie) jeśli chcesz, żeby brand/linki na hero były białe,
   a poza hero wracały do normalnego stylu */
.topbar.is-hero .brand{
    color: var(--topbar-hero-fg, #fff);
}

/* Desktop layout: brand left, nav right */
@media (min-width: 900px){
    .nav-toggle{ display: none; }

    .brand{ order: 0; }
    .nav{ order: 1; margin-left: auto; }
    .topbar__right{ order: 2; }

    .nav{
        display: flex;
        gap: var(--space-3);
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .nav__link{ white-space: nowrap; }
}

@media (max-width: 1250px) and (min-width: 900px){
    .nav{ gap: var(--space-2); }
    .nav__link{ font-size: .95rem; }
}