/* Live /Portfolio page: the "Bento" candidate (portfolio-lab.css base) with two refinements.
   Scoped to .pl-live so the lab keeps showing the original candidate untouched. */
.pl-live .pl-head h1 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }

/* Desktop: the details used to slide up and cover a third of the image. Now the image stays dominant:
   a lighter scrim, no summary/tags, and a single small call-to-action line on hover. */
.pl-live .pl-scrim { background: linear-gradient(180deg, transparent 55%, rgba(6,10,20,.7) 82%, rgba(6,10,20,.88)); }
.pl-live .pl-info { padding: 12px 16px; }
.pl-live .pl-more .pl-summary, .pl-live .pl-more i { display: none; }
.pl-live .pl-more { justify-content: flex-start; }
.pl-live .pl-more b { margin-inline-start: 0; font-size: .8rem; }
@media (hover: hover) { .pl-live .pl-tile:is(:hover, :focus-visible) .pl-more { max-height: 24px; margin-top: 2px; } }

/* Phones / touch: nothing over the picture except the category badge. The text stays in the DOM for
   screen readers and search engines (visually hidden), and the whole tile is still the link. */
@media (hover: none), (max-width: 640px) {
  .pl-live .pl-scrim { display: none; }
  .pl-live .pl-info {
    position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .pl-live .pl-more { max-height: none; opacity: 1; }
}