/* ==========================================================================
   Obrázky v článkoch a ich lightbox
   Obrázky v obsahu stránok/článkov (#content, NIE v sidebare) majú krémové
   paspartu, jemný zlatý lem a jemný tieň. Len obrázky, ktoré sa dajú zväčšiť
   (lupa / odkaz na súbor obrázka), sa pri hover/focus nadvihnú, tieň sa
   prehĺbi a zlatý lem sa zhrubne o 1px (rovnako ako tlačidlá v page-share.css).
   Lightbox (Magnific Popup témy Porto – .mfp-*) používa rovnaký rám a obrázok
   sa vždy zmestí celý do okna. Ovládacie prvky sú v farbách hlavičky so
   zlatým okrajom (ako #topcontrol v scroll-top.css).
   Nedotýka sa galérie (Use your Drive) ani lightboxu WordPressu.
   Cieľ: .porto-vc-zoom (WPBakery), obrázky v texte, .post-image (téma Porto).
   ========================================================================== */

/* --- Premenné --------------------------------------------------------------- */
:root {
  --pimg-mat: #fffaf2;                            /* krémové paspartu (rám) */
  --pimg-gold: #d9b45c;                           /* zlatý lem */
  --pimg-wine: #6b1420;                           /* farba hlavičky */
  --pimg-radius: 3px;
  --pimg-pad: 8px;                                /* šírka paspartu v článku */
  --pimg-shadow: 0 2px 8px rgba(60, 30, 20, .14);
  --pimg-shadow-hover: 0 10px 24px rgba(60, 30, 20, .24);
  --pimg-lift: -3px;                              /* nadvihnutie pri hover */
  --pimg-speed: .25s;

  --pimg-lb-pad: 12px;                            /* šírka paspartu v lightboxe */
  --pimg-lb-margin: 48px;                         /* voľné miesto nad/pod obrázkom v lightboxe */
  --pimg-lb-overlay: #1a0b0e;                     /* pozadie za lightboxom */
  --pimg-lb-btn: 44px;                            /* priemer tlačidiel (zavrieť, šípky) */
}

/* ==========================================================================
   1) Obrázky v článku
   ========================================================================== */

/* --- Rám: obrázky v texte, WP bloky, titulný obrázok príspevku -------------- */
#content :is(.wpb_text_column, .entry-content, .wp-block-image, .wp-caption, .wpb_single_image .vc_single_image-wrapper) img:not(.emoji, .wp-smiley),
#content .post-image .img-thumbnail {
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  padding: var(--pimg-pad);
  border: 1px solid var(--pimg-gold);
  border-radius: var(--pimg-radius);
  background: var(--pimg-mat);
  box-shadow: var(--pimg-shadow);
}

/* Hover majú len obrázky, ktoré sa dajú zväčšiť (odkaz na súbor obrázka / lupa) */
#content a:is([href$=".jpg" i], [href$=".jpeg" i], [href$=".png" i], [href$=".webp" i], [href$=".gif" i], [data-gallery]) > img,
#content a:is([href$=".jpg" i], [href$=".jpeg" i], [href$=".png" i], [href$=".webp" i], [href$=".gif" i], [data-gallery]) > span > img {
  transition: transform var(--pimg-speed) ease, box-shadow var(--pimg-speed) ease;
  cursor: zoom-in;
}

/* Obrázky s lupou (.porto-vc-zoom) rámuje odkaz, nie samotný obrázok */
#content a.porto-vc-zoom .vc_single_image-wrapper img.vc_single_image-img {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: none;
}

/* Obrázok v galérii a v karuseli nerámujeme dvakrát */
#content :is(.wpcp-module, .owl-carousel) img {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* --- Obrázok s lupou (WPBakery .porto-vc-zoom) ------------------------------ */
#content a.porto-vc-zoom {
  box-sizing: border-box;
  max-width: 100%;
  padding: var(--pimg-pad);
  border: 1px solid var(--pimg-gold);
  border-radius: var(--pimg-radius);
  background: var(--pimg-mat);
  box-shadow: var(--pimg-shadow);
  transition: transform var(--pimg-speed) ease, box-shadow var(--pimg-speed) ease;
}

#content a.porto-vc-zoom .vc_single_image-wrapper,
#content a.porto-vc-zoom img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Lupa zostáva v rohu obrázka (nie v rohu paspartu) */
#content a.porto-vc-zoom .zoom-icon {
  right: calc(var(--pimg-pad) + 8px);
  bottom: calc(var(--pimg-pad) + 8px);
  transition: transform var(--pimg-speed) ease;
}

/* --- Hover / klávesnicový focus --------------------------------------------- */
#content a:is([href$=".jpg" i], [href$=".jpeg" i], [href$=".png" i], [href$=".webp" i], [href$=".gif" i], [data-gallery]):not(.porto-vc-zoom) > img:hover,
#content a:is([href$=".jpg" i], [href$=".jpeg" i], [href$=".png" i], [href$=".webp" i], [href$=".gif" i], [data-gallery]):not(.porto-vc-zoom) > span > img:hover,
#content a.porto-vc-zoom:hover,
#content a.porto-vc-zoom:focus-visible {
  transform: translateY(var(--pimg-lift));
  /* 1px prstenec navyše = zlatý lem o 1px hrubší bez posunu rozloženia */
  box-shadow: 0 0 0 1px var(--pimg-gold), var(--pimg-shadow-hover);
}

/* Téma/vlastné CSS pridáva každému obrázku z WPBakery zväčšenie (scale 1.05) pri
   hover aj keď sa naň nedá kliknúť – tu ho rušíme, hover riadi len pravidlo vyššie */
#content .vc_single_image-wrapper:hover img,
#content .wpb_single_image a.porto-vc-zoom:hover img {
  transform: none;
  box-shadow: none;
}

#content a.porto-vc-zoom:hover .zoom-icon,
#content a.porto-vc-zoom:focus-visible .zoom-icon {
  transform: scale(1.12);
}

#content a.porto-vc-zoom:focus-visible {
  outline: none;
}

/* ==========================================================================
   2) Lightbox (Magnific Popup)
   ========================================================================== */

/* --- Pozadie ----------------------------------------------------------------- */
body .mfp-bg {
  background: var(--pimg-lb-overlay);
}

body .mfp-bg.mfp-ready {
  opacity: .9;
}

/* --- Obrázok v ráme: celý sa zmestí do okna ----------------------------------
   Téma nuluje max-height, preto !important. Rám (paspartu + lem) je súčasťou
   rozmeru (border-box), takže sa nikdy nevysunie mimo okno. */
body .mfp-figure::after {
  display: none;                                  /* tmavá podložka z Magnific Popup */
}

body .mfp-img {
  box-sizing: border-box;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 2 * var(--pimg-lb-margin)) !important;
  max-height: calc(100dvh - 2 * var(--pimg-lb-margin)) !important;
  padding: var(--pimg-lb-pad);
  border: 1px solid var(--pimg-gold);
  border-radius: var(--pimg-radius);
  background: var(--pimg-mat);
  box-shadow: 0 0 0 1px rgba(217, 180, 92, .35), 0 18px 48px rgba(0, 0, 0, .55);
}

/* --- Titulok a počítadlo pod rámom ------------------------------------------- */
body .mfp-bottom-bar {
  margin-top: 8px;
  cursor: auto;
}

body .mfp-title,
body .mfp-counter {
  color: var(--pimg-mat);
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 1.4;
}

body .mfp-counter {
  color: var(--pimg-gold);
}

/* --- Tlačidlo zavrieť: kruh vo farbe hlavičky so zlatým okrajom -------------- */
body .mfp-image-holder .mfp-close,
body .mfp-iframe-holder .mfp-close {
  top: calc(var(--pimg-lb-btn) / -2);
  right: calc(var(--pimg-lb-btn) / -2);
  width: var(--pimg-lb-btn);
  height: var(--pimg-lb-btn);
  padding: 0;
  border: 2px solid var(--pimg-gold);
  border-radius: 50%;
  background: var(--pimg-wine);
  color: var(--pimg-mat);
  font-size: 24px;
  line-height: calc(var(--pimg-lb-btn) - 4px);
  text-align: center;
  opacity: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  transition: transform var(--pimg-speed) ease, box-shadow var(--pimg-speed) ease;
}

/* --- Šípky: rovnaký kruh so zlatým okrajom -------------------------------------- */
body .mfp-arrow {
  width: var(--pimg-lb-btn);
  height: var(--pimg-lb-btn);
  margin-top: calc(var(--pimg-lb-btn) / -2);
  border: 2px solid var(--pimg-gold);
  border-radius: 50%;
  background: var(--pimg-wine);
  opacity: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  transition: transform var(--pimg-speed) ease, box-shadow var(--pimg-speed) ease;
}

/* Magnific Popup pri stlačení posúva šípku (.mfp-arrow:active { margin-top: -54px }).
   Pri našej veľkosti by sa šípka vysunula spod kurzora a klik by zavrel lightbox. */
body .mfp-arrow:active {
  margin-top: calc(var(--pimg-lb-btn) / -2);
}

body .mfp-arrow-left { left: 16px; }
body .mfp-arrow-right { right: 16px; }

body .mfp-arrow::before {
  display: none;
}

/* Šípka (chevron) z dvoch okrajov otočeného štvorca */
body .mfp-arrow::after {
  width: 10px;
  height: 10px;
  margin: -5px 0 0;
  border: 0 solid var(--pimg-mat);
  border-width: 2px 0 0 2px;
  background: none;
  top: 50%;
  left: 50%;
}

body .mfp-arrow-left::after {
  margin-left: -3px;
  transform: rotate(-45deg);
}

body .mfp-arrow-right::after {
  margin-left: -7px;
  transform: rotate(135deg);
}

/* --- Hover / focus ovládacích prvkov: zlatý okraj o 1px hrubší ---------------- */
body .mfp-image-holder .mfp-close:hover,
body .mfp-image-holder .mfp-close:focus-visible,
body .mfp-arrow:hover,
body .mfp-arrow:focus-visible {
  transform: scale(1.06);
  box-shadow: inset 0 0 0 1px var(--pimg-gold), 0 6px 18px rgba(0, 0, 0, .4);
  outline: none;
}

body .mfp-arrow:hover,
body .mfp-arrow:focus-visible {
  opacity: 1;
}

/* --- Mobil: menšie tlačidlá, viac miesta pre obrázok ---------------------------- */
@media (max-width: 575px) {
  :root {
    --pimg-pad: 6px;
    --pimg-lb-pad: 8px;
    --pimg-lb-margin: 56px;
    --pimg-lb-btn: 38px;
  }

  body .mfp-image-holder .mfp-close {
    top: calc(var(--pimg-lb-btn) / -1 - 6px);       /* nad rámom, aby nezakrýval obrázok */
    right: 0;
  }

  body .mfp-arrow-left { left: 4px; }
  body .mfp-arrow-right { right: 4px; }
}

/* --- Menej pohybu --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #content *,
  body .mfp-close,
  body .mfp-arrow {
    transition: none !important;
  }

  #content :is(img, a.porto-vc-zoom):hover {
    transform: none !important;
  }
}