/* 03 星辰 · 运营海报
   A deck fanned from one pivot. It stays gathered until the pointer
   arrives, then opens; the card under the pointer steps forward. */

.b-spread { margin-top: 8px; }

.card-spread__shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 420px;
  overflow: hidden;
}

.card-spread__fan {
  position: relative;
  flex: none;
  transform-origin: center center;
}

.card-spread__rotor {
  position: absolute;
  will-change: transform;
}

.card-spread__lift {
  height: 100%;
  will-change: transform;
}

.card-spread__face {
  height: 100%;
  border-radius: var(--r-tile);
  border: 1px solid rgb(255 255 255 / 0.16);
  box-shadow: 0 16px 36px rgb(0 0 0 / 0.48);
}

.card-spread__face img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.card-spread__rotor.is-raised {
  z-index: 20;
}

.card-spread__rotor.is-raised .card-spread__face {
  border-color: rgb(255 255 255 / 0.42);
  box-shadow: 0 22px 46px rgb(0 0 0 / 0.62);
}

.card-spread__caption {
  min-height: 1.5em;
  margin: 4px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.card-spread__caption:empty::before {
  content: "悬停展开";
  color: var(--text-3);
}

.card-spread.is-open .card-spread__caption:empty::before {
  content: "点开看全幅";
}

@media (max-width: 760px) {
  .card-spread__shell {
    height: auto !important;
    min-height: 0;
    overflow: visible;
    display: block;
  }
  .card-spread__fan {
    width: auto !important;
    height: auto !important;
    transform: none !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
  .card-spread__rotor {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin-left: 0 !important;
    transform: none !important;
  }
  .card-spread__lift {
    height: auto;
    transform: none !important;
    opacity: 1 !important;
  }
  .card-spread__face img {
    height: auto;
    aspect-ratio: 168 / 268;
  }
  .card-spread__caption:empty::before { content: "点开看全幅"; }
}

@media (prefers-reduced-motion: reduce) {
  .card-spread__rotor,
  .card-spread__lift { will-change: auto; }
}