/* TGA Galleries
   Minimal plugin CSS to avoid fighting WP Additional CSS.
   Includes:
   - minimal base rules for gallery images
   - PhotoSwipe UI outline neutralization
   - Front/Tag gallery thumbnail ribbon tone switching (bottom-area classifier)
*/

/* --- Minimal base --- */
.tga-gallery a { display: inline-block; }
.tga-gallery img { display:block; height:auto; }

/* ============================================================
   PhotoSwipe UI: neutralize global TGA focus/outline styles
   ============================================================ */
.pswp button,
.pswp a,
.pswp__button{
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.pswp button:focus,
.pswp a:focus,
.pswp__button:focus,
.pswp button:focus-visible,
.pswp a:focus-visible,
.pswp__button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* If your global CSS sets border radius / background / text color */
.pswp__button{
  background: transparent !important;
  border-radius: 0 !important;
}

/* ============================================================
   Front + Tag gallery ribbon tone switching
   - JS adds: a.tga-tone-dark / a.tga-tone-light (based on bottom ~30% brightness)
   - Dark bottom  => lilac text + translucent white ribbon
   - Light bottom => orange text + translucent black ribbon

   IMPORTANT:
   The ribbon must OVERLAY the bottom of the image, not sit below it.
   So we force positioning here (absolute inside the <a>).
   ============================================================ */

/* Fallbacks if CSS vars are not defined elsewhere */
:root{
  --tga-orange: #ff9900;
  --tga-lilac:  #7a1b8d;
}

/* Ensure the thumbnail wrapper is a positioning context */
.tga-front-gallery a{
  position: relative !important;
  display: block;
  overflow: hidden; /* keeps the ribbon clipped to rounded corners */
}

/* Make sure thumbnails behave predictably */
.tga-front-gallery img{
  display: block;
  width: 100%;
  height: auto;
}

/* The overlay container must sit ON TOP of the image */
.tga-front-gallery .tga-front-overlay{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 2 !important;

  width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none; /* keeps clicks going to the <a> */
}

/* Kill legacy “double ribbon” implementations if present */
.tga-front-gallery .tga-front-overlay::before,
.tga-front-gallery .tga-front-overlay span::before{
  content: none !important;
  background: transparent !important;
}

/* Full-width ribbon strip */
.tga-front-gallery .tga-front-overlay span{
  display: block;
  width: 100%;
  box-sizing: border-box;

  /* Ribbon height */
  padding: 6px 14px;

  /* Typography */
  text-transform: uppercase;
  letter-spacing: 0.06em;

  /* Default (overridden by tone classes) */
  background: rgba(0,0,0,0.55) !important;
  color: var(--tga-orange) !important;

  font-weight: 300;
  line-height: 1.2;
}

/* Dark-bottom image -> light ribbon + lilac text (slightly heavier for readability) */
.tga-front-gallery a.tga-tone-dark .tga-front-overlay span{
  background: rgba(255,255,255,0.55) !important;
  color: var(--tga-lilac) !important;
  font-weight: 390;
}

/* Light-bottom image -> dark ribbon + orange text */
.tga-front-gallery a.tga-tone-light .tga-front-overlay span{
  background: rgba(0,0,0,0.55) !important;
  color: var(--tga-orange) !important;
  font-weight: 300;
}