/* ==========================================================
   ARTIST SPOTLIGHT ([artist_spotlight] Shortcode)
   ========================================================== */

.ls-artist-spotlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 40px 0;
}

/* Column Ratios */
.ls-artist-spotlight.ls-ratio-1-2 {
    grid-template-columns: 1fr 2fr;
}

.ls-artist-spotlight.ls-ratio-2-1 {
    grid-template-columns: 2fr 1fr;
}

.ls-artist-spotlight.ls-ratio-2-3 {
    grid-template-columns: 2fr 3fr;
}

.ls-artist-spotlight.ls-ratio-3-2 {
    grid-template-columns: 3fr 2fr;
}

/* Image Position: Right → swap order */
.ls-artist-spotlight.ls-img-right .ls-spotlight-image {
    order: 2;
}

.ls-artist-spotlight.ls-img-right .ls-spotlight-content {
    order: 1;
}

/* ===== IMAGE ===== */
.ls-spotlight-image {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.ls-spotlight-image img {
    width: 100%;
    height: var(--ls-spotlight-img-h, auto);
    display: block;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ls-spotlight-image:hover img {
    transform: scale(1.05);
}

/* Image Stretch (Ảnh bám theo chữ) */
.ls-artist-spotlight.ls-img-stretch {
    align-items: stretch;
}

.ls-artist-spotlight.ls-img-stretch .ls-spotlight-image {
    height: 0;
    min-height: 100%;
}

.ls-artist-spotlight.ls-img-stretch .ls-spotlight-image img {
    height: 100%;
    object-fit: cover;
}

/* Content Stretch (Chữ bám theo ảnh) */
.ls-artist-spotlight.ls-content-stretch {
    align-items: stretch;
}

.ls-artist-spotlight.ls-content-stretch .ls-spotlight-content {
    height: 0;
    min-height: 100%;
}

/* Aspect Ratio Styles */
.ls-artist-spotlight.ls-aspect-auto .ls-spotlight-image img {
    height: auto;
}

.ls-artist-spotlight.ls-aspect-1-1 .ls-spotlight-image img {
    aspect-ratio: 1 / 1;
    height: auto;
}

.ls-artist-spotlight.ls-aspect-4-3 .ls-spotlight-image img {
    aspect-ratio: 4 / 3;
    height: auto;
}

.ls-artist-spotlight.ls-aspect-3-4 .ls-spotlight-image img {
    aspect-ratio: 3 / 4;
    height: auto;
}

.ls-artist-spotlight.ls-aspect-16-9 .ls-spotlight-image img {
    aspect-ratio: 16 / 9;
    height: auto;
}

/* Image Styles */
.ls-img-circle .ls-spotlight-image {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.ls-img-circle .ls-spotlight-image img {
    height: 100%;
    object-fit: cover;
}

.ls-img-square .ls-spotlight-image {
    border-radius: 0;
}

/* ===== CONTENT ===== */
.ls-spotlight-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 0;
}

.ls-spotlight-content.ls-align-center {
    align-items: center;
    text-align: center;
}

/* Subtitle / Label */
.ls-spotlight-subtitle {
    font-family: var(--ls-font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--ls-accent, #C9A96E);
    margin-bottom: 16px;
    font-weight: 500;
}

/* Artist Name */
.ls-spotlight-name {
    font-family: var(--ls-font-heading, 'Playfair Display', serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--ls-text-primary, #f5f5f5);
    margin: 0 0 24px 0;
    line-height: 1.2;
}

/* Description */
.ls-spotlight-desc {
    font-family: var(--ls-font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ls-text-secondary, #a0a0a0);
    margin-bottom: 32px;
    max-width: 500px;
}

.ls-spotlight-content.ls-align-center .ls-spotlight-desc {
    max-width: 100%;
}

/* Content Style: Card */
.ls-style-card {
    background-color: var(--ls-bg-secondary, #151515);
    padding: 50px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* Content Style: Glassmorphism */
.ls-style-glass {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 50px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Content Style: Overlap */
.ls-style-overlap {
    background-color: var(--ls-bg-secondary, #151515);
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}

.ls-artist-spotlight:not(.ls-img-right) .ls-style-overlap {
    margin-left: -80px;
}

.ls-artist-spotlight.ls-img-right .ls-style-overlap {
    margin-right: -80px;
}

/* Content Style: Elegant Border */
.ls-style-border {
    padding: 50px;
    border: 1px solid rgba(201, 169, 110, 0.3);
    /* Muted Accent */
    position: relative;
    background: transparent;
}

.ls-style-border::before,
.ls-style-border::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid var(--ls-accent, #C9A96E);
    transition: all 0.4s ease;
}

.ls-style-border::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.ls-style-border::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

.ls-spotlight-content.ls-style-border:hover::before,
.ls-spotlight-content.ls-style-border:hover::after {
    width: 40px;
    height: 40px;
}

/* CTA Button */
.ls-spotlight-btn {
    display: inline-block;
    padding: 14px 36px;
    border: 1px solid var(--ls-accent, #C9A96E);
    color: var(--ls-text-primary, #f5f5f5);
    font-family: var(--ls-font-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    background: transparent;
    align-self: flex-start;
}

.ls-spotlight-content.ls-align-center .ls-spotlight-btn {
    align-self: center;
}

.ls-spotlight-btn:hover {
    background: var(--ls-accent, #C9A96E);
    color: var(--ls-bg-primary, #0f0f0f);
    box-shadow: 0 10px 30px rgba(201, 169, 110, 0.25);
    transform: translateY(-2px);
}

/* ===== EMPTY STATE ===== */
.ls-spotlight-empty {
    text-align: center;
    padding: 60px 30px;
    color: var(--ls-text-secondary);
    font-style: italic;
}

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

/* Tablet (iPad) */
@media (max-width: 1024px) {
    .ls-artist-spotlight,
    .ls-artist-spotlight.ls-ratio-1-2,
    .ls-artist-spotlight.ls-ratio-2-1,
    .ls-artist-spotlight.ls-ratio-2-3,
    .ls-artist-spotlight.ls-ratio-3-2 {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ls-artist-spotlight.ls-img-right .ls-spotlight-image {
        order: 0;
    }

    .ls-artist-spotlight.ls-img-right .ls-spotlight-content {
        order: 0;
    }

    /* Reset stretch logic for stacked layout */
    .ls-artist-spotlight.ls-img-stretch .ls-spotlight-image,
    .ls-artist-spotlight.ls-content-stretch .ls-spotlight-content {
        height: auto;
        min-height: auto;
    }

    /* Reset overlap margin for stacked layout */
    .ls-artist-spotlight:not(.ls-img-right) .ls-style-overlap,
    .ls-artist-spotlight.ls-img-right .ls-style-overlap {
        margin: -60px 30px 0 30px;
    }

    .ls-style-card,
    .ls-style-glass,
    .ls-style-overlap,
    .ls-style-border {
        padding: 40px 30px;
    }

    .ls-spotlight-content {
        text-align: center;
        align-items: center;
    }

    .ls-spotlight-btn {
        align-self: center; /* Center button when stacked */
    }

    .ls-spotlight-name {
        font-size: 2.2rem;
    }

    .ls-spotlight-desc {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .ls-artist-spotlight {
        gap: 30px;
    }

    .ls-style-card,
    .ls-style-glass,
    .ls-style-overlap,
    .ls-style-border {
        padding: 30px 20px;
    }

    .ls-artist-spotlight:not(.ls-img-right) .ls-style-overlap,
    .ls-artist-spotlight.ls-img-right .ls-style-overlap {
        margin: -40px 15px 0 15px;
    }

    .ls-spotlight-name {
        font-size: 1.8rem;
    }
}