/**
 * PhotoSwipe custom styles for Soroptimist Lviv
 *
 * Requires photoswipe.css to be loaded first.
 * Styles the custom download button and responsive behavior.
 */

/* ── Download button (top bar) ─────────────────────────────────────────────── */
/* PhotoSwipe gives custom buttons the class .pswp__button--<name> */
.pswp__button--download-button {
  /* keep the native PhotoSwipe button sizing/transition */
}

/* The SVG icon uses .pswp__icn; inherit PhotoSwipe's icon colour logic */
.pswp__button--download-button .pswp__icn {
  /* inherits currentColor; no override needed */
}

/* ── Desktop (default): subtle download button, matches zoom/close ─────────── */
@media (min-width: 769px) {
  .pswp__button--download-button {
    opacity: 0.85;
  }
  .pswp__button--download-button:hover {
    opacity: 1;
  }
}

/* ── Mobile (incl. iPhone): make the download button prominent ─────────────── */
@media (max-width: 768px) {
  /* PhotoSwipe top-bar buttons are 44px; bump the download button's tap area
     and give it a clear accent so it's easy to find on a phone. */
  .pswp__button--download-button {
    background: rgba(74, 144, 226, 0.65) !important;
    border-radius: 8px;
    opacity: 1;
  }

  .pswp__button--download-button:active {
    background: rgba(74, 144, 226, 0.9) !important;
  }
}

/* ── Small phones: keep controls from overlapping ──────────────────────────── */
@media (max-width: 480px) {
  /* PhotoSwipe auto-sizes the top bar; ensure the download icon scales down a
     touch so counter / zoom / download / close all fit comfortably. */
  .pswp__button--download-button .pswp__icn {
    transform: scale(0.9);
    transform-origin: center;
  }
}

/* ── Ensure the close/zoom/download buttons are visible above the image ────── */
/* PhotoSwipe's top bar already sits above slides; this is a safety net for the
   custom accent background so it reads well over any photo. */
.pswp--soroptimist .pswp__top-bar {
  /* keep default; documented intent only */
}