/*!
 * Official government hero band — proportions, solid backdrop, per-fold polish.
 * Load after idds-opd-variants.css.
 */

/* Solid band — no checkerboard / scene bleed through hero */
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .opd-fold-hero,
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .opd-split-hero,
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .opd-induk-hero,
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .opd-organic-hero {
    --opd-hero-band: color-mix(in srgb, var(--color-primary) 4%, #fff);
    background: var(--opd-hero-band) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 12%, #e2e8f0);
    isolation: isolate;
}

body.skin-magz[data-opd-theme] .opd-layout--service .opd-fold-hero {
    --opd-hero-band: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 72%, #0f172a));
    background: var(--opd-hero-band) !important;
    border-bottom: 0;
}

body.skin-magz[data-opd-theme] .opd-layout--split .opd-split-hero {
    --opd-hero-band: color-mix(in srgb, var(--color-primary) 3%, #fff);
}

body.skin-magz[data-opd-theme^="kec-"] .opd-induk-hero {
    --opd-hero-band: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 5%, #fff), #fff 72%);
}

/* Hide decorative ketupat inside hero — keep header ornament only */
body.skin-magz[data-opd-theme] .opd-fold-hero > .batik-ketupat,
body.skin-magz[data-opd-theme] .opd-split-hero > .batik-ketupat,
body.skin-magz[data-opd-theme] .opd-induk-hero > .batik-ketupat,
body.skin-magz[data-opd-theme] .opd-organic-hero > .batik-ketupat {
    display: none !important;
}

/* Shared card + visual proportions */
body.skin-magz[data-opd-theme] [class*="-hero__card"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

body.skin-magz[data-opd-theme] [class*="-hero__visual"] {
    display: flex;
    align-items: stretch;
    min-height: clamp(280px, 32vw, 420px);
}

body.skin-magz[data-opd-theme] [class*="-hero__visual"] .opd-hero-product {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Hero photos: natural height + contain — never force crop box */
body.skin-magz[data-opd-theme] [class*="-hero__visual"] .opd-hero-product--fit-banner {
    --opd-hero-ratio: auto;
    max-height: none;
    background: #0b1220 !important;
}

body.skin-magz[data-opd-theme] [class*="-hero__cinema-banner"] .opd-hero-product--fit-banner {
    --opd-hero-ratio: auto;
    max-height: none;
    background: transparent !important;
}

body.skin-magz[data-opd-theme] [class*="-hero__visual"] .opd-hero-product--fit-banner .opd-hero-product__media {
    flex: 0 0 auto;
    display: block !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
}

body.skin-magz[data-opd-theme] [class*="-hero__visual"] .opd-hero-product--fit-banner .opd-hero-product__img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Cinema — banner full-bleed edge-to-edge (cover, tanpa letterbox gelap) */
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"],
body.skin-magz[data-opd-theme^="kec-"] [class*="-hero__cinema-banner"] {
    width: 100%;
    max-width: none;
    min-height: 0;
    display: block;
    padding: 0;
    margin: 0;
    background: #fff;
    overflow: hidden;
}

body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"] .opd-hero-product,
body.skin-magz[data-opd-theme^="kec-"] [class*="-hero__cinema-banner"] .opd-hero-product {
    width: 100%;
    max-width: none;
    margin: 0;
}

body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"] .opd-hero-product__media,
body.skin-magz[data-opd-theme^="kec-"] [class*="-hero__cinema-banner"] .opd-hero-product__media {
    width: 100% !important;
    height: clamp(280px, 42vw, 560px) !important;
    min-height: clamp(280px, 42vw, 560px) !important;
    max-height: none !important;
    display: block !important;
    overflow: hidden !important;
    line-height: 0;
    background: transparent !important;
}

body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"] .opd-hero-product__img,
body.skin-magz[data-opd-theme^="kec-"] [class*="-hero__cinema-banner"] .opd-hero-product__img {
    width: 100% !important;
    height: 100% !important;
    min-height: clamp(280px, 42vw, 560px) !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"] .opd-hero-product__caption {
    display: none !important;
}

body.skin-magz[data-opd-theme^="kec-"] [class*="-hero__visual"] .opd-hero-product--fit-banner .opd-hero-product__img,
body.skin-magz[data-opd-theme] [data-opd-fold="stack"] [class*="-hero__visual"] .opd-hero-product__img,
body.skin-magz[data-opd-theme] [data-opd-fold="duo"] [class*="-hero__visual"] .opd-hero-product__img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(58vh, 560px) !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
}

/* Formal induk OPD — hero band lebih lega (bakesbangpol, setda, dll.) */
body.skin-magz[data-opd-theme] .opd-layout--induk [class*="-hero__stage"] {
    padding-block: clamp(1.25rem, 3vw, 2.25rem);
}

body.skin-magz[data-opd-theme] .opd-layout--induk [data-opd-fold="stack"] [class*="-hero__visual--stack"],
body.skin-magz[data-opd-theme] .opd-layout--induk [data-opd-fold="duo"] [class*="-hero__visual"] {
    min-height: clamp(280px, 32vw, 420px);
}

/* Minimal fold — larger than before when still used */
body.skin-magz[data-opd-theme] [data-opd-fold="minimal"] [class*="-hero__visual--minimal"] {
    max-width: min(360px, 42vw);
    min-height: clamp(240px, 28vw, 320px);
}

body.skin-magz[data-opd-theme] [data-opd-fold="minimal"] [class*="-hero__stage--minimal"] {
    max-width: 1280px;
    grid-template-columns: minmax(200px, 320px) minmax(0, 1fr) !important;
}

/* Beacon — professional horizontal band on desktop (not floating stack) */
@media (min-width: 992px) {
    body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] [class*="-hero__stage--beacon"] {
        display: grid !important;
        grid-template-columns: minmax(280px, .42fr) minmax(0, 1.58fr) !important;
        flex-direction: row !important;
        align-items: stretch !important;
        text-align: left !important;
        max-width: 1600px !important;
        gap: clamp(1rem, 2vw, 1.5rem) !important;
    }

    body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] [class*="-hero__card--center"] {
        max-width: none !important;
    }

    body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] [class*="-hero__visual--beacon"] {
        max-width: none !important;
        order: 2;
    }
}

/* Rail — banner left, identity right (RSUD / Diskominfo) */
body.skin-magz[data-opd-theme] [data-opd-fold="rail"] [class*="-hero__stage--rail"] {
    align-items: stretch !important;
}

body.skin-magz[data-opd-theme] [data-opd-fold="rail"] [class*="-hero__visual--rail"] {
    min-height: 0;
    align-items: stretch;
}

body.skin-magz[data-opd-theme] [data-opd-fold="rail"] [class*="-hero__visual--rail"] .opd-hero-product--fit-banner {
    height: 100%;
}

body.skin-magz[data-opd-theme] [data-opd-fold="rail"] [class*="-hero__visual--rail"] .opd-hero-product--fit-banner .opd-hero-product__media {
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

body.skin-magz[data-opd-theme] [data-opd-fold="rail"] [class*="-hero__visual--rail"] .opd-hero-product--fit-banner .opd-hero-product__img {
    max-height: min(56vh, 520px) !important;
}

body.skin-magz[data-opd-theme="rsud-batin-mangunang"] [data-opd-fold="rail"] [class*="-hero__card--rail"] {
    border-left: 8px solid #0f766e !important;
    background: #fff !important;
    box-shadow: 0 12px 32px rgba(15, 118, 110, .12) !important;
}

/* Cinema full-bleed: no museum inset frame */
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"] .opd-hero-product--fit-banner {
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"] .opd-hero-product--fit-banner::before,
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"] .opd-hero-product--fit-banner::after {
    display: none !important;
}
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"] .opd-hero-product--fit-banner .opd-hero-product__media {
    overflow: visible !important;
    border-radius: 0 !important;
}

/* Stack — identity + wide banner, balanced (no forced crop height) */
body.skin-magz[data-opd-theme] [data-opd-fold="stack"] [class*="-hero__visual--stack"] {
    min-height: 0;
}

/* Minimal / kecamatan compact */
body.skin-magz[data-opd-theme] [data-opd-fold="minimal"] [class*="-hero__stage--minimal"] {
    align-items: stretch !important;
}

body.skin-magz[data-opd-theme^="kec-"] .arch-dual-logo img {
    background: #fff !important;
    border: 1px solid color-mix(in srgb, var(--color-primary) 10%, #e2e8f0);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}

/* Hilangkan ornamen sudut/rel kiri atas di semua OPD (bukan induk kabupaten) */
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .tg-dna__corner,
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .tg-dna__rail,
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .tg-dna__ribbon,
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .tg-dna__layer,
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .nx-batik,
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .firstbar::before,
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .firstbar__batik,
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .opd-layout[data-opd-scene] .opd-induk-hero__card::before,
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .opd-layout[data-opd-scene] .opd-fold-hero__card::before,
body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"]) .opd-layout[data-opd-scene] .opd-organic-hero__card::before {
    display: none !important;
}

/* Hilangkan glow radial hijau kiri atas (body::before dari idds-future) */
html[data-bs-theme="light"] body.skin-magz[data-opd-theme]:not([data-opd-theme="tanggamus"]):not([data-opd-theme="default"])::before {
    background:
        radial-gradient(700px 380px at 100% 0%, color-mix(in srgb, var(--idds-accent, var(--idds-primary)) 8%, transparent), transparent 55%);
}

/* Meta strip — unified official bar */
body.skin-magz[data-opd-theme] [class*="-hero__meta"] {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 3vw, 2rem);
    padding-right: clamp(1rem, 3vw, 2rem);
}

body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__meta--strip"],
body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] [class*="-hero__meta--strip"] {
    background: color-mix(in srgb, var(--color-primary) 3%, #fff);
    border: 1px solid color-mix(in srgb, var(--color-primary) 10%, #e2e8f0);
    border-radius: .75rem;
    padding: .85rem clamp(1rem, 2vw, 1.25rem) !important;
    margin-top: .5rem;
}

@media (max-width: 991.98px) {
    body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] [class*="-hero__stage--beacon"] {
        text-align: center !important;
    }

    body.skin-magz[data-opd-theme] [class*="-hero__visual"] {
        min-height: 200px;
    }
}