/*
  "AI-generated image" label, bottom-left on every photo generated with AI
  (point 7 of the Oct 2026 redesign). Plain small white text with a soft shadow,
  no background. Its parent must be positioned: the Highlights cards and the
  Layo photo frames already are; FinPlus gallery images get a .ai-frame wrapper.
  In Highlights it hides while the hover overlay (project name) is showing.
*/
.ai-frame {
  position: relative;
  display: block;
}

.ai-label {
  position: absolute;
  left: clamp(8px, 0.73vw, 14px);
  bottom: clamp(6px, 0.6vw, 12px);
  z-index: 2;
  color: #fff;
  font-family: var(--font-regular);
  font-size: clamp(10px, 0.68vw, 13px);
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-standard);
}

.highlights__card:hover .ai-label {
  opacity: 0;
}

/* Layo overview: the phone mockup covers the photo's bottom-left corner
   (phone body ends ~206u into the photo), so the label sits just past it. */
.layo-overview__photo .ai-label {
  left: calc(226 * var(--u));
}
@media (max-width: 767px) {
  /* phones stack the mockup under the photo, centred: the corner is free */
  .layo-overview__photo .ai-label {
    left: 12px;
    bottom: 8px;
  }
}