/* Convite ML XV · galeria do ensaio: grade da tela e visualizador de foto aberta */

/* ---------- Tela da galeria ---------- */
.screen-galeria { padding-bottom: calc(66px + var(--sa-bottom)); }

.galeria-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* em tela baixa as 2 primeiras linhas cabem exatas e nada indica que há mais
   fotos embaixo. Este véu aparece só enquanto sobra rolagem. */
.galeria-mais {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, transparent, rgba(58, 0, 23, .92));
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.galeria-wrap.tem-mais .galeria-mais { opacity: 1; }

.galeria-head { text-align: center; }

.galeria-titulo {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: clamp(19px, 5.4vw, 24px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ouro-claro);
  margin-bottom: 6px;
  text-shadow: 0 2px 18px rgba(30, 0, 12, .55);
}

.galeria-sub {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--rosa-100);
  max-width: 34ch;
  margin: 0 auto;
}

.galeria-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px;
  border-radius: 16px;
}

.grid-galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.foto-card {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid rgba(200, 168, 107, .28);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(58, 0, 23, .5);
  aspect-ratio: 2 / 3;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(20, 0, 8, .35);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.foto-card.vis { opacity: 1; transform: none; }
.foto-card:active { transform: scale(.975); transition: transform .12s ease; }

.foto-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* assentamento leve na base, só pra o card não flutuar solto sobre o vinho */
.foto-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  background: linear-gradient(180deg, transparent, rgba(30, 0, 12, .28));
  pointer-events: none;
}

/* ---------- Foto aberta (tela cheia) ---------- */
.foto-view {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(56px + var(--sa-top)) 12px calc(56px + var(--sa-bottom));
  /* opaco de propósito: com fundo translúcido o título da tela e o botão de
     som apareciam como fantasma por trás da foto */
  background: #1a0009;
  opacity: 0;
}
/* o display:flex acima anula o atributo hidden, e a camada cobriria a tela
   inteira bloqueando todo toque. Mesma pegadinha já vista nas bottom sheets. */
.foto-view[hidden] { display: none; }

.foto-grande {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
}

.foto-fechar {
  position: absolute;
  top: calc(14px + var(--sa-top));
  right: 14px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(200, 168, 107, .34);
  border-radius: 50%;
  background: rgba(58, 0, 23, .6);
  cursor: pointer;
}
.foto-fechar svg { width: 17px; stroke: var(--ouro-claro); stroke-width: 2; fill: none; stroke-linecap: round; }
.foto-fechar:active { transform: scale(.92); }

.foto-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(200, 168, 107, .3);
  border-radius: 50%;
  /* precisa segurar contraste sobre foto clara (céu, areia, vegetação) */
  background: rgba(35, 0, 14, .78);
  cursor: pointer;
}
.foto-nav svg { width: 15px; stroke: var(--ouro-claro); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.foto-nav:active { opacity: .7; }
.foto-prev { left: 10px; }
.foto-next { right: 10px; }
.foto-prev svg { transform: rotate(-90deg); }
.foto-next svg { transform: rotate(90deg); }

.foto-contador {
  position: absolute;
  bottom: calc(18px + var(--sa-bottom));
  left: 50%;
  transform: translateX(-50%);
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--ouro-claro);
  opacity: .85;
}

/* ---------- Foto compondo a tela do fecho ----------
   Em faixa, não atrás do texto: foto de retrato com frase por cima não fecha
   (o rosto fica no meio do quadro e o texto cai em cima dele). O texto sobe
   pro topo e a foto sangra embaixo, derretendo no vinho pela máscara. */
.screen-fim { align-items: flex-start; }

.fim-foto {
  position: absolute;
  inset: auto 0 0 0;
  height: 54%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 38%);
}
.fim-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* enquadra do céu até os pés: cortar na canela é o pior corte possível */
  object-position: center 72%;
}
.screen-fim .content { position: relative; z-index: 1; }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  .galeria-wrap { max-width: 620px; }
  .grid-galeria { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .foto-prev { left: 24px; }
  .foto-next { right: 24px; }
  .fim-foto { height: 48%; }
}