/* CSSSPLIT 001, 001_artgrid.css, 8-166, Artwork grid helpers --/--/-- */
/* Version 01.1.1 */



/* Card shell */
.grid.grid--cards .art-card{ background:#fff; border:1px solid #eef0f2; border-radius:16px; padding:12px 12px 14px; box-shadow:0 1px 0 rgba(0,0,0,.02); }
/* Square thumb (1:1) + fallback */
.grid.grid--cards .art-card .art-thumb{ position:relative; display:block; border-radius:12px; overflow:hidden; background:#f6f7f8; margin-bottom:10px; aspect-ratio:1/1; }
@supports not (aspect-ratio: 1 / 1){
  .grid.grid--cards .art-card .art-thumb { padding-top:100%; }
  .grid.grid--cards .art-card .art-thumb > img { position:absolute; inset:0; }
}
.grid.grid--cards .art-card .art-thumb img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block;
}
/* Title, pill, snippet follow… */
/* Title */
.grid.grid--cards .art-card .art-title{
  margin:6px 2px 2px;
  font-size:1.02rem;
  line-height:1.25;                 /* tighter leading */
  font-family:"EB Garamond", Garamond, serif;
}
.grid.grid--cards .art-card .art-title a{ text-decoration:none; }
/* Status pill (no “Status:” prefix) */
.grid.grid--cards .art-card .art-status-pill{
  display:inline-block;
  margin:4px 2px 6px;
  padding:6px 12px;
  font-size:.9rem;
  border-radius:999px;
  background:#e6f6f0;
  color:#145c3a;
  border:1px solid #9bc9b7;
}
/* Caption snippet */
.grid.grid--cards .art-card .art-snippet{
  margin:2px 2px 0;
  color:#3a4651;
  font-size:.95rem;
}

/* Temporary visual probe — remove later */
/*.grid.grid--cards .art-card { outline: 1px dashed #b6d4ff; }
.grid.grid--cards .art-card .art-thumb { outline: 1px dashed #9ae6b4; }
.grid.grid--cards .art-card .art-status-pill { background:#e6f6f0; }
*/

/* v2025.11.01-b — Artwork cards tidy-up (archive + single) */

/* 1) Square media with cover crop (no new thumbnails) */
.art-card .art-thumb{
  position:relative; display:block; border-radius:12px; overflow:hidden;
  background:#f6f7f8; margin-bottom:10px; aspect-ratio:1/1;
}
@supports not (aspect-ratio: 1 / 1){
  .art-card .art-thumb { padding-top:100%; }
  .art-card .art-thumb > img { position:absolute; inset:0; }
}
.art-card .art-thumb img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  object-position:center; display:block;
}

/* 2) Title + subtle hover underline (keeps your clean look) */
.art-card .art-title{
  margin:6px 2px 2px;
  font-size:1.02rem;
  line-height:1.25;
  font-family:"EB Garamond", Garamond, serif;
}
.art-card .art-title a{
  text-decoration:none; border-bottom:1px solid transparent;
}
/*.art-card .art-title a:hover{ border-bottom-color:currentColor; } */

/* 3) Status pill (works with your fb_art_status_label mapping) */
.art-card .art-status-pill{
  display:inline-block;
  margin:4px 2px 6px;
  padding:6px 12px;
  font-size:.9rem;
  line-height:1.1;
  border-radius:999px;
  border:1px solid #9bc9b7;
  background:#e6f6f0;
  color:#145c3a;
  white-space:nowrap;
}

/* 4) Caption/snippet: EB Garamond, smaller, tighter leading */
.art-card .art-snippet{
  margin:2px 2px 0;
  color:#1e1f1e;
  font-family:"EB Garamond", Garamond, serif;
  font-size:.92rem;
  line-height:1.35;
}

/* Optional: clamp long snippets to keep rows even */
.art-card .art-snippet--clamp{
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}

/* 5) Remove temporary debug outlines (clean view) */
.grid.grid--cards .art-card,
.grid.grid--cards .art-card .art-thumb,
.grid.grid--cards .art-card .art-status-pill{
  outline:none !important;
}


/* v2025.11.01-b — Artwork cards (archive - does this mean I can remove I wonder? I'll test and find ot once split) */
/*
.art-card .art-thumb{
  position:relative; display:block; border-radius:12px; overflow:hidden;
  background:#f6f7f8; margin-bottom:10px; aspect-ratio:1/1;
}
@supports not (aspect-ratio: 1 / 1){
  .art-card .art-thumb { padding-top:100%; }
  .art-card .art-thumb > img { position:absolute; inset:0; }
}
.art-card .art-thumb img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  object-position:center; display:block;
}

.art-card .art-title{
  margin:6px 2px 2px;
  font-size:1.02rem;
  line-height:1.25;
  font-family:"EB Garamond", Garamond, serif;
}
.art-card .art-title a{
  text-decoration:none; border-bottom:1px solid transparent;
}
.art-card .art-title a:hover{ border-bottom-color:currentColor; }

.art-card .art-status-pill{
  display:inline-block;
  margin:4px 2px 6px;
  padding:6px 12px;
  font-size:.9rem;
  line-height:1.1;
  border-radius:999px;
  border:1px solid #9bc9b7;
  background:#e6f6f0;
  color:#145c3a;
  white-space:nowrap;
}

.art-card .art-snippet{
  margin:2px 2px 0;
  color:#1e1f1e;
  font-family:"EB Garamond", Garamond, serif;
  font-size:.92rem;
  line-height:1.35;
}
*/


/* DEBUG: artgrid */
/*.grid.grid--cards .art-card { outline: 3px dashed magenta !important; }*/