/*==================================
FEATURED ARTISTS ARCHIVE (3 x 7 = 21 per page)
Used only by archive-artist.php
==================================*/

.ds-af{
    background:#f7f5f0;
    padding:48px 0 64px;
    --af-gold:#b8924a;
    --af-ink:#1a1a1a;

    /* ---- Size controls: change these to make the grid bigger / smaller ---- */
    --af-max-width:1320px;  /* overall width: raise for less side space, lower for more */
    --af-ratio:4/3;         /* card shape: 16/10 shorter page, 4/3 balanced, 1/1 square */
    --af-gap:14px;
}

.ds-af .container{
    width:100%;
    max-width:var(--af-max-width);
    padding-left:24px;
    padding-right:24px;
}

/* Header */
.ds-af-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px 32px;
    flex-wrap:wrap;
    margin-bottom:18px;
}
.ds-af-eyebrow{
    display:block;
    font-size:14px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#555;
    margin-bottom:6px;
}
.ds-af-heading h2{
    margin:0 0 6px;
    font-family:"PT Serif",Georgia,serif;
    font-size:42px;
    font-weight:400;
    line-height:1.05;
    color:var(--af-ink);
}
.ds-af-heading p{
    margin:0;
    font-size:16px;
    color:#000;
}

/* Country tabs (wrap onto more lines if there are many countries) */
.ds-af-tabs{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px 26px;
    max-width:62%;
}
.ds-af-tab{
    background:none;
    border:0;
    border-bottom:1.5px solid transparent;
    padding:6px 0;
    font-size:14px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#444;
    cursor:pointer;
    white-space:nowrap;
    transition:color .2s,border-color .2s;
}
.ds-af-tab:hover{color:var(--af-gold)}
.ds-af-tab.is-active{border-bottom-color:var(--af-gold);color:var(--af-ink)}

/* Search / sort / clear bar */
.ds-af-filter{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:0 0 18px;
    padding:10px 0;
    border-top:1px solid #e4dfd2;
    border-bottom:1px solid #e4dfd2;
}
.ds-af-filter input[type="text"]{
    flex:1 1 220px;
    min-width:0;
    height:42px;
    padding:0 14px;
    font-size:16px;
    color:var(--af-ink);
    background:#fff;
    border:1px solid #d9d4c8;
    border-radius:var(--ds-radius);
    outline:none;
    box-shadow:none;
    transition:border-color .2s;
}
.ds-af-filter select{
    flex:0 0 150px;
    height:42px;
    padding:0 10px;
    font-size:16px;
    color:var(--af-ink);
    background:#fff;
    border:1px solid #d9d4c8;
    border-radius:var(--ds-radius);
    outline:none;
    box-shadow:none;
}
.ds-af-filter input[type="text"]:focus,
.ds-af-filter select:focus{border-color:var(--af-gold)}
.ds-af-clear{
    flex:0 0 auto;
    display:inline-block;
    padding:0 6px;
    font-size:14px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#444;
    text-decoration:none;
    border-bottom:1.5px solid transparent;
    transition:color .2s,border-color .2s;
}
.ds-af-clear:hover{color:var(--af-gold);border-bottom-color:var(--af-gold);text-decoration:none}

/* Grid: always 3 columns x 7 rows on desktop */
#ds-af-target{transition:opacity .25s ease}
#ds-af-target.is-loading{opacity:.35;pointer-events:none}

.ds-af-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--af-gap);
}
.ds-af-card{margin:0}
.ds-af-link{
    position:relative;
    display:block;
    overflow:hidden;
    aspect-ratio:var(--af-ratio);
    background:#d9d4c8;
    border-radius:var(--ds-radius);
    text-decoration:none;
}
.ds-af-link img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 30%; /* keeps faces in frame when portraits are cropped */
    display:block;
    transition:transform .6s ease;
}
.ds-af-link:hover img{transform:scale(1.03)}

/* Bottom gradient + text */
.ds-af-link::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.3) 30%,rgba(0,0,0,0) 58%);
    pointer-events:none;
}
.ds-af-info{
    position:absolute;
    left:18px;
    bottom:16px;
    right:50px;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.ds-af-name{
    font-family:"PT Serif",Georgia,serif;
    font-size:18px;
    line-height:1.15;
    color:#fff;
}
.ds-af-cat{
    font-size:14px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.85);
}
.ds-af-arrow{
    position:absolute;
    right:18px;
    bottom:16px;
    z-index:2;
    color:#fff;
    font-size:18px;
    transition:transform .3s ease;
}
.ds-af-link:hover .ds-af-arrow{transform:translateX(4px)}

/* Pagination dashes */
.ds-af-pager{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:36px;
}
.ds-af-dot{
    width:38px;
    height:14px;
    padding:0;
    background:none;
    border:0;
    cursor:pointer;
    position:relative;
}
.ds-af-dot::before{
    content:"";
    position:absolute;
    left:0;right:0;top:6px;
    height:2px;
    background:#dccfb2;
    transition:background .25s;
}
.ds-af-dot:hover::before{background:#c4a76a}
.ds-af-dot.is-active::before{background:var(--af-gold)}
.ds-af-empty{padding:40px 0;text-align:center;color:#777}

/* Responsive */
@media (max-width:991px){
    .ds-af-tabs{max-width:100%;justify-content:flex-start}
    .ds-af-heading h2{font-size:34px}
}
@media (max-width:767px){
    .ds-af-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
    .ds-af-grid{grid-template-columns:1fr}
    .ds-af-tabs{gap:4px 16px}
    .ds-af-filter select{flex:1 1 100px}
}