/* =========================================================
   WONDO NEXT — elevation layer on top of style.css + public-modern.css
   Fresh, clean, animated. Brand blue is kept and pushed further.
   ========================================================= */

:root {
    --wnext-radius-xl: 22px;
    --wnext-radius-lg: 16px;
    --wnext-radius-md: 12px;
    --wnext-radius-sm: 8px;
    --wnext-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --wnext-dur: 0.35s;
    --wnext-shadow-soft:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 30px -12px rgba(15, 23, 42, 0.12);
    --wnext-shadow-hover:
        0 2px 4px rgba(15, 23, 42, 0.05),
        0 22px 44px -18px rgba(15, 23, 42, 0.22);
}

/* ---------- Scroll reveal (driven by .rv / .is-inview) ---------- */
.rv {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.55s var(--wnext-ease),
        transform 0.55s var(--wnext-ease);
    will-change: opacity, transform;
    transition-delay: var(--rv-delay, 0s);
}

.rv.is-inview {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .rv {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .lift,
    .wondo-hero-art,
    .scroll-top {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- Hover lift ---------- */
.lift {
    transition:
        transform var(--wnext-dur) var(--wnext-ease),
        box-shadow var(--wnext-dur) var(--wnext-ease);
}

.lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--wnext-shadow-hover);
}

/* ---------- Header: cleaner pill nav ---------- */
.nav-cat-pills {
    gap: 4px !important;
}

.nav-cat-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--wondo-slate-600) !important;
    transition: all 0.25s var(--wnext-ease);
}

.nav-cat-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.08));
    transition: transform 0.25s var(--wnext-ease);
}

.nav-cat-pill:hover {
    color: var(--wondo-primary) !important;
    background: var(--wondo-primary-light) !important;
}

.nav-cat-pill:hover .nav-cat-icon {
    transform: translateY(-1px) scale(1.08);
}

/* ---------- Search field ---------- */
.header-search-wrap-two form {
    border-radius: 999px !important;
    overflow: hidden;
    border: 1px solid var(--wondo-slate-200) !important;
    background: var(--wondo-slate-50) !important;
    transition: all 0.25s var(--wnext-ease);
}

.header-search-wrap-two form:focus-within {
    border-color: var(--wondo-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px var(--wondo-primary-glow);
}

/* ---------- Hero spotlight ---------- */
.hero-spotlight-card {
    border-radius: var(--wnext-radius-xl) !important;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--wnext-shadow-soft);
    transition: box-shadow 0.35s var(--wnext-ease);
}

.hero-spotlight-card:hover {
    box-shadow: var(--wnext-shadow-hover);
}

.hero-spotlight-thumb {
    position: relative;
    overflow: hidden;
}

.hero-spotlight-thumb img {
    transition: transform 0.9s var(--wnext-ease);
    transform: scale(1.001);
}

.hero-spotlight-card:hover .hero-spotlight-thumb img {
    transform: scale(1.05);
}

.hero-spotlight-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0) 45%,
        rgba(15, 23, 42, 0.55)
    );
    pointer-events: none;
}

.hero-spotlight-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #137eff, #06b6d4);
    box-shadow: 0 8px 20px -8px rgba(19, 126, 255, 0.7);
    letter-spacing: 0.01em;
}

.hero-spotlight-content {
    position: relative;
    z-index: 1;
}

/* ---------- Category big card ---------- */
.budaya-big-card {
    border-radius: var(--wnext-radius-xl) !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: var(--wnext-shadow-soft) !important;
    border: 1px solid rgba(226, 232, 240, 0.6);
    transition:
        box-shadow 0.35s var(--wnext-ease),
        transform 0.35s var(--wnext-ease);
}

.budaya-big-card:hover {
    box-shadow: var(--wnext-shadow-hover);
}

.budaya-big-thumb {
    overflow: hidden;
}

.budaya-big-thumb img {
    transition: transform 0.9s var(--wnext-ease);
}

.budaya-big-card:hover .budaya-big-thumb img {
    transform: scale(1.04);
}

/*
 * Equal-size big cards across every category row (event/budaya/desa/...):
 * lock the title to 2 lines and reserve a 3-line excerpt so card content
 * never grows or shrinks with the article text. Thumb is already fixed via
 * the min-992px flex rule below.
 */
.budaya-big-content .post-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.7em;
}

.budaya-big-content .budaya-excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 4.8em;
}

/* ---------- Small cards ---------- */
.budaya-small-card {
    border-radius: var(--wnext-radius-lg) !important;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: var(--wnext-shadow-soft) !important;
    transition:
        transform 0.35s var(--wnext-ease),
        box-shadow 0.35s var(--wnext-ease);
}

.budaya-small-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--wnext-shadow-hover);
}

.budaya-small-thumb img {
    transition: transform 0.9s var(--wnext-ease);
}

.budaya-small-card:hover .budaya-small-thumb img {
    transform: scale(1.05);
}

/* ---------- Weekly / latest list cards ---------- */
.weekly-post-item {
    border-radius: var(--wnext-radius-lg) !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(226, 232, 240, 0.55) !important;
    box-shadow: var(--wnext-shadow-soft) !important;
    transition:
        transform 0.35s var(--wnext-ease),
        box-shadow 0.35s var(--wnext-ease);
}

.weekly-post-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--wnext-shadow-hover);
}

.weekly-post-thumb {
    overflow: hidden;
}

.weekly-post-thumb img {
    transition: transform 0.9s var(--wnext-ease);
}

.weekly-post-item:hover .weekly-post-thumb img,
.budaya-big-card:hover img,
.budaya-small-card:hover img {
    transform: scale(1.05);
}

/* ---------- Section title ---------- */
.section-title-wrap {
    position: relative;
}

.section-title h2.title {
    position: relative;
    padding-bottom: 10px;
}

.section-title h2.title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3.5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #137eff, #06b6d4);
}

.view-all-btn .link-btn {
    position: relative;
    font-weight: 700 !important;
    color: var(--wondo-primary) !important;
    transition: color 0.25s var(--wnext-ease);
}

.view-all-btn .link-btn::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 2px;
    width: 0;
    border-radius: 2px;
    background: currentColor;
    transition: width 0.3s var(--wnext-ease);
}

.view-all-btn .link-btn:hover::after {
    width: 100%;
}

/* ---------- Post tag pills ---------- */
.post-tag {
    border-radius: 999px !important;
    padding: 4px 11px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    transition: all 0.25s var(--wnext-ease);
}

.post-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -6px currentColor;
}

/* ---------- Sidebar widgets ---------- */
.sidebar-widget {
    border-radius: var(--wnext-radius-lg) !important;
    overflow: hidden !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    box-shadow: var(--wnext-shadow-soft) !important;
}

.widget-title h2.title::after {
    content: '';
    display: block;
    width: 38px;
    height: 3.5px;
    margin-top: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #137eff, #06b6d4);
}

.popular-post-card {
    transition:
        transform 0.3s var(--wnext-ease),
        background 0.3s var(--wnext-ease);
    border-radius: 14px;
    padding: 6px;
}

.popular-post-card:hover {
    transform: translateX(3px);
    background: var(--wondo-slate-50);
}

.popular-rank-badge.rank-1 {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.popular-rank-badge.rank-2 {
    background: linear-gradient(135deg, #94a3b8, #64748b);
}

.popular-rank-badge.rank-3 {
    background: linear-gradient(135deg, #b45309, #d97706);
}

.sidebar-banner-card {
    border-radius: var(--wnext-radius-lg) !important;
    overflow: hidden;
}

.sidebar-banner-img {
    transition: transform 0.9s var(--wnext-ease);
}

.sidebar-banner-card:hover .sidebar-banner-img {
    transform: scale(1.06);
}

/* ---------- Article reading body ---------- */
.article-reading-body {
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--wondo-slate-700);
    max-width: 72ch;
}

.article-reading-body p {
    margin-bottom: 1.25em;
}

.article-reading-body h2 {
    font-size: 26px;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    letter-spacing: -0.02em;
}

.article-reading-body h3 {
    font-size: 21px;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.article-reading-body img {
    border-radius: var(--wnext-radius-lg);
    box-shadow: var(--wnext-shadow-soft);
}

.article-reading-body blockquote {
    position: relative;
    padding: 18px 24px;
    margin: 1.6em 0;
    border-radius: 14px;
    background: var(--wondo-primary-light);
    border-left: 0;
    font-size: 18px;
    color: var(--wondo-slate-800);
}

.article-reading-body blockquote::before {
    content: '"';
    position: absolute;
    top: -12px;
    left: 16px;
    font-size: 56px;
    font-weight: 800;
    color: var(--wondo-primary);
    opacity: 0.35;
}

.article-reading-body a {
    color: var(--wondo-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, #137eff 35%, transparent);
    text-underline-offset: 3px;
}

/* ---------- Article header ---------- */
.article-main-title {
    font-size: clamp(26px, 4vw, 38px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
}

.blog-details-wrap {
    border-radius: var(--wnext-radius-xl) !important;
    border: 1px solid rgba(226, 232, 240, 0.55) !important;
    box-shadow: var(--wnext-shadow-soft) !important;
}

/* ---------- Mobile drawer ---------- */
.mobile-menu {
    width: min(86vw, 340px) !important;
    border-radius: 0 0 0 22px;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(14px);
}

.menu-backdrop {
    backdrop-filter: blur(3px);
    background: rgba(15, 23, 42, 0.35);
}

.mobile-menu .navigation li a {
    border-radius: 12px;
    padding: 11px 14px;
    transition: background 0.2s var(--wnext-ease);
}

.mobile-menu .navigation li a:hover {
    background: var(--wondo-primary-light);
    color: var(--wondo-primary);
}

/* ---------- Footer ---------- */
.wondo-footer-top {
    border-top: 0;
}

.wondo-footer {
    border-top-left-radius: var(--wnext-radius-xl);
    border-top-right-radius: var(--wnext-radius-xl);
    overflow: hidden;
}

.wondo-footer-links li a {
    position: relative;
    transition:
        color 0.2s var(--wnext-ease),
        padding-left 0.2s var(--wnext-ease);
}

.wondo-footer-links li a:hover {
    color: #60a5fa;
    padding-left: 4px;
}

.wondo-social-btn {
    transition:
        transform 0.25s var(--wnext-ease),
        background 0.25s var(--wnext-ease);
}

.wondo-social-btn:hover {
    transform: translateY(-2px);
    background: rgba(19, 126, 255, 0.15);
}

/* ---------- Scroll to top ---------- */
.scroll-top {
    background: linear-gradient(135deg, #137eff, #0066ff) !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 24px -8px rgba(19, 126, 255, 0.55) !important;
    transition: transform 0.3s var(--wnext-ease);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-top:hover {
    transform: translateY(-3px);
}

/* ---------- Pagination ---------- */
.navigation.pagination {
    gap: 6px;
}

.pagination .page-link {
    border-radius: 10px !important;
    border: 1px solid var(--wondo-slate-200) !important;
    color: var(--wondo-slate-600) !important;
    font-weight: 600;
    transition: all 0.25s var(--wnext-ease);
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #137eff, #0066ff) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -8px rgba(19, 126, 255, 0.55);
}

.pagination .page-item .page-link:hover {
    border-color: var(--wondo-primary) !important;
    color: var(--wondo-primary) !important;
}

/* ---------- Promo banners ---------- */
.promo-slide-item a {
    display: block;
    border-radius: var(--wnext-radius-lg);
    overflow: hidden;
    box-shadow: var(--wnext-shadow-soft);
    transition:
        transform 0.35s var(--wnext-ease),
        box-shadow 0.35s var(--wnext-ease);
}

.promo-slide-item a:hover {
    transform: translateY(-4px);
    box-shadow: var(--wnext-shadow-hover);
}

/* ---------- Category header pages (kategori/search/penulis) ---------- */
.breadcrumb-inner {
    background: linear-gradient(180deg, var(--wondo-slate-50), #fff) !important;
}

.section-title-icon .cat-icon-sm {
    border-radius: 12px;
    background: var(--wondo-primary-light);
    padding: 8px;
}

/* ---------- Empty states ---------- */
.wondo-empty-state {
    border-radius: var(--wnext-radius-lg);
    border: 1.5px dashed var(--wondo-slate-200);
    background: var(--wondo-slate-50);
}

/* ---------- Image caption ---------- */
.image-caption-box {
    margin-top: 10px;
    font-size: 13px;
    color: var(--wondo-slate-500);
    text-align: center;
}

/* =========================================================
   HERO SECONDARY LIST — compact quick-scan cards next to spotlight.
   Fully re-stated so legacy `.weekly-post-*` widths/paddings cannot
   leak in and squash the cards inside the 2-column grid.
   ========================================================= */
.hero-secondary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

.hero-secondary-list .weekly-post-item.weekly-post-four {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    border: 1px solid rgba(226, 232, 240, 0.7) !important;
    border-radius: var(--wnext-radius-lg) !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: var(--wnext-shadow-soft) !important;
    transition:
        transform 0.3s var(--wnext-ease),
        box-shadow 0.3s var(--wnext-ease) !important;
}

.hero-secondary-list .weekly-post-item.weekly-post-four:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--wnext-shadow-hover) !important;
}

.hero-secondary-list .weekly-post-item .weekly-post-thumb {
    width: 100% !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: none !important;
    border-radius: 0 !important;
}

.hero-secondary-list .weekly-post-item .weekly-post-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transition: transform 0.9s var(--wnext-ease);
}

.hero-secondary-list .weekly-post-item.weekly-post-four:hover .weekly-post-thumb img {
    transform: scale(1.06);
}

.hero-secondary-list .weekly-post-item .weekly-post-content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 12px 13px 13px !important;
}

.hero-secondary-list .weekly-post-item .post-tag {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 7px;
    padding: 3px 9px !important;
    font-size: 10.5px !important;
}

.hero-secondary-list .weekly-post-item .weekly-post-content .post-title {
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    color: var(--wondo-slate-900) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
}

.hero-secondary-list .weekly-post-item:hover .weekly-post-title a,
.hero-secondary-list .weekly-post-item:hover .weekly-post-content .post-title a {
    color: var(--wondo-primary) !important;
}

/* Meta row pinned to the bottom, author dropped — half-width cards
   have no room for three breadcrumb items. */
.hero-secondary-list .weekly-post-item .weekly-post-content .blog-post-meta {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    width: 100%;
}

.hero-secondary-list .weekly-post-item .blog-post-meta ul.list-wrap {
    flex-wrap: wrap;
    gap: 4px 10px !important;
    justify-content: flex-start !important;
}

.hero-secondary-list .weekly-post-item .blog-post-meta li {
    font-size: 10.5px !important;
    gap: 4px !important;
    color: var(--wondo-slate-500) !important;
}

.hero-secondary-list .weekly-post-item .meta-author {
    display: none !important;
}

/* Excerpt + read-more are deliberately out of this quick-scan list. */
.hero-secondary-list .weekly-post-item .weekly-post-content > p,
.hero-secondary-list .weekly-post-item .view-all-btn {
    display: none !important;
}

@media (max-width: 767.98px) {
    .hero-secondary-list .weekly-post-item .weekly-post-thumb {
        height: 96px !important;
        min-height: 96px !important;
    }
    .hero-secondary-list .weekly-post-item .weekly-post-content .post-title {
        font-size: 13px !important;
    }
}

@media (max-width: 374.98px) {
    .hero-secondary-list {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   CATEGORY SMALL CARDS — right-hand column of each section.
   Safe values only: fixed thumb, content flex with min-width:0.
   ========================================================= */
.budaya-small-card {
    display: flex;
    align-items: center;
    /* Neutralize the legacy `flex: 1 1 0` + `min-height: 0` from style.css:
       as a grid/flex ITEM the card must never shrink to a sliver. */
    flex: 0 0 auto !important;
    min-height: 86px !important;
    align-self: auto !important;
    flex-direction: row !important;
    gap: 14px !important;
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 1px solid rgba(226, 232, 240, 0.7) !important;
    border-radius: var(--wnext-radius-lg) !important;
    background: #fff !important;
    overflow: visible !important;
    box-shadow: var(--wnext-shadow-soft) !important;
    transition:
        transform 0.3s var(--wnext-ease),
        box-shadow 0.3s var(--wnext-ease) !important;
}

.budaya-small-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--wnext-shadow-hover) !important;
}

.budaya-small-thumb {
    flex: 0 0 108px !important;
    flex-basis: 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    height: 86px !important;
    min-height: 86px !important;
    border-radius: var(--wnext-radius-md) !important;
    overflow: hidden !important;
    background: var(--wondo-slate-100);
}

.budaya-small-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.9s var(--wnext-ease);
}

.budaya-small-card:hover .budaya-small-thumb img {
    transform: scale(1.06);
}

.budaya-small-content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: auto !important;
    gap: 5px !important;
}

.budaya-small-content .post-tag {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 9px !important;
    font-size: 10.5px !important;
}

.budaya-small-content .post-title {
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
    color: var(--wondo-slate-900) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

.budaya-small-content .post-title a {
    color: inherit !important;
}

/* Keep the quick-scan list lean: badge, title, author/date meta only. */
.budaya-small-excerpt {
    display: none !important;
}

.budaya-small-content .blog-post-meta {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}

/* Balance the category row on desktop: the big card (left) and the
   small-card stack (right) share the same row height. */
@media (min-width: 992px) {
    .row.align-items-start > .col-lg-7.d-flex.flex-column,
    .row.align-items-start > .col-lg-5.d-flex.flex-column {
        align-self: stretch !important;
    }

    .row.align-items-start > .col-lg-5.d-flex.flex-column > .budaya-small-card {
        flex: 1 1 auto !important;
    }

    /* The big card soaks up extra height with a taller image,
       not dead space under the excerpt. */
    .budaya-big-thumb {
        flex: 1 1 auto;
        height: auto;
        min-height: 290px;
        /* Flex container so the <a> wrapper stretches with the thumb
           and the photo fills the whole grown area (no gray gap). */
        display: flex;
    }

    .budaya-big-thumb > a {
        display: block !important;
        width: 100%;
    }

    .budaya-big-thumb > a img {
        height: 100% !important;
    }
}

.budaya-small-content .blog-post-meta ul.list-wrap {
    flex-wrap: wrap;
    gap: 4px 12px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
}

.budaya-small-content .blog-post-meta li {
    font-size: 10.5px !important;
    color: var(--wondo-slate-500) !important;
    list-style: none !important;
}

.budaya-small-content .blog-post-meta li::marker {
    content: '';
}

@media (max-width: 767.98px) {
    .budaya-small-card {
        min-height: 74px !important;
    }
    .budaya-small-thumb {
        flex: 0 0 96px !important;
        flex-basis: 96px !important;
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        height: 74px !important;
        min-height: 74px !important;
    }
}

/* Artikel Lainnya side column keeps its sidebar stack flushed right. */
.healthy-area .col-lg-4 .sidebar-wrap {
    position: sticky;
    top: 24px;
}

/* =========================================================
   SIDEBAR RAIL — cohesive modern stack (search + popular + promo).
   Replaces the legacy boxed-widget look: consistent radius,
   soft shadows, brand accents, clean rank chips.
   ========================================================= */
.sidebar-wrap {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

/* ---- Widget shell: no more heavy boxes ---- */
/* (neutralizes the earlier boxed `.sidebar-widget` block) */
.sidebar-widget {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.sidebar-banner-widget {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* ---- Search ---- */
.sidebar-widget .sidebar-search form {
    margin-bottom: 0;
}

.sidebar-search form input {
    height: 46px;
    padding: 0 46px 0 18px;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    background: #fff !important;
    box-shadow: var(--wnext-shadow-soft);
    transition: border-color 0.25s var(--wnext-ease), box-shadow 0.25s var(--wnext-ease);
}

.sidebar-search form input:focus {
    border-color: var(--wondo-primary) !important;
    box-shadow: 0 0 0 4px var(--wondo-primary-glow) !important;
    background: #fff !important;
}

.sidebar-search form button {
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff !important;
    background: linear-gradient(135deg, #0066ff, #137eff);
    box-shadow: 0 8px 16px -6px rgba(19, 126, 255, 0.55);
    transition: transform 0.25s var(--wnext-ease), box-shadow 0.25s var(--wnext-ease);
}

.sidebar-search form:hover button {
    box-shadow: 0 12px 22px -6px rgba(19, 126, 255, 0.7);
    transform: translateY(-50%) scale(1.04);
}

/* ---- Widget titles ---- */
.sidebar-widget .widget-title {
    margin-bottom: 0 !important;
}

.sidebar-widget .widget-title .title {
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: var(--wondo-slate-900) !important;
    margin: 0 0 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--wondo-slate-200) !important;
    position: relative !important;
}

.sidebar-widget .widget-title .title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #137eff, #06b6d4);
}

/* ---- Popular list ---- */
.popular-post-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.popular-post-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    transition: transform 0.25s var(--wnext-ease), background 0.25s var(--wnext-ease) !important;
}

.popular-post-card:last-child {
    border-bottom: none !important;
}

.popular-post-card:hover {
    transform: translateX(5px) !important;
    background: var(--wondo-slate-50) !important;
}

.popular-thumb-wrap {
    width: 92px !important;
    height: 70px !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--wondo-slate-100) !important;
    position: relative !important;
}

/* Rank chip: clean, not a floating colored dot */
.popular-rank-badge {
    position: absolute !important;
    top: 5px !important;
    left: 5px !important;
    z-index: 3 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: var(--wondo-primary) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(19, 126, 255, 0.25) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: blur(2px);
}

.popular-rank-badge.rank-1 {
    color: #fff !important;
    background: linear-gradient(135deg, #137eff, #06b6d4) !important;
    border-color: transparent !important;
}

.popular-rank-badge.rank-2 {
    color: #fff !important;
    background: linear-gradient(135deg, #475569, #64748b) !important;
    border-color: transparent !important;
}

.popular-rank-badge.rank-3 {
    color: #fff !important;
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
    border-color: transparent !important;
}

.popular-content-wrap {
    flex-grow: 1;
    min-width: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 4px !important;
}

.popular-content-wrap .post-tag {
    display: none !important;
}

.popular-title {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    line-height: 1.48 !important;
    letter-spacing: 0.01em !important;
    color: var(--wondo-slate-900) !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.popular-meta {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 1px !important;
}

/* ---- Promo & Event ---- */
.sidebar-banners-list {
    gap: 16px !important;
}

.sidebar-banner-card {
    border-radius: var(--wnext-radius-lg) !important;
    overflow: hidden !important;
    border: 1px solid rgba(226, 232, 240, 0.7) !important;
    box-shadow: var(--wnext-shadow-soft) !important;
    transition: transform 0.3s var(--wnext-ease), box-shadow 0.3s var(--wnext-ease) !important;
    background: #fff !important;
}

.sidebar-banner-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--wnext-shadow-hover) !important;
}

.sidebar-banner-img {
    max-height: 220px !important;
}

.sidebar-banner-overlay {
    padding: 13px 15px 15px !important;
    border-top: 1px solid #f7f8fa !important;
}

.sidebar-banner-badge {
    display: inline-block !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--wondo-primary) !important;
    background: var(--wondo-primary-light) !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    margin-bottom: 7px !important;
}

.sidebar-banner-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
    color: var(--wondo-slate-900) !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ---- Default Wondo fallback promo ---- */
.sidebar-banner-card.default-wondo-banner {
    border: none !important;
    background: linear-gradient(150deg, #0b3f9e 0%, #137eff 55%, #06b6d4 135%) !important;
    border-radius: var(--wnext-radius-lg) !important;
    box-shadow: 0 14px 34px -14px rgba(19, 126, 255, 0.55) !important;
    position: relative;
    overflow: hidden;
}

.sidebar-banner-card.default-wondo-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.18) 1px, transparent 1px), radial-gradient(circle at 15% 90%, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

.sidebar-banner-default-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 26px 22px 24px;
    color: #fff;
}

.default-banner-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 4px 10px;
    backdrop-filter: blur(2px);
}

.default-banner-heading {
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    margin: 2px 0 0 !important;
}

.default-banner-desc {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    margin: 0 !important;
}

.default-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 800;
    color: #0b3f9e;
    background: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.35);
    transition: transform 0.25s var(--wnext-ease);
}

.sidebar-banner-default-content:hover .default-banner-cta {
    transform: translateY(-1px);
}

/* ---- Sidebar on small screens ---- */
@media (max-width: 767.98px) {
    .sidebar-wrap {
        gap: 18px;
    }
    .popular-thumb-wrap {
        width: 84px !important;
        height: 64px !important;
        border-radius: 10px !important;
    }
    .popular-title {
        font-size: 13px !important;
    }
    .sidebar-search form input {
        height: 44px;
    }
}

/* =========================================================
   WNG — REDESIGN 2026 (reference: 4-view mockup)
   Homepage hero, chips, grid cards, kategori hero, footer terang
   ========================================================= */

:root {
    --wng-font:
        'Plus Jakarta Sans', 'Sora', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, sans-serif;
    --wng-blue: #137eff;
    --wng-blue-dark: #0062e0;
    --wng-ink: #0f172a;
    --wng-slate: #475569;
    --wng-muted: #64748b;
    --wng-line: #e2e8f0;
    --wng-sky-bg: #eaf2fe;
    --wng-card-r: 20px;
}

body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: var(--wng-font);
}

/* ---------- Header: single row + logo lockup + expanding search ---------- */
.wng-header {
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

.wng-header .menu-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wng-logo .wng-logo-img {
    height: 40px;
    width: auto;
}

.wng-logo-lockup {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.05;
    margin-left: 10px;
}

.wng-logo-lockup strong {
    color: var(--wng-ink);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.wng-logo-lockup em {
    color: var(--wng-blue);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
}

.wng-header .navbar-wrap.main-menu {
    flex: 1;
    justify-content: center;
}

.wng-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.wng-header-search {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid var(--wng-line);
    border-radius: 999px;
    display: flex;
    height: 40px;
    overflow: hidden;
    transition:
        width var(--wnext-dur) var(--wnext-ease),
        background var(--wnext-dur) var(--wnext-ease);
    width: 40px;
}

.wng-header-search input {
    background: transparent;
    border: 0;
    font-size: 13.5px;
    height: 100%;
    opacity: 0;
    outline: none;
    padding: 0;
    transition: opacity 0.25s ease 0.05s;
    width: 0;
}

.wng-header-search input::placeholder {
    color: var(--wng-muted);
}

.wng-header-search.open {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(19, 126, 255, 0.18);
    width: 260px;
}

.wng-header-search.open input {
    flex: 1;
    opacity: 1;
    padding: 0 4px 0 16px;
}

.wng-search-toggle {
    align-items: center;
    background: none;
    border: 0;
    color: var(--wng-slate);
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.wng-search-toggle:hover {
    color: var(--wng-blue);
}

/* ---------- Homepage hero (FULL-BLEED: mentok atas/kanan/kiri) ---------- */
.wng-hero-section {
    padding: 0;
}

.wng-hero {
    align-items: flex-start;
    background-color: #0b3f7a;
    background-position: center top;
    background-size: cover;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 520px;
    overflow: hidden;
    padding: 0 0 60px;
    position: relative;
    width: 100%;
}

.wng-hero .container {
    padding-left: 12px;
    padding-right: 12px;
}

@media (min-width: 1200px) {
    .wng-hero .container {
        max-width: 1140px;
    }
}

/* Dark overlay: bottom-heavy gradient — foto keliatan natural di atas,
   gelap hanya di bawah supaya teks terbaca. Sesuai referensi desain. */
.wng-hero::before {
    background: linear-gradient(
        to bottom,
        rgba(4, 30, 66, 0.18) 0%,
        rgba(4, 30, 66, 0.38) 40%,
        rgba(4, 30, 66, 0.72) 75%,
        rgba(4, 30, 66, 0.82) 100%
    );
    content: '';
    inset: 0;
    position: absolute;
    z-index: 1;
}

/* Hapus ::after — satu overlay cukup, dua overlay bikin foto gelap tertutup */
.wng-hero::after {
    display: none;
}

.wng-hero > * {
    position: relative;
    z-index: 2;
}

.wng-hero-breadcrumb {
    align-items: center;
    color: rgba(255, 255, 255, 0.82);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    margin-bottom: 20px;
}

.wng-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.82);
}

.wng-hero-breadcrumb a:hover {
    color: #fff;
}

.wng-crumb-sep {
    opacity: 0.5;
}

.wng-crumb-current {
    color: #fff;
}

/* Title: bolder, tighter tracking, two-line max on desktop */
.wng-hero-title {
    color: #fff !important;
    font-size: clamp(38px, 5.2vw, 62px);
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.06;
    margin: 0 0 16px;
    max-width: 680px;
    text-shadow: 0 2px 24px rgba(4, 30, 66, 0.45);
}

/* Subtitle: slightly larger, more breathing room */
.wng-hero-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    margin: 0 0 32px;
    max-width: 540px;
    text-shadow: 0 1px 8px rgba(4, 30, 66, 0.3);
}

/* Search bar: taller + blue search button like the reference */
.wng-hero-search {
    background: #fff;
    border-radius: 999px;
    box-shadow:
        0 20px 50px -20px rgba(4, 30, 66, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.15);
    display: flex;
    height: 58px;
    max-width: 520px;
    overflow: hidden;
    width: 100%;
}

.wng-hero-search input {
    background: #fff !important;
    border: 0;
    color: var(--wng-ink);
    flex: 1;
    font-size: 15px;
    outline: none;
    padding: 0 24px;
}

.wng-hero-search input::placeholder {
    color: #94a3b8;
}

.wng-hero-search button {
    background: linear-gradient(135deg, #137eff, #0062e0);
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 44px;
    margin: 7px 7px 7px 0;
    padding: 0;
    width: 44px;
    transition: background 0.25s var(--wnext-ease), transform 0.25s var(--wnext-ease);
    box-shadow: 0 8px 18px -6px rgba(19, 126, 255, 0.65);
}

.wng-hero-search button:hover {
    background: linear-gradient(135deg, #0062e0, #004ec4);
    transform: scale(1.06);
}

/* ---------- Category chip strip (putih, di bawah hero) ---------- */
.wng-chip-strip {
    background: #fff;
    border-radius: var(--wng-card-r);
    box-shadow: var(--wnext-shadow-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: -26px;
    padding: 14px 18px;
    position: relative;
    z-index: 5;
}

.wng-cat-chip {
    align-items: center;
    background: #f1f5f9;
    border-radius: 10px;
    color: var(--wng-ink);
    display: inline-flex;
    font-size: 13.5px;
    font-weight: 700;
    gap: 7px;
    padding: 15px 49px;
    transition: all var(--wnext-dur) var(--wnext-ease);
}

.wng-cat-chip:hover {
    background: rgba(19, 126, 255, 0.1);
    color: var(--wng-blue);
    transform: translateY(-1px);
}

.wng-cat-chip-icon {
    height: 18px;
    width: 18px;
}

/* ---------- Section head ---------- */
.wng-section-head .title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.wng-link-btn {
    color: var(--wng-blue);
}

/* ---------- Artikel Terbaru: big card + side list ---------- */
.wng-latest-section {
    padding: 34px 0 10px;
}

.wng-big-card {
    background: #fff;
    border-radius: var(--wng-card-r);
    box-shadow: var(--wnext-shadow-soft);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.wng-big-thumb {
    display: block;
    height: 280px;
}

.wng-big-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.wng-big-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    padding: 22px 24px 24px;
}

.wng-big-title {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.2px;
    margin: 0;
}

.wng-big-title a {
    color: var(--wng-ink);
}

.wng-big-title a:hover {
    color: var(--wng-blue);
}

.wng-big-excerpt {
    color: var(--wng-slate);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

.wng-big-meta {
    color: var(--wng-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 12.5px;
    font-weight: 600;
    gap: 14px;
    margin-top: auto;
}

.wng-side-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.wng-side-card {
    background: #fff;
    border-radius: var(--wng-card-r);
    box-shadow: var(--wnext-shadow-soft);
    display: flex;
    flex: 1;
    gap: 14px;
    overflow: hidden;
}

.wng-side-thumb {
    display: block;
    flex: 0 0 170px;
}

.wng-side-thumb img {
    height: 100%;
    min-height: 118px;
    object-fit: cover;
    width: 100%;
}

.wng-side-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 14px 0;
}

.wng-side-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.38;
    margin: 0;
    max-width: 100%;
}

.wng-side-title a {
    color: var(--wng-ink);
}

.wng-side-title a:hover {
    color: var(--wng-blue);
}

.wng-side-meta {
    color: var(--wng-muted);
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 12px;
    margin-top: auto;
}

/* ---------- Generic card bits ---------- */
.wng-card-tag {
    align-self: flex-start;
}

.wng-card-meta-item {
    align-items: center;
    display: inline-flex;
    gap: 5px;
}

.wng-card-thumb-empty {
    background: #e2e8f0;
    display: block;
    height: 100%;
    width: 100%;
}

/* ---------- Jelajahi Kategori Wisata (1 baris, horizontal scroll, bg image) ---------- */
.wng-explore-section {
    padding: 28px 0 8px;
}

.wng-explore-viewport {
    overflow-x: auto;
    padding: 6px max(12px, calc((100% - 1140px) / 2 + 12px)) 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.wng-explore-track {
    display: flex;
    gap: 14px;
}

.wng-explore-track > .rv {
    flex: 0 0 auto;
}

.wng-cat-card {
    background-color: #0b3f7a;
    background-position: center;
    background-size: cover;
    border-radius: var(--wng-card-r);
    box-shadow: var(--wnext-shadow-soft);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 148px;
    justify-content: flex-end;
    overflow: hidden;
    padding: 16px;
    position: relative;
    scroll-snap-align: start;
    transition: all var(--wnext-dur) var(--wnext-ease);
    width: 168px;
}

.wng-cat-card-shade {
    background: linear-gradient(
        180deg,
        rgba(4, 30, 66, 0) 0%,
        rgba(4, 30, 66, 0.45) 55%,
        rgba(4, 30, 66, 0.78) 100%
    );
    inset: 0;
    position: absolute;
    z-index: 1;
}

.wng-cat-card > *:not(.wng-cat-card-shade):not(.wng-cat-card-arrow) {
    position: relative;
    z-index: 2;
}

.wng-cat-card:hover {
    color: #fff;
    transform: translateY(-4px);
}

.wng-cat-card-icon {
    height: 34px;
    margin-bottom: 8px;
    width: 34px;
}

.wng-cat-card-name {
    font-size: 15px;
    font-weight: 800;
}

.wng-cat-card-count {
    color: var(--wng-muted);
    font-size: 12px;
    font-weight: 600;
}

.wng-cat-card-arrow {
    align-items: center;
    background: var(--wng-blue);
    border-radius: 50%;
    bottom: 14px;
    color: #fff;
    display: flex;
    height: 28px;
    justify-content: center;
    position: absolute;
    right: 14px;
    transition: transform var(--wnext-dur) var(--wnext-ease);
    width: 28px;
    z-index: 2;
}

.wng-cat-card:hover .wng-cat-card-arrow {
    transform: translateX(3px);
}

/* ---------- Promo banner cards (dinamis dari admin) ---------- */
.wng-promo-section {
    padding: 26px 0 14px;
}

.wng-promo-card {
    background: #fff;
    border-radius: var(--wng-card-r);
    box-shadow: var(--wnext-shadow-soft);
    display: block;
    overflow: hidden;
}

/* Banners are uploaded at wildly different aspect ratios (the live set spans
   2.83 wide, 1.50, and 0.50 portrait), so no height is imposed here — the
   image renders at its own proportions and nothing is cropped. The width/height
   attributes arrive from the server, so the browser reserves the correct box
   before the file loads. Cards stay their natural height, which is what makes
   the grid ragged rather than squashed into one uniform row. */
.wng-promo-card img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s var(--wnext-ease);
}

.wng-promo-card:hover img {
    transform: scale(1.04);
}

/* ---------- Kategori hero band ---------- */
.wng-cat-hero {
    background-color: #0b3f7a;
    background-position: center;
    background-size: cover;
    color: #fff;
    min-height: 250px;
    overflow: hidden;
    padding: 34px 0 38px;
    position: relative;
}

.wng-cat-hero::before {
    background: linear-gradient(
        95deg,
        rgba(4, 30, 66, 0.88) 0%,
        rgba(4, 30, 66, 0.62) 50%,
        rgba(4, 30, 66, 0.3) 100%
    );
    content: '';
    inset: 0;
    position: absolute;
    z-index: 1;
}

.wng-cat-hero-inner {
    position: relative;
    z-index: 2;
}

.wng-cat-hero-row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.wng-cat-hero-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    display: inline-flex;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.wng-cat-hero-emoji {
    font-size: 26px;
    line-height: 1;
}

.wng-cat-hero-title {
    color: #fff !important;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    letter-spacing: -0.3px;
    margin: 0 0 6px;
}

.wng-cat-hero-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin: 0;
    max-width: 560px;
}

.wng-cat-hero-badge {
    background: rgba(19, 126, 255, 0.85);
    border-radius: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    min-width: 92px;
    padding: 12px 18px;
    text-align: center;
}

.wng-cat-hero-badge strong {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}

.wng-cat-hero-badge span {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.92;
}

/* ---------- Filter chips bar ---------- */
.wng-chips-bar-section {
    padding: 20px 0 0;
}

.wng-chips-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wng-filter-chip {
    background: #fff;
    border: 1px solid var(--wng-line);
    border-radius: 999px;
    color: var(--wng-slate);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    transition: all var(--wnext-dur) var(--wnext-ease);
}

.wng-filter-chip:hover {
    border-color: var(--wng-blue);
    color: var(--wng-blue);
}

.wng-filter-chip.active {
    background: var(--wng-blue);
    border-color: var(--wng-blue);
    box-shadow: 0 10px 20px -10px rgba(19, 126, 255, 0.7);
    color: #fff;
}

/* ---------- Category article grid ---------- */
.wng-cat-grid-section {
    padding: 24px 0 46px;
}

.wng-grid-three {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.wng-card {
    background: #fff;
    border-radius: var(--wng-card-r);
    box-shadow: var(--wnext-shadow-soft);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.wng-card-thumb {
    display: block;
    height: 160px;
    position: relative;
}

.wng-card-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.wng-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 9px;
    padding: 16px 18px 18px;
}

.wng-card-title {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.48;
    letter-spacing: 0.01em;
    margin: 0;
}

.wng-card-title a {
    color: var(--wng-ink);
}

.wng-card-title a:hover {
    color: var(--wng-blue);
}

.wng-card-meta {
    color: var(--wng-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 600;
    gap: 12px;
    margin-top: auto;
}

.wng-empty-state {
    background: #fff;
    border: 1px dashed var(--wng-line);
    border-radius: var(--wng-card-r);
    color: var(--wng-muted);
    padding: 48px 20px;
    text-align: center;
}

/* ---------- Category sidebar ---------- */
.wng-side-banners {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.wng-side-banner {
    background: #fff;
    border-radius: var(--wng-card-r);
    box-shadow: var(--wnext-shadow-soft);
    display: block;
    overflow: hidden;
}

.wng-side-banner img {
    display: block;
    width: 100%;
}

.wng-side-popular {
    background: #fff;
    border-radius: var(--wng-card-r);
    box-shadow: var(--wnext-shadow-soft);
    padding: 20px;
}

.wng-side-heading {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
}

.wng-side-pop-item {
    border-top: 1px solid #eef2f7;
    display: flex;
    gap: 12px;
    padding: 12px 0;
}

.wng-side-pop-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.wng-side-pop-thumb {
    border-radius: 12px;
    display: block;
    flex: 0 0 64px;
    height: 54px;
    overflow: hidden;
}

.wng-side-pop-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.wng-side-pop-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.wng-side-pop-title {
    color: var(--wng-ink);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    overflow: hidden;
}

.wng-side-pop-item:hover .wng-side-pop-title {
    color: var(--wng-blue);
}

.wng-side-pop-meta {
    align-items: center;
    color: var(--wng-muted);
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    gap: 4px;
}

/* ---------- Reading meta row (kategori bawah) ---------- */
.wng-read-meta-row {
    align-items: center;
    background: #fff;
    border-radius: var(--wng-card-r);
    box-shadow: var(--wnext-shadow-soft);
    color: var(--wng-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 600;
    gap: 22px;
    margin-top: 34px;
    padding: 16px 22px;
}

.wng-read-meta-item {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.wng-read-meta-link {
    color: var(--wng-blue);
    margin-left: auto;
}

/* ---------- Artikel hero (detail) ---------- */
.wng-article-hero {
    background-color: #0b3f7a;
    background-position: center;
    background-size: cover;
    color: #fff;
    min-height: 340px;
    overflow: hidden;
    padding: 44px 0 50px;
    position: relative;
}

.wng-article-hero::before {
    background: linear-gradient(
        180deg,
        rgba(4, 30, 66, 0.35) 0%,
        rgba(4, 30, 66, 0.72) 55%,
        rgba(4, 30, 66, 0.9) 100%
    );
    content: '';
    inset: 0;
    position: absolute;
    z-index: 1;
}

.wng-article-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    z-index: 2;
}

.wng-hero-breadcrumb-light a {
    color: rgba(255, 255, 255, 0.8);
}

.wng-article-hero-tag {
    align-self: flex-start;
    background: var(--wng-blue);
    color: #fff;
}

.wng-article-hero-title {
    color: #fff !important;
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.22;
    margin: 0;
    max-width: 820px;
    text-shadow: 0 2px 18px rgba(4, 30, 66, 0.5);
}

.wng-article-hero-meta {
    color: rgba(255, 255, 255, 0.88) !important;
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 600;
    gap: 16px;
}

.wng-article-hero-meta .author-meta-link {
    color: #fff !important;
}

.wng-hero-caption {
    margin: 0 0 8px;
}

.wng-article-top-nohero {
    margin-bottom: 14px;
}

/* ---------- Footer dengan background image ---------- */
.wng-footer {
    background-image: url('/blog/images/footer/wondo-blog.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: none;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 30px;
    padding: 46px 0 0;
    position: relative;
}

.wng-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 60, 160, 0.55);
    pointer-events: none;
    z-index: 0;
}

.wng-footer .container {
    position: relative;
    z-index: 1;
}

.wng-footer-brand {
    align-items: center;
    display: inline-flex;
    gap: 14px;
    margin-bottom: 16px;
}

.wng-footer-logo-img {
    height: 52px;
    width: 52px;
    object-fit: contain;
    flex-shrink: 0;
}

.wng-footer-lockup {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.25;
    gap: 4px;
}

.wng-footer-lockup strong {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.03em;
    font-family: var(--wb-font, 'Plus Jakarta Sans', sans-serif);
    display: block;
}

.wng-footer-lockup em {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.wng-footer-desc {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
    line-height: 1.65;
    margin: 0 0 16px;
}

.wng-footer-social {
    display: flex;
    gap: 8px;
}

.wng-social-dot {
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    height: 32px;
    justify-content: center;
    transition: all var(--wnext-dur) var(--wnext-ease);
    width: 32px;
}

.wng-social-dot:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    transform: translateY(-2px);
}

.wng-footer-heading {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 14px;
}

.wng-footer-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wng-footer-links a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13.5px;
    font-weight: 600;
}

.wng-footer-links a:hover {
    color: #fff;
}

.wng-footer-cta {
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    color: #fff;
    display: inline-flex;
    align-items: center;
    font-size: 13.5px;
    font-weight: 700;
    gap: 8px;
    padding: 12px 22px;
    transition: all var(--wnext-dur) var(--wnext-ease);
}

.wng-footer-cta:hover {
    background: rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    color: #fff;
    transform: translateY(-2px);
}

.wng-footer-bottom {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-wrap: wrap;
    font-size: 12.5px;
    font-weight: 600;
    gap: 8px;
    justify-content: space-between;
    margin-top: 38px;
    padding: 16px 0 20px;
}

.wng-footer-bottom p {
    margin: 0;
}

.wng-footer-tagline {
    color: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   WNG — Mobile (mobile-first overrides, ikut referensi mobile)
   ========================================================= */
@media (max-width: 991.98px) {
    .wng-grid-three {
        grid-template-columns: repeat(2, 1fr);
    }

    .wng-cat-hero-badge {
        margin-left: 0;
    }

    .wng-big-thumb {
        height: 230px;
    }
}

@media (max-width: 767.98px) {
    /* Header mobile: hamburger + logo center + search toggle kanan */
    .wng-header .menu-nav {
        gap: 10px;
    }

    .wng-logo-lockup {
        display: none;
    }

    .wng-logo .wng-logo-img {
        height: 36px;
        margin: 0 auto;
    }

    .wng-header-actions {
        margin-left: auto;
    }

    .wng-header-search.open {
        position: absolute;
        left: 12px;
        right: 64px;
        top: 10px;
        width: auto;
        z-index: 30;
    }

    .wng-hero {
        min-height: 380px;
        padding: 0 0 44px;
    }

    .wng-hero-title {
        font-size: 34px;
    }

    .wng-hero-subtitle {
        font-size: 15px;
        margin-bottom: 24px;
    }

    .wng-hero-search {
        height: 52px;
    }

    .wng-hero-search button {
        height: 38px;
        width: 38px;
        margin: 7px 7px 7px 0;
    }

    .wng-chip-strip {
        gap: 8px;
        padding: 12px 14px;
    }

    .wng-cat-chip {
        font-size: 12.5px;
        padding: 7px 12px;
    }

    .wng-big-thumb {
        height: 200px;
    }

    .wng-big-body {
        padding: 18px 18px 20px;
    }

    .wng-side-thumb {
        flex: 0 0 118px;
    }

    .wng-side-body {
        padding: 12px 14px 12px 0;
    }

    .wng-grid-three {
        grid-template-columns: 1fr;
    }

    .wng-cat-hero {
        min-height: 200px;
        padding: 26px 0 30px;
    }

    .wng-cat-hero-title {
        font-size: 24px;
    }

    .wng-cat-hero-icon {
        display: none;
    }

    .wng-cat-hero-badge {
        min-width: 78px;
        padding: 10px 14px;
    }

    .wng-cat-hero-badge strong {
        font-size: 21px;
    }

    .wng-article-hero {
        min-height: 260px;
        padding: 32px 0 38px;
    }

    .wng-footer {
        padding: 36px 0 0;
    }

    .wng-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* ---------- WNG v13: hero image kategori + count putih + mobile card grid ---------- */
.wng-cat-hero-img {
    border-radius: 12px;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.wng-cat-hero-svg {
    height: 30px;
    width: 30px;
}

.wng-cat-card-count {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 767.98px) {
    /* Strip kategori atas dihapus → kategori jadi card grid di bawah hero, maks 4 per baris */
    .wng-chip-strip {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, 1fr);
        margin-top: -30px;
        padding: 14px;
    }

    .wng-cat-chip {
        align-items: center;
        background: #f1f5f9;
        border-radius: 14px;
        flex-direction: column;
        font-size: 11px;
        gap: 6px;
        justify-content: center;
        padding: 12px 6px;
        text-align: center;
    }

    .wng-cat-chip-icon {
        height: 26px;
        width: 26px;
    }

    /* Jelajahi kategori: tetap 1 baris, scrollable */
    .wng-explore-viewport {
        padding: 6px 12px 10px;
    }

    .wng-cat-card {
        height: 132px;
        width: 150px;
    }
}

@media (max-width: 400px) {
    .wng-hero {
        padding: 0 0 36px;
        min-height: 340px;
    }

    .wng-hero-title {
        font-size: 30px;
    }

    .wng-cat-card {
        padding: 14px 12px 40px;
    }

    .wng-cat-card-arrow {
        bottom: 10px;
        right: 12px;
    }
}

/* =========================================================
   WNG — Vertical Share Rail (article detail, sticky kiri)
   Di luar article, mengapung di sebelah kiri konten.
   ========================================================= */

/* Wrapper yang menampung rail + row konten */
.blog-details-main-layout {
    position: relative;
}

/* Rail: absolute/sticky kiri, vertikal stack */
.wng-share-rail {
    position: absolute;
    top: 0;
    /* Tempatkan di luar container Bootstrap (col-lg-8 start ≈ offset 0 + left) */
    left: calc(-52px - 14px); /* lebar tombol + gap */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

/* Sticky saat scroll */
@supports (position: sticky) {
    .wng-share-rail {
        position: sticky;
        top: 100px;
        /* float kiri — keluar dari flow normal dengan margin negatif */
        margin-left: calc(-52px - 14px);
        margin-top: 0;
        float: left;
        width: 42px;
    }
}

/* Label kecil di atas tombol */
.wng-share-rail-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--wng-muted);
    text-transform: uppercase;
    writing-mode: horizontal-tb;
    margin-bottom: 2px;
    display: block;
    text-align: center;
}

/* Divider tipis di bawah label */
.wng-share-rail-label::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--wng-line);
    border-radius: 2px;
    margin: 5px auto 0;
}

/* Ukuran tombol di rail — override public-modern */
.wng-share-rail .share-btn {
    width: 42px !important;
    height: 42px !important;
    box-shadow: var(--wnext-shadow-soft);
}

.wng-share-rail .share-btn:hover {
    transform: translateY(-3px) !important;
}

/* Hover colors (sudah ada di public-modern, tapi pastikan override) */
.wng-share-rail .share-btn-wa  { background: #e7f8ee; color: #16a34a; border-color: #bbf7d0; }
.wng-share-rail .share-btn-wa:hover  { background: #16a34a; color: #fff; box-shadow: 0 6px 16px -4px rgba(22,163,74,0.35); }
.wng-share-rail .share-btn-fb  { background: #eff6ff; color: #1877f2; border-color: #dbeafe; }
.wng-share-rail .share-btn-fb:hover  { background: #1877f2; color: #fff; box-shadow: 0 6px 16px -4px rgba(24,119,242,0.35); }
.wng-share-rail .share-btn-tw  { background: #f1f5f9; color: #0f172a; border-color: #e2e8f0; }
.wng-share-rail .share-btn-tw:hover  { background: #0f172a; color: #fff; box-shadow: 0 6px 16px -4px rgba(15,23,42,0.25); }
.wng-share-rail .share-btn-copy { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.wng-share-rail .share-btn-copy:hover { background: var(--wng-blue); color: #fff; border-color: var(--wng-blue); box-shadow: 0 6px 16px -4px rgba(19,126,255,0.4); }

/* ---- Sembunyikan rail pada layar < 1200px (tidak cukup ruang di luar container) ---- */
@media (max-width: 1199.98px) {
    .wng-share-rail {
        display: none !important;
        float: none !important;
        margin-left: 0 !important;
    }
}

/* ---- Fallback: tampilkan share bar horizontal di mobile/tablet ---- */
@media (max-width: 1199.98px) {
    /* Re-show horizontal bar yang sudah di-display:none via public-modern,
       tapi karena bar sudah dihapus dari JSX, kita tampilkan label di
       dalam blog-details-content sebagai info teks saja — tidak perlu bar */
    .wng-share-rail-mobile-hint {
        display: flex;
    }
}

/* ---- Mobile horizontal share bar (fallback saat rail disembunyikan) ---- */
.wng-share-bar-mobile {
    display: none; /* disembunyikan di desktop — rail yang aktif */
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.wng-share-bar-mobile-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--wng-muted);
    margin-right: 2px;
}

/* Tampil hanya pada layar di mana rail disembunyikan */
@media (max-width: 1199.98px) {
    .wng-share-bar-mobile {
        display: flex;
    }

    .wng-share-bar-mobile .share-btn {
        width: 38px !important;
        height: 38px !important;
    }
}

/* =========================================================
   ARTICLE PACKAGES — "Paket Wisata Rekomendasi" section
   Tampil di bawah Tags di article-show, sebelum sidebar.
   ========================================================= */

.article-packages-wrap {
    margin-top: 32px;
    padding: 24px 26px 26px;
    background: linear-gradient(135deg, #eaf2fe 0%, #f0f7ff 100%);
    border: 1px solid rgba(19, 126, 255, 0.15);
    border-radius: var(--wng-card-r);
}

.article-packages-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.article-packages-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(135deg, #0066ff, #137eff);
    border-radius: 13px;
    box-shadow: 0 8px 18px -8px rgba(19, 126, 255, 0.7);
}

.article-packages-icon svg {
    width: 21px;
    height: 21px;
}

.article-packages-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--wng-ink);
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}

.article-packages-sub {
    font-size: 14px;
    color: var(--wng-slate);
    margin: 0;
    line-height: 1.5;
}

/* Grid: maksimal 2 kolom biar kartunya lega, 1 kolom saat layar kecil */
.article-packages-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 575.98px) {
    .article-packages-grid {
        grid-template-columns: 1fr;
    }
    .article-packages-wrap {
        padding: 16px;
    }
}

/* Card */
.article-package-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--wnext-radius-lg);
    overflow: hidden;
    box-shadow: var(--wnext-shadow-soft);
    text-decoration: none;
    color: inherit;
    transition:
        transform var(--wnext-dur) var(--wnext-ease),
        box-shadow var(--wnext-dur) var(--wnext-ease);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.article-package-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wnext-shadow-hover);
    color: inherit;
}

/* Thumbnail */
.article-package-thumb {
    position: relative;
    height: 148px;
    background: #e2e8f0;
    overflow: hidden;
    flex-shrink: 0;
}

.article-package-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--wnext-ease);
}

.article-package-card:hover .article-package-img {
    transform: scale(1.06);
}

.article-package-img-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
}

.article-package-img-empty svg {
    width: 34px;
    height: 34px;
}

/* Duration badge */
.article-package-duration {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.article-package-duration svg {
    width: 11px;
    height: 11px;
}

/* Body */
.article-package-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 13px 15px 15px;
    gap: 7px;
}

.article-package-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--wng-ink);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-package-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.article-package-rate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #f59e0b;
}

.article-package-rate svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.article-package-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 12px;
    color: var(--wng-slate);
}

.article-package-location svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.article-package-price {
    font-size: 12px;
    color: var(--wng-slate);
    margin-left: auto;
}

.article-package-price strong {
    color: var(--wng-blue);
    font-weight: 800;
}

/* ---------- Sold out ----------
   Paket tanpa jadwal aktif (semua keberangkatan sudah soft-delete di
   wondo.co.id) tidak punya harga yang bisa ditampilkan. Instead of showing
   a blank price row, the card is dimmed and labelled — the detail page is
   still reachable so the reader can see what's going on. */
.article-package-card.is-sold-out .article-package-img {
    filter: grayscale(0.85);
    opacity: 0.55;
    transition: filter 0.3s var(--wnext-ease), opacity 0.3s var(--wnext-ease);
}

.article-package-card.is-sold-out:hover .article-package-img {
    filter: grayscale(0.5);
    opacity: 0.7;
}

/* Hover lift dimatikan — kartu ini tidak bisa dipesan, jadi tidak
   boleh terlihat seperti tombol yang bisa diklik. */
.article-package-card.is-sold-out,
.article-package-card.is-sold-out:hover {
    transform: none !important;
    box-shadow: var(--wnext-shadow-soft) !important;
}

.article-package-soldout-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.82);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.article-package-soldout {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #dc2626;
    margin-left: auto;
}

.article-package-soldout svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    stroke-width: 2.5;
}

.article-package-card.is-sold-out .article-package-cta {
    color: var(--wng-slate);
}

.article-package-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    font-size: 13px;
    font-weight: 800;
    color: var(--wng-blue);
    letter-spacing: 0.01em;
}

.article-package-cta svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s var(--wnext-ease);
}

.article-package-card:hover .article-package-cta svg {
    transform: translateX(3px);
}

/* Carousel paket (lebih dari 2 paket) */
.article-packages-carousel {
    position: relative;
}

.article-packages-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.article-packages-scroll::-webkit-scrollbar {
    display: none;
}

.article-packages-scroll .article-package-card {
    flex: 0 0 calc(50% - 8px);
    scroll-snap-align: start;
    min-height: 100%;
}

@media (max-width: 575.98px) {
    .article-packages-scroll .article-package-card {
        flex: 0 0 100%;
    }
}

.article-packages-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 999px;
    background: #fff;
    color: #137eff;
    box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.25);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s var(--wnext-ease),
        transform 0.2s var(--wnext-ease);
}

.article-packages-arrow svg {
    width: 17px;
    height: 17px;
}

.article-packages-arrow.left {
    left: -6px;
}

.article-packages-arrow.right {
    right: -6px;
}

.article-packages-arrow.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.article-packages-arrow.is-visible:hover {
    transform: translateY(-50%) scale(1.06);
}

.article-packages-arrow.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* =========================================================
   BANNER RAIL — horizontal snap track used once a banner
   list outgrows the 3-up grid. Mirrors the package carousel
   pattern above (scroll-snap + hidden scrollbar + edge
   arrows that only appear when there is more to scroll to).
   ========================================================= */
.wng-rail {
    position: relative;
}

.wng-rail-track {
    display: flex;
    gap: 16px;
    /* Each banner keeps its own height, so items are top-aligned and the row
       grows to the tallest one instead of stretching them all to match. */
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.wng-rail-track::-webkit-scrollbar {
    display: none;
}

.wng-rail-item {
    flex: 0 0 calc(33.333% - 11px);
    scroll-snap-align: start;
    min-width: 0;
}

.wng-rail-item .wng-promo-card,
.wng-rail-item .wng-side-banner {
    display: block;
}

.wng-rail-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 999px;
    background: #fff;
    color: #137eff;
    box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.25);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s var(--wnext-ease),
        transform 0.2s var(--wnext-ease);
    cursor: pointer;
}

.wng-rail-arrow svg {
    width: 17px;
    height: 17px;
}

.wng-rail-arrow.left { left: -6px; }
.wng-rail-arrow.right { right: -6px; }

.wng-rail-arrow.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.wng-rail-arrow.is-visible:hover {
    transform: translateY(-50%) scale(1.06);
}

.wng-rail-arrow.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .wng-rail-item {
        flex: 0 0 calc(50% - 8px);
    }
}

/* Single column — the sidebar is ~330px, so a 3-up grid would shrink each
   banner to an unreadable thumb. */
.wng-banner-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wng-banner-stack-item {
    min-width: 0;
}

.wng-banner-stack-item .wng-promo-card,
.wng-banner-stack-item .wng-side-banner {
    display: block;
    width: 100%;
}

.wng-banner-stack-item .wng-promo-card img,
.wng-banner-stack-item .wng-side-banner img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 575.98px) {
    .wng-rail-item {
        flex: 0 0 82%;
    }
}