/* =========================================================
SPAIN PASSION — ARTWORK ARCHIVE
Clean system
========================================================= */


/* =========================================================
WRAPPER
========================================================= */

.sp-archive-wrap{
max-width:1200px;
margin:0 auto;
padding:60px 24px 80px;
}


/* =========================================================
TITLE
========================================================= */

.sp-title{
font-size:40px;
font-weight:600;
margin-bottom:32px;
}


/* =========================================================
FILTERS
========================================================= */

.sp-filters{
display:flex;
align-items:flex-end;
flex-wrap:wrap;
gap:18px;
margin-bottom:36px;
}

.sp-field{
display:flex;
flex-direction:column;
gap:6px;
min-width:170px;
}

.sp-field label{
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
opacity:.6;
}

.sp-field input,
.sp-field select{
height:42px;
padding:0 12px;
border:1px solid #e6e6e6;
background:#fff;
font-size:14px;
}


/* =========================================================
BUTTONS
========================================================= */

.sp-actions{
display:flex;
align-items:flex-end;
gap:10px;
}

.sp-btn{
height:42px;
padding:0 20px;
border:1px solid #111;
background:#111;
color:#fff;
cursor:pointer;
font-size:13px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
}

.sp-btn.secondary{
background:#fff;
color:#111;
border:1px solid #111;
}


/* =========================================================
GRID
========================================================= */

.sp-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
}

@media (max-width:1000px){

.sp-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:640px){

.sp-grid{
grid-template-columns:1fr;
}

}


/* =========================================================
CARD
========================================================= */

.sp-card{
background:#fff;
border:1px solid #f0f0f0;
}

.sp-thumb{
display:block;
overflow:hidden;
}

.sp-thumb img{
width:100%;
height:auto;
display:block;
}

.sp-card-body{
padding:14px;
}


/* title */

.sp-name{
font-size:15px;
font-weight:600;
margin-bottom:6px;
}

.sp-name a{
color:#111;
text-decoration:none;
}

.sp-name a:hover{
text-decoration:underline;
}


/* artist */

.sp-artist{
font-size:14px;
color:#111;
opacity:.75;
}

.sp-artist a{
color:#111;
text-decoration:none;
}

.sp-artist a:hover{
text-decoration:underline;
}


/* artwork meta (medium · year) */

.sp-meta{
font-size:13px;
color:#666;
margin-top:4px;
}


/* artwork ID */

.sp-id{
font-size:12px;
color:#666;
margin-top:6px;
font-family:monospace;
cursor:pointer;
}


/* =========================================================
PAGINATION
========================================================= */

.sp-pagination{
margin-top:40px;
text-align:center;
}