/* bm-gallery — A galeria única do site (atrações, restaurantes, ...).
 *
 * Regra de ouro: o LAYOUT só conhece a célula `.bmg-i`. O que está dentro da célula
 * (<img>, <picture>, o que vier) ocupa-a toda por posicionamento absoluto, por isso mudar
 * o HTML da imagem nunca descompõe a grelha. Sem alturas fixas em px: a proporção vem do
 * contentor. Placeholder neutro (nunca a cor da marca): uma foto que falha sai da grelha,
 * não pinta nada por cima.
 * Teste visual: npm run check:gallery
 */
.bmg{display:grid;gap:8px;margin:32px 0;position:relative}
.bmg[data-n="0"]{display:none}
.bmg-i{position:relative;overflow:hidden;border-radius:10px;background:#EEF1F0;min-width:0;min-height:0;cursor:pointer}
.bmg-i picture,.bmg-i img{position:absolute;inset:0;width:100%;height:100%;display:block}
.bmg-i img{object-fit:cover;transition:opacity .15s}
.bmg-i:hover img{opacity:.88}

/* computador: a proporção é do contentor, as células repartem-na */
.bmg[data-n="1"]{grid-template-columns:1fr;aspect-ratio:16/9}
.bmg[data-n="2"]{grid-template-columns:1fr 1fr;aspect-ratio:5/2}
.bmg[data-n="3"]{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:2/1}
.bmg[data-n="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:2/1}
.bmg[data-n="5"]{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:2/1}
.bmg[data-n="3"]>.bmg-i:first-child,.bmg[data-n="5"]>.bmg-i:first-child{grid-row:1/3}

/* "+N fotos" */
.bmg-more{position:absolute;right:14px;bottom:14px;z-index:2;background:rgba(0,0,0,.75);color:#fff;border:none;padding:10px 18px;border-radius:99px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;cursor:pointer;backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.bmg-more:hover{background:rgba(0,0,0,.9)}

/* o resto das fotos, atrás do botão */
.bmg-extra{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:-24px 0 32px}
.bmg-extra .bmg-i{aspect-ratio:4/3}

/* telemóvel: foto grande em cima, depois duas por linha */
@media(max-width:720px){
  .bmg[data-n]{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto}
  .bmg[data-n="1"]{grid-template-columns:1fr}
  .bmg[data-n] .bmg-i{aspect-ratio:4/3}
  .bmg[data-n="1"] .bmg-i,.bmg[data-n="3"]>.bmg-i:first-child,.bmg[data-n="5"]>.bmg-i:first-child{aspect-ratio:16/10}
  .bmg[data-n="3"]>.bmg-i:first-child,.bmg[data-n="5"]>.bmg-i:first-child{grid-column:1/3;grid-row:auto}
  .bmg-extra{grid-template-columns:1fr 1fr}
}