/* ==========================================================
   Hover Gallery element for Avada (plugin stylesheet)
   All selectors are scoped under .hover-gallery so Avada's
   global h3 / ul / li / p / a / button / img styles don't leak in.
   ========================================================== */

.hover-gallery{
  --hg-item:rgba(10,10,10,.5);
  --hg-active:#000;
  --hg-border:rgba(10,10,10,.18);
  --hg-ink:#15022A;
  --hg-speed:.5s;
  --hg-font:"Poppins",var(--body_typography-font-family,system-ui),-apple-system,"Segoe UI",sans-serif;
  position:relative;display:flex;align-items:stretch;justify-content:flex-start;
  width:100%;max-width:1200px;margin:0 auto;height:var(--hg-height,600px);
  overflow:hidden;background:#111;isolation:isolate;
  font-family:var(--hg-font);box-sizing:border-box;
}
.hover-gallery *,.hover-gallery *::before,.hover-gallery *::after{box-sizing:border-box}

/* Background images */
.hover-gallery .hover-gallery__bg{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;
  object-fit:cover;opacity:0;transform:translateX(-40px);z-index:-1;
  transition:opacity var(--hg-speed) ease,transform var(--hg-speed) ease;
}
.hover-gallery .hover-gallery__bg.is-active{opacity:1;transform:none;z-index:0}

/* Item list */
.hover-gallery .hover-gallery__list{
  list-style:none;margin:0;padding:0;width:var(--hg-list-w,340px);
  display:flex;flex-direction:column;position:relative;z-index:1;
}
.hover-gallery .hover-gallery__item{
  flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:center;
  margin:0;padding:0 30px;list-style:none;color:#fff;
  background:var(--hg-item);border-bottom:1px solid var(--hg-border);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background-color var(--hg-speed) ease,flex-grow var(--hg-speed) ease;
}
.hover-gallery .hover-gallery__item:last-child{border-bottom:0}
.hover-gallery .hover-gallery__item.is-active{flex-grow:2.4;background:var(--hg-active)}
.hover-gallery .hover-gallery__item:hover,
.hover-gallery .hover-gallery__item.is-active:hover{background:var(--hover,#000d21)}

/* Title / trigger */
.hover-gallery .hover-gallery__title{margin:0;padding:0;font:700 22px/1.2 var(--hg-font);color:#fff}
.hover-gallery .hover-gallery__trigger{
  all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;
  padding:12px 0;color:#fff;font:700 22px/1.2 var(--hg-font);text-align:left;
}
.hover-gallery .hover-gallery__trigger:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Description panel */
.hover-gallery .hover-gallery__panel{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--hg-speed) ease,opacity var(--hg-speed) ease;
}
.hover-gallery .hover-gallery__item.is-active .hover-gallery__panel{grid-template-rows:1fr;opacity:1}
.hover-gallery .hover-gallery__panel-inner{overflow:hidden;min-height:0}
.hover-gallery .hover-gallery__text,
.hover-gallery .hover-gallery__text p{margin:0 0 14px;padding:0;font-size:12px;line-height:1.7;font-weight:400;color:#fff}

/* Arrow button */
.hover-gallery .hover-gallery__btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 30px;height:36px;color:#fff;border:1px solid #fff;text-decoration:none;
  transition:background-color .3s,color .3s,padding .3s;
}
.hover-gallery .hover-gallery__btn:hover,
.hover-gallery .hover-gallery__btn:focus-visible{background:#fff;color:var(--hg-ink);padding:3px 38px 3px 30px}
.hover-gallery .hover-gallery__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Tablet (match to your Avada breakpoints if you changed them) */
@media (max-width:1024px){
  .hover-gallery{height:auto;min-height:560px;align-items:center}
  .hover-gallery .hover-gallery__list{width:50%}
  .hover-gallery .hover-gallery__item{flex:none;padding:14px 24px}
  .hover-gallery .hover-gallery__item.is-active{flex-grow:0}
}
/* Mobile */
@media (max-width:640px){
  .hover-gallery{justify-content:center;min-height:520px}
  .hover-gallery .hover-gallery__list{width:70%}
}
@media (prefers-reduced-motion:reduce){
  .hover-gallery,.hover-gallery *{transition:none!important}
}