/* Fotografia: usa o visual do portfólio (capa.css e apresentacao.css).
   Aqui ficam as molduras de foto, o mural de cada ensaio e a foto ampliada. */

.ancora{display:block;height:0;scroll-margin-top:12px}

/* Capa: fotos em moldura creme, em vez de celulares */
.capa-foto h1{font-size:15cqw}
.capa-foto .cut{aspect-ratio:4/5;border:clamp(6px,.6cqw,10px) solid var(--paper);border-radius:6px;background:var(--paper)}
.capa-foto .cover-sticker{font-size:11px}

/* Meu olhar: foto em moldura de papel */
.foto-moldura .moldura{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;rotate:-3deg;width:64%;margin:0;background:#fffdf8;padding:3% 3% 10%;box-shadow:0 14px 30px rgba(14,27,20,.25)}
.foto-moldura .moldura img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.foto-moldura .n1{left:auto;right:2%;top:auto;bottom:8%;rotate:-5deg}
.servicos-foto{display:grid;gap:10px}
.servicos-foto li{border-top:2px solid var(--verde);padding-top:8px;display:grid;gap:2px}
.servicos-foto strong{font:800 20px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;color:var(--verde)}
.servicos-foto span{font-size:14px;color:var(--suave)}
.servicos-foto a{justify-self:start;font-weight:700;font-size:14px;text-decoration:none;border-bottom:2px solid var(--laranja);padding:4px 0}

/* Mural de fotos de cada ensaio */
.mural{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px 12px}
.foto{position:relative;display:block;padding:6px;border:0;background:#fffdf8;box-shadow:0 8px 20px rgba(14,27,20,.22);rotate:var(--r);cursor:zoom-in;transition:scale .25s,box-shadow .25s}
.foto img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.foto:hover,.foto:focus-visible{scale:1.04;box-shadow:0 14px 30px rgba(14,27,20,.32);z-index:3}
.mais-fotos{position:absolute;inset:6px;display:grid;place-items:center;background:rgba(32,62,48,.72);color:var(--lima);font:800 40px/1 'Barlow Condensed',sans-serif}

/* Foto ampliada */
.foto-grande{display:block;width:100%;max-height:74vh;object-fit:contain;background:#0b130f;border-radius:12px;margin:12px 0}
.foto-dialog .player-base button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--lima);background:transparent;color:var(--lima)}

@media (min-width:900px) and (min-aspect-ratio:5/4){
  .capa-foto h1{font-size:12.6cqw;line-height:1.05;margin-top:1cqw}
  .capa-foto .cut{width:12cqw}
  .capa-foto .cover-sticker{font-size:max(11px,.85cqw)}
  .foto-moldura .moldura{width:74%}
  .servicos-foto{gap:.8cqw}
  .servicos-foto li{padding-top:.6cqw}
  .servicos-foto strong{font-size:max(15px,1.4cqw)}
  .servicos-foto span,.servicos-foto a{font-size:max(13px,.9cqw)}
  .olhar-foto .sobre-lado h3:first-child{margin-top:0}
  .mural{position:absolute;inset:0;grid-template-columns:repeat(var(--cols),var(--w));justify-content:center;align-content:center;gap:1.4cqw;padding:0}
  .foto{padding:.45cqw}
  .mais-fotos{inset:.45cqw;font-size:3.4cqw}
}
@media (prefers-reduced-motion:reduce){.foto{transition:none}}

/* Capa com fotos grandes, sobrepostas como fotos reveladas */
.capa-foto .cover-collage{height:96cqw}
.capa-foto .cut{width:42%;border-width:clamp(7px,.75cqw,12px);border-bottom-width:clamp(18px,2.2cqw,34px);box-shadow:0 18px 36px rgba(8,16,12,.45)}
.capa-foto .cut-a{left:0;top:16%;--tilt:-8deg}
.capa-foto .cut-b{left:29%;top:2%;--tilt:3deg;z-index:3}
.capa-foto .cut-c{left:57%;top:20%;--tilt:9deg}
.capa-foto .cover-rasgo{left:2%;top:8%;width:96%;height:84%}
.capa-foto .cover-sticker{z-index:4}
.link-video{margin-top:14px}

@media (min-width:900px) and (min-aspect-ratio:5/4){
  .capa-foto .cover-stage{grid-template-columns:.85fr 1.5fr;gap:2cqw}
  .capa-foto .cover-collage{height:100%}
  .capa-foto .cut{width:16.5cqw}
  .capa-foto .cut-a{left:2%;top:6%}
  .capa-foto .cut-b{left:33%;top:-4%}
  .capa-foto .cut-c{left:64%;top:9%}
  .capa-foto .cover-rasgo{left:4%;top:12%;width:90%;height:78%}
  .capa-foto .cover-sticker{right:-1%;bottom:2%}
  .link-video{margin-top:1.2cqw;font-size:max(13px,.9cqw)!important}
}