/*!
 * OPD brand chrome — masthead logo placement (left / center / stacked).
 * Works with firstbar__grid (not legacy .row).
 */

/* ── Center: kecamatan / front office — logo lebih besar, komposisi rapat ── */
@media (min-width: 992px) {
    body.skin-magz .firstbar--center .firstbar__grid,
    body.skin-magz.hl-center .firstbar__grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto;
        justify-items: center;
        text-align: center;
        gap: .65rem 1rem;
        min-height: 0;
        padding-block: .75rem 1rem;
    }

    body.skin-magz .firstbar--center .brand__mark--kab,
    body.skin-magz.hl-center .brand__mark--kab {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
    }

    body.skin-magz .firstbar--center .brand__mark--opd,
    body.skin-magz.hl-center .brand__mark--opd {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
    }

    body.skin-magz .firstbar--center .brand__name,
    body.skin-magz.hl-center .brand__name {
        font-size: clamp(1.15rem, 2.2vw, 1.55rem) !important;
    }

    body.skin-magz .firstbar--center .brand,
    body.skin-magz.hl-center .brand {
        justify-content: center;
        width: 100%;
    }

    body.skin-magz .firstbar--center .brand__link,
    body.skin-magz.hl-center .brand__link {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: .65rem !important;
    }

    body.skin-magz .firstbar--center .brand__seals,
    body.skin-magz.hl-center .brand__seals {
        justify-content: center;
    }

    body.skin-magz .firstbar--center .brand__copy,
    body.skin-magz.hl-center .brand__copy {
        align-items: center;
    }

    body.skin-magz .firstbar--center .search,
    body.skin-magz.hl-center .search {
        width: min(100%, 640px);
        margin-inline: auto;
    }

    body.skin-magz .firstbar--center .gov-ident,
    body.skin-magz.hl-center .gov-ident {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem 1rem;
    }

    body.skin-magz .firstbar--center ~ nav.menu #menu-list .nav-list,
    body.skin-magz.hl-center #menu-list .nav-list {
        justify-content: center;
    }
}

/* ── Stacked: setda, bpbd — logo lebih besar, bar lebih tinggi ── */
@media (min-width: 992px) {
    body.skin-magz .firstbar--stacked .firstbar__grid,
    body.skin-magz.hl-stacked .firstbar__grid {
        min-height: 112px;
        align-items: center;
    }

    body.skin-magz .firstbar--stacked .brand__mark--kab,
    body.skin-magz.hl-stacked .brand__mark--kab {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
    }

    body.skin-magz .firstbar--stacked .brand__mark--opd,
    body.skin-magz.hl-stacked .brand__mark--opd {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
    }

    body.skin-magz .firstbar--stacked .brand__name,
    body.skin-magz.hl-stacked .brand__name {
        font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
    }
}

/* ── Classic (left): default dinas — readable long titles ── */
body.skin-magz .firstbar--classic .firstbar__grid,
body.skin-magz.hl-classic .firstbar__grid,
body.skin-magz:not([class*="hl-"]):not([class*="firstbar--"]) .firstbar__grid {
    grid-template-columns: minmax(320px, 1.45fr) minmax(240px, 1.05fr) auto;
}

/* Dual logo visibility in header */
body.skin-magz[data-opd-theme] .brand__dual .brand__logo--opd,
body.skin-magz[data-opd-theme] .brand__dual .brand__mark--opd .brand__logo {
    background: #fff;
    border-radius: 12px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--idds-primary) 10%, #e2e8f0);
}

body.skin-magz[data-opd-theme^="kec-"] .brand__dual .brand__mark--kab,
body.skin-magz[data-opd-theme^="kec-"] .brand__dual .brand__mark--opd {
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

@media (max-width: 991.98px) {
    body.skin-magz .firstbar--center .brand__link,
    body.skin-magz.hl-center .brand__link {
        flex-direction: row !important;
        text-align: left;
    }

    body.skin-magz .firstbar--center .firstbar__grid,
    body.skin-magz.hl-center .firstbar__grid {
        grid-template-columns: 1fr !important;
        justify-items: stretch;
    }
}