/* EB Hover Panels */

.eb-hover-panels {

  width: 100%;
  max-width: 100%;
  margin: 0;

  /* CSS vars (defaults overridden via inline style on shortcode output) */
  --bg: url("");
  --radius: 18px;
  --gap: 14px;

  --overlayColor: #0a0c0e;
  --overlayOpacity: 0.55;

  --text: #ffffff;
  --mutedOpacity: 0.82;

  --button: #d3a133;
  --buttonText: #ffffff;

  --panelMin: 92px;
  --panelOpen: 3.6;

  --logoSize: 64px;
  --labelSize: 18px;
  --titleSize: 38px;
  --descSize: 17px;

  --btnW: 220px;
  --btnH: 52px;
  --btnRadius: 12px;
  --btnFontSize: 16px;

  --desktopH: 420px;
  --mobileCollapsedH: 110px;
  --mobileOpenH: 420px;
}

.eb-hover-panels__wrap {
  width: 100%;
  display: flex !important;
  gap: var(--gap);
  min-height: var(--desktopH);
  border-radius: var(--radius);
}

/* Panel */
.eb-hover-panels .ebhp-panel {
  position: relative;
  flex: 1 1 0;
  min-width: var(--panelMin);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transform: translateZ(0);
  transition: flex 420ms cubic-bezier(.2,.8,.2,1), filter 420ms cubic-bezier(.2,.8,.2,1);
  will-change: flex;

  background-image: var(--panelBg, var(--bg));
  background-size: cover;
  background-position: center;
}

.eb-hover-panels .ebhp-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlayColor);
  opacity: var(--overlayOpacity);
}

/* Alignment */
.eb-hover-panels .ebhp-align-left .ebhp-panel__content { text-align: left; align-items: flex-start; }
.eb-hover-panels .ebhp-align-center .ebhp-panel__content { text-align: center; align-items: center; }
.eb-hover-panels .ebhp-align-right .ebhp-panel__content { text-align: right; align-items: flex-end; }

/* Label area (collapsed state) */
.eb-hover-panels .ebhp-panel__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  color: var(--text);
  z-index: 2;
  pointer-events: none;
}

.eb-hover-panels .ebhp-panel__labelInner {
  display: grid;
  place-items: center;
  gap: 12px;
  transition: transform 260ms ease;
  transform: translateY(0);
}

.eb-hover-panels .ebhp-panel__logo img {
  width: var(--logoSize);
  height: var(--logoSize);
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

.eb-hover-panels .ebhp-panel__labelText {
  font-size: var(--labelSize);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Expanded content */
.eb-hover-panels .ebhp-panel__content {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 12px;
  padding: 34px;
  padding-top: calc(34px + var(--logoSize) + 18px);

  color: var(--text);

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}

.eb-hover-panels .ebhp-panel__content h3 {
  color: var(--text) !important;

  margin: 0;
  font-size: var(--titleSize);
  line-height: 1.05;
  letter-spacing: -0.4px;
  text-shadow: 0 14px 30px rgba(0,0,0,.35);

  box-sizing: border-box;
  padding: var(--titlePadT, 0px) var(--titlePadR, 0px) var(--titlePadB, 0px) var(--titlePadL, 0px);
}

.eb-hover-panels .ebhp-panel__content p {
  margin: 0;
  font-size: var(--descSize);
  line-height: 1.55;
  color: rgba(255,255,255,var(--mutedOpacity));
  box-sizing: border-box;
  padding: var(--descPadT, 0px) var(--descPadR, 0px) var(--descPadB, 0px) var(--descPadL, 0px);
  max-width: 52ch;
  text-shadow: 0 12px 26px rgba(0,0,0,.25);

}

.eb-hover-panels .ebhp-panel__btnWrap {
  box-sizing: border-box;
  padding: var(--btnPadT, 0px) var(--btnPadR, 0px) var(--btnPadB, 0px) var(--btnPadL, 0px);
}

/* Button */
.eb-hover-panels .ebhp-panel .ebhp-panel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--btnW) !important;
  max-width: 100%;
  height: var(--btnH) !important;
  border-radius: var(--btnRadius);
  font-size: var(--btnFontSize);

  box-sizing: border-box;
  padding: 0 18px !important;

  border: 0 !important;
  background-image: none !important;

  background: var(--btnBg, var(--button)) !important;
  background-color: var(--btnBg, var(--button)) !important;
  color: var(--btnText, var(--buttonText)) !important;

  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  transition: transform 180ms ease, filter 180ms ease;
  pointer-events: auto;
}

.eb-hover-panels .ebhp-panel .ebhp-panel__btn.is-disabled {
  opacity: 0.85;
  cursor: default;
}

/* Desktop hover behaviour */
@media (min-width: 982px) {
  .eb-hover-panels .ebhp-panel:hover,
  .eb-hover-panels .ebhp-panel.is-open {
    flex: var(--panelOpen);
    filter: saturate(1.05);
  }

  .eb-hover-panels .ebhp-panel:hover .ebhp-panel__labelInner,
  .eb-hover-panels .ebhp-panel.is-open .ebhp-panel__labelInner {
    transform: translateY(calc(-1 * ( (var(--logoSize) / 2) + 34px )));
  }

  .eb-hover-panels .ebhp-panel:hover .ebhp-panel__content,
  .eb-hover-panels .ebhp-panel.is-open .ebhp-panel__content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .eb-hover-panels .ebhp-panel__hint { display: none !important; }
}

/* Mobile / tablet */
@media (max-width: 981px) {
  .eb-hover-panels__wrap {
    flex-direction: column;
    min-height: auto;
  }

  .eb-hover-panels .ebhp-panel {
    min-width: 100%;
    min-height: var(--mobileCollapsedH);
    transition: min-height 360ms cubic-bezier(.2,.8,.2,1);
  }

  .eb-hover-panels .ebhp-panel__content {
    padding: 22px;
    padding-top: calc(22px + var(--logoSize) + 16px);

    justify-content: center;
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    transition: opacity 260ms ease, transform 260ms ease;
  }

  .eb-hover-panels .ebhp-panel.is-open {
    min-height: var(--mobileOpenH);
  }

  .eb-hover-panels .ebhp-panel.is-open .ebhp-panel__logo {
    display: none;
  }

  .eb-hover-panels .ebhp-panel.is-open .ebhp-panel__labelInner {
    transform: translateY(calc(-1 * ( (var(--logoSize) / 2) + 36px )));
  }

  .eb-hover-panels .ebhp-panel.is-open .ebhp-panel__content {
    padding-top: 22px;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
}

/* Mobile hint */
@media (max-width: 981px) {
  .eb-hover-panels .ebhp-panel__hint {
    margin-top: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.92);

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 12px;
    border-radius: 999px;

    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.14);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow: 0 12px 26px rgba(0,0,0,.22);

    animation: ebhpHintFloat 1.7s ease-in-out infinite;
  }

  .eb-hover-panels .ebhp-panel__hintDot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.95);
    opacity: 0.95;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.35);
    animation: ebhpDot 1.7s ease-in-out infinite;
  }

  .eb-hover-panels .ebhp-panel.is-hint-dismissed .ebhp-panel__hint { display: none; }
  .eb-hover-panels .ebhp-panel.is-open .ebhp-panel__hint { display: none; }

  @keyframes ebhpHintFloat {
    0%, 100% { transform: translateY(0); opacity: 0.92; }
    50% { transform: translateY(-2px); opacity: 1; }
  }

  @keyframes ebhpDot {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.35); }
    50% { box-shadow: 0 0 0 10px rgba(255,255,255,0.00); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.00); }
  }
}

/* Focus */
.eb-hover-panels .ebhp-panel:focus-visible {
  outline: 3px solid rgba(255,255,255,0.7);
  outline-offset: 4px;
}


/* Group option: hide titles */
.eb-hover-panels.ebhp-hide-titles .ebhp-panel__content h3 { display: none !important; }

/* Prevent theme margins from fighting alignment */
.eb-hover-panels .ebhp-panel__content p { margin-left: 0; margin-right: 0; }


/* Mobile hint position override */
@media (max-width: 981px) {
  .eb-hover-panels .ebhp-panel__label {
    padding: 0 !important;
    display: block !important;
  }

  .eb-hover-panels .ebhp-panel__labelInner {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .eb-hover-panels .ebhp-panel__hint {
    position: absolute !important;
    left: 50% !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    margin-top: 0 !important;
  }

}


/* When titles are hidden, tighten spacing so logo sits closer to body text */
.eb-hover-panels.ebhp-hide-titles .ebhp-panel__content {
  padding-top: calc(34px + var(--logoSize) + 2px);
}

@media (min-width: 982px) {
  .eb-hover-panels.ebhp-hide-titles .ebhp-panel:hover .ebhp-panel__labelInner,
  .eb-hover-panels.ebhp-hide-titles .ebhp-panel.is-open .ebhp-panel__labelInner {
    transform: translateY(calc(-1 * ( (var(--logoSize) / 2) + 18px )));
  }
}

@media (max-width: 981px) {
  .eb-hover-panels.ebhp-hide-titles .ebhp-panel__content {
    margin-top: 0;
    padding-top: calc(22px + var(--logoSize) + 2px);
  }

  .eb-hover-panels.ebhp-hide-titles .ebhp-panel.is-open .ebhp-panel__content {
    padding-top: 22px;
  }

  .eb-hover-panels.ebhp-hide-titles .ebhp-panel.is-open .ebhp-panel__labelInner {
    transform: translateY(calc(-1 * ( (var(--logoSize) / 2) + 18px )));
  }
}

.eb-hover-panels .ebhp-panel .ebhp-panel__btn:hover {
  transform: translateY(-1px);
  background: var(--btnBgHover, var(--btnBg, var(--button))) !important;
  background-color: var(--btnBgHover, var(--btnBg, var(--button))) !important;
}

.eb-hover-panels .ebhp-panel .ebhp-panel__btn.is-disabled:hover {
  transform: none;
}