/* ==================== 相册：宝丽来相本墙 ==================== */
.gallery-page { --photo-paper: #fbfaf5; --photo-edge: rgba(58, 70, 75, 0.18); --photo-tape: rgba(222, 207, 155, 0.76); width: var(--wrap); max-width: calc(100% - 32px); }
.gallery-wall { position: relative; padding: 6px 0 30px; }
.gallery-album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 34px; row-gap: 54px; }
.gallery-album-card { min-width: 0; align-self: start; --front-rotation: -2.2deg; --middle-rotation: 3.7deg; --back-rotation: -5deg; }
.gallery-album-card-1 { --front-rotation: 1.5deg; --middle-rotation: -4deg; --back-rotation: 5deg; }
.gallery-album-card-2 { --front-rotation: -0.8deg; --middle-rotation: 4.5deg; --back-rotation: -3.5deg; }
.gallery-album-card.is-expanded { width: min(100%, 360px); grid-column: 1 / -1; justify-self: center; }
.gallery-album-card.is-suppressed { display: none; }

.gallery-album-trigger {
  display: block; width: 100%; appearance: none; border: 0; background: transparent;
  color: inherit; padding: 8px 6px 0; text-align: center; cursor: pointer;
}
.gallery-album-trigger:focus-visible { border-radius: 4px; outline: 2px solid var(--accent-strong); outline-offset: 7px; }

.gallery-album-stack {
  position: relative; display: block; width: min(100%, 330px); aspect-ratio: 1.3 / 1;
  margin: 0 auto 20px; transition: transform 320ms cubic-bezier(0.2, 0.72, 0.2, 1);
}
.gallery-album-layer, .gallery-album-placeholder {
  position: absolute; top: 50%; left: 50%; display: block;
  width: 82%; aspect-ratio: 4 / 3;
  border: 1px solid var(--photo-edge); border-radius: 3px; background: var(--photo-paper);
  box-shadow: 0 18px 32px rgba(28, 46, 57, 0.2), 0 2px 4px rgba(28, 46, 57, 0.1);
  padding: 8px 8px 24px; transform-origin: center 72%;
  transition: transform 360ms cubic-bezier(0.2, 0.72, 0.2, 1), box-shadow 360ms ease;
}
.gallery-album-layer::after, .gallery-album-placeholder::after, .gallery-photo::before {
  content: ''; position: absolute; z-index: 4; top: -10px; left: 50%;
  width: 58px; height: 19px; border: 1px solid rgba(151, 137, 91, 0.13);
  background: var(--photo-tape);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 3px rgba(54, 55, 42, 0.1);
  clip-path: polygon(3% 7%, 98% 0, 96% 95%, 0 100%);
  transform: translateX(-50%) rotate(-2deg);
}
.gallery-album-layer > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-album-layer-0 { z-index: 3; transform: translate(-50%, -46%) rotate(var(--front-rotation)); }
.gallery-album-layer-1 { z-index: 2; transform: translate(-52%, -51%) rotate(var(--middle-rotation)); }
.gallery-album-layer-1::after { left: 35%; transform: translateX(-50%) rotate(4deg); }
.gallery-album-layer-2 { z-index: 1; transform: translate(-48%, -55%) rotate(var(--back-rotation)); }
.gallery-album-layer-2::after { left: 66%; transform: translateX(-50%) rotate(-6deg); }
.gallery-album-placeholder {
  display: grid; z-index: 2; place-items: center; color: var(--accent-strong);
  transform: translate(-50%, -48%) rotate(var(--front-rotation));
}
.gallery-album-placeholder svg { width: 34px; height: 34px; max-width: 34px; max-height: 34px; }

.gallery-album-count {
  position: absolute; z-index: 5; right: 5%; bottom: 8%;
  display: inline-flex; min-width: 50px; height: 28px; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.48); border-radius: 999px;
  background: rgba(50, 86, 101, 0.9); box-shadow: 0 8px 18px rgba(25, 44, 54, 0.18);
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1; backdrop-filter: blur(8px);
}
.gallery-album-trigger:hover .gallery-album-stack, .gallery-album-card.is-expanded .gallery-album-stack { transform: translateY(-8px); }
.gallery-album-trigger:hover .gallery-album-layer-0, .gallery-album-card.is-expanded .gallery-album-layer-0 {
  transform: translate(-50%, -47%) rotate(0deg); box-shadow: 0 24px 42px rgba(28, 46, 57, 0.24), 0 2px 4px rgba(28, 46, 57, 0.1);
}
.gallery-album-trigger:hover .gallery-album-layer-1, .gallery-album-card.is-expanded .gallery-album-layer-1 {
  transform: translate(-57%, -52%) rotate(calc(var(--middle-rotation) * 1.25));
}
.gallery-album-trigger:hover .gallery-album-layer-2, .gallery-album-card.is-expanded .gallery-album-layer-2 {
  transform: translate(-43%, -57%) rotate(calc(var(--back-rotation) * 1.2));
}

.gallery-album-meta { position: relative; display: grid; justify-items: center; min-height: 92px; padding-inline: 32px; }
.gallery-album-meta > span { color: rgba(52, 70, 82, 0.52); font-size: 9px; font-weight: 700; }
.gallery-album-meta strong {
  margin-top: 4px; color: var(--ink); font-family: var(--font-serif);
  font-size: 23px; font-weight: 500; line-height: 1.35;
}
.gallery-album-meta small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.gallery-album-meta i {
  position: absolute; top: 34px; right: 5px; display: grid; width: 28px; height: 28px;
  place-items: center; color: var(--accent-strong); transition: transform 240ms ease;
}
.gallery-album-meta i svg { width: 17px; height: 17px; max-width: 17px; max-height: 17px; }
.gallery-album-card.is-expanded .gallery-album-meta i { transform: rotate(180deg); }

.gallery-album-expansion {
  grid-column: 1 / -1; min-width: 0; margin: -4px 0 14px;
  border-block: 1px solid rgba(52, 70, 82, 0.2); padding: 40px 6px 58px;
  animation: gallery-expansion-in 360ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
}
.gallery-album-expansion-header { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.gallery-album-expansion-header > div { max-width: 720px; }
.gallery-album-expansion-header span { color: var(--accent-strong); font-size: 9px; font-weight: 700; }
.gallery-album-expansion-header h2 { margin: 7px 0 8px; font-family: var(--font-serif); font-size: 31px; font-weight: 500; line-height: 1.25; }
.gallery-album-expansion-header p { margin: 0; color: var(--muted); font-size: 14px; }

.gallery-photo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  align-items: start; justify-content: center; gap: 40px 24px; margin-top: 42px; padding: 12px 4px 6px;
}
.gallery-photo {
  position: relative; grid-column: auto; grid-row: auto; overflow: visible; width: 100%;
  border: 1px solid var(--photo-edge); border-radius: 3px; background: var(--photo-paper);
  box-shadow: 0 16px 30px rgba(28, 46, 57, 0.16), 0 2px 4px rgba(28, 46, 57, 0.08);
  padding: 9px 9px 40px; cursor: zoom-in; isolation: isolate;
  transform: rotate(-1.7deg); transform-origin: center 70%;
  transition: transform 280ms cubic-bezier(0.2, 0.72, 0.2, 1), box-shadow 280ms ease;
}
.gallery-photo-1 { transform: rotate(1.3deg); }
.gallery-photo-2 { transform: rotate(-0.6deg); }
.gallery-photo-3 { transform: rotate(1.8deg); }
.gallery-photo-4 { transform: rotate(-1deg); }
.gallery-photo-5 { transform: rotate(0.8deg); }
.gallery-photo:nth-child(3n + 2)::before { left: 38%; transform: translateX(-50%) rotate(5deg); }
.gallery-photo:nth-child(4n)::before { left: 63%; transform: translateX(-50%) rotate(-5deg); }
.gallery-photo > img { display: block; width: 100%; height: min(18vw, 190px); object-fit: cover; transition: filter 250ms ease; }
.gallery-photo:hover, .gallery-photo:focus-visible {
  z-index: 5; box-shadow: 0 24px 44px rgba(28, 46, 57, 0.23), 0 2px 5px rgba(28, 46, 57, 0.1);
  outline: none; transform: translateY(-8px) rotate(0deg);
}
.gallery-photo:hover > img { filter: saturate(0.94) contrast(1.02); }
.gallery-photo-overlay {
  position: absolute; inset: auto 11px 10px; display: flex; min-height: 20px;
  align-items: center; justify-content: space-between; gap: 8px;
  background: transparent; color: #71808a; padding: 0; transition: color 180ms ease;
}
.gallery-photo-overlay small {
  overflow: hidden; font-family: var(--font-serif); font-size: 11px;
  font-style: italic; text-overflow: ellipsis; white-space: nowrap;
}
.gallery-photo-overlay svg {
  flex: 0 0 auto; width: 13px; height: 13px; max-width: 13px; max-height: 13px;
  opacity: 0; transform: translateY(3px); transition: opacity 180ms ease, transform 180ms ease;
}
.gallery-photo:hover .gallery-photo-overlay, .gallery-photo:focus-visible .gallery-photo-overlay { color: var(--accent-strong); }
.gallery-photo:hover .gallery-photo-overlay svg, .gallery-photo:focus-visible .gallery-photo-overlay svg { opacity: 1; transform: translateY(0); }

@keyframes gallery-expansion-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .gallery-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; row-gap: 42px; }
}
@media (max-width: 600px) {
  .gallery-page { width: calc(100% - 32px); }
  .gallery-album-grid { grid-template-columns: 1fr; }
  .gallery-album-meta strong { font-size: 20px; }
  .gallery-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .gallery-photo { padding: 6px 6px 28px; }
  .gallery-photo > img { height: 30vw; }
  .gallery-album-expansion { padding: 28px 0 40px; }
  .gallery-album-expansion-header h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-album-stack, .gallery-album-layer, .gallery-photo { transition: none; }
  .gallery-album-expansion { animation: none; }
}