/* ============================================================
   Signature Homeworx — Picture Button widget.
   Brand tokens below; every adjustable value arrives as a
   --shxpb-* custom property (or direct CSS) written onto the
   wrapper by Elementor-generated CSS from the widget controls.
   No JavaScript: all motion is CSS :hover / :focus-visible.
   ============================================================ */
.shx-pb {
  --shxpb-navy: #0D0040;
  --shxpb-font: 'Outfit', system-ui, sans-serif;
  --shxpb-width: 100%;
  --shxpb-ratio-w: 4;
  --shxpb-ratio-h: 3;
  --shxpb-radius: 12px;
  --shxpb-title-color: #ffffff;
  --shxpb-icon-size: 20px;
  --shxpb-icon-color: #ffffff;
  --shxpb-icon-offset: 16px;
  --shxpb-chip-radius: 50px;
  --shxpb-scrim: rgba(13, 0, 64, 0.55);
  --shxpb-scrim-h: 50%;
  --shxpb-zoom: 1.08;
  --shxpb-nudge: 4px;
  --shxpb-lift: 4px;
  --shxpb-speed: 250ms;
  display: block;
  width: var(--shxpb-width);
  font-family: var(--shxpb-font);
  text-decoration: none;
  transition: transform var(--shxpb-speed) ease;
}

a.shx-pb { cursor: pointer; }

.shx-pb:hover,
.shx-pb:focus-visible {
  transform: translateY(calc(var(--shxpb-lift) * -1));
}
.shx-pb:focus-visible {
  outline: 2px solid var(--shxpb-title-color);
  outline-offset: 3px;
}

.shx-pb__frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--shxpb-ratio-w, 4) / var(--shxpb-ratio-h, 3);
  border-radius: var(--shxpb-radius);
  transition: box-shadow var(--shxpb-speed) ease;
}

.shx-pb__frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform var(--shxpb-speed) ease, opacity var(--shxpb-speed) ease, filter var(--shxpb-speed) ease;
}
.shx-pb:hover .shx-pb__frame img,
.shx-pb:focus-visible .shx-pb__frame img {
  transform: scale(var(--shxpb-zoom));
}

/* Scrim: base gradient, with a hover-color twin cross-faded on top
   (gradients can't transition; opacity can) */
.shx-pb__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--shxpb-scrim-h);
  background: linear-gradient(to top, var(--shxpb-scrim), transparent);
  pointer-events: none;
}
.shx-pb__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--shxpb-scrim-hover, var(--shxpb-scrim)), transparent);
  opacity: 0;
  transition: opacity var(--shxpb-speed) ease;
}
.shx-pb:hover .shx-pb__scrim::after,
.shx-pb:focus-visible .shx-pb__scrim::after {
  opacity: 1;
}

.shx-pb__title {
  position: absolute;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  max-width: calc(100% - 2 * var(--shxpb-icon-size) - var(--shxpb-icon-offset) - 8px);
  padding: 20px;
  color: var(--shxpb-title-color);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: break-word;
  transition: color var(--shxpb-speed) ease;
}
.shx-pb:hover .shx-pb__title,
.shx-pb:focus-visible .shx-pb__title {
  color: var(--shxpb-title-hover, var(--shxpb-title-color));
}

.shx-pb__icon {
  position: absolute;
  right: var(--shxpb-icon-offset);
  bottom: var(--shxpb-icon-offset);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em;
  font-size: var(--shxpb-icon-size);
  line-height: 1;
  color: var(--shxpb-icon-color);
  background: var(--shxpb-chip-bg, transparent);
  border-radius: var(--shxpb-chip-radius);
  transition: transform var(--shxpb-speed) ease, color var(--shxpb-speed) ease, background-color var(--shxpb-speed) ease;
}
.shx-pb__icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.shx-pb:hover .shx-pb__icon,
.shx-pb:focus-visible .shx-pb__icon {
  transform: translateX(var(--shxpb-nudge));
  color: var(--shxpb-icon-hover, var(--shxpb-icon-color));
}

@media (prefers-reduced-motion: reduce) {
  .shx-pb,
  .shx-pb__frame,
  .shx-pb__frame img,
  .shx-pb__scrim::after,
  .shx-pb__title,
  .shx-pb__icon {
    transition: none !important;
  }
  .shx-pb:hover,
  .shx-pb:focus-visible,
  .shx-pb:hover .shx-pb__frame img,
  .shx-pb:focus-visible .shx-pb__frame img,
  .shx-pb:hover .shx-pb__icon,
  .shx-pb:focus-visible .shx-pb__icon {
    transform: none;
  }
}