/* GMIST Pelayan carousel */
#pelayan.gmist-pelayan-carousel {
    overflow: hidden;
    background: #eef0f5;
}

#pelayan .gmist-pelayan-viewport {
    overflow: hidden;
    width: 100%;
    padding: 14px 0 8px;
    border-radius: 16px;
}

#pelayan .gmist-pelayan-track {
    --pelayan-visible: 3;
    display: flex;
    grid-template-columns: none;
    gap: 0;
    width: 100%;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

#pelayan .gmist-pelayan-card {
    position: relative;
    flex: 0 0 calc(100% / var(--pelayan-visible));
    min-width: 0;
    padding: 14px 12px 0;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

#pelayan .gmist-pelayan-card .thumb {
    position: relative;
    z-index: 2;
    width: min(72%, 250px);
    margin: 0 auto -62px;
    aspect-ratio: 4 / 5;
    background: #f9dfbf;
    border: 6px solid #49aee3;
    border-radius: 26px;
    box-shadow: 0 12px 28px rgba(5, 42, 73, 0.18);
}

#pelayan .gmist-pelayan-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 19px;
}

#pelayan .gmist-pelayan-card .thumb span {
    color: #ffffff;
    background: linear-gradient(135deg, #052a49, #0b4778);
    border-radius: 19px;
}

#pelayan .gmist-pelayan-card .card-content {
    min-height: 188px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 88px 22px 28px;
    color: #ffffff;
    text-align: center;
    background: #1262a6;
    border-radius: 0;
    box-shadow: 0 10px 28px rgba(5, 42, 73, 0.14);
}

#pelayan .gmist-pelayan-card .card-content small {
    display: none;
}

#pelayan .gmist-pelayan-card .card-content h3 {
    margin: 0 0 5px;
    font-size: 1.02rem;
    line-height: 1.3;
    text-transform: none;
}

#pelayan .gmist-pelayan-card .card-content h3 a {
    color: #ffffff;
}

#pelayan .gmist-pelayan-card .card-content p {
    margin: 0;
    color: #ffffff;
    font-size: 0.98rem;
}

#pelayan .gmist-pelayan-card .more {
    margin-top: 10px;
    color: #f4d36d;
}

#pelayan .gmist-pelayan-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}

#pelayan .gmist-pelayan-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    color: #ffffff;
    background: #0b4778;
    border: 0;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

#pelayan .gmist-pelayan-prev {
    justify-self: end;
}

#pelayan .gmist-pelayan-next {
    justify-self: start;
}

#pelayan .gmist-pelayan-nav:hover:not(:disabled),
#pelayan .gmist-pelayan-nav:focus:not(:disabled) {
    color: #052a49;
    background: #d7ad42;
    transform: translateY(-2px);
}

#pelayan .gmist-pelayan-nav:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

#pelayan .gmist-pelayan-status {
    min-width: 86px;
    color: #687680;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 750;
}

html[data-gmist-theme="dark"] #pelayan.gmist-pelayan-carousel {
    background: #081a28;
}

html[data-gmist-theme="dark"] #pelayan .gmist-pelayan-card .card-content {
    background: #102f47;
}

html[data-gmist-theme="dark"] #pelayan .gmist-pelayan-status {
    color: #b7c8d3;
}

@media (max-width: 850px) {
    #pelayan .gmist-pelayan-track {
        --pelayan-visible: 2;
    }

    #pelayan .gmist-pelayan-card .thumb {
        width: min(76%, 230px);
    }
}

@media (max-width: 560px) {
    #pelayan .gmist-pelayan-track {
        --pelayan-visible: 1;
    }

    #pelayan .gmist-pelayan-card {
        padding-right: 4px;
        padding-left: 4px;
    }

    #pelayan .gmist-pelayan-card .thumb {
        width: min(72%, 220px);
        margin-bottom: -55px;
        border-width: 5px;
        border-radius: 22px;
    }

    #pelayan .gmist-pelayan-card .card-content {
        min-height: 175px;
        padding: 80px 18px 25px;
    }

    #pelayan .gmist-pelayan-controls {
        grid-template-columns: 1fr 1fr;
    }

    #pelayan .gmist-pelayan-status {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    #pelayan .gmist-pelayan-prev,
    #pelayan .gmist-pelayan-next {
        width: 100%;
        justify-self: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    #pelayan .gmist-pelayan-track {
        transition: none;
    }
}