/* ==========================================================================
   FLICKR SLIDESHOW — clean version (no Info button, centred play)
   ========================================================================== */

.flickr-slideshow {
  position: relative;
  width: 100%;
  max-width: 2000px;
  overflow: hidden;
  background: #000;
  user-select: none;
  border-radius: 10px;
}

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

/* Slides */
.flickr-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms ease-in-out;
}
.flickr-slideshow img.show { opacity: 1; }

/* Controls layer */
.slideshow-controls {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

/* Buttons */
.slideshow-controls .prevBtn,
.slideshow-controls .nextBtn {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
}

/* Prev / Next placement */
.slideshow-controls .prevBtn {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.slideshow-controls .nextBtn {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Play/Pause centring via wrapper */
.slideshow-controls .playPauseWrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 11;
}
/* --- Move Play/Pause button to bottom center ------------------- */
.flickr-slideshow .slideshow-controls .playPauseBtn {
  position: absolute !important;
  left: 50% !important;
  bottom: 20px !important;      /* adjust for exact vertical spacing */
  transform: translateX(-50%) !important;
  z-index: 12 !important;

  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(0px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
  transition: background 0.2s ease, opacity 0.2s ease;
}

/* Hover brighten */
@media (hover:hover) {
  .flickr-slideshow .slideshow-controls .playPauseBtn:hover {
    background: rgba(0,0,0,0.75);
  }
}

/* When playing */
.flickr-slideshow .slideshow-controls .playPauseBtn.is-playing {
  opacity: 0.9;
}


/* Icon files */
.slideshow-controls .prevBtn { background-image: url('./prev.png'); }
.slideshow-controls .nextBtn { background-image: url('./next.png'); }
.slideshow-controls .playPauseBtn { background-image: url('./play.png'); }
.slideshow-controls .playPauseBtn.is-playing { background-image: url('./pause.png'); }

/* Overlay (title/description only) */
.fs-meta-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 12px 14px 1px;
  color: #999;
  transform: translateY(0%);
  transition: transform 220ms ease;
  will-change: transform;
}
.fs-meta {
font-family: "helvetica-neue-lt-pro", sans-serif;  line-height: normal;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}


/* Overlay visibility modes */
.flickr-slideshow[data-show-meta="hover"] .fs-meta-wrap {
  transform: translateY(100%);
}
.flickr-slideshow[data-show-meta="hover"]:hover .fs-meta-wrap {
  transform: translateY(0%);
}
.flickr-slideshow[data-show-meta="toggle"] .fs-meta-wrap {
  transform: translateY(100%);
}
.flickr-slideshow[data-show-meta="toggle"].meta-open .fs-meta-wrap {
  transform: translateY(0%);
}

@media (max-height:420px) {
  .fs-desc { -webkit-line-clamp: 2; }
}

/* 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: 01rem;
  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;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}

/* 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, #111 0%, #111 100%);
  border: 1px solid #444;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.25),
    0 3px 2px 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, #222 0%, #111 100%);
  box-shadow:
    inset 0 0px 1px rgba(255,255,255,0.3),
    0 3px 2px 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;
}

/* --- 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%;
  background: none !important;               /* kill any earlier background shorthands */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 32px 32px !important;
  color: transparent !important;             /* hide any inner text the JS added (‹ ›) */
  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;
  color: transparent !important;                  /* hide any inner text/nodes */
  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;
}

/* --- Force-reset any old play button positioning ----------------------- */
.slideshow-controls .playPauseBtn {
  position: static !important;  /* grid centers it */
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* --- Center the play button, but keep a bottom safe area for the title --- */
.slideshow-controls .playPauseWrap {
  position: absolute;
  /* Reserve space at the bottom so the button never overlaps the overlay */
  --overlay-safe: 0px;             /* tweak to match your overlay height */
  inset: 0 0 var(--overlay-safe) 0; /* shrink the centering box vertically */
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 11;
}

/* Button itself (clickable) */
.slideshow-controls .playPauseWrap .playPauseBtn {
  pointer-events: auto;
  width: 54px;
  height: 54px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(0px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

/* Optional: when overlay is visible (toggle mode), dim the button a bit */
.flickr-slideshow.meta-open .playPauseWrap .playPauseBtn {
  opacity: .75;
}

/* Optional: auto-dim while playing; reveal on hover/tap */
.slideshow-controls .playPauseWrap .playPauseBtn.is-playing { opacity: 0.0; }
.flickr-slideshow:hover .slideshow-controls .playPauseWrap .playPauseBtn.is-playing { opacity: .9; }

/* Keep prev/next where you had them */
.slideshow-controls .prevBtn {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.slideshow-controls .nextBtn {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* Title + description */
.fs-meta { }

.fs-title {
  font-family: "Helvetica Neue LT Pro", Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-transform: none;
  font-size: 16px;
  color: #EEE;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.9);
    margin-bottom: 0px;
}

.fs-desc {
  margin-top: 0px;
  padding-left: 5px;
  font-size: 11px;
  line-height: normal;
  max-width: 80ch;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.9);
  color: #EEE;
}

/* Kill any stray lines around the overlay title/caption */
.fs-meta-wrap,
.fs-meta,
.fs-title {
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Remove any divider pseudo-elements, if defined elsewhere */
.fs-title::before,
.fs-title::after,
.fs-meta::before,
.fs-meta::after,
.fs-meta-wrap::before,
.fs-meta-wrap::after {
  content: none !important;
  display: none !important;
}

/* If a text-shadow is creating a “hairline”, kill it */
.fs-title,
.fs-desc,
.fs-meta { }