/* ═══════════════════════════════════════════════════
   Tattoo Artists v3 — Frontend CSS
   Minimal: the dark atmospheric grid styles live
   in the page template (tatueringsmassan_optimized.html)
   This file handles fallback plugin-rendered grids.
   ═══════════════════════════════════════════════════ */

/* ── Plugin fallback grid (when shortcode renders HTML) ── */
.ta-grid {
    display: grid;
    gap: 20px;
    margin: 24px 0;
}
.ta-cols-2 { grid-template-columns: repeat(2,1fr); }
.ta-cols-3 { grid-template-columns: repeat(3,1fr); }
.ta-cols-4 { grid-template-columns: repeat(4,1fr); }
.ta-cols-5 { grid-template-columns: repeat(5,1fr); }
.ta-cols-6 { grid-template-columns: repeat(6,1fr); }

@media(max-width:1024px){.ta-cols-5,.ta-cols-6{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px) {.ta-cols-3,.ta-cols-4,.ta-cols-5,.ta-cols-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:540px) {.ta-grid{grid-template-columns:repeat(2,1fr) !important;gap:14px}}
@media(max-width:360px) {.ta-grid{grid-template-columns:1fr !important}}

/* ── Card ── */
.ta-artist-card { text-align:center; }
.ta-artist-card a { display:block; text-decoration:none; color:inherit; }

/* ── Circle image ── */
.ta-artist-image {
    position:relative;
    padding-bottom:100%;
    border-radius:50%;
    overflow:hidden;
    margin-bottom:10px;
    background:#0d0d0d;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 0 0 5px rgba(0,0,0,.8),
        0 0 0 6px rgba(255,255,255,.04),
        0 12px 40px rgba(0,0,0,.6);
    transition:box-shadow .4s cubic-bezier(.22,1,.36,1);
}
.ta-artist-card a:hover .ta-artist-image {
    box-shadow:
        0 0 0 1px rgba(212,66,53,.6),
        0 0 0 5px rgba(0,0,0,.8),
        0 0 0 7px rgba(212,66,53,.14),
        0 20px 50px rgba(0,0,0,.7);
}
.ta-artist-image img,
.ta-placeholder {
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .6s cubic-bezier(.22,1,.36,1), filter .4s;
    z-index:1;
    filter:grayscale(20%) brightness(.88) contrast(1.05);
}
.ta-artist-card a:hover .ta-artist-image img {
    transform:scale(1.08);
    filter:grayscale(0%) brightness(1) contrast(1);
}
.ta-placeholder {
    display:flex; align-items:center; justify-content:center;
    font-size:2rem; font-weight:700; color:#555; text-transform:uppercase;
    background:#111;
}

/* ── Info ── */
.ta-artist-name {
    font-family: Georgia,'Palatino Linotype',serif;
    font-style: italic;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #d44235;
    transition: color .3s, letter-spacing .3s;
    margin-top: 2px;
}
.ta-artist-card a:hover .ta-artist-name {
    color: #e8503e;
    letter-spacing: 2px;
}
.ta-artist-ig {
    font-size: 10px;
    color: #555;
    margin-top: 3px;
}

/* ── Featured marker ── */
.ta-artist-featured-badge {
    display:inline-block;
    font-size:10px;
    color:#d4a017;
    margin-bottom:4px;
    letter-spacing:1px;
}

/* ── Dark section ── */
.dark-strip, #artists, .artist-inner { background:#080808 !important; }
.a-item { background:transparent !important; }
#agrid,#agrid>*,#agrid>*>* { background:transparent !important; background-color:transparent !important; }

/* ── Handle label (matches page template style) ── */
.a-handle {
    font-family: Georgia,'Palatino Linotype',serif !important;
    font-size:11px !important;
    font-style:italic !important;
    letter-spacing:1.5px !important;
    color:#d44235 !important;
    text-transform:none !important;
    transition:color .3s, letter-spacing .3s !important;
}
.a-item:hover .a-handle { color:#e8503e !important; letter-spacing:2px !important; }
.a-handle::after { background:#d44235 !important; }