/* ==========================================================================
    Адаптивность
   ========================================================================== */

@media (max-width: 1200px) {
    .artists-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .artists-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    body {
        position: relative;
        width: 100%;
        overflow-x: hidden;
    }

    .background-symbols {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        overflow: hidden;
    }

    .background-symbols__shape {
        position: absolute;
        opacity: 0.15;
        will-change: transform, opacity;
    }

    .background-symbols__shape svg {
        display: block;
        stroke: #ffffff;
        width: 100%;
        height: 100%;
    }

    @keyframes floatUp {
        0% {
            transform: translateY(110vh) rotate(0deg) scale(var(--scale, 1));
        }
        100% {
            transform: translateY(-20vh) rotate(360deg) scale(var(--scale, 1));
        }
    }

    @keyframes floatDiagLeft {
        0% {
            transform: translateY(110vh) translateX(15vw) rotate(0deg) scale(var(--scale, 1));
        }
        100% {
            transform: translateY(-20vh) translateX(-15vw) rotate(360deg) scale(var(--scale, 1));
        }
    }

    @keyframes floatDiagRight {
        0% {
            transform: translateY(110vh) translateX(-15vw) rotate(0deg) scale(var(--scale, 1));
        }
        100% {
            transform: translateY(-20vh) translateX(15vw) rotate(360deg) scale(var(--scale, 1));
        }
    }

    .artists-hero {
        position: relative;
        width: 100%;
        min-height: 60vh;
        padding: 80px 20px 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: linear-gradient(180deg, rgba(17, 17, 16, 0.8) 0%, rgba(41, 40, 41, 0.2) 100%);
    }

    .artists-hero__title {
        font-size: 80px;
        line-height: 90px;
    }

    .artists-hero__subtitle {
        font-size: 24px;
        line-height: 32px;
    }

    .artists-hero__cities {
        font-size: 16px;
        line-height: 26px;
    }

    .artists-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 40px auto;
        padding: 0 15px;
    }

    .artist-card {
        background: linear-gradient(180deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.98) 100%);
        border: 2px solid rgba(228, 173, 43, 0.3);
        border-radius: 15px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .artist-card:active {
        border-color: rgba(228, 173, 43, 0.7);
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(228, 173, 43, 0.3);
    }

    .artist-card__image {
        width: 100%;
        height: 280px;
        background-size: cover;
        background-position: center;
        background-color: rgba(30, 30, 30, 0.5);
        position: relative;
        border-bottom: 2px solid rgba(228, 173, 43, 0.3);
    }

    .artist-card__image-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.651);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
    }

    .artist-card__image-overlay span {
        color: #e9ae26;
        font-size: 16px;
        font-family: "Lucida Sans Unicode", sans-serif;
        font-weight: 600;
        padding: 10px 20px;
        background: rgba(228, 173, 43, 0.26);
        border: 2px solid rgba(190, 141, 28, 0.658);
        border-radius: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .artist-card__info {
        padding: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .artist-card__name {
        color: #E4AD2B;
        font-size: 26px;
        font-family: "UNCAGE", sans-serif;
        font-weight: 700;
        line-height: 30px;
        margin: 0;
        text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
    }

    .artist-card__city {
        color: rgba(255, 255, 255, 0.8);
        font-size: 16px;
        font-family: "Lucida Sans Unicode", sans-serif;
        font-weight: 400;
        line-height: 22px;
        margin: 0;
    }

    .artist-card__genre {
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        font-family: "Lucida Sans Unicode", sans-serif;
        font-weight: 400;
        line-height: 20px;
        margin: 0;
    }

    .artist-card__time {
        margin-top: auto;
        padding-top: 12px;
        color: white;
        font-size: 16px;
        font-family: "Lucida Sans Unicode", sans-serif;
        font-weight: 600;
        line-height: 22px;
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(228, 173, 43, 0.15);
        padding: 6px 12px;
        border-radius: 6px;
        align-self: flex-start;
    }

    .artist-card__time svg {
        flex-shrink: 0;
        color: #E4AD2B;
        width: 18px;
        height: 18px;
    }

    .artist-modal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.88);
        display: none;
        align-items: flex-start;
        justify-content: center;
        z-index: 10004;
        padding: 1rem 0.5rem;
        overflow-y: auto;
    }

    .artist-modal_active {
        display: flex;
    }

    .artist-modal__backdrop {
        padding: 30px 10px;
        width: 100%;
        max-width: 100%;
    }

    .artist-modal__content {
        position: relative;
        background: linear-gradient(180deg, rgba(30, 30, 30, 0.98) 0%, rgba(17, 17, 16, 0.98) 100%);
        border: 2px solid rgba(228, 173, 43, 0.4);
        border-radius: 15px;
        padding: 0.8rem 1.0rem 1.3rem 0.6rem;
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        overflow-y: auto;
    }

    .artist-modal__close {
        position: absolute;
        top: 10px;
        right: 0px;
        width: 50px;
        height: 50px;
        background: rgba(40, 40, 38, 0.92);
        border: 1px solid rgba(228, 173, 43, 0.55);
        border-radius: 50%;
        color: #E4AD2B;
        font-size: 1.8rem;
        line-height: 44px;
        text-align: center;
        cursor: pointer;
        z-index: 10;
    }

    .artist-modal__image {
        width: 100%;
        max-height: 40vh;
        border-radius: 10px;
        object-fit: cover;
        object-position: center;
    }

    .artist-modal__title {
        color: #E4AD2B;
        font-family: "UNCAGE", sans-serif;
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 32px;
        text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
        margin-bottom: 0.8rem;
    }

    .artist-modal__meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 1rem;
    }

    .artist-modal__city,
    .artist-modal__genre {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        font-family: "Lucida Sans Unicode", sans-serif;
        padding: 6px 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        display: inline-block;
        width: fit-content;
    }

    .artist-modal__date {
        font-size: 1.3rem;
        font-family: 'Inter', sans-serif;
        color: #ddd;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .artist-modal__date svg {
        flex-shrink: 0;
        color: #E4AD2B;
        width: 20px;
        height: 20px;
    }

    .artist-modal__description {
        color: rgba(255, 255, 255, 0.85);
        font-size: 1rem;
        font-family: "Lucida Sans Unicode", sans-serif;
        font-weight: 400;
        line-height: 26px;
        margin-bottom: 1.2rem;
        text-align: left;
        hyphens: auto;
    }

    .artist-modal__social {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 1.2rem;
    }

    .social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 20px;
        background: rgba(255, 255, 255, 0.05);
        border: 2px solid rgba(228, 173, 43, 0.3);
        border-radius: 10px;
        color: white;
        font-size: 14px;
        font-family: "Lucida Sans Unicode", sans-serif;
        font-weight: 600;
        text-decoration: none;
    }

    .social-link svg {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
    }

    .social-link_vk {
        background: rgba(0, 119, 255, 0.15);
        border-color: rgba(0, 119, 255, 0.4);
        color: #0077FF;
    }

    .social-link_telegram {
        background: rgba(0, 136, 204, 0.15);
        border-color: rgba(0, 136, 204, 0.4);
        color: #0088CC;
    }

    .artist-card__image_placeholder {
        background: linear-gradient(160deg, rgba(35, 33, 28, 0.95) 0%, rgba(22, 21, 18, 0.98) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .artist-silhouette {
        width: 80px;
        height: 80px;
        opacity: 0.55;
    }

    .artist-modal__silhouette {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(160deg, rgba(35, 33, 28, 0.95) 0%, rgba(22, 21, 18, 0.98) 100%);
        border-radius: 10px;
        padding: 40px 0;
        margin-bottom: 1rem;
        border: 1px solid rgba(228, 173, 43, 0.15);
    }

    .artist-modal__silhouette .artist-silhouette {
        width: 100px;
        height: 100px;
        opacity: 0.45;
    }
}