/*
  CarlosSuarezArt — Collections pages only (collections.html and every
  collections/[slug].html). Shared pieces — header/nav, artwork card,
  section intro, museum-grid — live in layout.css/components.css so
  Gallery (Phase 2) can reuse them without duplication.
*/

/* ===== Collections index — one "room" per collection, alternating
   image/text sides. Vertical and sequential (Bible §10: visitors move
   down a page the way they'd walk through a gallery, one wall at a
   time) — deliberately NOT a grid of equal-weight cards, since a
   Collection is a curated exhibition, not an interchangeable tile. ===== */
.collections-room{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-9) 0;
  border-bottom: 0.5px solid var(--color-border);
}

.collections-room:first-of-type{
  padding-top: var(--space-7);
}

.collections-room:last-of-type{
  border-bottom: none;
}

.collections-room--reverse{
  grid-template-columns: 1fr 1.4fr;
}

.collections-room--reverse .collections-room__media{ order: 2; }
.collections-room--reverse .collections-room__text{ order: 1; }

.collections-room__frame{
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 0.5px solid var(--color-border);
  overflow: hidden;
}

.collections-room__frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.collections-room__eyebrow{
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.collections-room__title{
  font-family: var(--font-serif);
  font-size: var(--text-heading);
  color: var(--color-black);
  margin-top: var(--space-2);
}

.collections-room__framing{
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-gray);
  margin-top: var(--space-3);
  max-width: 46ch;
  /* Curatorial introductions carry \n\n paragraph breaks (see
     collections-data.js framingText) — preserve them without switching to
     multiple <p> tags, which would touch the render code. Scoped to this
     class only. */
  white-space: pre-line;
}

.collections-room__link{
  margin-top: var(--space-4);
  display: inline-block;
}

@media (max-width: 760px){
  .collections-room,
  .collections-room--reverse{
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-7) 0;
  }
  .collections-room--reverse .collections-room__media,
  .collections-room--reverse .collections-room__text{
    order: initial;
  }
}

/* ===== Collection detail page ===== */

.collection-hero{
  padding: var(--space-8) 0 var(--space-6);
  text-align: center;
  border-bottom: 0.5px solid var(--color-border);
}

/* Scoped to .collection-hero specifically so this never touches the
   Homepage's own use of .section-intro__body. Same \n\n-preservation
   reasoning as .collections-room__framing above. */
.collection-hero .section-intro__body{
  white-space: pre-line;
}

.collection-back-link{
  display: block;
  padding: var(--space-4) 0 0;
  text-align: center;
}

.collection-empty-state{
  text-align: center;
  padding: var(--space-8) 0;
  color: var(--color-gray);
  font-family: var(--font-sans);
  font-size: var(--text-body);
}