/* components.css — Nilpar Gallery (Phase 4)
   Contract: components/layout only (no patches). */

/* =========================
   Collection page structure
========================= */

.ng-collection-header{
  padding-top: var(--ng-space-7);
  margin: 0 0 var(--ng-space-4);
}

.ng-page-title{
  margin: 0;
  font-family: var(--ng-font-serif);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.05;
  font-size: clamp(2rem, 3.5vw, 3rem);
}

.ng-page-subtitle{
  margin: var(--ng-space-3) 0 0;
  max-width: 62ch;
  opacity: .75;
}

/* Intro stays “reading width” only */
.ng-collection-intro{
  max-width: 820px;
  margin-top: var(--ng-space-4);
  margin-bottom: calc(var(--ng-space-7) - .5rem);
}

.ng-collection-intro__text{
  margin: 0;
  font-size: var(--ng-text-body);
  line-height: 1.6;
  color: var(--ng-color-ink);
}

/* Sections align with grid (NOT reading width) */
.ng-collection-section{
  margin-top: var(--ng-space-7);
}

.ng-collection-section__header{
  margin: 0 0 var(--ng-space-4);
}

.ng-section-title{
  margin: 0 0 var(--ng-space-2);
  font-family: var(--ng-font-serif);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.12;
  font-size: var(--ng-text-h2);
}

.ng-section-subtitle{
  margin: 0;
  color: var(--ng-color-ink-muted);
  max-width: 72ch;
}

/* Divider between sections */
.ng-collection-section + .ng-collection-section{
  margin-top: var(--ng-space-6);
  padding-top: var(--ng-space-6);
  border-top: 1px solid var(--ng-color-hairline);
}

/* =========================
   Collection grids
========================= */

.ng-collection-grid__inner{
  display: grid;
  gap: var(--ng-space-6);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
}
/* Featured grid rules */
.ng-collection-grid--featured .ng-collection-grid__inner{
  grid-template-columns: 1fr;
  gap: var(--ng-space-6);
}

@media (min-width: 600px){
  .ng-collection-grid--featured .ng-collection-grid__inner{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ng-space-6);
  }

  .ng-collection-grid--featured .ng-collection-grid__inner > :nth-child(3){
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px){
  .ng-collection-grid--featured .ng-collection-grid__inner{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ng-space-6);
  }

  .ng-collection-grid--featured .ng-collection-grid__inner > :nth-child(3){
    grid-column: auto;
  }
}

/* Artwork cards */

.ng-artwork-card__media{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ng-color-porcelain);
  border: 1px solid var(--ng-color-hairline);
  border-radius: var(--ng-card-radius);
}

.ng-artwork-card__media img,
.ng-artwork-card__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.35s ease;
}

.ng-artwork-card:hover .ng-artwork-card__img,
.ng-artwork-card:focus-within .ng-artwork-card__img{
  transform: scale(1.04);
}

.ng-artwork-card__placeholder{
  width: 100%;
  height: 100%;
  background: var(--ng-color-porcelain);
  display: grid;
  place-items: center;
}

.ng-artwork-card__placeholder span{
  font-family: var(--ng-font-serif);
  font-size: .95rem;
  letter-spacing: 0.12em;
  color: var(--ng-color-ink-faint);
  opacity: .35;
}

.ng-artwork-card__body{
  padding-top: var(--ng-space-4);
}

.ng-artwork-card__title{
  margin: 0;
  font-family: var(--ng-font-serif);
  font-size: 1.125rem;
  line-height: var(--ng-line-tight);
  color: var(--ng-color-ink);
}

.ng-artwork-card__meta{
  display: grid;
  gap: var(--ng-space-2);
  margin-top: var(--ng-space-2);
  font-family: var(--ng-font-sans);
  color: rgba(17,17,17, 0.7);
}

/* Artwork card — catalogue metadata */
.ng-artwork-card__artist{
  font-family: var(--ng-font-sans);
  font-size: var(--ng-text-small);
  color: inherit;
  margin: 0;
  line-height: 1.4;
}

.ng-artwork-card__year{
  font-family: var(--ng-font-sans);
  font-size: var(--ng-text-small);
  color: inherit;
  margin: 0;
  line-height: 1.4;
}

.ng-artwork-card__status{
  font-family: var(--ng-font-sans);
  font-size: var(--ng-text-caption);
  color: inherit;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.4;
}


.ng-cta-block{
  margin-top: var(--ng-space-4);
}


/* Anti-save deterrent for artwork imagery */
.ng-artwork-media__img,
.ng-artwork-media__thumb-img,
.ng-artwork-card__media img,
.ng-artwork-card__img{
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}