/* ═══ /album (seção 7.2) — complementa fotos.css ═══ */

.page-wide { max-width: 960px; padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.album-page .hero { margin-bottom: 16px; }
.album-page .hero .script-title { font-size: 52px; }
#totalCount { color: var(--text-medium); font-size: 0.8em; }

/* ── Chips fixos no topo, rolagem lateral ── */
.chips {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 5;
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--page-pad)); padding: 10px var(--page-pad);
  background: rgba(255, 248, 229, 0.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(200, 148, 107, 0.25);
}
.chips::-webkit-scrollbar, .collection-row::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(200, 148, 107, 0.55); background: var(--white);
  font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--text-dark);
}
.chip-active { background: var(--pink-dark); border-color: var(--pink-dark); color: var(--white); }

/* ── Coleções dos desafios ── */
.collections { margin-top: 20px; }
.collection-row { display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--page-pad)); padding: 0 var(--page-pad) 8px; }
.collection {
  position: relative; flex: 0 0 140px; height: 140px; border-radius: var(--radius-md); overflow: hidden;
  background: var(--paper-inner) center / cover no-repeat; box-shadow: var(--shadow-soft);
  color: var(--white); text-align: left;
}
.collection::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(61, 43, 43, 0.75)); }
.collection span { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; font-size: 14px; font-weight: 600; line-height: 1.25; }
.collection .icon { position: absolute; top: 10px; left: 10px; z-index: 1; width: 26px; height: 26px; }
.collection-empty { color: var(--pink-dark); }

/* ── Grupos e grade ── */
.album-status { margin: 32px 0; text-align: center; color: var(--text-medium); }
.group { margin-top: 28px; }
.group-title {
  font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.2;
  color: var(--pink-dark); text-align: center; margin-bottom: 12px;
}
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(6, 1fr); } }
.tile {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 4px; background: var(--paper-inner);
}
@supports not (aspect-ratio: 1 / 1) { .tile { height: 0; padding-bottom: 100%; } }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-play {
  position: absolute; right: 6px; bottom: 6px; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); color: var(--white);
}
.tile-play .icon { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.load-more { display: block; margin: 28px auto 0; }

/* ── Pílula "12 novas ↑" ── */
.new-pill {
  position: fixed; top: 64px; left: 50%; z-index: 20; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--pink-dark); color: var(--white); font-weight: 600; font-size: 15px; box-shadow: var(--shadow-button);
}

/* ── Botão fixo no rodapé ── */
.send-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 12px var(--page-pad) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255, 248, 229, 0), rgba(255, 248, 229, 0.96) 35%);
}
.send-bar .btn-main { max-width: 520px; margin: 0 auto; min-height: 56px; font-size: 18px; }

.farewell { margin-top: 24px; text-align: center; }

/* ── Lightbox ── */
.lightbox { position: fixed; inset: 0; z-index: 100; background: #120c0c; color: var(--white); touch-action: pan-y; }
.lb-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 8px 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
}
.lb-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 48px; min-height: 48px; padding: 0 12px; color: var(--white); font-size: 16px; font-weight: 600; }
.lb-btn .icon { width: 26px; height: 26px; }
.lb-save { border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.lb-count { font-size: 14px; opacity: 0.8; }
.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lb-stage img { touch-action: pinch-zoom; transition: transform 200ms ease-out; }
.lb-nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: var(--white);
  display: none; align-items: center; justify-content: center;
}
.lb-nav .icon { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) { .lb-nav { display: flex; } }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 24px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent);
  font-size: 16px; text-align: center;
}
body.lb-open { overflow: hidden; }