/*

 * Nova Theme - Home Layout

 * Hero Section — Headline Grid

 * @package Nova

 */





/* Override header-height for homepage — exact fit, hero section adds its own spacing */

body.home .site-content {

    padding-top: calc(var(--header-height) + 5px);

}



@media (max-width: 991px) {

    body.home .site-content {

        padding-top: var(--header-height-mobile);

    }

}



.hero-section {

    margin-top: 15px;

}



.hero-container {

    max-width: var(--container-width);

    margin: 0 auto;

    padding: 0 var(--container-padding) 20px;

    border-bottom: 1px solid var(--color-border);

}



/* Grid: large headline left + list right */

.hero-grid {

    display: grid;

    grid-template-columns: 2.4fr 1.15fr;

    gap: 25px;

    align-items: stretch;

}



.hero-main {

    display: flex;

    flex-direction: column;

}



/* ==========================================================================

   HERO MAIN — Thumbnail on top, title+excerpt below

   ========================================================================== */



.hero-main-link {

    display: flex;

    flex-direction: column;

    flex: 1;

    text-decoration: none;

    color: var(--color-link, var(--color-text));

    border-radius: 10px;

    overflow: hidden;

}



/* Thumbnail container — grows to fill remaining height */

.hero-main-thumb {

    position: relative;

    width: 100%;

    flex: 1;

    min-height: 220px;

    overflow: hidden;

    background: var(--color-bg-alt);

}



/* Badge: inside thumbnail, top-left corner */

.hero-badge {

    position: absolute;

    top: 12px;

    left: 12px;

    z-index: 3;

    display: inline-block;

    background: var(--color-primary);

    color: #fff;

    font-family: var(--typo-label-font, inherit);

    font-size: var(--typo-label-size-desktop, 11px);

    font-weight: var(--typo-label-weight, 700);

    line-height: var(--typo-label-lh, 1.2);

    padding: 4px 12px;

    border-radius: 4px;

    text-transform: uppercase;

    letter-spacing: 0.8px;

}



.hero-main-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    top: 0;

    left: 0;

    transition: transform 0.4s ease;

}



.hero-main-link:hover .hero-main-img {

    transform: scale(1.03);

}



/* Placeholder */

.hero-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--color-bg-alt);

    color: var(--color-text-muted);

}



.hero-placeholder--sm {

    aspect-ratio: 1/1;

}



/* Body: title + excerpt */

.hero-main-body {

    padding: 16px 0px 0px;

}



.hero-main-title {

    font-family: var(--typo-hero-main-title-font, inherit);

    font-size: var(--typo-hero-main-title-size-desktop, 28px);

    font-weight: var(--typo-hero-main-title-weight, 800);

    line-height: var(--typo-hero-main-title-lh, 1.35);

    margin: 0 0 8px 0;

    color: inherit;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.hero-main-link:hover .hero-main-title {

    color: var(--color-link-hover);

}



.hero-main-excerpt {

    font-family: var(--typo-excerpt-font, inherit);

    font-size: var(--typo-excerpt-size-desktop, 14px);

    font-weight: var(--typo-excerpt-weight, 400);

    color: var(--color-text-secondary);

    line-height: var(--typo-excerpt-lh, 1.6);

    margin: 0;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}





/* ==========================================================================

   HERO SIDE — Desktop: title+excerpt list only (no thumbnails)

   ========================================================================== */



.hero-side {

    display: flex;

    flex-direction: column;

    gap: 0;

}



.hero-card {

    display: flex;

    gap: 0;

    text-decoration: none;

    color: var(--color-link, var(--color-text));

    padding: 16px 0;

    border-bottom: 1px solid var(--color-border);

    transition: background var(--transition-fast);

}



.hero-card:first-child {

    padding-top: 0;

}



.hero-card:last-child {

    border-bottom: none;

}



/* Thumbnail: HIDDEN on desktop, visible on mobile */

.hero-card-thumb {

    display: none;

}



.hero-card-body {

    flex: 1;

    min-width: 0;

}



.hero-card-title {

    font-family: var(--typo-title-font, inherit);

    font-size: max(16px, calc(var(--typo-title-size-desktop, 22px) * 0.7));

    font-weight: var(--typo-title-weight, 700);

    line-height: var(--typo-title-lh, 1.45);

    margin: 0 0 6px 0;

    color: inherit;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    transition: color var(--transition-fast);

}



.hero-card:hover .hero-card-title {

    color: var(--color-link-hover);

}



.hero-card-excerpt {

    font-family: var(--typo-excerpt-font, inherit);

    font-size: var(--typo-excerpt-size-desktop, 13px);

    font-weight: var(--typo-excerpt-weight, 400);

    color: var(--color-text-secondary);

    line-height: var(--typo-excerpt-lh, 1.5);

    margin: 0;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}





/* ==========================================================================

   RESPONSIVE — MOBILE (<769px)

   ========================================================================== */



@media (max-width: 768px) {

    .hero-section {

        margin-top: 15px;

        padding-bottom: 0;

        border-bottom: none;

    }



    .hero-container {

        padding-bottom: 24px;

    }



    .hero-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }



    /* Mobile: kembalikan thumb ke aspect-ratio karena tidak perlu stretch */

    .hero-main {

        display: block;

    }



    .hero-main-link {

        display: block;

    }



    .hero-main-thumb {

        flex: none;

        min-height: 0;

        aspect-ratio: 16/9;

        height: auto;

    }



    .hero-main-img {

        position: static;

    }



    .hero-main-title {

        font-size: var(--typo-hero-main-title-size-mobile, 22px);

    }



    .hero-main-excerpt {

        font-size: var(--typo-excerpt-size-mobile, 13px);

    }



    /* Side cards: horizontal scroll with 1:1 thumb + title */

    .hero-side {

        flex-direction: row;

        overflow-x: auto;

        overflow-y: hidden;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        gap: 12px;

        padding-bottom: 4px;



        /* Hide scrollbar */

        scrollbar-width: none;

        -ms-overflow-style: none;

    }



    .hero-side::-webkit-scrollbar {

        display: none;

    }



    .hero-card {

        flex: 0 0 70vw;

        max-width: 320px;

        scroll-snap-align: start;

        padding: 0;

        border-bottom: none;

        border-radius: 8px;

        border: 1px solid var(--color-border);

        background: var(--color-bg);

        overflow: hidden;

        gap: 0;

    }



    .hero-card:first-child {

        padding-top: 0;

    }



    /* Show thumbnail on mobile: 1:1 square on left */

    .hero-card-thumb {

        display: block;

        flex-shrink: 0;

        width: 5.625rem;

        height: 5.625rem;

        overflow: hidden;

        background: var(--color-bg-alt);

    }



    .hero-card-img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }



    .hero-card-body {

        padding: 10px 12px;

        display: flex;

        flex-direction: column;

        justify-content: center;

    }



    .hero-card-title {

        font-size: max(15px, calc(var(--typo-title-size-mobile, 18px) * 0.85));

        -webkit-line-clamp: 3;

        margin-bottom: 0;

    }



    .hero-card-excerpt {

        display: none;

    }

}





/* ==========================================================================

   RESPONSIVE — TABLET (769px–1024px)

   ========================================================================== */



@media (min-width: 769px) and (max-width: 1024px) {

    .hero-grid {

        grid-template-columns: 1fr 1fr;

        gap: 20px;

    }



    .hero-main-title {

        font-size: max(19px, calc(var(--typo-hero-main-title-size-desktop, 28px) * 0.85));

    }



    .hero-card-title {

        font-size: max(15px, calc(var(--typo-title-size-desktop, 22px) * 0.6));

    }

}





/* ==========================================================================

   LATEST POSTS SECTION — Artikel Terkini

   ========================================================================== */



.latest-section {

    margin: 0px 0px 25px;

}



.latest-container {

    max-width: var(--container-width);

    margin: 0 auto;

    padding: 0 var(--container-padding);

}



/* Section Header */

.latest-header {

    margin-bottom: 20px;

}



.latest-section-title {

    font-family: var(--typo-section-heading-font, inherit);

    font-size: var(--typo-section-heading-size-desktop, 20px);

    font-weight: var(--typo-section-heading-weight, 800);

    line-height: var(--typo-section-heading-lh, 1.2);

    color: var(--color-text);

    margin: 0;

    letter-spacing: -0.3px;

}



/* Wrapper: content left + sidebar right */

.latest-wrapper {

    display: grid;

    padding-top:20px ;

    grid-template-columns: 1fr 300px;

    gap: 32px;

    align-items: start;

}



.latest-content {

    min-width: 0;

}



/* ==========================================================================

   SECTION HEADING STYLES — 5 Decorative Variants

   Applied via .heading-style-{variant} on parent container.

   Targets .section-heading and .widget-title inside that parent.

   ========================================================================== */



/* Shared base */

.section-heading,

.heading-style-underline .widget-title,

.heading-style-dot .widget-title,

.heading-style-border-left .widget-title,

.heading-style-highlight .widget-title,

.heading-style-double-line .widget-title {

    position: relative;

    display: inline-block;

}





/* --- 1. Garis Bawah Aksen (underline) --- */

.heading-style-underline .section-heading,

.heading-style-underline .widget-title {

    padding-bottom: 10px;

}



.heading-style-underline .section-heading::after,

.heading-style-underline .widget-title::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 5px;

    width: 45px;

    height: 3px;

    background: var(--color-primary);

    border-radius: 2px;

}





/* --- 2. Dot Sebelum Teks (dot) --- */

.heading-style-dot .section-heading,

.heading-style-dot .widget-title {

    padding-left: 16px;

}



.heading-style-dot .section-heading::before,

.heading-style-dot .widget-title::before {

    content: '';

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 8px;

    height: 8px;

    background: var(--color-primary);

    border-radius: 50%;

}





/* --- 3. Border Kiri Tebal (border-left) --- */

.heading-style-border-left .section-heading,

.heading-style-border-left .widget-title {

    padding-left: 14px;

    border-left: 4px solid var(--color-primary);

}





/* --- 4. Highlight Background (highlight) --- */

.heading-style-highlight .section-heading,

.heading-style-highlight .widget-title {

    padding: 6px 14px;

    background: var(--color-primary);

    color: #ffffff;

    border-radius: 4px;

    letter-spacing: 0;

}





/* --- 5. Garis Atas & Bawah (double-line) --- */

.heading-style-double-line .section-heading,

.heading-style-double-line .widget-title {

    padding: 8px 0;

    border-top: 2px solid var(--color-primary);

    border-bottom: 2px solid var(--color-primary);

    display: block;

}





/* ==========================================================================

   LIST LAYOUT — Thumbnail kiri, body kanan

   ========================================================================== */



.latest-posts.layout-list {

    display: flex;

    flex-direction: column;

    gap: 0;

}



.layout-list .latest-item {

    border-bottom: 1px solid var(--color-border);

}



.layout-list .latest-item:last-child {

    border-bottom: none;

}



.layout-list .latest-item-link {

    display: flex;

    gap: 16px;

    padding: 16px 0;

    text-decoration: none;

    color: var(--color-link, var(--color-text));

    transition: background var(--transition-fast);

}



.layout-list .latest-item:first-child .latest-item-link {

    padding-top: 0;

}



.layout-list .latest-item-thumb {

    flex-shrink: 0;

    width: 180px;

    aspect-ratio: 16/9;

    border-radius: 8px;

    overflow: hidden;

    margin: 0;

    background: var(--color-bg-alt);

}



.layout-list .latest-item-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.layout-list .latest-item-link:hover .latest-item-img {

    transform: scale(1.05);

}



.layout-list .latest-item-body {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 6px;

}





/* ==========================================================================

   GRID LAYOUT — 2 columns, thumbnail atas, body bawah

   ========================================================================== */



.latest-posts.layout-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}



.layout-grid .latest-item-link {

    display: flex;

    flex-direction: column;

    gap: 0;

    text-decoration: none;

    color: var(--color-link, var(--color-text));

    border-radius: 8px;

    overflow: hidden;

    border: 1px solid var(--color-border);

    transition: border-color var(--transition-fast);

}



.layout-grid .latest-item-link:hover {

    border-color: var(--color-link-hover);

}



.layout-grid .latest-item-thumb {

    width: 100%;

    aspect-ratio: 16/9;

    overflow: hidden;

    margin: 0;

    background: var(--color-bg-alt);

}



.layout-grid .latest-item-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.layout-grid .latest-item-link:hover .latest-item-img {

    transform: scale(1.05);

}



.layout-grid .latest-item-body {

    padding: 12px 14px 14px;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



/* Widget sliders inserted into the grid must span the full row,

   otherwise they only occupy one grid cell and break the 2-column layout. */

.latest-posts.layout-grid > .inline-slider-wrapper {

    grid-column: 1 / -1;

    margin: 4px 0;

}





/* ==========================================================================

   LATEST ITEM — Shared styles (cat, title, date)

   ========================================================================== */



.latest-item-cat {

    font-family: var(--typo-list-cat-font, inherit);

    font-size: var(--typo-list-cat-size-desktop, 11px);

    font-weight: var(--typo-list-cat-weight, 700);

    line-height: var(--typo-list-cat-lh, 1.2);

    color: var(--color-primary);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.latest-item-title {

    font-family: var(--typo-title-font, inherit);

    font-size: var(--typo-title-size-desktop, 18px);

    font-weight: var(--typo-title-weight, 700);

    line-height: var(--typo-title-lh, 1.3);

    margin: 0;

    color: inherit;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    transition: color var(--transition-fast);

}



.latest-item-link:hover .latest-item-title {

    color: var(--color-link-hover);

}



.latest-item-date {

    font-family: var(--typo-meta-font, inherit);

    font-size: var(--typo-meta-size-desktop, 13px);

    font-weight: var(--typo-meta-weight, 400);

    line-height: var(--typo-meta-lh, 1.5);

    color: var(--color-text-muted);

}



/* Placeholder (no thumbnail) */

.latest-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--color-bg-alt);

    color: var(--color-text-muted);

}





/* ==========================================================================

   INLINE SLIDER WIDGET

   ========================================================================== */



.inline-slider-wrapper {

    margin: 16px 0 24px;

    padding: 20px;

    width: 100%;

    border: 1px solid var(--color-border);

    border-radius: 12px;

    background: var(--color-bg);

    box-sizing: border-box;

}



/* Video Play Overlay */

.video-slider-thumb {

    position: relative;

    display: block;

}



.video-play-overlay {

    position: absolute;

    top: 0; left: 0; right: 0; bottom: 0;

    background: rgba(0,0,0,0.4);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0.9;

    transition: opacity var(--transition-fast), transform var(--transition-fast);

}



.inline-slider-link:hover .video-play-overlay {

    opacity: 1;

}



.video-play-overlay svg {

    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



.inline-slider-link:hover .video-play-overlay svg {

    transform: scale(1.15);

}



.inline-slider-title {

    font-family: var(--typo-section-heading-font, inherit);

    font-size: var(--typo-section-heading-size-desktop, 18px);

    font-weight: var(--typo-section-heading-weight, 800);

    line-height: var(--typo-section-heading-lh, 1.2);

    color: var(--color-text);

    margin: 0 0 12px 0;

    letter-spacing: -0.3px;

    display: inline-block;

}



.inline-slider-inner {

    position: relative;

    margin: 0 -8px; /* Offset the track padding to bring arrows inside */

}



.inline-slider-track {

    display: flex;

    gap: 16px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    -ms-overflow-style: none;

    padding: 0 8px 8px; /* Room for shadow and offset */

    -webkit-overflow-scrolling: touch;

}



.inline-slider-track::-webkit-scrollbar {

    display: none;

}



.inline-slider-card {

    scroll-snap-align: start;

    flex: 0 0 calc((100% - 32px) / 2.5); /* Show 2.5 cards on desktop (2 gaps of 16px) */

    display: flex;

    flex-direction: column;

    border-radius: 8px;

    border: 1px solid var(--color-border);

    background: var(--color-bg);

    transition: background-color 0.3s ease, box-shadow 0.3s ease;

    overflow: hidden;

}



.inline-slider-card:hover {

    box-shadow: 0 4px 12px rgba(0,0,0,0.06);

}



.inline-slider-link {

    display: flex;

    flex-direction: column;

    height: 100%;

    text-decoration: none;

    color: var(--color-link, var(--color-text));

}



.inline-slider-thumb {

    width: 100%;

    aspect-ratio: 16/9;

    background: var(--color-bg-alt);

    margin: 0;

    position: relative;

    overflow: hidden;

}



.inline-slider-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.inline-slider-link:hover .inline-slider-img {

    transform: scale(1.05);

}



.inline-slider-body {

    padding: 14px;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.inline-slider-card .latest-item-cat {

    font-family: var(--typo-list-cat-font, inherit);

    font-size: var(--typo-list-cat-size-desktop, 11px);

    font-weight: var(--typo-list-cat-weight, 700);

    line-height: var(--typo-list-cat-lh, 1.2);

}



.inline-slider-card .latest-item-date {

    font-family: var(--typo-meta-font, inherit);

    font-size: var(--typo-meta-size-desktop, 11px);

    font-weight: var(--typo-meta-weight, 400);

    line-height: var(--typo-meta-lh, 1.5);

}



.inline-slider-card-title {

    font-family: var(--typo-title-font, inherit);

    font-size: 14px;

    font-weight: var(--typo-title-weight, 700);

    line-height: var(--typo-title-lh, 1.4);

    margin: 6px 0 10px;

    color: inherit;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    transition: color var(--transition-fast);

}



.inline-slider-link:hover .inline-slider-card-title {

    color: var(--color-link-hover);

}



/* Nav Arrows Overlay */

.inline-slider-nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: var(--color-bg);

    border: 1px solid var(--color-border);

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-text);

    cursor: pointer;

    transition: all var(--transition-fast);

    padding: 0;

}



.inline-slider-nav:hover {

    background: var(--color-primary);

    color: #fff;

    border-color: var(--color-primary);

}



.inline-slider-nav.nav-left {

    left: -12px;

}



.inline-slider-nav.nav-right {

    right: -12px;

}





/* ==========================================================================

   SIDEBAR

   ========================================================================== */



.latest-sidebar {

    position: sticky;

    top: 55px;

}



.latest-sidebar .widget:last-child {

    margin-bottom: 0;

}



.latest-sidebar .widget-title {

    font-family: var(--typo-section-heading-font, inherit);

    font-size: var(--typo-section-heading-size-desktop, 20px);

    font-weight: var(--typo-section-heading-weight, 800);

    line-height: var(--typo-section-heading-lh, 1.2);

    color: var(--color-text);

    margin: 0 0 16px;

}





/* ==========================================================================

   RESPONSIVE — LATEST SECTION MOBILE (<769px)

   ========================================================================== */



@media (max-width: 768px) {

    .latest-section {

        margin-bottom: 32px;

    }



    .latest-section-title {

        font-size: var(--typo-section-heading-size-desktop, 20px);

    }



    .latest-item-cat {

        font-size: var(--typo-list-cat-size-mobile, 10px);

    }



    .latest-item-title {

        font-size: var(--typo-title-size-mobile, 16px);

    }



    .latest-item-date {

        font-size: var(--typo-meta-size-mobile, 12px);

    }



    /* Stack: content on top, sidebar below */

    .latest-wrapper {

        grid-template-columns: 1fr;

        gap: 24px;

    }



    /* Grid mode: keep 2-column box cards on mobile (compact) */

    .latest-posts.layout-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 14px;

    }



    .layout-grid .latest-item-link {

        flex-direction: column;

        border: 1px solid var(--color-border);

        border-radius: 8px;

        gap: 0;

        overflow: hidden;

    }



    .layout-grid .latest-item-link:hover {

        border-color: var(--color-link-hover);

    }



    /* Reset list-style borders so each card is a self-contained box */

    .layout-grid .latest-item {

        border-bottom: none;

    }



    .layout-grid .latest-item-thumb {

        width: 100%;

        aspect-ratio: 16/9;

        border-radius: 0;

        flex-shrink: 0;

        overflow: hidden;

    }



    .layout-grid .latest-item-body {

        padding: 10px 12px 12px;

    }



    /* Slightly smaller title to fit 2 columns on small screens */

    .layout-grid .latest-item-title {

        font-size: max(13px, calc(var(--typo-title-size-mobile, 16px) * 0.92));

    }



    /* List mode thumb smaller on mobile */

    .layout-list .latest-item-thumb {

        width: 100px;

    }



    .layout-list .latest-item-link {

        gap: 12px;

    }



    /* Slider Mobile Adjustments */

    .inline-slider-wrapper {

        margin: 16px 0 24px;

        padding: 12px;

        border-radius: 8px;

    }



    .inline-slider-card {

        flex: 0 0 calc((100% - 16px) / 1.5); /* Show 1.5 cards on mobile */

        max-width: none;

    }



    .inline-slider-nav {

        display: none; /* Hide arrows on mobile, rely on swipe instead */

    }



    .inline-slider-card-title {

        font-size: var(--typo-title-size-mobile, 16px);

    }

    .inline-slider-card .latest-item-cat {

        font-size: var(--typo-list-cat-size-mobile, 10px);

    }



    .inline-slider-card .latest-item-date {

        font-size: var(--typo-meta-size-mobile, 11px);

    }



    /* Sidebar un-sticky on mobile */

    .latest-sidebar {

        position: static;

        border-top: 1px solid var(--color-border);

        padding-top: 24px;

    }

}





/* ==========================================================================

   RESPONSIVE — LATEST SECTION TABLET (769px–1024px)

   ========================================================================== */



@media (min-width: 769px) and (max-width: 1024px) {

    .latest-wrapper {

        grid-template-columns: 1fr 240px;

        gap: 24px;

    }



    .layout-list .latest-item-thumb {

        width: 120px;

    }



    .inline-slider-card {

        flex: 0 0 calc((100% - 32px) / 2.5); /* Show 2.5 cards on tablet */

    }

}



/* -------------------------------------------------------------

 * AJAX PAGINATION WIDGET STYLES

 * ------------------------------------------------------------- */

.Nova-pagination-wrapper {

    margin-top: 32px;

    display: flex;

    justify-content: center;

    width: 100%;

    clear: both;

}



.Nova-pagination-wrapper.pagination-numbered .page-numbers {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;

    height: 40px;

    padding: 0 12px;

    margin: 0 4px;

    border-radius: 6px;

    background: #f8f9fa;

    color: var(--color-text);

    text-decoration: none;

    font-weight: 500;

    font-size: 0.95rem;

    transition: all 0.2s ease;

    border: 1px solid #e9ecef;

}



.Nova-pagination-wrapper.pagination-numbered .page-numbers:hover {

    background: #e9ecef;

}



.Nova-pagination-wrapper.pagination-numbered .page-numbers.current {

    background: var(--color-primary);

    color: #fff;

    border-color: var(--color-primary);

}



.Nova-pagination-wrapper.pagination-ajax_btn {

    display: block;

    width: 100%;

}



.Nova-load-more-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding: 14px 28px;

    background: var(--color-surface, #fff);

    color: var(--color-text);

    border: 2px solid transparent;

    border-radius: 8px;

    font-size: 0.95rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

    min-height: 48px;

    box-shadow: 0 2px 4px rgba(0,0,0,0.02);

    position: relative;

    z-index: 1;

}



/* Border animasi gradient SELALU TERLIHAT */

.Nova-load-more-btn::before {

    content: '';

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    border-radius: 8px;

    padding: 2px;

    background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #ff6b6b);

    background-size: 300% 100%;

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    animation: borderRotate 10s linear infinite;

    z-index: -1;

    pointer-events: none;

}



.Nova-load-more-btn:hover {

    color: var(--color-primary);

    box-shadow: 0 4px 12px rgba(0,0,0,0.08);

}



.Nova-load-more-btn.loading {

    opacity: 0.8;

    pointer-events: none;

}



/* infinite sentry layout */

.Nova-infinite-sentry {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 2rem 0;

    width: 100%;

}



/* Spinner Animation */

.Nova-spinner {

    animation: rotate 2s linear infinite;

    color: var(--color-primary);

}



@keyframes rotate {

    100% {

        transform: rotate(360deg);

    }

}





/* ==========================================================================

   POST LIST WIDGET (2 berjejer di bawah pagination)

   ========================================================================== */



.nova-post-list-row {

    margin: 32px 0 0;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 32px;

    align-items: start;

}



/* --- Widget Wrapper --- */

.nova-post-list-widget {

    display: flex;

    flex-direction: column;

    gap: 0;

}



/* --- Widget Header / Title --- */

.nova-post-list__header {

    margin-bottom: 14px;

}



.nova-post-list__title {

    font-family: var(--typo-section-heading-font, inherit);

    font-size: var(--typo-section-heading-size-desktop, 20px);

    font-weight: var(--typo-section-heading-weight, 700);

    line-height: var(--typo-section-heading-lh, 1.2);

    color: var(--color-text, #111827);

    margin: 0;

    padding: 0;

    display: inline-block;

    position: relative;

}



/* --- Items List --- */

.nova-post-list__items {

    display: flex;

    flex-direction: column;

    border-top: 1px solid var(--color-border, #e5e7eb);

}



/* --- Single Item --- */

.nova-post-list__item {

    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 12px 0;

    border-bottom: 1px solid var(--color-border, #e5e7eb);

}



.nova-post-list__item:last-child {

    border-bottom: none;

}



/* --- Featured Item (item 1 — with thumbnail on desktop) --- */

.nova-post-list__item.is-featured {

    gap: 8px;

}



/* Thumbnail (desktop: visible on is-featured only via CSS) */

.nova-post-list__thumb-wrap {

    display: block;

    border-radius: 6px;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: var(--color-bg-alt, #f3f4f6);

    flex-shrink: 0;

    margin-bottom: 4px;

}



/* Hide thumbnail wrap on non-featured items — desktop */

.nova-post-list__item:not(.is-featured) .nova-post-list__thumb-wrap {

    display: none;

}



.nova-post-list__thumb {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.3s ease;

}



.nova-post-list__thumb-wrap:hover .nova-post-list__thumb {

    transform: scale(1.04);

}



.nova-post-list__thumb--placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #d1d5db;

}



/* --- Date Meta --- */

.nova-post-list__date {

    font-size: var(--typo-meta-size-desktop, 12px);

    color: var(--color-text-muted, #6b7280);

    line-height: 1;

    display: block;

}



/* --- Post Title --- */

.nova-post-list__post-title {

    font-family: var(--typo-title-font, inherit);

    font-size: var(--typo-title-size-mobile, 16px);

    font-weight: var(--typo-title-weight, 700);

    line-height: var(--typo-title-lh, 1.4);

    margin: 0;

    padding: 0;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.nova-post-list__item.is-featured .nova-post-list__post-title {

    font-size: calc(var(--typo-post-title-size-desktop, 15px) + 1px);

    -webkit-line-clamp: 3;

    line-clamp: 3;

}



.nova-post-list__post-title a {

    color: var(--color-link, #1a1a2e);

    text-decoration: none;

    transition: color 0.2s;

}



.nova-post-list__post-title a:hover {

    color: var(--color-link-hover, var(--color-primary, #cb0b0b));

}



/* --- Footer / More Link --- */

.nova-post-list__footer {

    margin-top: 12px;

}



.nova-post-list__more-link {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    font-size: 16px;

    font-weight: 600;

    color: var(--color-primary, #cb0b0b);

    text-decoration: none;

    transition: gap 0.2s;

    line-height: 1;

}



.nova-post-list__more-link svg {

    display: block;

    flex-shrink: 0;

    width: 14px;

    height: 14px;

}



.nova-post-list__more-link:hover {

    gap: 8px;

    text-decoration: underline;

    text-underline-offset: 3px;

}



/* --- Dark Mode --- */

[data-theme="dark"] .nova-post-list__item {

    border-color: var(--color-border, #374151);

}



[data-theme="dark"] .nova-post-list__post-title a {

    color: var(--color-text, #f9fafb);

}





/* ==========================================================================

   POST LIST WIDGET — MOBILE (≤767px)

   ========================================================================== */



@media (max-width: 767px) {



    /* Stack widgets vertically */

    .nova-post-list-row {

        grid-template-columns: 1fr;

        gap: 40px;

        margin-top: 28px;

    }



    /* All items show thumbnail on mobile */

    .nova-post-list__items {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 16px;

        border-top: 1px solid var(--color-border, #e5e7eb);

    }



    /* Item 1: full width, large hero style */

    .nova-post-list__item.is-featured {

        grid-column: 1 / -1;

    }



    /* All non-featured also get thumbnail on mobile */

    .nova-post-list__item:not(.is-featured) .nova-post-list__thumb-wrap {

        display: block;

    }



    /* Non-featured: smaller title */

    .nova-post-list__item:not(.is-featured) .nova-post-list__post-title {

        font-size: 14px;

        -webkit-line-clamp: 3;

        line-clamp: 3;

    }



    /* Remove border-bottom on mobile grid items */

    .nova-post-list__item {

        border-bottom: none;

        padding: 0;

        gap: 6px;

    }



    /* Featured item retains bottom separator */

    .nova-post-list__item.is-featured {

        padding-bottom: 16px;

        padding-top: 16px;

        border-bottom: 1px solid var(--color-border, #e5e7eb);

    }



    .nova-post-list__title {

        font-size: var(--typo-section-heading-size-mobile, 18px);

    }

}



@media (max-width: 480px) {

    .nova-post-list__items {

        grid-template-columns: 1fr 1fr;

        gap: 15px;

    }

}