/* list_organisastion.css */

.listorganize { width: 100%; background: #fcfcfc; }

.lo-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3.5rem;
    position: relative;
}

/* ─────────────────────────────────────────────────────────────────────
   PRE-INIT FLASH PREVENTION
   Sembunyikan loSwiper sampai Swiper menambahkan .swiper-initialized.
   Ini mencegah semua slide tampil full-width sebelum JS selesai jalan.
   ───────────────────────────────────────────────────────────────────── */
.loSwiper:not(.swiper-initialized) {
    overflow: hidden;
    opacity: 0;
}

/* Setelah init: fade in */
.loSwiper.swiper-initialized {
    opacity: 1;
    transition: opacity .25s ease;
}

/* Sebelum init: paksa slide ke lebar 1/5 (desktop) agar tidak stacked */
.loSwiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}
.loSwiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 20%;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
}
/* Mobile: 1 slide pre-init */
@media (max-width: 767px) {
    .loSwiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 88%; }
}
/* Tablet: 3 slide pre-init */
@media (min-width: 768px) and (max-width: 1023px) {
    .loSwiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 32%; }
}
/* ───────────────────────────────────────────────────────────────────── */

.loSwiper {
    width: 100%;
    padding-bottom: 44px !important;
    overflow: hidden !important;
}

.loSwiper .swiper-slide { height: auto; }

/* ── Card ── */
.staff-card {
    position: relative;
    width: 100%;
    cursor: grab;
    transition: transform .3s ease;
    user-select: none;
    -webkit-user-select: none;
}
.staff-card:active { cursor: grabbing; }
.staff-card:hover,
.staff-card:focus-visible,
.staff-card.is-active { transform: scale(1.04); }

.card-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 7 / 10;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    transition: box-shadow .3s ease;
}
.staff-card:hover .card-inner,
.staff-card:focus-visible .card-inner,
.staff-card.is-active .card-inner { box-shadow: 0 14px 36px rgba(0,0,0,.2); }

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    pointer-events: none;
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(25,60,118,.9) 0%, rgba(25,60,118,.4) 38%, transparent 62%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.staff-card:hover .card-overlay,
.staff-card:focus-visible .card-overlay,
.staff-card.is-active .card-overlay { opacity: 1; }

.card-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.1rem;
    transform: translateY(10px);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    pointer-events: none;
}
.staff-card:hover .card-info,
.staff-card:focus-visible .card-info,
.staff-card.is-active .card-info { transform: translateY(0); opacity: 1; }

.staff-card:focus-visible {
    outline: none;
}

.card-divider {
    width: 2.2rem; height: 3px;
    background: #edd25f;
    border-radius: 9999px;
    margin-bottom: .5rem;
}
.card-name {
    font-size: 1rem; font-weight: 700;
    color: #fff; margin-bottom: .15rem; line-height: 1.3;
}
.card-position { font-size: .78rem; color: rgba(255,255,255,.87); font-weight: 500; }

/* ── Nav Buttons ──
   FIX: override transform eksplisit di semua state agar translateY(-50%)
   dari Swiper tidak hilang saat hover menambahkan scale, yang menyebabkan
   tombol loncat ke bawah.
   ── */
.lo-btn {
    margin-top: 0 !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    top: calc(40% - 1.25rem) !important;
    transform: none !important;
    background: rgba(255,255,255,.95) !important;
    border-radius: 8px !important;
    border: 1.5px solid rgba(25,60,118,.2) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.1);
    color: #193c76 !important;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease !important;
}
.lo-btn:hover {
    background: #193c76 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(25,60,118,.28) !important;
    transform: none !important;
}
.lo-btn.lo-prev { left: 0 !important; }
.lo-btn.lo-next { right: 0 !important; }
.lo-btn::after { font-size: .85rem !important; font-weight: 800 !important; }
.lo-btn.swiper-button-disabled { opacity: .3 !important; pointer-events: none !important; }

/* ── Pagination ── */
.lo-pagination { bottom: 6px !important; }
.lo-pagination .swiper-pagination-bullet {
    width: .45rem; height: .45rem;
    background: #b8c2d4; opacity: 1;
    border-radius: 9999px;
    transition: width .25s ease, background .25s ease;
}
.lo-pagination .swiper-pagination-bullet-active {
    width: 1.6rem;
    background: #193c76;
}

/* ── Responsive ── */
@media (max-width: 479px) {
    .lo-container { padding: 0 2.75rem; }
    .lo-btn { width: 2.1rem !important; height: 2.1rem !important; }
}