/* Grila de fotografii (GalerieFoto) + dialogul ei + clipurile: comune paginilor Evenimente si Atelierul (F1, 18.10). */

.galerie-foto{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.galerie-foto{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.galerie-foto{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.galerie-foto button{display:block;width:100%;padding:0;border:1px solid var(--linie);background:var(--brun);cursor:zoom-in;overflow:hidden}
.galerie-foto img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:transform 500ms cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){.galerie-foto button:hover img{transform:scale(1.03)}}
.galerie-foto button:focus-visible{outline:1px solid var(--aur);outline-offset:3px}

.clipuri{display:grid;gap:16px;margin-top:32px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* coloane dupa numarul de clipuri, ca randul sa fie mereu plin (QA 24.10): 4 → 2x2, 3 → 3, 1 → unul */
.clipuri:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.clipuri:has(> :only-child){grid-template-columns:minmax(0,640px)}
@media(max-width:620px){.clipuri,.clipuri:has(> :nth-child(3):last-child){grid-template-columns:1fr}}
.clip{margin:0}
.clip video{display:block;width:100%;max-height:70vh;background:#000;border:1px solid var(--linie)}
.clip figcaption{font-size:14px;color:var(--fum,#A49C91);margin-top:8px}

/* dialogul cu fotografia mare, comun galeriilor */
.foto-mare{padding:0;border:0;background:transparent;max-width:min(96vw,1600px);max-height:96vh}
.foto-mare::backdrop{background:rgba(7,7,7,.92)}
.foto-mare figure{margin:0;display:flex;flex-direction:column;align-items:center}
.foto-mare img{display:block;max-width:min(92vw,1600px);max-height:86vh;width:auto;height:auto}
.foto-mare figcaption{font:400 12px var(--ft,ui-monospace,monospace);letter-spacing:.14em;color:var(--fum,#A49C91);margin-top:10px}
.foto-mare button{position:fixed;background:rgba(11,11,11,.6);border:1px solid var(--linie);color:var(--alb,#F5F3EF);
  width:48px;height:48px;font-size:28px;line-height:1;cursor:pointer}
.foto-mare .inchide{top:16px;right:16px}
.foto-mare .inapoi{left:16px;top:50%;transform:translateY(-50%)}
.foto-mare .inainte{right:16px;top:50%;transform:translateY(-50%)}
.foto-mare button:hover,.foto-mare button:focus-visible{border-color:var(--aur);color:var(--aur)}
.pe-youtube{margin:20px 0 0;font-size:15px}
.pe-youtube a{color:var(--aur)}