/* Albums module additions. Only design tokens from app.css; no literal colors. */

.album-photos { margin-top: var(--sp-6); }
.album-meta { margin-bottom: var(--sp-4); }

/* Photo tile: the whole image is the lightbox trigger. */
.album-photo { margin: 0; }
.album-photo__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.album-photo__open:focus-visible { outline-offset: -4px; }
.album-photo__badge { position: absolute; top: var(--sp-2); left: var(--sp-2); pointer-events: none; }
.album-photo__stats { position: absolute; top: var(--sp-2); right: var(--sp-2); display: flex; gap: var(--sp-1); pointer-events: none; }
.album-photo__author { position: absolute; left: var(--sp-2); bottom: var(--sp-2); max-width: calc(100% - 140px); overflow: hidden; text-overflow: ellipsis; pointer-events: none; background: var(--surface-glass); color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (hover: none) { .album-photo .gallery-item__overlay { opacity: 1; } }

/* Masonry-ish rhythm on wider screens: dense flow with occasional wide/tall tiles. */
.album-gallery { grid-auto-flow: dense; }
@media (min-width: 640px) {
  .album-photo--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
  .album-photo--tall { grid-row: span 2; aspect-ratio: 1 / 2; }
}

/* Like and comment chips floating on the tile. */
.album-photo__actions { position: absolute; right: var(--sp-2); bottom: var(--sp-2); display: flex; gap: var(--sp-1); }
.album-chip {
  --btn-bg: var(--surface-glass); --btn-fg: var(--text); --btn-border: var(--border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-variant-numeric: tabular-nums;
}
.album-like--inline { flex: 0 0 auto; }
.album-like.is-liked { --btn-bg: var(--grad-sunset); --btn-fg: var(--text-inverse); --btn-border: transparent; }
.album-like.is-liked .icon { fill: currentColor; }
.album-like.is-popping .icon { animation: album-heart var(--t-slow) var(--ease); }
.album-like[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
@keyframes album-heart { 0% { transform: scale(1); } 35% { transform: scale(1.5) rotate(-8deg); } 100% { transform: scale(1); } }

/* Covers: gradient placeholders never reveal a private album's photos. */
.album-card__cover.album-cover--aurora { background: var(--grad-aurora); }
.album-card__cover.album-cover--glacier { background: var(--grad-glacier); }
.album-card__cover.album-cover--lagoon { background: var(--grad-lagoon); }
.album-card__cover.album-cover--sunset { background: var(--grad-sunset); }
.album-card__cover .icon--xl { animation: bob 3.5s ease-in-out infinite; }
.album-card__cta { justify-self: start; margin-top: var(--sp-2); }

.album-thumb-empty { display: inline-grid; place-items: center; color: var(--text-muted); vertical-align: middle; }
.album-share-url { display: block; max-width: 100%; overflow-wrap: anywhere; text-align: center; }

/* ---------- Live albums ---------- */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 0 var(--c-red); animation: live-pulse 1.6s ease-out infinite; vertical-align: middle; }
.badge--live { background: var(--err-bg); color: var(--err-fg); letter-spacing: 0.06em; text-transform: uppercase; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-red) 60%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.live-upload { margin-bottom: var(--sp-5); }

/* ---------- Photo page and comments ---------- */
.photo-page { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); align-items: start; }
@media (max-width: 900px) { .photo-page { grid-template-columns: 1fr; } }
.photo-page__figure { margin: 0; padding: var(--sp-3); display: grid; gap: var(--sp-3); }
.photo-page__figure img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; border-radius: var(--radius); background: var(--surface-2); }
.comment-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-3); max-height: 60vh; overflow-y: auto; }
.comment { display: grid; grid-template-columns: 36px 1fr; gap: var(--sp-3); align-items: start; }
.comment__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grad-aurora); color: var(--text-inverse); font-weight: var(--fw-bold); }
.comment__text { white-space: pre-line; overflow-wrap: anywhere; }
.comment-form { border-top: 1px solid var(--border); padding-top: var(--sp-4); }

/* Panel moderation list. */
.comment-mod { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.comment-mod__item { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3); }
.comment-mod__thumb img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.comment-mod__body { min-width: 0; }
/* ---------- Podium (3 most liked) ---------- */
.podium { margin-bottom: var(--sp-5); }
.podium__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.podium__item { display: grid; gap: var(--sp-2); justify-items: center; }
.podium__item--1 { order: 2; }
.podium__item--2 { order: 1; }
.podium__item--3 { order: 3; }
.podium__photo { position: relative; display: block; width: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 1; }
.podium__item--1 .podium__photo { aspect-ratio: 4 / 5; box-shadow: var(--shadow-glow); }
.podium__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.podium__photo:hover img { transform: scale(1.05); }
.podium__medal { position: absolute; top: var(--sp-2); left: var(--sp-2); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-weight: var(--fw-bold); color: var(--text-inverse); background: var(--grad-glacier); box-shadow: var(--shadow-sm); }
.podium__item--1 .podium__medal, .screen__podium-item:first-child .podium__medal { background: var(--grad-sunset); width: 40px; height: 40px; font-size: var(--fs-lg); }
.podium__meta { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Projector screen ---------- */
.screen-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.screen-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--surface-glass); }
.screen-main { flex: 1; display: flex; padding: var(--sp-4); min-height: 0; }
.screen { flex: 1; display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 340px); min-height: calc(100vh - 100px); }
@media (max-width: 800px) { .screen { grid-template-columns: 1fr; } }
.screen__stage { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: var(--shadow-lg); min-height: 50vh; }
.screen__slides { position: absolute; inset: 0; }
.screen__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(1.03); transition: opacity 1.2s var(--ease), transform 7s linear; }
.screen__slide.is-active { opacity: 1; transform: scale(1); }
.screen__empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--sp-3); text-align: center; color: var(--text-muted); }
.screen__empty[hidden] { display: none; }
.screen__caption { position: absolute; left: var(--sp-4); bottom: var(--sp-4); margin: 0; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill); background: var(--surface-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.screen__side { display: flex; flex-direction: column; gap: var(--sp-4); }
.screen__title { font-size: var(--fs-2xl); margin: 0; }
.screen__phase { margin: 0; }
.screen__phase .badge { font-size: var(--fs-md); padding: var(--sp-1) var(--sp-3); }
.screen__qr { margin: 0; display: grid; gap: var(--sp-2); justify-items: center; padding: var(--sp-4); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); text-align: center; font-weight: var(--fw-semibold); }
.screen__qr img { width: 100%; max-width: 240px; height: auto; }
.screen__count { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.screen__podium[hidden] { display: none; }
.screen__podium-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.screen__podium-item { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: var(--sp-3); align-items: center; }
.screen__podium-item img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); }
.screen__podium-item .podium__medal { top: -6px; left: -6px; width: 28px; height: 28px; }
.screen__podium-meta { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .screen__slide { transform: none; transition: opacity 1.2s linear; } }

/* ---------- Match albums ---------- */
.match-steps { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choice-chip { position: relative; cursor: pointer; }
.choice-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: var(--sp-1) var(--sp-4); border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.choice-chip input:checked + span { background: var(--grad-brand); color: var(--text-inverse); border-color: transparent; }
.choice-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.match-me { display: inline-flex; align-items: center; gap: var(--sp-2); }
.match-me img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.match-card {
  --dx: 0px;
  --rot: 0deg;
  position: relative; width: min(420px, 100%); margin: 0 auto; aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-lg);
  touch-action: pan-y; user-select: none; cursor: grab;
  transform: translateX(var(--dx)) rotate(var(--rot));
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.match-card.is-dragging { transition: none; cursor: grabbing; }
.match-card.is-out-right { transform: translateX(140%) rotate(24deg); opacity: 0; }
.match-card.is-out-left { transform: translateX(-140%) rotate(-24deg); opacity: 0; }
.match-card__photo { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.match-card__info { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-6) var(--sp-4) var(--sp-4); color: var(--text-inverse); background: linear-gradient(180deg, transparent, var(--overlay) 45%, var(--overlay)); }
.match-card__name { margin: 0; font-size: var(--fs-2xl); color: inherit; }
.match-card__bio { opacity: 0.92; }
.match-card__stamp { position: absolute; top: var(--sp-4); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--text-inverse); opacity: 0; transition: opacity var(--t-fast); }
.match-card__stamp .icon { width: 32px; height: 32px; }
.match-card__stamp--like { left: var(--sp-4); background: var(--grad-sunset); }
.match-card__stamp--pass { right: var(--sp-4); background: var(--neutral-fg); }
.match-card.is-like .match-card__stamp--like, .match-card.is-pass .match-card__stamp--pass { opacity: 1; }
.match-actions { display: flex; justify-content: center; gap: var(--sp-6); margin-top: var(--sp-4); }
.match-btn { width: 68px; height: 68px; border-radius: 50%; box-shadow: var(--shadow); }
.match-btn--like { --btn-bg: var(--grad-sunset); --btn-fg: var(--text-inverse); --btn-border: transparent; }
.match-btn--pass { --btn-bg: var(--surface); --btn-fg: var(--text); }
.match-report, .match-hint { text-align: center; margin-top: var(--sp-3); }
.match-leave { text-align: center; margin-top: var(--sp-6); }
@media (prefers-reduced-motion: reduce) { .match-card { transform: none; transition: opacity var(--t); } }

.match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.match-item { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-3); }
.match-item__photo { width: 96px; height: 96px; border-radius: var(--radius); object-fit: cover; }
@media (max-width: 560px) { .match-item { grid-template-columns: 72px 1fr; } .match-item__photo { width: 72px; height: 72px; } .match-item > .btn, .match-item__nowa { grid-column: 1 / -1; } }
.comment-mod__thumb-img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }

/* Match join form on phones: use the full width and stack the choices. */
@media (max-width: 560px) {
  .match-intro { gap: var(--sp-3); margin-inline: calc(-1 * var(--sp-3)); }
  .match-intro > .card { padding: var(--sp-4) var(--sp-3); border-radius: var(--radius); }
  .match-intro .fieldset { padding: var(--sp-3); }
  /* Two per row (Hombre | Mujer, No binario | Prefiero no decir); an odd last one takes the whole row. */
  .match-intro .chip-row--pairs { display: grid; grid-template-columns: 1fr 1fr; }
  .match-intro .chip-row--pairs .choice-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .match-intro .choice-chip span { width: 100%; justify-content: center; text-align: center; min-height: 46px; }
}