/* =====================================================================
   FOTO-GALERIJA OBJAVE
   ---------------------------------------------------------------------
   Učitava se SAMO na objavi koja u sadržaju ima `[mmb_galerija]`.
   Početna, arhive i ostale unutrašnje strane ne dobijaju nijedan bajt
   ovog fajla (v. `inc/enqueue.php`).

   BEZ POMJERANJA SADRŽAJA
   Svaka stavka nosi `--ar` — stvarni odnos stranica priloga, iz PHP-a.
   `flex-basis` i `aspect-ratio` su čiste CSS veličine, pa pregledač zna
   visinu cijele mreže pri prvom raspoređivanju, prije nego što ijedna
   fotografija stigne. CLS je nula po konstrukciji, ne po sreći.
   ===================================================================== */

.mmbg {
  margin-block: clamp(1.8rem, 4vw, 3rem);
}

.mmbg__naslov {
  font: 600 var(--fs-h3)/var(--lh-head) var(--f-head);
  letter-spacing: var(--ls-head);
  color: var(--c-ink);
  margin: 0 0 .35rem;
}

.mmbg__meta {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 clamp(.9rem, 2vw, 1.3rem);
  font-size: var(--fs-sm); color: var(--c-ink-soft);
}
.mmbg__ikona { display: inline-flex; color: var(--acc); }

/* ---------------------------------------------------------------- mreža */

/*
 * OPRAVDANI REDOVI, BEZ ISJECANJA KADRA
 *
 * Osnova stavke je `--ar * --red`, a `flex-grow` je proporcionalan toj
 * osnovi. Kad rast ide srazmjerno osnovi, sve stavke u redu rastu ISTIM
 * faktorom — visine im ispadnu jednake, a svaka zadrži svoj odnos stranica.
 * Red je time poravnat s obje strane, a nijedna fotografija nije isječena.
 *
 * `--red` je CILJNA visina reda, ne konačna: stvarna visina zavisi od toga
 * koliko je fotografija stalo, i po tome se redovi razlikuju. To je i izvor
 * asimetrije — dolazi iz stvarnih orijentacija, ne iz dekorativnog rasporeda.
 *
 * Bez `dense` i bez `order`: vizuelni redoslijed je isti kao redoslijed u
 * dokumentu, što je uslov za tastaturu, čitače ekrana i lightbox.
 */
.mmbg__mreza {
  --red: 170px;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(.5rem, 1.1vw, .9rem);
}

/*
 * Bez ovoga bi posljednji, nepotpun red rastegao svojih 1–2 fotografije
 * preko cijele širine. Osnova mu je nula, pa nikad ne izaziva prelom reda
 * niti zauzima mjesto u punom redu.
 */
.mmbg__mreza::after { content: ''; flex: 999999 1 0; }

/*
 * OTPORNOST NA STILOVE SADRŽAJA
 *
 * Galerija se ispisuje kroz `the_content()`, dakle unutar `.prose`, gdje
 * `internal.css` za tekstualne liste postavlja `list-style: disc`,
 * uvlačenje `1.4em` i razmak `.4em` između stavki. Ta pravila pogađaju
 * `ul` i `li` DIREKTNO, pa `list-style: none` sa `.mmbg__mreza` do stavki
 * stiže samo nasljeđivanjem — a naslijeđena vrijednost uvijek gubi od
 * pravila koje element pogađa. Otud crne tačke lijevo od svakog reda,
 * mreža uža od teksta, i prva fotografija u redu 7 px više od ostalih.
 *
 * Poništava se ovdje, samo za mrežu galerije, i po SPECIFIČNOSTI:
 * (0,2,0) i (0,3,0) prema (0,1,1) i (0,1,2), pa ne zavisi od redoslijeda
 * učitavanja stilova. Globalno pravilo za `li` se namjerno ne dira.
 *
 * `display: list-item` ostaje: bez tipa markera ništa se ne iscrtava, a
 * semantika liste za čitače ekrana ostaje netaknuta.
 */
.mmbg .mmbg__mreza { padding: 0; }
.mmbg .mmbg__mreza > .mmbg__st { list-style: none; margin: 0; }

/*
 * `× 100` nije ukras. Kad je ZBIR faktora rasta u redu manji od 1, CSS po
 * pravilu razdijeli samo toliki dio slobodnog prostora — red onda ostane
 * neporavnat s desne strane. To se dešava kad uspravna fotografija (0.67)
 * ostane sama u redu. Množenje ne mijenja odnose unutar reda, jer je rast
 * srazmjeran, a zbir podiže iznad 1 u svakom slučaju (najmanji mogući
 * `--ar` je 0.2, dakle 20).
 */
.mmbg__st {
  flex-grow: calc(var(--ar, 1.5) * 100);
  flex-shrink: 1;
  flex-basis: calc(var(--ar, 1.5) * var(--red));
  min-width: 0;   /* inače `min-content` slike spriječi skupljanje */
}

.mmbg__okvir {
  display: block; width: 100%; aspect-ratio: var(--ar, 1.5);
  margin: 0; padding: 0; border: 0; background: var(--c-surface-2);
  border-radius: var(--r-md); overflow: hidden; cursor: zoom-in;
  box-shadow: var(--sh-1);
  transition: transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
/*
 * Okvir već ima odnos same fotografije, pa `contain` u normalnom slučaju
 * ne pravi nijednu praznu traku. Ako dimenzije priloga ikada nedostaju,
 * `contain` pokaže cijelu fotografiju uz uske trake — što je ispravnije
 * od `cover`, koji bi tiho odsjekao kadar.
 */
.mmbg__slika {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform var(--motion-slow) var(--ease-out);
}

@media (hover: hover) {
  .mmbg__okvir:hover { box-shadow: var(--sh-3); transform: translateY(-2px); }
  .mmbg__okvir:hover .mmbg__slika { transform: scale(1.04); }
}
.mmbg__okvir:focus-visible {
  outline: 3px solid var(--acc); outline-offset: 3px;
}

/* --------------------------------------------------------------- dugme */

.mmbg__vise { margin: clamp(1rem, 2.4vw, 1.6rem) 0 0; text-align: center; }

.mmbg__dugme {
  font: 600 var(--fs-body)/1 var(--f-body);
  color: var(--c-ink-inv); background: var(--acc);
  border: 0; border-radius: var(--r-pill);
  padding: .8rem 1.6rem; cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
.mmbg__dugme:hover { background: var(--acc-ink); }
.mmbg__dugme:active { transform: translateY(1px); }
.mmbg__dugme:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.mmbg__dugme[disabled] { opacity: .55; cursor: default; transform: none; }

.mmbg__status {
  margin: .7rem 0 0; text-align: center;
  font-size: var(--fs-sm); color: var(--c-ink-soft); min-height: 1.2em;
}

/* ------------------------------------------------------------ lightbox */

.mmbl {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  background: rgba(9, 20, 28, .93);
  opacity: 0; visibility: hidden;
  transition: opacity var(--motion-base) var(--ease-out), visibility var(--motion-base);
}
.mmbl[data-otvoren] { opacity: 1; visibility: visible; }

.mmbl__scena {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.6rem, 2vw, 2.2rem);
  box-sizing: border-box;
}

.mmbl__slika {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
  border-radius: var(--r-sm);
  /* Slika se pojavljuje tek kad je stvarno dekodirana — bez treperenja. */
  opacity: 0; transition: opacity var(--motion-base) var(--ease-out);
}
.mmbl__slika[data-spremna] { opacity: 1; }

.mmbl__vrti {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  animation: mmbl-vrti .8s linear infinite;
}
@keyframes mmbl-vrti { to { transform: rotate(360deg); } }

.mmbl__dugme {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(4px);
  transition: background var(--motion-fast) var(--ease-out);
}
.mmbl__dugme:hover { background: rgba(255, 255, 255, .26); }
.mmbl__dugme:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.mmbl__dugme[disabled] { opacity: .3; cursor: default; }

.mmbl__zatvori { top: clamp(.6rem, 2vw, 1.4rem); right: clamp(.6rem, 2vw, 1.4rem); }
.mmbl__prev    { left:  clamp(.4rem, 1.6vw, 1.4rem); top: 50%; transform: translateY(-50%); }
.mmbl__next    { right: clamp(.4rem, 1.6vw, 1.4rem); top: 50%; transform: translateY(-50%); }

.mmbl__brojac {
  position: absolute; z-index: 2;
  bottom: clamp(.6rem, 2vw, 1.4rem); left: 50%; transform: translateX(-50%);
  padding: .35rem .85rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14); backdrop-filter: blur(4px);
  color: #fff; font: 600 var(--fs-sm)/1 var(--f-body);
  font-variant-numeric: tabular-nums;
}

/* dok je lightbox otvoren, pozadina se ne skroluje */
body.mmbl-otvoren { overflow: hidden; }

/* ------------------------------------------------------------ responsive */

/*
 * Rezervna ljestvica, po širini prozora. Vrijedi u pregledačima bez
 * kontejnerskih jedinica i dok se `@supports` blok ispod ne primijeni.
 */
@media (max-width: 1024px) { .mmbg__mreza { --red: 150px; } }

@media (max-width: 640px) {
  /*
   * Na telefonu je cilj jedan položeni kadar po redu, odnosno dva uspravna.
   * Manja ciljna visina bi dala sličice uže od 150 px, na kojima se lica
   * više ne raspoznaju.
   */
  .mmbg__mreza { --red: 58vw; }
  .mmbl__dugme { width: 42px; height: 42px; }
}

/*
 * Ciljna visina reda treba da prati širinu MREŽE, ne prozora: ista objava
 * može biti u užoj koloni, a širina prozora o tome ne govori ništa. Zato
 * kontejnerske jedinice tamo gdje ih pregledač ima; gdje nema, ostaje
 * ljestvica iznad, koja takođe ne isijeca nijednu fotografiju.
 */
@supports (width: 1cqw) {
  .mmbg { container-type: inline-size; }
  .mmbg__mreza { --red: 21cqw; }
  @container (max-width: 560px) { .mmbg__mreza { --red: 60cqw; } }
}

@media (prefers-reduced-motion: reduce) {
  .mmbg__okvir, .mmbg__slika, .mmbl, .mmbl__slika, .mmbg__dugme { transition: none; }
  .mmbl__vrti { animation-duration: 2s; }
}