/**
 * Social media service page — hero visual fit.
 *
 * Page-scoped (body.postid-343). The hero image is a full phone MOCKUP
 * (device + bezels, 1470x2906, ~0.5 portrait), not a bleed photo. The
 * shared `--cap-visual` modifier cover-crops to a fixed max-height, which
 * on this source shows only a cropped top slice with the phone's own
 * bezel clipped — reads as a broken/overflowing image on mobile.
 *
 * Fix: show the whole device via object-fit: contain and let it render
 * at natural height (drop the cover-crop cap). The cream/pink hero glow
 * shows through the contain letterbox, so no ugly bars.
 *
 * @package tlm-token
 */

.postid-343 .tlm-service-page-hero--cap-visual .tlm-service-page-hero__visual img {
  object-fit: contain;
  border-radius: 0;
}

/* Mobile/tablet only: no grid cell min-height here, so an uncapped
   contain image renders at the full 2906px source height. Cap it and
   let width go auto so the phone scales down to fit + centres. Desktop
   (>=1024px) is left to the shared module — its visual cell has
   min-height:580px, which already sizes the contained mockup correctly. */
@media (max-width: 1023px) {
  .postid-343 .tlm-service-page-hero--cap-visual .tlm-service-page-hero__visual img {
    max-height: 460px;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }
}