/* Modelos de galeria de imagens (layouts originais, escolhidos por álbum).
   Estrutura: <div class="gm gm-<modelo>"> <figure class="gm-item"><img><figcaption></figure> ... </div> */

.gm { --gap: 10px; }
.gm-item { margin: 0; overflow: hidden; border-radius: 8px; background: #eef2f6; position: relative; }
.gm-item > a { display: block; height: 100%; text-decoration: none; }
.gm-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.gm-item:hover img { transform: scale(1.04); }
.gm-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: .8rem; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.62)); opacity: 0; transition: opacity .25s;
}
.gm-item:hover figcaption { opacity: 1; }

/* 1) Grade uniforme */
.gm-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gap); }
.gm-grade .gm-item { aspect-ratio: 1; }

/* 2) Mosaico (masonry) */
.gm-mosaico { column-width: 220px; column-gap: var(--gap); }
.gm-mosaico .gm-item { break-inside: avoid; margin-bottom: var(--gap); }
.gm-mosaico .gm-item img { height: auto; }

/* 3) Justificado (larguras variadas, mesma altura) */
.gm-justificado { display: flex; flex-wrap: wrap; gap: var(--gap); }
.gm-justificado .gm-item { height: 210px; flex: 1 1 auto; min-width: 160px; }
.gm-justificado .gm-item:nth-child(3n) { flex-grow: 1.7; }
.gm-justificado .gm-item:nth-child(4n) { flex-grow: .7; }

/* 4) Vitrine (destaque + miniaturas) */
.gm-vitrine { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 1fr; gap: var(--gap); }
.gm-vitrine .gm-item { aspect-ratio: 1; }
.gm-vitrine .gm-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* 5) Tela cheia (uma por linha) */
.gm-telacheia { display: flex; flex-direction: column; gap: 16px; }
.gm-telacheia .gm-item { border-radius: 12px; }
.gm-telacheia .gm-item img { height: min(66vh, 540px); }
.gm-telacheia .gm-item figcaption { font-size: 1rem; padding: 14px 16px; opacity: 1; }

/* 6) Cartões (portfólio) */
.gm-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.gm-cartoes .gm-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.gm-cartoes .gm-item img { height: 190px; border-radius: 14px 14px 0 0; }
.gm-cartoes .gm-item figcaption { position: static; opacity: 1; color: #334155; background: none; padding: 10px 12px; font-weight: 600; }

/* 7) Moldura / Polaroid */
.gm-polaroid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
.gm-polaroid .gm-item { background: #fff; padding: 10px 10px 34px; border-radius: 2px; box-shadow: 0 6px 16px rgba(15,23,42,.14); }
.gm-polaroid .gm-item:nth-child(2n) { transform: rotate(1.4deg); }
.gm-polaroid .gm-item:nth-child(3n) { transform: rotate(-1.8deg); }
.gm-polaroid .gm-item img { height: 190px; border-radius: 1px; }
.gm-polaroid .gm-item figcaption { position: absolute; bottom: 9px; left: 10px; right: 10px; opacity: 1; color: #475569; background: none; text-align: center; font-size: .78rem; }

/* 8) Revista (editorial, spans alternados) */
.gm-revista { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); grid-auto-rows: 130px; gap: var(--gap); }
.gm-revista .gm-item { grid-column: span 2; grid-row: span 1; }
.gm-revista .gm-item:nth-child(6n+1) { grid-column: span 3; grid-row: span 2; }
.gm-revista .gm-item:nth-child(6n+4) { grid-column: span 3; }
.gm-revista .gm-item:nth-child(6n+5) { grid-row: span 2; }

@media (max-width: 640px) {
  .gm-vitrine { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gm-revista { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gm-revista .gm-item, .gm-revista .gm-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
}

/* Mini-prévia dos modelos no seletor (admin) */
.gm-preview { display: grid; gap: 3px; width: 100%; height: 68px; background: #f1f5f9; border-radius: 6px; padding: 4px; }
.gm-preview span { background: #cbd5e1; border-radius: 2px; display: block; }
.gmp-grade { grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 1fr; }
.gmp-mosaico { grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 1fr; }
.gmp-mosaico span:nth-child(2), .gmp-mosaico span:nth-child(5) { grid-row: span 2; }
.gmp-justificado { grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1.5fr); grid-auto-rows: 1fr; }
.gmp-vitrine { grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 1fr; }
.gmp-vitrine span:first-child { grid-column: span 2; grid-row: span 2; }
.gmp-telacheia { grid-template-columns: minmax(0,1fr); grid-auto-rows: 1fr; }
.gmp-cartoes { grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 1fr; }
.gmp-cartoes span { background: linear-gradient(#cbd5e1 62%, #e2e8f0 62%); }
.gmp-polaroid { grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 1fr; }
.gmp-polaroid span { background: #fff; border: 1px solid #cbd5e1; }
.gmp-polaroid span:nth-child(2n) { transform: rotate(5deg); }
.gmp-revista { grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 1fr; }
.gmp-revista span:first-child { grid-column: span 2; grid-row: span 2; }

/* Seletor clicável de modelo (radio-card, sem JS) */
.gm-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gm-op { display: block; cursor: pointer; position: relative; }
.gm-op input { position: absolute; opacity: 0; width: 0; height: 0; }
.gm-op-card { display: block; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 8px; transition: border-color .15s, box-shadow .15s; }
.gm-op:hover .gm-op-card { border-color: var(--teal-400, #2dd4bf); }
.gm-op input:checked + .gm-op-card { border-color: var(--teal-500, #14b8a6); box-shadow: 0 0 0 2px var(--teal-500, #14b8a6); }
.gm-op input:focus-visible + .gm-op-card { outline: 2px solid var(--teal-600, #0d9488); outline-offset: 2px; }
.gm-op-nome { display: block; margin-top: 6px; font-weight: 600; font-size: .82rem; text-align: center; color: #334155; }
.gm-op input:checked + .gm-op-card .gm-op-nome { color: var(--teal-700, #0f766e); }

/* Lightbox (foto em tela cheia num modal, mesma aba) */
.gm-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(9, 14, 24, .93); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.gm-lb.aberto { opacity: 1; visibility: visible; }
.gm-lb-img { max-width: 94vw; max-height: 86vh; object-fit: contain; border-radius: 6px; box-shadow: 0 12px 44px rgba(0,0,0,.55); }
.gm-lb-cap { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #e2e8f0; font-size: .9rem; padding: 0 16px; }
.gm-lb-fechar, .gm-lb-nav { position: absolute; background: rgba(255,255,255,.14); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 1.7rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gm-lb-fechar:hover, .gm-lb-nav:hover { background: rgba(255,255,255,.28); }
.gm-lb-fechar { top: 16px; right: 16px; font-size: 1.5rem; }
.gm-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.gm-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .gm-lb-prev { left: 8px; } .gm-lb-next { right: 8px; } }