/* ======================================================================
   /css/sculptures.css — scoped fixes only
   1) Cap width on desktop
   2) Force 2 columns on phones (robust)
   3) Larger modal text
   ====================================================================== */

:root{
  --sc-max: 1200px;   /* desktop content width */
  --sc-gap: 16px;
  --sc-row: 8px;      /* base row height for JS masonry row-span */
}

/* Page container (scoped) */
.app-main.sculptures-page{
  max-width: var(--sc-max);
  margin: 0 auto;
  padding: 16px;
}

/* Toolbar (inherits fonts from header.css) */
.sc-toolbar-grid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
.sc-artist { opacity: .95; }
.sc-count  { opacity: .7;  }

/* ================== GRID ================== */
/* Desktop base: 12 tracks; variable heights come from JS grid-row-end */
.sc-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: var(--sc-row);
  grid-auto-flow: dense;
  gap: var(--sc-gap);
}

/* Column spans controlled by orientation classes (added in sculptures.js) */
.sc-card{ grid-column: span 3; }
.sc-card.is-landscape{ grid-column: span 4; }
.sc-card.is-portrait{  grid-column: span 3; }
.sc-card.is-square{    grid-column: span 3; }


/* ================== CARD LOOK ================== */
.sc-card{
  border: 1px solid #e6e6e6;
  background: #fff;
  color: #111;
  box-shadow: 0 3px 14px rgba(0,0,0,0.18);
  border-radius: 0;
  overflow: hidden;
  display: block;
  opacity: 0;  /* revealed after JS sets row span */
  transition: box-shadow .18s ease, transform .12s ease, opacity .12s ease;
}
.sc-card.ready{ opacity: 1; }
.sc-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.22); }

.sc-inner{ display: flex; flex-direction: column; }

/* Thumbs: show full artwork (no crop) */
.sc-thumb{ background:#f3f3f3; display:grid; place-items:center; }
.sc-thumb img{
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
  object-fit: contain;
  image-orientation: from-image;
  display:block;
}

/* Text (inherits fonts from header.css) */
.sc-body{ padding: 12px 14px; border-top: 1px solid #eee; }
.sc-title{ margin: 0 0 6px 0; font-weight: 600; }
.sc-meta{ color:#555; font-size: 1.2em; line-height: 1.35; margin: 0 0 6px 0; }
.sc-desc{ color:#333; font-size: 1.2em; line-height: 1.35; margin: 0; }

/* Empty */
.sc-empty{ text-align:center; color:#eee; padding:24px 0; }


/* ================== MODAL ================== */
.sc-modal::backdrop{ background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.sc-modal{ border:none; padding:0; }
.sc-modal__card{
  width: min(1100px, 95vw);
  background: #fff; color:#111;
  border: 1px solid #ddd;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  font-size: 1rem;            /* larger base than default */
}
.sc-modal__header{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid #ddd; padding:12px 16px;
}
.sc-modal__title{ margin:0; font-weight: 600; font-size: 1.25rem; }
.sc-modal__close{ border:none; background:transparent; font-size:1.2rem; cursor:pointer; color:#666; }
.sc-carousel{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:12px;
}
.sc-modal__figure{ margin:0; display:grid; place-items:center; }
.sc-modal__figure img{
  max-width:92vw; max-height:76vh; width:auto; height:auto;
  object-fit:contain; image-orientation:from-image;
}
.sc-modal__caption{
  margin-top:10px;
  font-size: 1.05rem;    /* bigger caption */
  color:#444; text-align:center;
}
.sc-arrow{
  border:1px solid #ddd; background:#fff; width:46px; height:46px; font-size:1.7rem;
  display:grid; place-items:center; cursor:pointer;
}
.sc-arrow:hover{ background:#f5f5f5; }
.sc-arrow:disabled{ opacity:.45; cursor:default; }

/* Phones / touch: even larger modal text */
@media (max-width: 980px), (pointer: coarse){
  .sc-modal__card{ font-size: 1.08rem; }
  .sc-modal__title{ font-size: 1.3rem; }
  .sc-modal__caption{ font-size: 1.1rem; }
  .sc-arrow{ width:50px; height:50px; font-size:1.85rem; }
}



/* ========================= Tablet ========================= */
@media (max-width: 900px){
  .sc-grid{ grid-template-columns: repeat(6, 1fr); }
  .sc-card{ grid-column: span 2; }
  .sc-card.is-landscape{ grid-column: span 3; }
}

/* ========================= Mobile  ========================= */
@media (max-width: 980px), (pointer: coarse){
  .sc-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .sc-card{ grid-column: span 1 !important; }
  .sc-card.is-landscape{ grid-column: span 2 !important; } /* optional full-width */
}

/* ========================= Mobile  ========================= */
@media (max-width: 1200px){
	.sc-title { font-size: 2.2em; }
	.sc-meta { font-size: 2.0em; }
	.sc-desc {font-size: 1.9em; hyphens: auto;}
}