/* MANEE obrazový styl: fotka v obdélníku s tenkým zlatým rámem 1 px posunutým o 16 px.
   Černobílé zpracování je výchozí, tlumeně barevná varianta je výjimka. Barvy jen přes var(--manee-*).
   Předpokládá načtený tokens/build/css/tokens.css (a pro popisek typography/fonts/fonts.css).

   <figure class="manee-figure">
     <div class="manee-photo manee-photo--3x2"><img src="…" alt="…"></div>
     <figcaption class="manee-photo-caption">Popisek</figcaption>
   </figure>
*/
.manee-photo {
  --manee-photo-offset: 16px;
  position: relative;
  isolation: isolate;
  display: block;
  /* místo pro rám, aby nepřesahoval do okolí */
  margin: 0 var(--manee-photo-offset) var(--manee-photo-offset) 0;
  border-radius: var(--manee-radius-none);
}

/* zlatý rám 1 px, za fotkou, posunutý o 16 px doprava a dolů */
.manee-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(var(--manee-photo-offset), var(--manee-photo-offset));
  border: 1px solid;
  border-color: var(--manee-color-border-accent);
  border-radius: var(--manee-radius-none);
  pointer-events: none;
}

/* rám vlevo dole, pro fotku u pravého okraje */
.manee-photo--left {
  margin: 0 0 var(--manee-photo-offset) var(--manee-photo-offset);
}
.manee-photo--left::before {
  transform: translate(calc(var(--manee-photo-offset) * -1), var(--manee-photo-offset));
}

/* obdélník, nikdy kruh ani oblouk, rohy 0 */
.manee-photo > img,
.manee-photo > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--manee-radius-none);
  filter: grayscale(1) contrast(1.05);
}

/* tlumeně barevná varianta, jen když je barva nositelem informace */
.manee-photo--muted > img,
.manee-photo--muted > picture > img {
  filter: saturate(0.6) contrast(1.02);
}

/* poměry stran */
.manee-photo--3x2 { aspect-ratio: 3 / 2; }
.manee-photo--4x5 { aspect-ratio: 4 / 5; }
.manee-photo--1x1 { aspect-ratio: 1 / 1; }
.manee-photo--16x9 { aspect-ratio: 16 / 9; }

/* zástupný obdélník do vzniku skutečné fotky: plochý Písek, bez přechodu a bez filtru */
.manee-photo__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--manee-color-bg-subtle);
  color: var(--manee-color-text-muted);
  font: var(--manee-typography-caption);
  border-radius: var(--manee-radius-none);
}

.manee-figure { margin: 0; }
.manee-photo-caption {
  margin-top: var(--manee-space-3);
  font: var(--manee-typography-caption);
  color: var(--manee-color-text-muted);
  max-width: 640px;
}

/* mobil: menší posun rámu, ať nepřesahuje boční okraj */
@media (max-width: 640px) {
  .manee-photo { --manee-photo-offset: 8px; }
}