/* ==========================================================================
   Galéria Google Drive (plugin Use-your-Drive, .wpcp-module)
   Priečinky a obrázky majú rovnaký rám ako obrázky v článkoch
   (article-images.css): jemný zlatý lem, tieň a pri hover/focus nadvihnutie so
   zlatým lemom zhrubnutým o 1px. Štítok priečinka je vo farbe hlavičky s písmom
   Cinzel. Panel s cestou a ovládacie tlačidlá používajú farby stránky.
   Farby pluginu (accent #d9b45c) sa nastavujú v administrácii pluginu –
   tu ich nemeníme, len dopĺňame štýl, ktorý sa tam nastaviť nedá.
   Lightbox (zobrazenie na celú stranu, iLightBox pluginu) má pozadie, horný
   pruh, ovládacie tlačidlá, šípky a náhľady vo farbách stránky. Rozloženie
   (obrázok na celú plochu okna) sa nemení.
   Cieľ: <div class="wpcp-module UseyourDrive wpcp-gallery"> a lightbox
   .ilightbox-* s triedou .wpcp-lightbox (plugin Use-your-Drive).
   ========================================================================== */

/* --- Premenné --------------------------------------------------------------- */
.wpcp-module,
.wpcp-lightbox {
  --gal-wine: #6b1420;                            /* farba hlavičky */
  --gal-wine-soft: #762833;                       /* farba hlavičky + 8 % bielej (page-share.css) */
  --gal-gold: #d9b45c;                            /* zlatý lem */
  --gal-cream: #fffaf2;                           /* krémová (text na vínovej) */
  --gal-bar-bg: #fffaf2;                          /* pozadie panelu s cestou */
  --gal-radius: 3px;
  --gal-shadow: 0 2px 8px rgba(60, 30, 20, .14);
  --gal-shadow-hover: 0 10px 24px rgba(60, 30, 20, .24);
  --gal-lift: -3px;                               /* nadvihnutie pri hover */
  --gal-speed: .25s;
  --gal-label-size: 13px;                         /* veľkosť názvu priečinka */
  --gal-overlay: #1a0b0e;                         /* pozadie lightboxu (ako v article-images.css) */
  --gal-lb-btn: 36px;                             /* priemer tlačidiel vľavo hore */
  --gal-lb-arrow: 44px;                           /* priemer šípok */
}

/* --- Panel s cestou a ovládaním ---------------------------------------------- */
#UseyourDrive .wpcp-module .nav-header {
  border: 1px solid var(--gal-gold);
  border-radius: var(--gal-radius);
  background: var(--gal-bar-bg);
  box-shadow: var(--gal-shadow);
}

#UseyourDrive .wpcp-module .nav-header,
#UseyourDrive .wpcp-module .nav-header .wpcp-breadcrumb,
#UseyourDrive .wpcp-module .nav-header .nav-title {
  color: var(--gal-wine);
}

#UseyourDrive .wpcp-module .nav-header .wpcp-breadcrumb .folder,
#UseyourDrive .wpcp-module .nav-header .nav-title {
  font-family: Cinzel, Georgia, serif;
  font-weight: 400;
}

/* Ikony panela (domov, hľadať, zoradiť, menu, obnoviť) */
#UseyourDrive .wpcp-module .nav-header .entry-info-button {
  color: var(--gal-wine);
  transition: background-color var(--gal-speed) ease, box-shadow var(--gal-speed) ease;
}

#UseyourDrive .wpcp-module .nav-header .entry-info-button:hover,
#UseyourDrive .wpcp-module .nav-header .entry-info-button:focus-visible {
  background: rgba(217, 180, 92, .22);
  box-shadow: 0 0 0 1px var(--gal-gold);
  outline: none;
}

/* --- Dlaždice (priečinky aj obrázky) ----------------------------------------- */
/* Zlatý lem je prstenec z box-shadow, nie border: plugin skladá dlaždice do riadkov
   podľa šírky počítanej v JavaScripte a 1px border navyše by ich na mobile zalomil
   do jedného stĺpca. */
#UseyourDrive .wpcp-module .image-container.entry {
  border-radius: var(--gal-radius);
  box-shadow: 0 0 0 1px var(--gal-gold), var(--gal-shadow);
  transition: transform var(--gal-speed) ease, box-shadow var(--gal-speed) ease;
}

#UseyourDrive .wpcp-module .image-container.entry:hover,
#UseyourDrive .wpcp-module .image-container.entry:focus-within {
  transform: translateY(var(--gal-lift));
  /* prstenec o 1px hrubší = zlatý lem zhrubne bez posunu rozloženia */
  box-shadow: 0 0 0 2px var(--gal-gold), var(--gal-shadow-hover);
}

/* --- Štítok priečinka -------------------------------------------------------- */
#UseyourDrive .wpcp-module .image-container.image-folder .folder-text {
  border-top: 1px solid var(--gal-gold);
  background: var(--gal-wine);
  color: var(--gal-cream);
  font-family: Cinzel, Georgia, serif;
  font-size: var(--gal-label-size);
  font-weight: 400;
  letter-spacing: .02em;
}

/* Ikona priečinka v štítku je zlatá */
#UseyourDrive .wpcp-module .image-folder .folder-text :is(i, svg) {
  color: var(--gal-gold);
}

/* --- Tlačidlá na dlaždici (info, menu, výber) ---------------------------------- */
#UseyourDrive .wpcp-module .image-container.entry .entry-info-button {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(107, 20, 32, .78);
  color: var(--gal-cream);
}

#UseyourDrive .wpcp-module .image-container.entry .entry-info-button:hover,
#UseyourDrive .wpcp-module .image-container.entry .entry-info-button:focus-visible {
  border-color: var(--gal-gold);
  background: var(--gal-wine);
  box-shadow: inset 0 0 0 1px var(--gal-gold);
  outline: none;
}

/* --- Tlačidlo "späť hore" v galérii (ako #topcontrol v scroll-top.css) ---------- */
#UseyourDrive .wpcp-module .scroll-to-top-action {
  border: 2px solid var(--gal-gold);
  background: var(--gal-wine);
  color: var(--gal-cream);
}

#UseyourDrive .wpcp-module .scroll-to-top-action:hover,
#UseyourDrive .wpcp-module .scroll-to-top-action:focus-visible {
  background: var(--gal-wine);
  box-shadow: inset 0 0 0 1px var(--gal-gold), 0 6px 18px rgba(0, 0, 0, .28);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  #UseyourDrive .wpcp-module .image-container.entry,
  #UseyourDrive .wpcp-module .nav-header .entry-info-button {
    transition: none;
  }

  #UseyourDrive .wpcp-module .image-container.entry:hover,
  #UseyourDrive .wpcp-module .image-container.entry:focus-within {
    transform: none;
  }
}

/* ==========================================================================
   Lightbox (zobrazenie na celú stranu)
   Prvky lightboxu sú priamo v <body>, nie v .wpcp-module – cielime ich cez
   .wpcp-lightbox (pridáva ju plugin všetkým častiam svojho lightboxu).
   ========================================================================== */

/* --- Pozadie ----------------------------------------------------------------- */
body .ilightbox-overlay.wpcp-lightbox.metro-black,
body .ilightbox-holder.wpcp-lightbox.metro-black {
  background: var(--gal-overlay);
}

/* --- Horný pruh s názvom súboru a stiahnutím ----------------------------------- */
.ilightbox-holder.wpcp-lightbox .ilightbox-header.ilightbox-header-accent {
  border-bottom: 1px solid var(--gal-gold);
  background-color: var(--gal-wine) !important;   /* plugin nastavuje accent s !important */
  color: var(--gal-cream);
}

.ilightbox-holder.wpcp-lightbox .ilightbox-header .entry-info-name {
  font-family: Cinzel, Georgia, serif;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--gal-cream);
}

.ilightbox-holder.wpcp-lightbox .ilightbox-header .entry-info-button {
  color: var(--gal-cream);
  transition: box-shadow var(--gal-speed) ease;
}

.ilightbox-holder.wpcp-lightbox .ilightbox-header .entry-info-button:hover,
.ilightbox-holder.wpcp-lightbox .ilightbox-header .entry-info-button:focus-within {
  box-shadow: 0 0 0 1px var(--gal-gold);
}

/* --- Tlačidlá lightboxu (zavrieť, celá obrazovka, prehrávanie, ...) ------------
   Kruhy vo farbe hlavičky so zlatým okrajom (ako #topcontrol v scroll-top.css),
   rovnaké na počítači aj na mobile. Ikony pluginu (obrázky) nahrádzame ikonami
   z CSS. Na počítači sú tlačidlá vľavo hore, na mobile (trieda .isMobile) plugin
   používa spodný panel so všetkými tlačidlami.
   Selektor [class] pridáva špecificitu nad pravidlá pluginu, ktoré na mobile
   nastavujú obrázok ikony cez background (.isMobile .ilightbox-toolbar.metro-black
   a.ilightbox-close ...). */
html:not(.isMobile) body:not(.isMobile) .ilightbox-toolbar.wpcp-lightbox {
  top: calc((50px - var(--gal-lb-btn)) / 2);      /* vycentrované v hornom pruhu (50px) */
  left: 12px;
  height: var(--gal-lb-btn);
}

body .ilightbox-toolbar.wpcp-lightbox[class] a[class] {
  position: relative;
  box-sizing: border-box;
  width: var(--gal-lb-btn);
  height: var(--gal-lb-btn);
  margin-right: 8px;
  border: 1px solid var(--gal-gold);
  border-radius: 50%;
  background: var(--gal-wine-soft);
  filter: none;                                   /* plugin tlačidlá odfarbuje: saturate(0) */
  transition: background-color var(--gal-speed) ease, box-shadow var(--gal-speed) ease;
}

body .ilightbox-toolbar.wpcp-lightbox[class] a[class]:hover,
body .ilightbox-toolbar.wpcp-lightbox[class] a[class]:focus-visible {
  background: var(--gal-wine-soft);
  box-shadow: inset 0 0 0 1px var(--gal-gold);   /* zlatý okraj o 1px hrubší */
  outline: none;
}

/* Ikony: spoločný základ */
body .ilightbox-toolbar.wpcp-lightbox[class] a[class]::before,
body .ilightbox-toolbar.wpcp-lightbox[class] a[class]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  color: var(--gal-cream);
}

/* Zavrieť: dve skrížené čiary */
.ilightbox-toolbar.wpcp-lightbox a.ilightbox-close::before,
.ilightbox-toolbar.wpcp-lightbox a.ilightbox-close::after {
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  background: currentColor;
}

.ilightbox-toolbar.wpcp-lightbox a.ilightbox-close::before { transform: rotate(45deg); }
.ilightbox-toolbar.wpcp-lightbox a.ilightbox-close::after { transform: rotate(-45deg); }

/* Celá obrazovka: štvorec */
.ilightbox-toolbar.wpcp-lightbox a.ilightbox-fullscreen::before {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
}

/* Prehrať: trojuholník */
.ilightbox-toolbar.wpcp-lightbox a.ilightbox-play::before {
  margin: -7px 0 0 -4px;
  border: solid transparent;
  border-width: 7px 0 7px 12px;
  border-left-color: currentColor;
}

/* Pozastaviť: dve zvislé čiary */
.ilightbox-toolbar.wpcp-lightbox a.ilightbox-pause::before {
  width: 4px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: currentColor;
  box-shadow: 10px 0 0 currentColor;
}

/* Predchádzajúca / nasledujúca (na mobile v spodnom paneli): šípka (chevron) */
.ilightbox-toolbar.wpcp-lightbox a.ilightbox-prev-button::before,
.ilightbox-toolbar.wpcp-lightbox a.ilightbox-next-button::before {
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border: 0 solid currentColor;
  border-width: 2px 0 0 2px;
}

.ilightbox-toolbar.wpcp-lightbox a.ilightbox-prev-button::before {
  margin-left: -3px;
  transform: rotate(-45deg);
}

.ilightbox-toolbar.wpcp-lightbox a.ilightbox-next-button::before {
  margin-left: -7px;
  transform: rotate(135deg);
}

/* Stiahnuť (na mobile v spodnom paneli): šípka nadol nad podstavcom */
.ilightbox-toolbar.wpcp-lightbox a.ilightbox-download::before {
  width: 8px;
  height: 8px;
  margin: -5px 0 0 -4px;
  border: 0 solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ilightbox-toolbar.wpcp-lightbox a.ilightbox-download::after {
  width: 14px;
  height: 15px;
  margin: -8px 0 0 -7px;
  background:
    linear-gradient(currentColor, currentColor) center top / 2px 12px no-repeat,
    linear-gradient(currentColor, currentColor) center bottom / 14px 2px no-repeat;
}

/* Mobil: spodný panel – tlačidlá väčšie pre dotyk, panel vo farbe pozadia lightboxu */
body.isMobile .ilightbox-toolbar.wpcp-lightbox {
  --gal-lb-btn: 44px;
  height: auto;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--gal-gold);
  background: var(--gal-overlay);
}

body.isMobile .ilightbox-toolbar.wpcp-lightbox[class] a[class] {
  margin: 0 5px;
  vertical-align: middle;
}

/* --- Šípky vľavo a vpravo: kruhy so zlatým okrajom -----------------------------
   Zdvojená trieda .ilightbox-button zvyšuje špecificitu nad pravidlá pluginu
   (ten ich načítava až po našom štýle a nastavuje obrázok šípky cez background). */
body .ilightbox-button.ilightbox-button.wpcp-lightbox.metro-black {
  box-sizing: border-box;
  width: var(--gal-lb-arrow);
  height: var(--gal-lb-arrow);
  margin: 0;
  border: 2px solid var(--gal-gold);
  border-radius: 50%;
  background: var(--gal-wine);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  filter: none;                                   /* plugin šípky odfarbuje: saturate(0) */
  transition: transform var(--gal-speed) ease, box-shadow var(--gal-speed) ease;
}

.ilightbox-button.ilightbox-prev-button.wpcp-lightbox.metro-black.horizontal,
.ilightbox-button.ilightbox-next-button.wpcp-lightbox.metro-black.horizontal {
  top: 50%;
  bottom: auto;
  margin-top: calc(var(--gal-lb-arrow) / -2);
}

.ilightbox-button.ilightbox-prev-button.wpcp-lightbox.metro-black.horizontal {
  right: auto;
  left: 16px;
}

.ilightbox-button.ilightbox-next-button.wpcp-lightbox.metro-black.horizontal {
  right: 16px;
  left: auto;
}

/* Šípka (chevron) z dvoch okrajov otočeného štvorca */
body .ilightbox-button.ilightbox-button.wpcp-lightbox.metro-black::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border: 0 solid var(--gal-cream);
  border-width: 2px 0 0 2px;
}

.ilightbox-button.ilightbox-prev-button.wpcp-lightbox.metro-black::after {
  margin-left: -3px;
  transform: rotate(-45deg);
}

.ilightbox-button.ilightbox-next-button.wpcp-lightbox.metro-black::after {
  margin-left: -7px;
  transform: rotate(135deg);
}

body .ilightbox-button.ilightbox-button.wpcp-lightbox.metro-black:hover {
  transform: scale(1.06);
  box-shadow: inset 0 0 0 1px var(--gal-gold), 0 6px 18px rgba(0, 0, 0, .4);
}

/* --- Náhľady dole: aktívny má zlatý rám ----------------------------------------- */
.ilightbox-thumbnails.wpcp-lightbox .ilightbox-thumbnail.ilightbox-active {
  border-color: var(--gal-gold);
}

@media (prefers-reduced-motion: reduce) {
  .ilightbox-holder.wpcp-lightbox .ilightbox-header .entry-info-button,
  body .ilightbox-toolbar.wpcp-lightbox[class] a[class],
  body .ilightbox-button.ilightbox-button.wpcp-lightbox.metro-black {
    transition: none;
  }

  body .ilightbox-button.ilightbox-button.wpcp-lightbox.metro-black:hover {
    transform: none;
  }
}