/* AMORA – Hover Panels (3)
   Default: 3 columns.
   Hover: active expands full width, siblings collapse.
   Full width: 100vw even inside container.
   FIX: Force text WHITE (theme override safe)
*/

.amora-hover-panels{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  --ahp-h:560px;
  --ahp-hm:420px;

  position:relative;
}

.amora-hover-panels__track{
  display:flex;
  height:var(--ahp-h);
  overflow:hidden;
}

.amora-hover-panels__panel{
  position:relative;
  flex:1 1 0%;
  min-width:0;
  background:#111;
  background-size:cover;
  background-position:center;
  cursor:pointer;

  transition:
    flex 520ms cubic-bezier(.2,.8,.2,1),
    opacity 420ms ease,
    filter 420ms ease;
}

/* Overlay (keep bottom dark for readability) */
.amora-hover-panels__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.42) 38%,
      rgba(0,0,0,.18) 62%,
      rgba(0,0,0,0) 100%);
  opacity:1;
  transition:opacity 420ms ease;
}

/* Content above overlay */
.amora-hover-panels__content{
  position:absolute;
  left:48px;
  bottom:40px;
  z-index:2;

  display:flex;
  flex-direction:column;
  gap:14px;

  /* subtle backplate */
  padding:14px 16px;
  border-radius:14px;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* FORCE WHITE: prevent theme overriding h3/a colors */
.amora-hover-panels__content,
.amora-hover-panels__content *{
  color:#ffffff !important;
}

/* Title */
.amora-hover-panels__title{
  margin:0 !important;

  font-size:44px;   line-height:1;
  font-weight:800;
  letter-spacing:-0.02em;

  /* pop */
  text-shadow:
    0 2px 10px rgba(0,0,0,.55),
    0 10px 30px rgba(0,0,0,.35);
}

/* Link */
.amora-hover-panels__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  text-decoration:none !important;
  opacity:1 !important;

  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}

.amora-hover-panels__link:after{
  content:"";
  display:block;
  width:36px;
  height:2px;
  background:#ffffff; /* white underline */
  opacity:1;
}

/* Hover overlay: keep strong enough so text stays readable */
.amora-hover-panels__panel:hover .amora-hover-panels__overlay{
  opacity:.96;
}

/* Hover behaviour controlled by JS */
.amora-hover-panels__track.is-hovering .amora-hover-panels__panel{
  flex:0 0 0%;
  opacity:0;
  filter:blur(1px);
  pointer-events:none;
}

.amora-hover-panels__track.is-hovering .amora-hover-panels__panel.is-active{
  flex:1 1 100%;
  opacity:1;
  filter:none;
  pointer-events:auto;
}

/* Responsive */
@media (max-width: 849px){
  .amora-hover-panels__content{
    left:22px;
    bottom:22px;
    padding:12px 14px;
    border-radius:12px;
    background: rgba(0,0,0,.20);
  }
 .amora-hover-panels__title{
    font-size:34px;
  }
}

@media (max-width: 549px){
  .amora-hover-panels__track{ height:var(--ahp-hm); }

  .amora-hover-panels__content{
    left:18px;
    bottom:18px;
    padding:10px 12px;
    border-radius:12px;
    background: rgba(0,0,0,.22);
  }
  .amora-hover-panels__title{ font-size:40px; }

  /* Mobile: do NOT fully hide siblings */
  .amora-hover-panels__track.is-hovering .amora-hover-panels__panel{
    flex:1 1 0%;
    opacity:.58;
    filter:none;
    pointer-events:auto;
  }
  .amora-hover-panels__track.is-hovering .amora-hover-panels__panel.is-active{
    flex:2.2 1 0%;
    opacity:1;
  }
 .amora-hover-panels__title{
    font-size:26px;
  }
}

/* UX Builder safety: disable full-bleed inside builder iframe */
body.ux-builder .amora-hover-panels{
  width:100%;
  margin-left:0;
  margin-right:0;
}