/* ================================================================
   INSIGHTS (ch-ins) — tema terang
   Desktop (>=1200px): intro kiri atas, lima kartu label di atas panel hologram,
   tiga kartu artikel di bawah; semua diposisikan dengan persentase dan teks
   berukuran cqw. Di bawah itu: gambar di atas, lalu semuanya bertumpuk.
================================================================ */
.ch-ins {
    --ch-navy: #14284a;
    --ch-terra: #b4573b;
    --ch-body: #2f3646;
    --ch-bg: #fdf6f0;
    position: relative;
    background: var(--ch-bg);
    color: var(--ch-navy);
    overflow: hidden;
}

.ch-ins-stage { position: relative; }
.ch-ins .ch-accent { color: var(--ch-terra); }

/* ---------- Mobile / tablet (default) ---------- */
.ch-ins-art { position: relative; }
.ch-ins-art img { display: block; width: 100%; height: auto; }

.ch-ins-art-fade {
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(0deg, var(--ch-bg) 4%, transparent);
}

.ch-ins-copy,
.ch-ins-layers,
.ch-ins-cards {
    position: relative;
    width: min(100% - 40px, 760px);
    margin-inline: auto;
}

.ch-ins-copy { margin-top: -10px; }

.ch-ins-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    color: var(--ch-terra);
    font-size: 12px;
    line-height: 1;
    letter-spacing: .26em;
}

.ch-ins-eyebrow-line { flex: 0 0 30px; height: 1px; background: currentColor; }

.ch-ins-title {
    margin: 0 0 16px;
    font-size: clamp(25px, 6.8vw, 38px);
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--ch-navy);
}

.ch-ins-body p {
    margin: 0 0 .9em;
    color: var(--ch-body);
    font-size: 14px;
    line-height: 1.65;
}

.ch-ins-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--ch-terra);
    color: var(--ch-navy);
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    transition: gap .25s ease, color .25s ease;
}

.ch-ins-link svg { color: var(--ch-terra); }
.ch-ins-link:hover,
.ch-ins-link:focus-visible { gap: 12px; color: var(--ch-terra); }
.ch-ins-link--lead { margin-top: 8px; }

/* Lima lapisan (mobile: daftar bernomor) */
.ch-ins-layers {
    display: grid;
    gap: 10px;
    margin: 30px auto 0;
    padding: 0;
    list-style: none;
}

.ch-ins-layer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(180, 87, 59, .25);
    border-radius: 14px;
    background: rgba(255, 255, 255, .65);
}

.ch-ins-layer-num { color: var(--ch-terra); font-size: 13px; letter-spacing: .1em; }
.ch-ins-layer-body { display: grid; gap: 2px; }
.ch-ins-layer-body strong { font-size: 15px; color: var(--ch-navy); }
.ch-ins-layer-body span { font-size: 13px; line-height: 1.45; color: var(--ch-body); }

/* Kartu artikel */
.ch-ins-cards {
    display: grid;
    gap: 14px;
    margin: 28px auto 0;
    padding-bottom: 56px;
}

.ch-ins-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(180, 87, 59, .22);
    border-radius: 18px;
    background: rgba(255, 255, 255, .65);
}

.ch-ins-card-thumb {
    flex: 0 0 96px;
    align-self: flex-start;
    height: 112px;
    border-radius: 12px;
    background-image: var(--thumb);
    background-repeat: no-repeat;
    background-size: 553% auto;
    background-position: var(--pos);
}

.ch-ins-card-cat { display: block; margin-bottom: 6px; color: var(--ch-terra); font-size: 10.5px; letter-spacing: .16em; }
.ch-ins-card h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.25; color: var(--ch-navy); }
.ch-ins-card p { margin: 0 0 12px; color: var(--ch-body); font-size: 13px; line-height: 1.55; }

@media (min-width: 700px) and (max-width: 1199px) {
    .ch-ins-cards { grid-template-columns: repeat(3, 1fr); width: min(100% - 40px, 1000px); }
    .ch-ins-card { flex-direction: column; }
    .ch-ins-card-thumb { flex-basis: auto; width: 100%; height: 120px; }
    .ch-ins-layers { grid-template-columns: repeat(5, 1fr); width: min(100% - 40px, 1000px); }
    .ch-ins-layer { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------- Desktop: overlay di atas gambar ---------- */
@media (min-width: 1200px) {
    .ch-ins-stage { container-type: inline-size; }
    /* scrim putih di bawah agar kartu artikel terbaca di atas meja yang ramai */
    .ch-ins-art-fade {
        display: block;
        inset: auto 0 0 0;
        height: 34%;
        background: linear-gradient(0deg, rgba(253, 246, 240, .94) 0%, rgba(253, 246, 240, .78) 55%, transparent 100%);
    }

    .ch-ins-copy,
    .ch-ins-layers,
    .ch-ins-cards { position: absolute; margin: 0; width: auto; }

    .ch-ins-copy { left: 6.1%; top: 7%; width: 35%; }

    .ch-ins-eyebrow { gap: 1.4cqw; margin-bottom: 1.3cqw; font-size: max(11px, .85cqw); }
    .ch-ins-eyebrow-line { flex-basis: 3cqw; }
    .ch-ins-title { margin-bottom: 1.4cqw; font-size: 2.3cqw; }
    .ch-ins-body p { margin-bottom: .8cqw; font-size: max(12px, .9cqw); line-height: 1.55; }
    .ch-ins-link { font-size: max(12px, .9cqw); padding-bottom: .35cqw; }
    .ch-ins-link--lead { margin-top: .9cqw; }

    /* lima kartu label di atas panel hologram (gambar 1659x948) */
    .ch-ins-layers { inset: 0; display: block; padding: 0; }

    .ch-ins-layer {
        position: absolute;
        display: block;
        width: 11.6%;
        min-height: 9.4%;
        box-sizing: border-box;
        padding: .7cqw .9cqw;
        border: 1px solid rgba(255, 255, 255, .42);
        border-radius: .9cqw;
        background: linear-gradient(135deg, rgba(34, 46, 84, .62), rgba(34, 46, 84, .4));
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 .5cqw 1.5cqw rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
        color: #fff;
    }

    .ch-ins-layer--1 { left: 75.8%; top: 4.6%; }
    .ch-ins-layer--2 { left: 78%; top: 15.4%; }
    .ch-ins-layer--3 { left: 80.2%; top: 26.4%; }
    .ch-ins-layer--4 { left: 80.6%; top: 38%; }
    .ch-ins-layer--5 { left: 80.9%; top: 49.2%; }

    .ch-ins-layer-num { display: none; }
    .ch-ins-layer-body { display: block; }
    .ch-ins-layer-body strong { display: block; margin-bottom: .3cqw; color: #fff; font-size: 1cqw; line-height: 1.15; }
    .ch-ins-layer-body span { display: block; color: rgba(255, 255, 255, .9); font-size: .72cqw; line-height: 1.28; }

    /* tiga kartu artikel (referensi: x 6-95%, y 76-92%) */
    .ch-ins-cards {
        left: 6.1%;
        bottom: 5%;
        width: 88.5%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding: 0;
    }

    /* kartu kaca berbingkai, seperti Discoveries (versi terang) */
    .ch-ins-cards { gap: 1.4cqw; }

    .ch-ins-card {
        gap: 1.2cqw;
        padding: 1.2cqw 1.4cqw;
        align-items: center;
        border: 1px solid rgba(255, 255, 255, .85);
        border-radius: 1.3cqw;
        background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .42));
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 .8cqw 2.2cqw rgba(20, 40, 74, .14), inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .ch-ins-card + .ch-ins-card { padding-left: 1.4cqw; border-left: 1px solid rgba(255, 255, 255, .85); }

    .ch-ins-card-thumb { flex: 0 0 8.2cqw; height: 9.4cqw; border-radius: .9cqw; box-shadow: 0 .4cqw 1.2cqw rgba(20, 40, 74, .18); }
    .ch-ins-card-cat { margin-bottom: .45cqw; font-size: max(9.5px, .68cqw); }
    .ch-ins-card h3 { margin-bottom: .5cqw; font-size: 1.12cqw; }
    .ch-ins-card p { margin-bottom: .7cqw; font-size: max(10.5px, .78cqw); line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
    .ch-ins-link { transition: none; }
}

/* Thumbnail artikel sungguhan: gambar penuh, bukan potongan dari latar section */
.ch-ins-card-thumb--img { background-size: cover; background-position: center; background-color: rgba(20, 40, 74, .08); }
.ch-ins-card h3 { overflow-wrap: anywhere; }

/* Mobile / tablet: kartu kaca juga (satu kolom) */
@media (max-width: 1199px) {
    .ch-ins-card { border: 1px solid rgba(255, 255, 255, .85); background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 28px rgba(20, 40, 74, .12); }
}