/* ================================================================
   JELAJAHI PENGETAHUAN TEH CAHYA (ch-explore) — tema terang
   Desktop (>=1100px): intro dan 3 pilihan diposisikan di atas area kosong gambar,
   ukuran teks mengikuti lebar section (cqw). Di bawah itu: foto jadi pita di atas,
   konten disusun normal.
================================================================ */
.ch-explore {
    --ch-navy: #14284a;
    --ch-terra: #b4573b;
    --ch-body: #3b4150;
    --ch-bg: #fcf3ec;
    position: relative;
    background: var(--ch-bg);
    color: var(--ch-navy);
    overflow: hidden;
}

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

/* ---------- Mobile / tablet (default) ---------- */
.ch-explore-art {
    --h: min(52vw, 320px);
    position: relative;
    height: var(--h);
    overflow: hidden;
}

.ch-explore-art img {
    position: absolute;
    top: 0;
    right: 0;
    height: calc(var(--h) * 1.9);
    width: auto;
    max-width: none;
}

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

.ch-explore-intro,
.ch-explore-paths {
    position: relative;
    width: min(100% - 40px, 760px);
    margin-inline: auto;
}

.ch-explore-intro { margin-top: -18px; }

.ch-explore-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    color: var(--ch-terra);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .2em;
}

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

.ch-explore-title {
    margin: 0 0 14px;
    font-size: clamp(26px, 7vw, 40px);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--ch-navy);
    text-wrap: balance;
}

.ch-explore-desc {
    margin: 0 0 28px;
    color: var(--ch-body);
    font-size: 14px;
    line-height: 1.65;
}

.ch-explore-desc strong { color: var(--ch-navy); font-weight: inherit; }

.ch-explore-paths { display: grid; gap: 14px; }

.ch-explore-path {
    padding: 22px 20px 20px;
    border: 1px solid rgba(180, 87, 59, .25);
    border-radius: 18px;
    background: rgba(255, 255, 255, .6);
}

.ch-explore-path h3 {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.2;
    color: var(--ch-navy);
}

.ch-explore-path p {
    margin: 0 0 16px;
    color: var(--ch-body);
    font-size: 13.5px;
    line-height: 1.6;
}

.ch-explore-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }

.ch-explore-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-explore-link svg { color: var(--ch-terra); }
.ch-explore-link:hover,
.ch-explore-link:focus-visible { gap: 12px; color: var(--ch-terra); }

@media (max-width: 1099px) {
    .ch-explore-stage { padding-bottom: 56px; }
}

@media (min-width: 700px) and (max-width: 1099px) {
    .ch-explore-paths { grid-template-columns: repeat(3, 1fr); width: min(100% - 40px, 1000px); }
    .ch-explore-intro { width: min(100% - 40px, 1000px); }
}

/* ---------- Desktop: overlay di atas gambar ---------- */
@media (min-width: 1100px) {
    .ch-explore-stage { container-type: inline-size; }

    .ch-explore-art { --h: auto; height: auto; }
    .ch-explore-art img { position: static; display: block; width: 100%; height: auto; }
    .ch-explore-art-fade { display: none; }

    .ch-explore-intro,
    .ch-explore-paths { position: absolute; margin: 0; width: auto; }

    .ch-explore-intro { left: 6.4%; top: 6.5%; width: 56%; }

    .ch-explore-eyebrow { gap: 1.4cqw; margin-bottom: 1.2cqw; font-size: max(11px, .85cqw); letter-spacing: .22em; }
    .ch-explore-eyebrow-line { flex-basis: 2.8cqw; }
    .ch-explore-title { margin-bottom: 1.1cqw; font-size: 2.8cqw; }
    .ch-explore-desc { margin: 0; font-size: max(12px, .98cqw); line-height: 1.6; }

    .ch-explore-paths {
        left: 10.4%;
        top: 71%;
        width: 85%;
        display: grid;
        grid-template-columns: 24% 36% 1fr;
        grid-template-rows: auto 1fr auto;
        gap: 0;
    }

    /* subgrid: judul, deskripsi, dan link tiap kolom sejajar horizontal */
    .ch-explore-path {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        padding: 0 3.4cqw 0 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .ch-explore-path:nth-child(2) {
        padding-left: 4.4cqw;
        border-left: 1px solid rgba(180, 87, 59, .45);
    }

    .ch-explore-path:nth-child(3) {
        padding-left: 4cqw;
        padding-right: 0;
        border-left: 1px solid rgba(180, 87, 59, .45);
    }

    .ch-explore-path h3 { margin-bottom: .9cqw; font-size: 1.4cqw; line-height: 1.2; white-space: nowrap; }
    .ch-explore-path p { margin-bottom: 1.3cqw; font-size: max(11.5px, .86cqw); line-height: 1.55; }
    .ch-explore-links { flex-wrap: nowrap; gap: .6cqw 1.5cqw; align-self: end; }
    .ch-explore-link { font-size: max(12px, .85cqw); padding-bottom: .4cqw; white-space: nowrap; }
}

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