/* Collections: compact editorial entry and reusable guide pages. */
.collection-home {
  margin-bottom: 34px;
  margin-top: 30px;
}

.collection-home-heading {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.collection-home-heading .eyebrow {
  color: #3d6dd7;
}

.collection-home-heading h2,
.collection-page h1,
.collection-page h2,
.collection-page h3 {
  color: #17243f;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
}

.collection-home-heading h2 {
  font-size: clamp(29px, 3.2vw, 38px);
  letter-spacing: -1.45px;
  line-height: 1.08;
  margin: 0;
}

.collection-home-heading p:last-child {
  color: #5d6b83;
  font-size: 14px;
  margin: 6px 0 0;
}

.collection-strip {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

/* Adding a second card automatically changes the single banner into a dense horizontal band. */
.collection-strip:has(> .collection-home-card:nth-child(2)) {
  grid-auto-columns: minmax(235px, .62fr);
  grid-auto-flow: column;
  grid-template-columns: minmax(430px, 1.45fr);
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.collection-home-card {
  background: #173665 center / cover no-repeat;
  background-image:
    linear-gradient(90deg, #081b46ed 0%, #102a62d1 47%, #102a6252 100%),
    var(--collection-cover);
  border-radius: 22px;
  box-shadow: 0 14px 34px #1b427f22;
  color: #fff;
  min-height: 280px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}

.collection-home-card:hover {
  box-shadow: 0 20px 40px #1b427f34;
  transform: translateY(-3px);
}

.collection-home-card:focus-visible {
  outline: 3px solid #d17a22;
  outline-offset: 3px;
}

.collection-home-overlay {
  background: linear-gradient(108deg, transparent 55%, #102a621f 100%);
  inset: 0;
  position: absolute;
}

.collection-home-content {
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  max-width: 660px;
  padding: 28px 32px;
  position: relative;
  z-index: 1;
}

.collection-home-label {
  align-self: flex-start;
  background: #ff7c35;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .35px;
  padding: 6px 11px;
  text-transform: uppercase;
}

.collection-home-content > strong {
  color: #fff;
  font-size: clamp(30px, 4.1vw, 48px);
  letter-spacing: -2.2px;
  line-height: 1.02;
  margin-top: 13px;
}

.collection-home-description {
  color: #f5f8ff;
  font-size: 16px;
  font-weight: 600;
  margin-top: 9px;
}

.collection-home-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.collection-home-tags span {
  backdrop-filter: blur(5px);
  background: #ffffff22;
  border: 1px solid #ffffff80;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
}

.collection-home-cta {
  align-items: center;
  color: #fff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 7px;
  margin-top: 17px;
}

.collection-home-cta b {
  color: #ffd760;
  font-size: 18px;
}

.collection-strip:has(> .collection-home-card:nth-child(2)) .collection-home-card {
  min-height: 250px;
}

.collection-strip:has(> .collection-home-card:nth-child(2)) .collection-home-content {
  padding: 24px;
}

.collection-strip:has(> .collection-home-card:nth-child(2)) .collection-home-card:not(:first-child) .collection-home-content > strong {
  font-size: 23px;
  letter-spacing: -1px;
}

.collection-strip:has(> .collection-home-card:nth-child(2)) .collection-home-card:not(:first-child) .collection-home-tags {
  display: none;
}

/* Collection landing page */
.collection-page {
  background: #f5f7fb;
}

.collection-page .site-nav {
  border-bottom: 1px solid #e2e7f0;
}

.collection-main {
  padding-bottom: 76px;
}

.collection-breadcrumbs {
  color: #65738b;
  font-size: 13px;
  padding: 21px 0 16px;
}

.collection-breadcrumbs a {
  color: #3d64be;
  font-weight: 700;
  text-decoration: none;
}

.collection-hero {
  background: #0a2355 center / cover no-repeat;
  background-image:
    linear-gradient(90deg, #071a45f5 0%, #102d68de 45%, #102d684b 100%),
    var(--collection-cover);
  border-radius: 28px;
  box-shadow: 0 20px 46px #1d4b8524;
  color: #fff;
  min-height: 350px;
  overflow: hidden;
  padding: 52px 56px;
  position: relative;
}

.collection-hero::after {
  display: none;
}

.collection-hero-content {
  max-width: 690px;
  position: relative;
  z-index: 1;
}

.collection-hero .eyebrow {
  color: #ffd760;
}

.collection-hero h1 {
  color: #fff;
  font-size: clamp(42px, 5.6vw, 68px);
  letter-spacing: -3px;
  line-height: 1.02;
  margin: 0;
}

.collection-hero-description {
  color: #edf3ff;
  font-size: 17px;
  line-height: 1.65;
  margin: 18px 0 0;
  max-width: 650px;
}

.collection-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.collection-hero-meta span {
  backdrop-filter: blur(6px);
  background: #ffffff22;
  border: 1px solid #ffffff6b;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 11px;
}

.collection-section {
  margin-top: 48px;
}

.collection-section-heading {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.collection-section-heading h2 {
  font-size: clamp(29px, 3.5vw, 42px);
  letter-spacing: -1.7px;
  line-height: 1.05;
  margin: 0;
}

.collection-section-heading p {
  color: #5c6b83;
  font-size: 14px;
  margin: 7px 0 0;
}

.quick-pick-grid {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-pick {
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 18px;
  box-shadow: 0 8px 22px #203e7409;
  color: inherit;
  padding: 21px;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}

.quick-pick:hover {
  box-shadow: 0 15px 30px #203e7417;
  transform: translateY(-3px);
}

.quick-pick-label {
  color: #e06e2d;
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .55px;
  text-transform: uppercase;
}

.quick-pick h3 {
  font-size: 19px;
  letter-spacing: -.5px;
  line-height: 1.25;
  margin: 10px 0 7px;
}

.quick-pick p {
  color: #637089;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.collection-event-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Collection grids use the homepage card component without visual overrides. */
.collection-page .collection-event-grid .event-card {
  color: var(--ink);
}

.collection-page .collection-event-grid .event-card h3 {
  color: var(--ink);
  font-family: "Noto Sans SC", sans-serif;
}

.collection-event-card {
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 19px;
  box-shadow: 0 5px 0 #203e7404;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.collection-event-image {
  aspect-ratio: 16 / 9;
  background: #e8eef7 center / cover no-repeat;
  position: relative;
}

.collection-event-image::after {
  background: linear-gradient(180deg, transparent 55%, #071a4566);
  content: "";
  inset: 0;
  position: absolute;
}

.collection-event-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 17px;
}

.collection-event-date {
  color: #e76f32;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .25px;
  text-transform: uppercase;
}

.collection-event-card h3 {
  font-size: 18px;
  letter-spacing: -.45px;
  line-height: 1.3;
  margin: 7px 0;
}

.collection-event-facts {
  color: #65738b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.collection-event-description {
  color: #5b6880;
  display: -webkit-box;
  font-size: 13px;
  line-height: 1.55;
  margin: 12px 0 0;
  min-height: 60px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.collection-event-link {
  color: #235ce8;
  font-size: 13px;
  font-weight: 800;
  margin-top: auto;
  padding-top: 17px;
  text-decoration: none;
}

.collection-event-link span {
  color: #ff7462;
}

.collection-empty {
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 18px;
  color: #5b6880;
  padding: 28px;
}


.festival-about {
  background: linear-gradient(110deg, #e4f2ff 0%, #f5f9ff 72%);
  border: 1px solid #d9e9f7;
  border-radius: 22px;
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.7fr);
  margin-top: 48px;
  min-height: 210px;
  overflow: hidden;
}

.festival-about-art {
  background:
    linear-gradient(90deg, transparent 68%, #e7f3ff 100%),
    url("assets/collections/mid-autumn-hero.webp") 68% center / cover no-repeat;
  min-height: 210px;
}

.festival-about-copy {
  align-self: center;
  padding: 28px 34px 29px;
}

.festival-about-kicker {
  color: #e06e2d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  margin: 0 0 6px;
}

.festival-about-copy h2 {
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -1.2px;
  line-height: 1.08;
  margin: 0 0 11px;
}

.festival-about-copy > p:not(.festival-about-kicker) {
  color: #4f607a;
  font-size: 13px;
  line-height: 1.62;
  margin: 6px 0 0;
}

.festival-about-copy a {
  color: #165fc7;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
  margin-top: 15px;
  text-decoration: none;
}

.festival-about-copy a:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .festival-about {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }

  .festival-about-art {
    background-position: 68% center;
    min-height: 175px;
  }

  .festival-about-copy {
    padding: 24px;
  }

  .festival-about-copy h2 {
    font-size: 28px;
  }

  .festival-about-copy > p:not(.festival-about-kicker) {
    font-size: 13px;
  }

  .collection-home {
    margin-bottom: 22px;
    margin-top: 21px;
  }

  .collection-home-heading {
    margin-bottom: 12px;
  }

  .collection-home-heading h2 {
    font-size: 28px;
  }

  .collection-home-heading p:last-child {
    font-size: 13px;
  }

  .collection-home-card {
    background-position: 68% center;
    border-radius: 20px;
    min-height: 330px;
  }

  .collection-home-content {
    justify-content: flex-end;
    padding: 24px;
  }

  .collection-home-content > strong {
    font-size: 35px;
    letter-spacing: -1.7px;
  }

  .collection-home-description {
    font-size: 14px;
  }

  .collection-home-tags {
    gap: 6px;
    margin-top: 13px;
  }

  .collection-home-tags span {
    font-size: 11px;
  }

  .collection-strip:has(> .collection-home-card:nth-child(2)) {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .collection-strip:has(> .collection-home-card:nth-child(2)) .collection-home-card {
    flex: 0 0 82%;
    min-height: 300px;
    scroll-snap-align: start;
  }

  .collection-main {
    padding-bottom: 54px;
  }

  .collection-breadcrumbs {
    font-size: 12px;
  }

  .collection-hero {
    background-position: 58% center;
    border-radius: 23px;
    min-height: 470px;
    padding: 35px 25px;
  }

  .collection-hero::after {
    height: 92px;
    right: 20px;
    top: 22px;
    width: 92px;
  }

  .collection-hero h1 {
    font-size: 43px;
    letter-spacing: -2.2px;
  }

  .collection-hero-description {
    font-size: 15px;
  }

  .collection-section {
    margin-top: 36px;
  }

  .quick-pick-grid,
  .collection-event-grid {
    grid-template-columns: 1fr;
  }

  .collection-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

  .quick-pick {
    padding: 19px;
  }

  .collection-event-image {
    aspect-ratio: 16 / 8.5;
  }

  .collection-event-description {
    min-height: 0;
  }
}


/* Collection lifecycle states */
.collection-state-panel {
  background: #fff;
  border: 1px solid #dfe6f0;
  border-radius: 22px;
  box-shadow: 0 12px 30px #203e740d;
  margin-top: 30px;
  padding: 30px 32px;
}

.collection-state-panel h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -1.4px;
  line-height: 1.08;
  margin: 0;
}

.collection-state-panel p {
  color: #5b6880;
  font-size: 15px;
  line-height: 1.65;
  margin: 12px 0 0;
  max-width: 760px;
}

.collection-state-panel a {
  align-items: center;
  background: #245cc8;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
  margin-top: 20px;
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
}

.collection-state-panel a:hover {
  background: #1d4ea9;
}

.collection-state-panel a:focus-visible {
  outline: 3px solid #d17a22;
  outline-offset: 3px;
}

.collection-page[data-collection-state="last_chance"] .collection-home-label {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .collection-state-panel {
    margin-top: 24px;
    padding: 24px;
  }

  .collection-state-panel a {
    width: 100%;
  }
}