/* =============================================================
   RGVN – Headline Slider  |  rgvn-headline-slider.css
   Post carousel below main nav – Total (WPExplorer) theme
   ============================================================= */

/* ---- Outer wrapper bar ---- */
#rgvn-headline-slider-wrap {
    width:         100%;
    background:    var(--rgvn-bar-bg, #ffffff);
    border-top:    1px solid var(--rgvn-bar-border, #e0e0e0);
    border-bottom: 1px solid var(--rgvn-bar-border, #e0e0e0);
    position:      relative;
    z-index:       990;
    box-sizing:    border-box;
    /* Sit flush below Total theme's site-header */
    margin-top:    0;
    margin-bottom: 0;
}

/* ---- Inner container – matches Total's #wrap max-width ---- */
.rgvn-hs-inner {
    display:     flex;
    align-items: center;
    /* Use the same container width as Total theme (default 1260px) */
    max-width:   1260px;
    margin:      0 auto;
    height:      80px;
    padding:     0 20px;
    box-sizing:  border-box;
    position:    relative;
    overflow:    hidden;
    gap:         0;
}

/* ---- Scrollable clip viewport ---- */
.rgvn-hs-viewport {
    flex:       1 1 auto;
    overflow:   hidden;
    position:   relative;
    height:     100%;
    outline:    none;        /* focus ring handled with focus-visible below */
}

.rgvn-hs-viewport:focus-visible {
    box-shadow: inset 0 0 0 2px var(--rgvn-arrow-bg, #00873d);
}

/* ---- Sliding track ---- */
.rgvn-hs-track {
    display:    flex;
    align-items:center;
    height:     100%;
    transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change:transform;
}

/* ---- Individual post item ---- */
.rgvn-hs-item {
    display:        flex;
    align-items:    center;
    flex-shrink:    0;
    text-decoration:none !important;
    color:          var(--rgvn-text, #1a1a1a) !important;
    padding:        0 16px;
    height:         100%;
    border-right:   1px solid #ebebeb;
    box-sizing:     border-box;
    transition:     background 0.18s ease, color 0.18s ease;
    min-width:      210px;
    max-width:      270px;
    gap:            0;
}

.rgvn-hs-item:last-child {
    border-right: none;
}

.rgvn-hs-item:hover,
.rgvn-hs-item:focus-visible {
    background:     #f7faf8;
    text-decoration:none !important;
    outline:        none;
}

.rgvn-hs-item:hover .rgvn-hs-title,
.rgvn-hs-item:focus-visible .rgvn-hs-title {
    color: var(--rgvn-hover, #00873d) !important;
}

/* ---- Thumbnail 60 × 60 ---- */
.rgvn-hs-thumb {
    display:       block;
    flex-shrink:   0;
    width:         60px;
    height:        60px;
    object-fit:    cover;
    border-radius: 4px;
    margin-right:  11px;
}

/* Fallback placeholder when no featured image */
.rgvn-hs-no-thumb {
    background: #dce8dc
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' fill='%23dce8dc'/%3E%3Cpath d='M4 21l6-6 5 5 4-7 5 8' stroke='%2300873d' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
                no-repeat center center;
}

/* ---- Post title text ---- */
.rgvn-hs-title {
    font-size:          12.5px;
    font-weight:        600;
    font-family:        inherit;
    line-height:        1.38;
    color:              var(--rgvn-text, #1a1a1a);
    text-transform:     none;
    letter-spacing:     0.01em;
    /* Clamp to 3 lines */
    display:              -webkit-box;
    -webkit-box-orient:   vertical;
    -webkit-line-clamp:   3;
    overflow:             hidden;
    transition:           color 0.18s ease;
}

/* ---- Arrow button group ---- */
.rgvn-hs-arrows {
    display:     flex;
    flex-shrink: 0;
    align-items: center;
    gap:         2px;
    margin-left: 10px;
}

.rgvn-hs-arrow {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    background:      var(--rgvn-arrow-bg, #00873d);
    border:          none;
    border-radius:   3px;
    cursor:          pointer;
    padding:         0;
    transition:      background 0.18s ease, opacity 0.18s ease;
    outline:         none;
    flex-shrink:     0;
}

.rgvn-hs-arrow:hover {
    background: var(--rgvn-arrow-hover, #006d30);
}

.rgvn-hs-arrow:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 135, 61, 0.38);
}

.rgvn-hs-arrow svg {
    display: block;
    pointer-events: none;
}

.rgvn-hs-arrow[disabled] {
    opacity:    0.32;
    cursor:     not-allowed;
    background: #aaa !important;
}

/* ---- Soft fade at the edges of the viewport ---- */
.rgvn-hs-viewport::before,
.rgvn-hs-viewport::after {
    content:        '';
    position:       absolute;
    top:            0;
    bottom:         0;
    width:          20px;
    z-index:        2;
    pointer-events: none;
}
.rgvn-hs-viewport::before {
    left:       0;
    background: linear-gradient(to right, var(--rgvn-bar-bg, #fff) 0%, transparent 100%);
}
.rgvn-hs-viewport::after {
    right:      0;
    background: linear-gradient(to left,  var(--rgvn-bar-bg, #fff) 0%, transparent 100%);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Tablet: smaller items */
@media (max-width: 1100px) and (min-width: 768px) {
    .rgvn-hs-inner {
        padding: 0 14px;
    }
    .rgvn-hs-item {
        min-width: 180px;
        max-width: 220px;
        padding:   0 12px;
    }
    .rgvn-hs-title {
        font-size: 11.5px;
    }
}

/* =========================================================
   MOBILE  (≤ 767px) – 1 item visible at a time
   Item width is set to viewport.offsetWidth via JS.
   CSS handles layout + style only.
   ========================================================= */
@media (max-width: 767px) {

    /* Bar stays visible */
    #rgvn-headline-slider-wrap {
        display: block;
    }

    /* Reduce bar height slightly for mobile */
    .rgvn-hs-inner {
        height:  72px;
        padding: 0 10px;
        gap:     0;
    }

    /* Each item stretches full viewport width – JS sets exact px via data-attr */
    /* min/max-width overrides prevent the desktop range from interfering */
    .rgvn-hs-item {
        min-width:   0 !important;   /* JS will set width inline */
        max-width:   none !important;
        padding:     0 10px;
        border-right: none;          /* no dividers on mobile */
    }

    /* Slightly larger thumbnail on mobile */
    .rgvn-hs-thumb {
        width:        52px;
        height:       52px;
        margin-right: 10px;
        flex-shrink:  0;
    }

    /* Title slightly smaller */
    .rgvn-hs-title {
        font-size:          12px;
        -webkit-line-clamp: 2;
    }

    /* Make arrows slightly bigger for touch */
    .rgvn-hs-arrow {
        width:  36px;
        height: 36px;
    }

    /* Hide edge-fade on mobile (full-width items don't need it) */
    .rgvn-hs-viewport::before,
    .rgvn-hs-viewport::after {
        display: none;
    }
}

/* Wide-screen: ensure alignment with Total's boxed wrapper */
@media (min-width: 1261px) {
    .rgvn-hs-inner {
        padding: 0 20px;
    }
}