/* One optical scale for public photo marks and Studio photo controls. */
:root {
  --photo-mark-size: 32px;
  --photo-mark-icon: 20px;
  --photo-mark-inset: 12px;
  --photo-mark-gap: 12px;
  --photo-mark-color: #f3f4f2;
  --photo-mark-bg: transparent;
  --photo-mark-border: transparent;
}
.photo-heart,
.photo-like-mark,
.masonry-item-stock,
.masonry-item[data-featured="true"]::after,
.portrait-frame[data-featured="true"]::after,
.featured-item .featured-item-mark,
.iadmin-photo-marks .iadmin-photo-btn,
.featured-photo-card .featured-photo-toggle {
  box-sizing: border-box;
  width: var(--photo-mark-size);
  height: var(--photo-mark-size);
  min-width: var(--photo-mark-size);
  min-height: var(--photo-mark-size);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--photo-mark-color);
  background: var(--photo-mark-bg);
  box-shadow: none;
  filter: drop-shadow(0 1px 2px #0006);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: none;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}
.photo-heart,
.photo-like-mark,
.masonry-item-stock,
.masonry-item[data-featured="true"]::after,
.portrait-frame[data-featured="true"]::after,
.masonry-item.has-description[data-featured="true"]::after,
.featured-item .featured-item-mark,
.featured-photo-card .featured-photo-toggle {
  position: absolute;
  top: auto;
  bottom: var(--photo-mark-inset);
  right: var(--photo-mark-inset);
  z-index: 3;
}
.masonry-item[data-featured="true"]:has(.photo-heart,.masonry-item-stock)::after {
  right: calc(var(--photo-mark-inset) + var(--photo-mark-size) + var(--photo-mark-gap));
}
.masonry-item[data-featured="true"]::after,
.portrait-frame[data-featured="true"]::after,
.featured-item .featured-item-mark {
  background-image: url('/css/icons/photo-featured.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--photo-mark-icon);
  pointer-events: none;
}
.photo-heart .heart-icon,
.photo-like-mark::before,
.masonry-item-stock::before,
.iadmin-photo-marks .iadmin-feature-btn::before,
.iadmin-photo-marks .iadmin-stock-btn::before,
.featured-photo-toggle::before,
.likes-photo-count .likes-heart {
  content: '';
  display: inline-block;
  width: var(--photo-mark-icon);
  height: var(--photo-mark-icon);
  flex: 0 0 var(--photo-mark-icon);
  background: currentColor;
  font-size: 0;
  line-height: 0;
  transform: none;
  mask: var(--photo-mark-image) center / contain no-repeat;
  -webkit-mask: var(--photo-mark-image) center / contain no-repeat;
}
.photo-heart .heart-icon { --photo-mark-image: url('/css/icons/photo-like.svg'); color: rgba(255,255,255,.46); }
.photo-heart.liked .heart-icon,
.photo-like-mark::before,
.likes-photo-count .likes-heart { --photo-mark-image: url('/css/icons/photo-like.svg'); color: #fff; }
.masonry-item-stock::before,
.iadmin-stock-btn::before { --photo-mark-image: url('/css/icons/photo-stock.svg'); }
.iadmin-feature-btn::before,
.featured-photo-toggle::before { --photo-mark-image: url('/css/icons/photo-featured.svg'); }
.photo-heart:hover .heart-icon,
.photo-heart:active .heart-icon { transform: none; }
.photo-heart:hover,
.iadmin-photo-marks .iadmin-photo-btn:hover,
.featured-photo-card .featured-photo-toggle:hover,
.featured-photo-card.unfeatured .featured-photo-toggle:hover {
  color: #fff;
  background-color: transparent;
}
/* Invisible 32px layout boxes retain 44px targets without drawing a circle. */
.photo-heart::after,
.iadmin-photo-marks .iadmin-photo-btn::after,
.featured-photo-toggle::after { content: ''; position: absolute; inset: -6px; }
.photo-heart:focus-visible,
.iadmin-photo-marks .iadmin-photo-btn:focus-visible,
.featured-photo-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; opacity: 1; }
.masonry-item:focus-within .photo-heart,
.masonry-item:focus-within .masonry-item-stock,
.masonry-item[data-featured="true"]:focus-within::after,
.portrait-frame[data-featured="true"]:focus-within::after { opacity: 1; }
.masonry-item .masonry-item-stock { pointer-events: none; }
.masonry-item:has(.masonry-item-stock) .masonry-item-info,
.masonry-item[data-featured="true"] .masonry-item-info { padding-bottom: 56px; }
/* Studio uses the same marks in the same corner; delete stays at the top. */
.iadmin-photo-marks {
  display: none;
  position: absolute;
  right: var(--photo-mark-inset);
  bottom: var(--photo-mark-inset);
  z-index: 4;
  gap: var(--photo-mark-gap);
  opacity: 0;
  transition: opacity .2s ease;
}
body.admin-editing .iadmin-photo-marks { display: flex; }
body.admin-editing .masonry-item:hover .iadmin-photo-marks,
body.admin-editing .masonry-item:focus-within .iadmin-photo-marks,
body.admin-editing .masonry-item.touch-hover .iadmin-photo-marks { opacity: 1; }
.iadmin-photo-marks .iadmin-photo-btn { position: relative; color: #ffffff70; }
.iadmin-photo-marks .iadmin-feature-btn.featured,
.iadmin-photo-marks .iadmin-stock-btn.in-stock { color: var(--photo-mark-color); border-color: #f4f7f877; background: var(--photo-mark-bg); }
body.admin-editing .portrait-frame[data-featured="true"][data-id]::after { display: inline-flex; }
.likes-photo-count { display: flex; align-items: center; gap: 8px; }
.featured-photo-card .featured-photo-toggle { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .photo-heart,.masonry-item-stock,.masonry-item::after,.portrait-frame::after,
  .featured-item-mark,.iadmin-photo-marks { transition: none; }
}

.likes-photo-image { position: relative; }
/* All marks enter together; availability is independent of the text overlay. */
.masonry-item:hover .masonry-item-stock,
.masonry-item.touch-hover .masonry-item-stock,
.masonry-item.has-description:hover .masonry-item-stock,
.masonry-item.has-description.touch-hover .masonry-item-stock,
.masonry-item[data-featured="true"]:hover::after,
.masonry-item[data-featured="true"].touch-hover::after,
.portrait-frame[data-featured="true"]:hover::after,
.portrait-frame[data-featured="true"].touch-hover::after,
.featured-item:hover .featured-item-mark,
.featured-item.touch-hover .featured-item-mark { opacity: 1; transform: none; }

/* A like is an outline revealed by interaction, never a persistent filled badge. */
.photo-heart,.photo-like-mark { opacity: 0; }
.masonry-item:hover .photo-heart,
.masonry-item.touch-hover .photo-heart,
.masonry-item:focus-within .photo-heart,
.likes-photo-image:hover .photo-like-mark,
.likes-photo-image.touch-hover .photo-like-mark,
.likes-photo-image:focus-within .photo-like-mark { opacity: 1; }

/* Ignore sticky touch :hover; only a deliberate first tap reveals marks. */
@media (hover: none), (pointer: coarse) {
  .masonry-item:not(.touch-hover) .photo-heart,
  .masonry-item:not(.touch-hover) .masonry-item-stock,
  .masonry-item.has-description:not(.touch-hover) .masonry-item-stock,
  .masonry-item[data-featured="true"]:not(.touch-hover)::after,
  .portrait-frame[data-featured="true"]:not(.touch-hover)::after,
  .featured-item:not(.touch-hover) .featured-item-mark,
  body.admin-editing .masonry-item:not(.touch-hover) .iadmin-photo-marks,
  .featured-photo-card:not(.touch-hover) .featured-photo-toggle,
  .likes-photo-image:not(.touch-hover) .photo-like-mark { opacity: 0; }
  .masonry-item:not(.touch-hover) .photo-heart:not(:focus-visible),
  body.admin-editing .masonry-item:not(.touch-hover) .iadmin-photo-marks,
  .featured-photo-card:not(.touch-hover) .featured-photo-toggle:not(:focus-visible) { pointer-events: none; }
  .masonry-item .photo-heart:focus-visible,
  .featured-photo-card .featured-photo-toggle:focus-visible { opacity: 1; }
}