/* ============================================================
   UGA Ghiri Slider – Frontend Styles
   Matches the provided design: gold right panel, purple accents
   ============================================================ */

/* ── CSS Variables ── */
:root {
    --ugs-gold:         #e7b20f;
    --ugs-gold-dark:    #d59600;
    --ugs-purple:       #6f2d86;
    --ugs-purple-light: #8a3aa3;
    --ugs-white:        #FFFFFF;
    --ugs-text-dark:    #2C1A3A;
    --ugs-radius:       22px;
    --ugs-thumb-size:   92px;
    --ugs-transition:   0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wrapper ── */
.ugs-wrapper {
    display: flex;
    align-items: stretch;
    border-radius: var(--ugs-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.16);
    background: var(--ugs-gold);
    min-height: 340px;
    aspect-ratio: 3 / 1;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    position: relative;
    padding: 10px 10px 12px;
    gap: 14px;
}

.ugs-wrapper::before,
.ugs-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 78px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.25;
    background-image:
        radial-gradient(circle at 5% 70%, rgba(255,255,255,0.5) 0 5px, transparent 6px),
        radial-gradient(circle at 9% 70%, rgba(255,255,255,0.35) 0 2px, transparent 3px),
        radial-gradient(circle at 14% 70%, rgba(255,255,255,0.5) 0 5px, transparent 6px),
        radial-gradient(circle at 18% 70%, rgba(255,255,255,0.35) 0 2px, transparent 3px),
        radial-gradient(circle at 23% 70%, rgba(255,255,255,0.5) 0 5px, transparent 6px),
        radial-gradient(circle at 27% 70%, rgba(255,255,255,0.35) 0 2px, transparent 3px),
        radial-gradient(circle at 32% 70%, rgba(255,255,255,0.5) 0 5px, transparent 6px),
        radial-gradient(circle at 36% 70%, rgba(255,255,255,0.35) 0 2px, transparent 3px),
        radial-gradient(circle at 41% 70%, rgba(255,255,255,0.5) 0 5px, transparent 6px),
        radial-gradient(circle at 45% 70%, rgba(255,255,255,0.35) 0 2px, transparent 3px),
        radial-gradient(circle at 50% 70%, rgba(255,255,255,0.5) 0 5px, transparent 6px),
        radial-gradient(circle at 54% 70%, rgba(255,255,255,0.35) 0 2px, transparent 3px),
        radial-gradient(circle at 59% 70%, rgba(255,255,255,0.5) 0 5px, transparent 6px),
        radial-gradient(circle at 63% 70%, rgba(255,255,255,0.35) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 70%, rgba(255,255,255,0.5) 0 5px, transparent 6px),
        radial-gradient(circle at 72% 70%, rgba(255,255,255,0.35) 0 2px, transparent 3px),
        radial-gradient(circle at 77% 70%, rgba(255,255,255,0.5) 0 5px, transparent 6px),
        radial-gradient(circle at 81% 70%, rgba(255,255,255,0.35) 0 2px, transparent 3px),
        radial-gradient(circle at 86% 70%, rgba(255,255,255,0.5) 0 5px, transparent 6px),
        radial-gradient(circle at 90% 70%, rgba(255,255,255,0.35) 0 2px, transparent 3px),
        radial-gradient(circle at 95% 70%, rgba(255,255,255,0.5) 0 5px, transparent 6px);
}

.ugs-wrapper::before {
    top: -10px;
}

.ugs-wrapper::after {
    bottom: -8px;
    transform: scaleY(-1);
}

/* ── LEFT: Slider ── */
.ugs-left {
    flex: 0 0 62%;
    max-width: 62%;
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--ugs-radius) - 2px);
    z-index: 1;
}

.ugs-main-swiper {
    width: 100%;
    height: 100%;
    min-height: 316px;
}

.ugs-main-swiper .swiper-wrapper {
    height: 100%;
}

.ugs-main-swiper .swiper-slide {
    overflow: hidden;
    border-radius: calc(var(--ugs-radius) - 2px);
}

.ugs-main-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.8s ease;
}

.ugs-main-swiper .swiper-slide-active img {
    transform: scale(1.02);
}

.ugs-no-image {
    width: 100%;
    height: 100%;
    min-height: 360px;
    background: linear-gradient(135deg, #e8d5b7, #c9a96e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ugs-purple);
    font-size: 1.2rem;
    font-weight: 600;
}

/* ── RIGHT: Content Panel ── */
.ugs-right {
    flex: 0 0 38%;
    max-width: 38%;
    background: transparent;
    padding: 18px 18px 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* Gold pattern overlay (decorative circles like in design) */
.ugs-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 90% 16%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 14%, transparent 14%);
    pointer-events: none;
    z-index: 0;
    border-radius: 0 var(--ugs-radius) var(--ugs-radius) 0;
}

.ugs-content-area {
    position: relative;
    z-index: 1;
    max-width: 300px;
}

/* ── Title ── */
.ugs-title {
    font-size: clamp(1.35rem, 2vw, 2.85rem);
    font-weight: 800;
    color: var(--ugs-purple);
    margin: 0 0 8px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
    transition: opacity 0.3s ease;
}

/* ── Badge ── */
.ugs-badge {
    display: inline-block;
    background: var(--ugs-white);
    color: var(--ugs-purple);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 6px;
    margin-bottom: 16px;
    transition: opacity 0.3s ease;
}

/* ── Description ── */
.ugs-description {
    font-size: 0.84rem;
    color: rgba(44,26,58,0.82);
    line-height: 1.6;
    margin: 0 0 14px;
    min-height: 0;
    transition: opacity 0.3s ease;
}

/* ── Read More Button ── */
.ugs-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ugs-purple);
    color: var(--ugs-white) !important;
    text-decoration: none !important;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 40px;
    transition: background var(--ugs-transition), transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: none;
}

.ugs-btn:hover {
    background: var(--ugs-purple-light);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(123,45,139,0.45);
}

.ugs-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.ugs-btn:hover svg {
    transform: translateX(3px);
}

/* ── Thumbnails Row ── */
.ugs-thumbnails {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 26px;
    position: relative;
    z-index: 1;
}

/* ── Individual Thumbnail ── */
.ugs-thumb {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.ugs-thumb-ring {
    width: var(--ugs-thumb-size);
    height: var(--ugs-thumb-size);
    border-radius: 50%;
    padding: 3px;
    background: rgba(111,45,134,0.9);
    transition: background var(--ugs-transition), transform 0.2s ease;
    position: relative;
}

/* Active state ring */
.ugs-thumb.active .ugs-thumb-ring {
    background: var(--ugs-purple-light);
}

/* Loading animation ring */
.ugs-thumb.loading .ugs-thumb-ring::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--ugs-purple);
    border-right-color: var(--ugs-purple);
    animation: ugs-spin 0.8s linear infinite;
}

@keyframes ugs-spin {
    to { transform: rotate(360deg); }
}

/* Hover – pulse ring */
.ugs-thumb:not(.active):hover .ugs-thumb-ring {
    background: rgba(123,45,139,0.4);
    transform: scale(1.05);
}

.ugs-thumb-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(236,182,17,0.95);
}

.ugs-thumb-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.ugs-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(123,45,139,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ugs-white);
}

/* Plus icon badge */
.ugs-thumb-plus {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ugs-purple);
    color: var(--ugs-gold);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(72,22,90,0.3);
    transition: background var(--ugs-transition);
}

.ugs-thumb.active .ugs-thumb-plus,
.ugs-thumb:hover .ugs-thumb-plus {
    background: var(--ugs-purple-light);
}

/* ── Content Transition ── */
.ugs-title.ugs-fade,
.ugs-badge.ugs-fade,
.ugs-description.ugs-fade,
.ugs-btn.ugs-fade {
    opacity: 0;
    transform: translateY(6px);
}

.ugs-title,
.ugs-badge,
.ugs-description,
.ugs-btn {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ── No slides message ── */
.ugs-no-slides {
    text-align: center;
    padding: 40px;
    color: #888;
    font-style: italic;
}

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

/* Tablet */
@media ( max-width: 900px ) {
    .ugs-wrapper {
        min-height: 220px;
        aspect-ratio: auto;
        padding: 8px;
        gap: 10px;
    }
    .ugs-left  { flex: 0 0 56%; max-width: 56%; }
    .ugs-right { flex: 0 0 44%; max-width: 44%; padding: 16px 12px 8px 0; }
    .ugs-main-swiper { min-height: 280px; }
    :root { --ugs-thumb-size: 80px; }
    .ugs-thumbnails { gap: 12px; }
    .ugs-title { font-size: 1.3rem; }
}

/* Mobile */
@media ( max-width: 640px ) {
    .ugs-wrapper {
        flex-direction: column;
        border-radius: 16px;
        padding: 8px;
        gap: 0;
    }
    .ugs-left,
    .ugs-right {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }
    .ugs-left {
        border-radius: 16px 16px 0 0;
    }
    .ugs-right {
        border-radius: 0 0 16px 16px;
        padding: 18px 12px 12px;
    }
    .ugs-right::before {
        border-radius: 0 0 16px 16px;
    }
    .ugs-main-swiper { min-height: 220px; }
    .ugs-main-swiper .swiper-slide {
        border-radius: 16px 16px 0 0;
    }
    :root { --ugs-thumb-size: 72px; }
    .ugs-thumbnails { gap: 10px; }
}