/* ===== FLICKR SLIDESHOW — FULL CSS (PLAIN PNG CONTROLS, NO HOVER FADE) ===== */

/* Base container */
.flickr-slideshow {
  position: relative;
  width: 100%;
  max-width: 2000px;
  overflow: hidden;
  background: #000;
  user-select: none;
}

/* Aspect ratios (optional) */
.flickr-slideshow[data-aspect="16:9"] { aspect-ratio: 16 / 9; }
.flickr-slideshow[data-aspect="4:3"]  { aspect-ratio: 4 / 3; }
.flickr-slideshow[data-aspect="21:9"] { aspect-ratio: 21 / 9; }
.flickr-slideshow[data-aspect="2:3"]  { aspect-ratio: 2 / 3; }
.flickr-slideshow[data-aspect="3:2"]  { aspect-ratio: 3 / 2; }

/* Slides (fade cross-fade handled by JS toggling .show) */
.flickr-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms ease-in-out;
    border-radius:10px;
}
.flickr-slideshow img.show { opacity: 1; }

/* Controls wrapper (always visible) */
.flickr-slideshow .slideshow-controls {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  z-index: 10;
  opacity: 1;           /* no hover fade */
  pointer-events: auto; /* clickable */
}

/* ===== Buttons: PNGs only (no gradients, no emoji/text) ===== */

/* Common button base */
.flickr-slideshow .slideshow-controls button,
.flickr-slideshow .playPauseBtn {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: none;                /* remove any gradient/background */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;      /* your icon size */
  cursor: pointer;
  line-height: 0;                  /* hide any inline text line-height */
  font-size: 0;                    /* hide injected glyphs */
  color: transparent;              /* hide injected glyphs */
  overflow: hidden;                /* hide injected glyphs */
}

/* Hide any inner nodes the JS might inject (e.g., ‹ › or emoji) */
.flickr-slideshow .slideshow-controls button > *,
.flickr-slideshow .playPauseBtn > * {
  display: none !important;
}

/* Prev/Next icons */
.flickr-slideshow .slideshow-controls .prevBtn {
  background-image: url('./prev.png');
  background-size: 32px 32px;      /* smaller icon for side buttons */
}
.flickr-slideshow .slideshow-controls .nextBtn {
  background-image: url('./next.png');
  background-size: 32px 32px;
}

/* Play/Pause button (centered under slideshow) */
.flickr-slideshow .playPauseBtn {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  z-index: 12;
  background-image: url('./play.png');   /* default: play */
}
.flickr-slideshow .playPauseBtn.is-playing {
  background-image: url('./pause.png');  /* when playing */
}




/* ===== Layout around the slideshow (unchanged) ===== */

.slide-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 20%) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 1rem 0;
  overflow: hidden;

}

.slide-text {
  font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ddd;
  background: #111;
  padding: 1.2rem;
  border-radius: 8px;
  border: 1px solid #333;
  min-width: 0;
  word-break: break-word;
  font-size: 12px;
}

.slide-show {
  width: 100%;
  min-width: 0;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

}





/* Global layout safety */
*, *::before, *::after { box-sizing: border-box; }
.page-section { max-width: 1600px; margin: 0 auto; padding: 0 16px; width: 100%; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .slide-wrapper { grid-template-columns: 1fr; }
}

/* ===== Optional (commented) — enable hover fade for controls =====
.flickr-slideshow .slideshow-controls,
.flickr-slideshow .playPauseBtn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.flickr-slideshow:hover .slideshow-controls,
.flickr-slideshow:hover .playPauseBtn {
  opacity: 1;
  pointer-events: auto;
}
*/






/* --- Two-column layout --- */
.slide-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 20%) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 1rem 0;
  overflow: hidden;
}

/* Left-hand column wrapper */
.left-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes bottom div to bottom */
  height: 100%;
  position: relative;
}

/* Existing text block */
.slide-text {
  font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #BBB;
  background: #111;
  padding: 1.2rem;
  border-radius: 8px;
  border: 1px solid #333;
  min-width: 0;
  word-break: break-word;
  font-size: 12px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

/* Bottom-anchored box */
.bottom-box {
  background: #111;
  color: #999;
  border: 1px solid #333;
  padding: 0.8rem;
  text-align: center;
  font-size: 10px;
  border-radius: 8px;
}

/* Right-hand column */
.slide-show {
  width: 100%;
  min-width: 0;
}





/* --- Black Glossy Metal Button --- */
.btn-gloss {
  display: inline-block;
  position: relative;
  padding: 5px 10px;
  margin-top: 1rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #AAA;
  background: linear-gradient(180deg, #444 0%, #111 100%);
  border: 1px solid #222;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.25),
    0 2px 6px rgba(0,0,0,0.7);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.15s ease;
}
.btn-gloss:hover {
  background: linear-gradient(180deg, #666 0%, #111 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.3),
    0 3px 6px rgba(0,0,0,0.8);
  transform: translateY(0px);
    color: #EEE;
}
.btn-gloss:active {
  background: linear-gradient(180deg, #222 0%, #000 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.9);
  transform: translateY(0);
}
.btn-gloss::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(255,255,255,0.0) 100%
  );
  pointer-events: none;
}

/* --- Global layout safety --- */
*, *::before, *::after { box-sizing: border-box; }
.page-section { max-width: 1600px; margin: 0 auto; padding: 0 16px; width: 100%; }

/* --- Responsive tweaks --- */
@media (max-width: 900px) {
  .slide-wrapper { grid-template-columns: 1fr; }
}

/* --- Hide controls until mouseover --- */
.flickr-slideshow .slideshow-controls,
.flickr-slideshow .playPauseBtn {
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.flickr-slideshow:hover .slideshow-controls,
.flickr-slideshow:hover .playPauseBtn {
  opacity: 1;
  pointer-events: auto;
}



/* Hide any icons the JS injects inside the button */
.flickr-slideshow .playPauseBtn > svg,
.flickr-slideshow .playPauseBtn > img,
.flickr-slideshow .playPauseBtn > span,
.flickr-slideshow .playPauseBtn > i {
  display: none !important;
}


/* ========= FINAL FIX PACK (place at end of CSS) ========= */

/* 1) Hover fade for controls (visible only on hover) */
.flickr-slideshow .slideshow-controls,
.flickr-slideshow .slideshow-controls .playPauseBtn {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.flickr-slideshow:hover .slideshow-controls,
.flickr-slideshow:hover .slideshow-controls .playPauseBtn {
  opacity: 1;
  pointer-events: auto;
}

/* 2) Prev / Next: PNGs only, hide injected text glyphs */
.flickr-slideshow .slideshow-controls .prevBtn,
.flickr-slideshow .slideshow-controls .nextBtn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  /* kill any earlier background shorthands */
  background: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 32px 32px !important;
  /* hide any inner text the JS added (‹ ›) */
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}
.flickr-slideshow .slideshow-controls .prevBtn {
  background-image: url('./prev.png') !important;
}
.flickr-slideshow .slideshow-controls .nextBtn {
  background-image: url('./next.png') !important;
}

/* 3) Play / Pause: inside .slideshow-controls, PNGs only */
.flickr-slideshow .slideshow-controls .playPauseBtn {
  position: absolute;            /* position it relative to .flickr-slideshow */
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  z-index: 12;

  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;

  background: none !important;
  background-image: url('./play.png') !important;     /* default: PLAY */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 40px 40px !important;

  /* hide any inner text/nodes */
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}
.flickr-slideshow .slideshow-controls .playPauseBtn.is-playing {
  background-image: url('./pause.png') !important;     /* when playing */
}

/* 4) Just in case: hide any children the JS injects */
.flickr-slideshow .slideshow-controls .prevBtn > *,
.flickr-slideshow .slideshow-controls .nextBtn > *,
.flickr-slideshow .slideshow-controls .playPauseBtn > * {
  display: none !important;
}