/* Use theme variables (Astra/global) wherever possible */
.epi-gnss-ls{
  --text: var(--ast-global-color-3, var(--global-palette7, #e6e6e6));
  --head: var(--ast-global-color-2, var(--global-palette2, #ffffff));
  --muted: var(--ast-global-color-4, var(--global-palette5, #a0a0a0));
  --card: var(--ast-global-color-6, rgba(255,255,255,0.04));
  color: var(--text);
  background: transparent;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1rem;
  font-family: var(--ast-global-font-family, inherit);
  line-height: var(--ast-global-line-height, 1.7);
}

.epi-gnss-ls-heading{
  color: var(--head);
  font-weight: var(--ast-heading-font-weight, 700);
  font-family: var(--ast-heading-font-family, inherit);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  text-align: center;
  margin: 0 0 0.75rem 0;
}

.epi-gnss-ls-intro{
  max-width: 840px;
  margin: 0 auto 2.2rem;
  text-align: center;
  font-size: 1.1rem;
  color: var(--text);
}

.epi-gnss-ls-hero{
  max-width: 1000px;
  margin: 0 auto 2.5rem;
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.epi-gnss-ls-hero img{ width: 100%; height: auto; display:block; }
.epi-gnss-ls-hero-cap{
  padding: .5rem .75rem 1rem;
  color: var(--muted);
  font-size: .95rem;
  text-align: center;
}

.epi-gnss-ls-paragraph{
  max-width: 820px;
  margin: 0 auto 1.5rem;
  font-size: 1.05rem;
  color: var(--text);
}

.epi-gnss-ls-gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.75rem;
}

.epi-gnss-ls-thumb{
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,0.22);
  transition: transform .3s ease, box-shadow .3s ease;
}
.epi-gnss-ls-thumb:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.3);
}
.epi-gnss-ls-thumb img{ width:100%; height:auto; display:block; }
.epi-gnss-ls-thumb-title{
  padding: .65rem .8rem 1rem;
  font-size: .95rem;
  text-align: center;
  color: var(--muted);
}

/* Lightbox */
.epi-gnss-ls-lightbox[hidden]{ display:none !important; }
.epi-gnss-ls-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: grid;
  place-items: center;
  z-index: 9999;
  padding: 2rem;
}
.epi-gnss-ls-lightbox img{
  max-width: min(1000px, 90vw);
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.epi-gnss-ls-close{
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--card);
  color: var(--head);
  border: none;
  font-size: 2rem;
  line-height: 1;
  padding: .25rem .6rem;
  border-radius: 10px;
  cursor: pointer;
}
.epi-gnss-ls-lightbox-title{
  color: var(--head);
  margin-top: .75rem;
  text-align: center;
}

@media (max-width: 980px){
  .epi-gnss-ls-gallery{ grid-template-columns: 1fr; }
}


/* === GNSS Page Image Background Alignment === */
.epi-gnss-ls img,
.epi-gnss-section img,
.epi-gnss-ls-thumb img,
.epi-gnss-figure img {
  background: var(--ast-global-color-1, var(--global-palette1, #0d1117)) !important;
  border-radius: 0;
  display: block;
}

.epi-gnss-ls-thumb,
.epi-gnss-figure,
.epi-gnss-ls-hero {
  background: var(--ast-global-color-1, var(--global-palette1, #0d1117)) !important;
  box-shadow: none;
}

.epi-gnss-ls-thumb:hover,
.epi-gnss-figure:hover {
  background: var(--ast-global-color-1, var(--global-palette1, #0d1117)) !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
}


/* === Fix: exact background blend & remove grey cards === */
.epi-gnss-ls-hero,
.epi-gnss-ls-thumb,
.epi-gnss-figure {
  background: transparent !important;
  box-shadow: none !important;
}

/* Images themselves should not carry any background fill */
.epi-gnss-ls img,
.epi-gnss-ls-thumb img,
.epi-gnss-figure img {
  background: transparent !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* Optional: keep rounded corners only if image has transparency */
.epi-gnss-ls-hero,
.epi-gnss-ls-thumb,
.epi-gnss-figure {
  border-radius: 16px;
}

/* Remove padding that could reveal different bg behind transparent images */
.epi-gnss-ls-hero,
.epi-gnss-ls-thumb,
.epi-gnss-figure {
  padding: 0 !important;
}