/* ==========================================================================
   15 · COLLECTIONS
   The lookbook page for one suite: hero, story, palette, what's included.
   ========================================================================== */

.collection-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  min-height: clamp(380px, 52vh, 620px);
  color: var(--ink);
}

.collection-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.collection-hero__media img,
.collection-hero__media .placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* Same rule as the hero section: only darken when there is artwork to darken,
   otherwise ink text ends up on a dimmed placeholder. */
.collection-hero--has-image { color: #fff; }

.collection-hero--has-image .collection-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(34, 31, 28, 0.66) 0%, rgba(34, 31, 28, 0.28) 55%, rgba(34, 31, 28, 0.1) 100%);
}

.collection-hero--has-image .eyebrow { color: #e6cf9a; }

.collection-hero__inner {
  max-width: 820px;
  padding-block: clamp(40px, 7vw, 88px);
}

.collection-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-900);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

.collection-hero__intro {
  max-width: 52ch;
  margin-top: var(--s-4);
  font-size: var(--fs-500);
}

.collection-hero--has-image .collection-hero__intro { color: rgba(255, 255, 255, 0.88); }


/* --- Story and panel ------------------------------------------------------ */

.collection-detail {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: start;
  gap: clamp(32px, 6vw, 96px);
}

.collection-detail__label {
  margin-bottom: var(--s-4);
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.collection-detail__panel {
  padding: var(--s-6);
  background: var(--linen);
  border: var(--border);
}

.collection-detail__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--s-6) 0 var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

.collection-detail__price span:first-child {
  color: var(--ink-3);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.collection-detail__price strong {
  font-family: var(--font-mono);
  font-size: var(--fs-600);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.collection-detail__price-note {
  color: var(--ink-3);
  font-size: var(--fs-200);
  line-height: 1.45;
}


/* --- Palette --------------------------------------------------------------
   Swatch, name and hex on one row: the hex is the part a printer asks for. */

.palette { margin-top: var(--s-8); }

.palette__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4);
}

.palette__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.palette__chip {
  display: block;
  height: 64px;
  margin-bottom: var(--s-2);
  border: 1px solid var(--rule);
}

.palette__name { font-size: var(--fs-300); }

.palette__hex {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .collection-detail { grid-template-columns: 1fr; }
  .palette { margin-top: var(--s-6); }
}