/* Keep the destinations in the same full-size composition as the identity so
   every cropped opening block carries its own registered piece of the hero. */
.hero {
  justify-content: space-between;
  gap: clamp(28px, 4vw, 72px);
}

.hero > .hero-identity {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.hero-actions {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex: 0 1 auto;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
}

/* A feathered patch darkens only the image immediately behind the controls.
   No blur layer or separate overlay can drift away from a moving image row. */
.hero-actions::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -38px calc(-1 * min(46px, var(--gutter)));
  background: radial-gradient(ellipse at center, rgba(21, 21, 21, .76) 0%, rgba(21, 21, 21, .44) 42%, rgba(21, 21, 21, 0) 74%);
  pointer-events: none;
}

.hero-actions .button {
  --control-border: #b4b4b4;
  min-width: 106px;
  min-height: 50px;
  max-width: 100%;
  padding: 13px 22px;
  text-align: center;
}

/* Native links keep their hit areas as the image is sliced. Their state is
   mirrored onto the inert visual copies, so each row paints the same control. */
.hero .hero-actions .button:is(.is-hero-hover, .is-hero-focus) {
  color: var(--black);
  border-color: var(--background-white);
}

.hero .hero-actions .button:is(.is-hero-hover, .is-hero-focus)::before {
  transform: scale(1);
  opacity: 1;
}

.hero .hero-actions .button.is-hero-focus {
  outline: 3px solid var(--jaimo-blue-bright);
  outline-offset: 6px;
}

@media (hover: hover) {
  .hero-actions .button.is-hero-hover > .link-label > .label-text { font-size: var(--label-growth); }
}

@media (max-width: 767px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 27px;
  }

  .hero > .hero-identity { flex: 0 0 auto; width: 100%; }
  .hero-actions { align-self: flex-end; flex: 0 0 auto; gap: 10px; }
  .hero-actions::before { inset: -28px -24px; }
  .hero-actions .button { min-width: 100px; min-height: 48px; padding: 11px 18px; }
}

@media (max-width: 359px) {
  .hero-actions { width: 100%; }
  .hero-actions .button { flex: 1 1 90px; min-width: 0; }
}

@media print {
  .hero-actions::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-actions .button.is-hero-hover > .link-label > .label-text { font-size: 1em; }
}