/* public/stylesheets/pages/collections.css (P3)
   /collections and /collections/:slug — page layout on top of components.css
   (DESIGN-SYSTEM §9.5–9.6). Tokens only, mobile-first, no !important. */

/* ── Index hero: heading panel + small portrait film ─────────────────── */
.collections-hero .breadcrumbs {
  margin-bottom: var(--sp-16);
}
.collections-hero__note {
  margin-top: var(--sp-16);
  max-width: 40rem;
}
.collections-hero__teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
}
.collections-hero__teaser .video {
  width: 100%;
}
.collections-hero__teaser .video--portrait .video__frame {
  max-height: 24rem;
}
@media (min-width: 820px) {
  .collections-hero__teaser {
    align-items: flex-end;
  }
  .collections-hero__teaser .video--portrait .video__frame {
    max-height: 26rem;
    margin-inline: auto 0;
  }
  .collections-hero__teaser .video__caption {
    justify-content: flex-end;
  }
}

/* Keep the Chinese name in one piece ("Beijing 北京", never "北 / 京"). */
.collection-card__name [lang],
.collection-hero h1 [lang] {
  white-space: nowrap;
}

/* Phones: the shortLine stays readable but the bar never covers the photo. */
.collections-grid .collection-card__meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 559.98px) {
  .collections-grid .collection-card__meta {
    display: none;
  }
}

/* ── Collection page ──────────────────────────────────────────────────── */
.collection-hero .breadcrumbs {
  margin-bottom: var(--sp-16);
}
.collection-hero .notice {
  margin-bottom: var(--sp-16);
}
.collection-hero .hero-photo {
  min-height: 34rem; /* phones: leave a band of the photo above the caption */
}
@media (min-width: 820px) {
  .collection-hero .hero-photo {
    min-height: 36rem;
  }
}
.collection-hero .hero-photo__caption h1 {
  color: inherit;
}
.collection-hero__lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: 1.45;
}
.collection-hero__meta {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.collection-about__text {
  margin-top: var(--sp-20);
}
.collection-about__aside {
  align-self: end;
}

.collection-film {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}
.collection-film:focus {
  outline: none;
}
.collection-film__note {
  text-align: center;
}
.collection-media + .collection-more,
.collection-film + .photo-grid {
  margin-top: var(--grid-gap);
}
.collection-more {
  margin-top: var(--grid-gap);
}
.collection-more .load-more {
  margin-top: var(--sp-24);
}
/* With JS the extra photos stay folded until "Show all" (no flash: the
   html.js class is set in <head>); without JS every photo is shown. */
.js .collection-more:not(.is-open) .collection-more__grid {
  display: none;
}
.collection-more.is-open .load-more .icon {
  transform: rotate(180deg);
}
.collection-label-note {
  margin-top: var(--sp-20);
}

/* Previous / next collection */
.collection-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-12);
  margin-top: var(--sp-32);
}
.collection-pager__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: var(--tap);
  padding: var(--sp-10) var(--sp-16);
  border: 1px solid var(--border-button);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.collection-pager__link:hover {
  border-color: var(--action);
}
.collection-pager__link > span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.collection-pager__link--next {
  margin-left: auto;
  text-align: right;
}
.collection-pager__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.collection-pager__name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-heavy);
}

@media print {
  .js .collection-more:not(.is-open) .collection-more__grid {
    display: grid;
  }
  .collection-pager,
  .collection-film {
    display: none;
  }
}