/**
 * Penghargaan Carousel
 *
 * Kartu sertifikat dengan overlay hover (bukan flip).
 * Klik kartu membuka lightbox.
 */

/* ── Swiper container ──────────────────────────── */
.phg-swiper {
    padding: 8px 4px 40px;
    position: relative;
}

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

/* ── Navigation arrows — match hero slider arrow style ──
   Bulat 44px, bg dark overlay semi-transparent, ikon chevron putih,
   muncul saat hover parent swiper, hover darker. */
.phg-btn-prev,
.phg-btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--pn-overlay-dark);
    color: var(--pn-text-on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.25s ease, background var(--pn-transition-fast);
}

.phg-btn-prev { left: 0; }
.phg-btn-next { right: 0; }

.phg-swiper:hover .phg-btn-prev,
.phg-swiper:hover .phg-btn-next {
    opacity: 1;
}

.phg-btn-prev:hover,
.phg-btn-next:hover {
    background: var(--pn-overlay-darker);
}

/* Disabled state — saat di slide pertama (prev) atau terakhir (next),
   Swiper auto-tambah class .swiper-button-disabled. */
.phg-btn-prev.swiper-button-disabled,
.phg-btn-next.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* ── Card ──────────────────────────────────────── */
.phg-card {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
    height: 420px;
    width: 100%;
    cursor: pointer;
    border-radius: var(--pn-radius-lg);
    overflow: hidden;
    border: 1px solid var(--pn-orange-dark);
    box-shadow:
        0 1px 2px rgba(15, 8, 8, .03),
        0 12px 32px -18px rgba(15, 8, 8, .14);
}

/* ── Badge tahun — pita vertikal merah menggantung dari tepi atas, sudut
   bawah membulat (atas siku), diberi jarak dari tepi kanan card. ── */
.phg-year-badge {
    position: absolute;
    top: 0;
    right: 14px;
    z-index: 3;
    background: var(--pn-red);
    color: #fff;
    font-weight: 700;
    font-size: 1.025rem;
    letter-spacing: 0.5px;
    padding: 7px 16px 9px;
    border-radius: 0 0 8px 8px;
    line-height: 1;
}

/* ── Fallback background orange (tampil bila gambar belum load) ── */
.phg-cert-fallback {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 200, 120, .35), transparent 55%),
        linear-gradient(135deg, var(--pn-orange) 0%, var(--pn-orange-dark) 100%);
}

/* ── Gambar sertifikat ─────────────────────────── */
.phg-cert-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center 38%;
    padding: 18px;
    display: block;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35));
    transition: transform 0.4s ease;
}

.phg-card:hover .phg-cert-img {
    transform: scale(1.04);
}

/* ── Card body (judul selalu tampil, deskripsi muncul saat hover) ── */
.phg-card-body {
    position: absolute;
    top: 100%; left: 0; right: 0; bottom: 0;
    padding: 24px 20px;
    z-index: 2;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.45) 55%,
        transparent 100%
    );
    transition: top 0.4s ease, background 0.35s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* Normal: hanya gradient bawah yang terlihat, judul di bawah */
.phg-card-body { top: 55%; }

.phg-card:hover .phg-card-body {
    top: 0;
    background: rgba(0, 0, 0, 0.75);
    justify-content: center;
}

.phg-overlay-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pn-text-on-dark);
    text-align: center;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.phg-overlay-desc {
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease 0.1s, opacity 0.3s ease 0.15s, margin-top 0.3s ease;
}

.phg-card:hover .phg-overlay-desc {
    max-height: 300px;
    opacity: 1;
    margin-top: 8px;
}

/* ── Swiper pagination ─────────────────────────── */
.phg-swiper .swiper-pagination-bullet {
    background: #f0c4bc;
    opacity: 1;
    width: 8px;
    height: 8px;
    transition: all .25s ease;
}

.phg-swiper .swiper-pagination-bullet-active {
    background: #8b1a10;
    width: 28px;
    border-radius: var(--pn-radius-pill);
}

/* ── Lightbox ──────────────────────────────────── */
.phg-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--pn-z-loading);
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.phg-lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Saat lightbox aktif: widget floating turunkan z-index ke belakang
   overlay (overlay = --pn-z-loading 99500). `.uwy` UserWay pakai inline
   !important — override perlu !important juga (issue.md §2.1 exception). */
body.phg-lb-open #fab-toggle,
body.phg-lb-open .back-to-top,
body.phg-lb-open #sitappa-widget,
body.phg-lb-open [class*="whatsapp"],
body.phg-lb-open [class*="accessibility"],
body.phg-lb-open [id*="whatsapp"],
body.phg-lb-open [id*="accessibility"] {
    z-index: 1;
    pointer-events: none;
}

body.phg-lb-open .uwy {
    z-index: 1 !important;
    pointer-events: none;
}

.phg-lb-inner {
    position: relative;
    max-width: 860px;
    width: 100%;
    transform: scale(0.9);
    transition: transform 0.28s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.phg-lightbox.active .phg-lb-inner {
    transform: scale(1);
}

.phg-lb-img {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--pn-radius-md);
    display: block;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.phg-lb-caption {
    margin-top: 14px;
    text-align: center;
    color: var(--pn-text-on-dark);
    font-size: 15px;
    font-weight: 600;
}

.phg-lb-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: var(--pn-text-on-dark);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--pn-transition-fast);
}

.phg-lb-close:hover {
    background: rgba(255, 255, 255, 0.28);
}