/* ============================================================
   Artists.css — נוסף 20/09/2026
   עיצוב-מחדש של עמוד Artists לפי תמונת-רפרנס (אפליקציית "Rappers"):
   מעטפת עם סרגל ניווט צדדי + גריד של תמונות-אמן עגולות, במקום
   האריחים המרובעים הישנים (FromMenu.css). קובץ נפרד ועצמאי — לא
   נוגע ב-FromMenu.css בכלל, כדי שדפי התפריט האחרים (Countries/
   Genres/Specials/BigTown/Recommended) יישארו בדיוק כמו שהיו.

   הערה על מבנה הדף: הסרגל הצדדי הזה הוא בנוסף לתפריט העליון
   הגלובלי של האתר (_Layout.cshtml, קישורי Genres/Countries/וכו')
   — לא במקומו. המשתמש אישר במפורש לבנות סרגל חדש; נמנעתי בכוונה
   משם-מחלקה ".sidebar" כי הוא כבר תפוס ב-_Layout.cshtml (תפריט
   ה-hamburger הנגלל, ‎260px, position:fixed) — שימוש בו כאן היה
   שובר את שני האלמנטים.
   ============================================================ */

:root{
    --as-bg-sidebar: #0a0a0c;
    --as-panel: #14141a;
    --as-line: rgba(255,255,255,0.08);
    --as-text-dim: #9199a1;
    --as-accent: #5af7ff;
    --as-accent-soft: rgba(90,247,255,0.14);
}

.artists-shell{
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 28px;
    align-items: start;
}

/* ---------- Sidebar ---------- */

.artists-sidebar{
    background: var(--as-bg-sidebar);
    border: 1px solid var(--as-line);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 14px;
    position: sticky;
    top: 76px; /* מפנה מקום להדר הקבוע (60px) + ריווח קטן */
}

.as-logo{
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(155deg, #173a3a, #0a1616);
    border: 1px solid rgba(90,247,255,0.35);
    color: var(--as-accent);
    font-size: 18px;
    margin-bottom: 26px;
    text-decoration: none;
}

.as-nav{ display: flex; flex-direction: column; gap: 6px; flex: 1; }
.as-bottom{ display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

.as-link{
    width: 46px; height: 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    color: var(--as-text-dim);
    position: relative;
    transition: 0.2s ease;
    border: none; background: none; cursor: pointer;
}
.as-link svg{ width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.as-link:hover{ color: #fff; background: var(--as-panel); }
.as-link.active{
    color: var(--as-accent);
    background: var(--as-accent-soft);
    box-shadow: 0 0 0 1px rgba(90,247,255,0.35), 0 0 14px rgba(0,255,255,0.18);
}

.as-tip{
    position: absolute; left: 58px; top: 50%; transform: translateY(-50%);
    background: #000; border: 1px solid var(--as-line);
    padding: 5px 10px; border-radius: 8px;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; white-space: nowrap;
    color: #fff;
    opacity: 0; pointer-events: none; transition: 0.15s ease;
    z-index: 30;
}
.as-link:hover .as-tip{ opacity: 1; }

.as-theme-btn .icon-moon{ display: none; }
body[data-theme="light"] .as-theme-btn .icon-sun{ display: none; }
body[data-theme="light"] .as-theme-btn .icon-moon{ display: block; }

/* ---------- Header + grid ---------- */

.artists-header{
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    margin-bottom: 30px;
}
.artists-header h1{ margin: 0; }
.artists-count{
    font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--as-accent);
    background: var(--as-accent-soft); border: 1px solid rgba(90,247,255,0.3);
    padding: 6px 14px; border-radius: 999px;
}

.avatar-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
    gap: 30px 20px;
}
.artist-avatar-tile{
    display: flex; flex-direction: column; align-items: center; text-align: center;
    text-decoration: none; color: inherit;
}
.avatar-photo{
    width: 116px; height: 116px; border-radius: 50%;
    overflow: hidden; position: relative;
    background: var(--as-panel);
    border: 1px solid var(--as-line);
    transition: 0.25s cubic-bezier(.19,1,.22,1);
}
.avatar-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.08) brightness(0.94); }
.avatar-photo.img-fallback{ background: linear-gradient(160deg, #173a3a, #0a1616); }
.artist-avatar-tile:hover .avatar-photo{
    transform: translateY(-4px) scale(1.035);
    border-color: rgba(90,247,255,0.55);
    box-shadow: 0 0 0 4px rgba(90,247,255,0.08), 0 14px 26px -10px rgba(0,0,0,0.7), 0 0 20px rgba(0,255,255,0.2);
}
.avatar-name{
    margin-top: 12px; font-family: 'Fraunces','Segoe UI',serif; font-weight: 600; font-size: 14.5px;
    line-height: 1.25; color: #fff;
}
.avatar-stat{
    margin-top: 4px; display: inline-flex; align-items: center; gap: 4px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--as-text-dim);
}
.avatar-stat svg{ width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ---------- Responsive ---------- */

@media (max-width: 760px){
    .artists-shell{ grid-template-columns: 1fr; }
    .artists-sidebar{
        position: static;
        flex-direction: row;
        width: 100%;
        padding: 10px 14px;
        justify-content: flex-start;
        gap: 4px;
        overflow-x: auto;
    }
    .as-logo{ margin-bottom: 0; margin-right: 10px; flex-shrink: 0; }
    .as-nav{ flex-direction: row; flex: none; }
    .as-bottom{ flex-direction: row; margin-top: 0; margin-left: auto; }
    .as-tip{ display: none; }
    .avatar-grid{ grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); gap: 22px 12px; }
    .avatar-photo{ width: 86px; height: 86px; }
}

/* ---------- Light theme ---------- */

body[data-theme="light"] .artists-sidebar{
    background: #ffffff;
    border-color: #e0e0e0;
}
body[data-theme="light"] .as-link{ color: #6b6b6b; }
body[data-theme="light"] .as-link:hover{ color: #222; background: #f2f2f2; }
body[data-theme="light"] .as-link.active{
    color: #a07830;
    background: rgba(201,168,76,0.14);
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35);
}
body[data-theme="light"] .as-tip{ background: #222; color: #fff; border-color: #444; }
body[data-theme="light"] .artists-count{
    color: #a07830; background: rgba(201,168,76,0.12); border-color: rgba(201,168,76,0.35);
}
body[data-theme="light"] .avatar-photo{ background: #ececec; border-color: #e0e0e0; }
body[data-theme="light"] .avatar-photo.img-fallback{ background: linear-gradient(160deg, #f7ead0, #e8d6ab); }
body[data-theme="light"] .artist-avatar-tile:hover .avatar-photo{
    border-color: rgba(201,168,76,0.6);
    box-shadow: 0 0 0 4px rgba(201,168,76,0.1), 0 10px 22px -10px rgba(0,0,0,0.25);
}
body[data-theme="light"] .avatar-name{ color: #222; }
body[data-theme="light"] .avatar-stat{ color: #7a7a7a; }

/* ---------- 29/09/2026: טלפון — הפס המשותף במקום הפס של העמוד ----------
   בטלפון (≤600px) הפס של העמוד הזה מוסתר: במקומו מוצג פס הניווט המשותף
   לכל האתר (<nav class="mnav"> ב-_Layout.cshtml, עיצוב ב-mobilenav.css) —
   אותו פס בדיוק, שנבנה קודם כאן והועבר לכל העמודים לפי בקשה מפורשת:
   "תעשה לי אותם כמו בארטיסטס - רק במובייל כמובן!". בלי זה היו בטלפון
   שני פסים זהים אחד מעל השני.
   601–760px: הפס של העמוד נשאר השורה האופקית שהוא תמיד היה (ר' Responsive
   למעלה) — עם תיקון אחד: width:100% בתוספת הריפוד הפך אותו לרחב מהשורה
   ב-30px, והקצה הימני שלו נחתך (box-sizing). */
@media (max-width: 760px){
    .artists-sidebar{ box-sizing: border-box; }
}
@media (max-width: 600px){
    .artists-sidebar{ display: none; }
}


/* ---------- 30/09/2026: ריבועים בטלפון ----------
   האייקון .mnav-shape בפס (_Layout.cshtml) מחליף בין עיגולים לריבועים בכל
   דפי הרשימות. בריבועים (html.bc-squares), עד 600px, העמוד הזה נראה כמו
   שאר הדפים (FromMenu.css): כותרת עם כפתור 1/4 בשורה (compactGrid.js),
   ריבועים עם השם על פס כהה בתחתית, בלי מספר השירים. בעיגולים (ברירת
   המחדל) — בדיוק כמו קודם, והכפתור 1/4 מוסתר. */
.artists-header #compact-grid-toggle-btn { display: none !important; }

@media (max-width: 600px) {
    html.bc-squares .artists-header {
        align-items: center; flex-wrap: nowrap; gap: 10px;
        margin-bottom: 16px;
    }
    html.bc-squares .artists-header .page-title {
        flex: 1; min-width: 0;
        font-size: clamp(20px, 6vw, 32px) !important;
        line-height: 1.2;
    }
    html.bc-squares .artists-count { display: none; }

    html.bc-squares .avatar-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    html.bc-squares .artist-avatar-tile {
        display: block; position: relative; overflow: hidden;
        transition: 0.25s ease-in-out;
    }
    html.bc-squares .avatar-photo {
        width: 100%; height: auto; aspect-ratio: 1 / 1;
        border: none; border-radius: 12px;
    }
    html.bc-squares .artist-avatar-tile:hover .avatar-photo { transform: none; box-shadow: none; }
    html.bc-squares .artist-avatar-tile:hover {
        transform: scale(1.05);
        box-shadow: 0 0 12px rgba(0,255,255,0.6), 0 0 24px rgba(0,255,255,0.35), 0 0 38px rgba(0,255,255,0.25);
    }
    html.bc-squares .avatar-photo img { filter: none; }
    html.bc-squares .avatar-name {
        position: absolute; bottom: 0; left: 0; width: 100%;
        margin: 0; padding: 9px 6px;
        background: rgba(0,0,0,0.55); color: #fff;
        font-family: 'Fraunces', 'Segoe UI', serif; font-size: 1.2rem; font-weight: 600;
        letter-spacing: -0.01em; line-height: normal; text-align: center;
        z-index: 5;
    }
    html.bc-squares body[data-theme="light"] .avatar-name { color: #fff; }
    html.bc-squares .avatar-stat { display: none; }
    html.bc-squares body[data-theme="light"] .artist-avatar-tile:hover {
        box-shadow: 0 4px 20px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
    }
}
@media (max-width: 450px) {
    html.bc-squares .avatar-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) and (hover: none) and (pointer: coarse) {
    html.bc-squares body.compact-grid-view .avatar-grid {
        grid-template-columns: repeat(4, 1fr); gap: 6px;
    }
    html.bc-squares body.compact-grid-view .avatar-photo { border-radius: 6px; }
    html.bc-squares body.compact-grid-view .avatar-name {
        font-size: 8px; padding: 3px 2px; line-height: 1.15;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
}


/* 01/10/2026: כמה בשורה מחלונית ההגדרות — כמו FromMenu.css. */
@media (max-width: 600px) {
    html[data-circle-cols="1"]:not(.bc-squares) .avatar-grid { grid-template-columns: 1fr; }
    html[data-circle-cols="2"]:not(.bc-squares) .avatar-grid { grid-template-columns: repeat(2, 1fr); }
    html[data-circle-cols="3"]:not(.bc-squares) .avatar-grid { grid-template-columns: repeat(3, 1fr); }
    html[data-circle-cols="4"]:not(.bc-squares) .avatar-grid { grid-template-columns: repeat(4, 1fr); gap: 18px 8px; }
    html[data-circle-cols="1"]:not(.bc-squares) .avatar-photo { width: 150px; height: 150px; }
    html[data-circle-cols="1"]:not(.bc-squares) .avatar-name { font-size: 18px; }
    html[data-circle-cols="1"]:not(.bc-squares) .avatar-stat { font-size: 12px; }
    html[data-circle-cols="2"]:not(.bc-squares) .avatar-photo { width: 110px; height: 110px; }
    html[data-circle-cols="2"]:not(.bc-squares) .avatar-name { font-size: 15.5px; }
    html[data-circle-cols="4"]:not(.bc-squares) .avatar-photo { width: 64px; height: 64px; }
    html[data-circle-cols="4"]:not(.bc-squares) .avatar-name { font-size: 12px; margin-top: 8px; overflow-wrap: anywhere; }
    html[data-circle-cols="4"]:not(.bc-squares) .avatar-stat { font-size: 9.5px; }
}
@media (max-width: 600px) and (hover: none) and (pointer: coarse) {
    html.bc-squares body.compact-grid-view[data-grid-cols="2"] .avatar-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    html.bc-squares body.compact-grid-view[data-grid-cols="2"] .avatar-photo { border-radius: 10px; }
    html.bc-squares body.compact-grid-view[data-grid-cols="2"] .avatar-name { font-size: 13px; padding: 6px 4px; line-height: 1.2; }
    html.bc-squares body.compact-grid-view[data-grid-cols="3"] .avatar-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    html.bc-squares body.compact-grid-view[data-grid-cols="3"] .avatar-photo { border-radius: 8px; }
    html.bc-squares body.compact-grid-view[data-grid-cols="3"] .avatar-name { font-size: 10.5px; padding: 4px 3px; line-height: 1.15; }
}