/* ==========================================================================
   Galerii de imagini
   Două aranjamente. Mozaicul are o compoziție fixă — o imagine mare și
   câteva mici — și e potrivit când numărul de fotografii e cunoscut.
   Masonry curge pe coloane și acceptă oricâte fotografii, de orice înălțime.
   ========================================================================== */

/* --- Mozaic ---------------------------------------------------------------- */
/* Celulele mozaicului își iau înălțimea din grilă, nu din proporția
   imaginii — de asta rândurile au o înălțime minimă explicită. Fără ea,
   o celulă fără conținut intrinsec s-ar prăbuși la zero. */
.mosaic {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(96px, 1fr);
}

@media (min-width: 768px) {
  .mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(140px, 1fr));
    grid-auto-rows: minmax(140px, 1fr);
  }
  /* Prima imagine ocupă un pătrat de 2×2; restul se așază în jurul ei. */
  .mosaic > :first-child { grid-column: span 2; grid-row: span 2; }
}

/* În mozaic, proporția o dă celula: raportul propriu al wrapperului se
   anulează, altfel imaginea ar lupta cu grila. */
.mosaic .media,
.mosaic .media--wide,
.mosaic .media--tall,
.mosaic .media--square {
  border-radius: var(--r-md);
  aspect-ratio: auto;
  height: 100%;
  min-height: 0;
}
.mosaic .media img { height: 100%; width: 100%; object-fit: cover; }

/* Variantă cu imaginea mare în dreapta */
@media (min-width: 768px) {
  .mosaic--reverse > :first-child { grid-column: 3 / span 2; grid-row: span 2; }
}

/* --- Colaj (2026-09-29, decizia clientului) ---------------------------------
   Celule de mărimi diferite, lipite, cu liniile de despărțire decalate de la
   un rând la altul: sus, fotografia mare ia trei sferturi, jos împărțirea cade
   în altă parte. Fotografiile umplu celula (decupate). Câte se văd dă
   tiparul (.collage--1 … --6); restul galeriei așteaptă în .collage__pool și
   intră pe rând în locul lor (components.js, [data-collage]). */
.collage {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  aspect-ratio: 1 / 1;
}
@media (min-width: 768px) { .collage { aspect-ratio: 6 / 5; } }

.collage__slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  min-height: 0;
}
/* Două clase: altfel .gallery-item { position: relative }, mai jos în fișier,
   ar pune fotografia nouă sub cea veche, iar schimbarea ar fi bruscă. */
.collage .collage__slot > * { position: absolute; inset: 0; }
.collage .media { height: 100%; aspect-ratio: auto; border-radius: 0; }

/* Rezerva nu se vede niciodată. Nu doar prin [hidden]: previzualizarea ACF
   din editor pierde atributul, iar rezerva ar deveni o celulă în plus. */
.collage__pool { display: none; }

.collage__slot:nth-child(1) { grid-area: a; }
.collage__slot:nth-child(2) { grid-area: b; }
.collage__slot:nth-child(3) { grid-area: c; }
.collage__slot:nth-child(4) { grid-area: d; }
.collage__slot:nth-child(5) { grid-area: e; }
.collage__slot:nth-child(6) { grid-area: f; }

.collage--1 { grid-template-areas: "a"; }
.collage--2 {
  grid-template-columns: 3fr 2fr;
  grid-template-areas: "a b";
}
.collage--3 {
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "a b" "a c";
}
.collage--4 {
  grid-template-columns: 5fr 4fr 3fr;
  grid-template-rows: 6fr 5fr;
  grid-template-areas: "a a b" "c d d";
}
.collage--5 {
  grid-template-columns: 5fr 4fr 3fr;
  grid-template-rows: 3fr 3fr 5fr;
  grid-template-areas: "a a b" "a a c" "d e e";
}
.collage--6 {
  grid-template-columns: 4fr 3fr 2fr 3fr;
  grid-template-rows: 3fr 3fr 4fr;
  grid-template-areas: "a a b b" "a a c c" "d e e f";
}

/* Schimbarea: fotografia nouă apare lin peste cea veche, deasupra ei. Fade-ul
   e mai lent decât apariția la derulare, ca trecerea să se vadă. */
.collage .collage__slot > .is-entering {
  z-index: 1;
  opacity: 0;
  transition: opacity calc(var(--t-reveal) * 1.5) var(--ease-reveal);
}
.collage .collage__slot > .is-entering.is-in { opacity: 1; }

/* --- Text peste galerie (2026-09-29, decizia clientului) --------------------
   Un titlu mare, de obicei pe marker (ex. prețul), în colțul din dreapta jos
   al mozaicului sau colajului, ieșit puțin peste margine. Nu primește click:
   fotografia de dedesubt se mărește în continuare. */
.gallery-stamp {
  position: absolute;
  right: calc(-1 * var(--sp-2));
  bottom: calc(-1 * var(--sp-2));
  z-index: 2;
  max-width: 80%;
  margin: 0;
  text-align: right;
  pointer-events: none;
}
@media (min-width: 768px) {
  .gallery-stamp {
    right: calc(-1 * var(--sp-4));
    bottom: calc(-1 * var(--sp-4));
  }
}
/* În card, marginea cardului ar tăia textul: stă înăuntru. */
.gallery-card .gallery-stamp {
  right: var(--sp-3);
  bottom: var(--sp-3);
}

/* --- Masonry ----------------------------------------------------------------
   Coloane care curg. Fiecare fotografie își păstrează proporția, deci
   coloanele au înălțimi diferite — de asta arată viu. */
.masonry {
  column-count: 2;
  column-gap: var(--sp-3);
}
@media (min-width: 768px) { .masonry { column-count: 3; } }
@media (min-width: 1200px) { .masonry { column-count: 4; } }

.masonry > * {
  break-inside: avoid;
  margin-bottom: var(--sp-3);
  display: block;
}
.masonry .media { border-radius: var(--r-md); }

.masonry--2 { column-count: 2; }
@media (min-width: 768px) { .masonry--2 { column-count: 2; } }
@media (min-width: 1200px) { .masonry--2 { column-count: 3; } }

/* --- Card cu galerie ---------------------------------------------------------
   Galeria stă în capul cardului, cu textul dedesubt. Cardul nu se ridică:
   imaginile sunt conținut, nu o singură destinație. */
.gallery-card { overflow: hidden; }
.gallery-card__media { padding: var(--sp-3); }
.gallery-card__media .mosaic,
.gallery-card__media .masonry { gap: var(--sp-2); column-gap: var(--sp-2); }
.gallery-card__media .masonry > * { margin-bottom: var(--sp-2); }

.gallery-card__body {
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.gallery-card__title { font-size: var(--fs-h4); margin: 0; }
.gallery-card__count {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--reflectie);
}
.gallery-card__count i { font-size: 14px; line-height: 0; color: var(--impuls); }

/* Galeria pe toată suprafața cardului, fără ramă interioară */
.gallery-card--flush .gallery-card__media { padding: 0; }
.gallery-card--flush .mosaic,
.gallery-card--flush .masonry { gap: 2px; column-gap: 2px; }
.gallery-card--flush .masonry > * { margin-bottom: 2px; }
.gallery-card--flush .media { border-radius: 0; }

/* --- Imagine care deschide lightbox ------------------------------------------
   Butonul acoperă fotografia și poartă eticheta accesibilă; fotografia
   rămâne decorativă în interiorul lui. */
.gallery-item { position: relative; display: block; width: 100%; }

.gallery-item__open {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: inherit;
  transition: background-color var(--t-card) var(--ease);
}
.gallery-item__open:hover { background: rgba(23, 20, 15, .22); }
.gallery-item__open:focus-visible { outline: 3px solid var(--impuls); outline-offset: -3px; }

.gallery-item__zoom {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--prezenta);
  color: var(--impuls);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-card) var(--ease), transform var(--t-card) var(--ease);
  pointer-events: none;
}
.gallery-item__zoom i { font-size: 16px; line-height: 0; }
.gallery-item__open:hover + .gallery-item__zoom,
.gallery-item__open:focus-visible + .gallery-item__zoom {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item__zoom { transition: none; }
}