/*!
 * OPD fold variants — distinct hero architecture per preset.
 * Activated via [data-opd-fold] on hero section + .opd-body-stack--{skin}.
 */

/* ── Cinema: banner full-bleed, identity band below ── */
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] {
    padding: 0 !important;
    max-width: none !important;
}
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] .opd-fold-hero__cinema-banner,
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] .opd-split-hero__cinema-banner,
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] .opd-organic-hero__cinema-banner,
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] .opd-induk-hero__cinema-banner {
    width: 100%;
    max-height: none;
    overflow: hidden;
    background: #fff;
}
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] .opd-hero-product {
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* Cinema banner: full-bleed cover — isi lebar layar tanpa letterbox */
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"] .opd-hero-product--fit-banner,
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"] .opd-hero-product {
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
}
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"] .opd-hero-product__media {
    aspect-ratio: auto !important;
    max-height: none !important;
    min-height: clamp(280px, 42vw, 560px) !important;
    height: clamp(280px, 42vw, 560px) !important;
    overflow: hidden !important;
}
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] [class*="-hero__cinema-banner"] .opd-hero-product__img {
    position: static !important;
    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;
}
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] .opd-fold-hero__stage--cinema,
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] .opd-split-hero__stage--cinema,
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] .opd-organic-hero__stage--cinema,
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] .opd-induk-hero__stage--cinema {
    display: block;
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2rem);
}
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] .opd-fold-hero__meta--strip,
body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] .opd-split-hero__meta--strip {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem) 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, #e2e8f0);
}

/* ── Beacon: centered identity, banner below ── */
body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] .opd-fold-hero__stage--beacon,
body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] .opd-split-hero__stage--beacon,
body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] .opd-organic-hero__stage--beacon,
body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] .opd-induk-hero__stage--beacon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem) 1rem;
    text-align: center;
}
body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] .opd-fold-hero__card--center,
body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] .opd-split-hero__card--center {
    max-width: 42rem;
}
body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] .opd-fold-hero__visual--beacon,
body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] .opd-split-hero__visual--beacon {
    width: 100%;
    max-width: 900px;
}

/* ── Rail: banner left (62%), card right ── */
body.skin-magz[data-opd-theme] [data-opd-fold="rail"] .opd-fold-hero__stage--rail,
body.skin-magz[data-opd-theme] [data-opd-fold="rail"] .opd-split-hero__stage--rail,
body.skin-magz[data-opd-theme] [data-opd-fold="rail"] .opd-organic-hero__stage--rail,
body.skin-magz[data-opd-theme] [data-opd-fold="rail"] .opd-induk-hero__stage--rail {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr);
    gap: clamp(1rem, 2.5vw, 1.5rem);
    align-items: stretch;
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 3vw, 2rem);
}
body.skin-magz[data-opd-theme] [data-opd-fold="rail"] .opd-fold-hero__card--rail,
body.skin-magz[data-opd-theme] [data-opd-fold="rail"] .opd-split-hero__card--rail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1.15rem;
}

/* ── Stack: identity top, banner full width below ── */
body.skin-magz[data-opd-theme] [data-opd-fold="stack"] .opd-fold-hero__stage--stack,
body.skin-magz[data-opd-theme] [data-opd-fold="stack"] .opd-split-hero__stage--stack,
body.skin-magz[data-opd-theme] [data-opd-fold="stack"] .opd-organic-hero__stage--stack,
body.skin-magz[data-opd-theme] [data-opd-fold="stack"] .opd-induk-hero__stage--stack {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2rem) 1rem;
}
body.skin-magz[data-opd-theme] [data-opd-fold="stack"] .opd-fold-hero__card--stack,
body.skin-magz[data-opd-theme] [data-opd-fold="stack"] .opd-induk-hero__card--stack {
    max-width: 48rem;
}
body.skin-magz[data-opd-theme] [data-opd-fold="stack"] .opd-fold-hero__visual--stack,
body.skin-magz[data-opd-theme] [data-opd-fold="stack"] .opd-induk-hero__visual--stack {
    width: 100%;
}

/* ── Wave: organic curved separation ── */
body.skin-magz[data-opd-theme] [data-opd-fold="wave"] {
    padding-bottom: 0 !important;
}
body.skin-magz[data-opd-theme] [data-opd-fold="wave"] .opd-organic-hero__wave,
body.skin-magz[data-opd-theme] [data-opd-fold="wave"] .opd-fold-hero__wave {
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    background: radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 70%);
    pointer-events: none;
}
body.skin-magz[data-opd-theme] [data-opd-fold="wave"] .opd-organic-hero__stage--wave,
body.skin-magz[data-opd-theme] [data-opd-fold="wave"] .opd-fold-hero__stage--wave {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem);
    position: relative;
    z-index: 1;
}
body.skin-magz[data-opd-theme] [data-opd-fold="wave"] .opd-organic-hero__card,
body.skin-magz[data-opd-theme] [data-opd-fold="wave"] .opd-fold-hero__card {
    border-radius: 1.35rem;
    background: color-mix(in srgb, #fff 88%, var(--color-primary) 12%);
    padding: 1.15rem 1.25rem;
    box-shadow: 0 16px 40px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* ── Minimal: horizontal compact row ── */
body.skin-magz[data-opd-theme] [data-opd-fold="minimal"] .opd-induk-hero__stage--minimal,
body.skin-magz[data-opd-theme] [data-opd-fold="minimal"] .opd-fold-hero__stage--minimal,
body.skin-magz[data-opd-theme] [data-opd-fold="minimal"] .opd-split-hero__stage--minimal {
    display: grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2rem);
}
body.skin-magz[data-opd-theme] [data-opd-fold="minimal"] .opd-fold-hero__visual--minimal,
body.skin-magz[data-opd-theme] [data-opd-fold="minimal"] .opd-induk-hero__visual--minimal {
    max-width: 220px;
}
body.skin-magz[data-opd-theme] [data-opd-fold="minimal"] .opd-fold-hero__title {
    font-size: clamp(1.25rem, 2.2vw, 1.65rem) !important;
}

/* ── Duo: default side-by-side (inherits polish.css) ── */
body.skin-magz[data-opd-theme] [data-opd-fold="duo"] .opd-fold-hero__stage--duo,
body.skin-magz[data-opd-theme] [data-opd-fold="duo"] .opd-split-hero__stage--duo,
body.skin-magz[data-opd-theme] [data-opd-fold="duo"] .opd-induk-hero__stage--duo {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(1.1rem, 2.8vw, 2rem) clamp(1rem, 3vw, 2rem) clamp(.85rem, 2vw, 1.25rem);
}

/* ── Section skins (body stack rhythm) ── */
body.skin-magz[data-opd-theme] .opd-body-stack--magazine .opd-svc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.skin-magz[data-opd-theme] .opd-body-stack--magazine .opd-news-grid--service {
    grid-template-columns: 1fr;
}
body.skin-magz[data-opd-theme] .opd-body-stack--magazine [data-block="news"] .opd-mag-induk,
body.skin-magz[data-opd-theme] .opd-body-stack--magazine [data-block="news"] .opd-news-grid--service > div:first-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

body.skin-magz[data-opd-theme] .opd-body-stack--desk .opd-svc__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: .85rem;
    padding-bottom: .35rem;
    -webkit-overflow-scrolling: touch;
}
body.skin-magz[data-opd-theme] .opd-body-stack--desk .opd-svc__card {
    flex: 0 0 min(280px, 78vw);
    scroll-snap-align: start;
}

body.skin-magz[data-opd-theme] .opd-body-stack--gallery .opd-svc__grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
body.skin-magz[data-opd-theme] .opd-body-stack--gallery .opd-svc__card {
    border-radius: 1.1rem;
    flex-direction: column;
    text-align: center;
}
body.skin-magz[data-opd-theme] .opd-body-stack--gallery .opd-svc__icon {
    margin: 0 auto;
}

body.skin-magz[data-opd-theme] .opd-body-stack--formal .opd-svc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.skin-magz[data-opd-theme] .opd-body-stack--formal .opd-svc__card {
    border-radius: .4rem;
}

@media (max-width: 991.98px) {
    body.skin-magz[data-opd-theme] [data-opd-fold="rail"] .opd-fold-hero__stage--rail,
    body.skin-magz[data-opd-theme] [data-opd-fold="rail"] .opd-split-hero__stage--rail,
    body.skin-magz[data-opd-theme] [data-opd-fold="wave"] .opd-organic-hero__stage--wave,
    body.skin-magz[data-opd-theme] [data-opd-fold="minimal"] .opd-induk-hero__stage--minimal {
        grid-template-columns: 1fr;
    }
    body.skin-magz[data-opd-theme] [data-opd-fold="cinema"] .opd-fold-hero__meta--strip {
        grid-template-columns: 1fr;
    }
    body.skin-magz[data-opd-theme] [data-opd-fold="beacon"] .opd-fold-hero__visual--beacon {
        order: -1;
    }
}