/* Multi-photo carousel — LinkedIn-style frame-to-frame (no side letterboxing) */

div.flex.flex-col.gap-1:has(> img:nth-of-type(2)),
div.flex.border-y.bg-black:has(> :nth-child(2)):not(.hozaro-media-carousel) {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--card-solid, #fff) !important;
}

div.flex.flex-col.gap-1:has(> img:nth-of-type(2))::-webkit-scrollbar,
div.flex.border-y.bg-black:has(> :nth-child(2)):not(.hozaro-media-carousel)::-webkit-scrollbar {
  display: none;
}

div.flex.flex-col.gap-1:has(> img:nth-of-type(2)) > img,
div.flex.border-y.bg-black:has(> :nth-child(2)):not(.hozaro-media-carousel) > img,
div.flex.border-y.bg-black:has(> :nth-child(2)):not(.hozaro-media-carousel) > video,
div.flex.border-y.bg-black:has(> :nth-child(2)):not(.hozaro-media-carousel) > div {
  min-width: 100% !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  scroll-snap-align: center !important;
  scroll-snap-stop: always;
  object-fit: cover !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  background: transparent !important;
}

/* React Embla carousel — always fill the slide frame edge-to-edge */
.hozaro-media-carousel {
  background: var(--card-solid, #fff) !important;
}

.hozaro-media-carousel .hozaro-carousel-slide {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: min(72vh, 720px);
  overflow: hidden;
  background: var(--background, #f3f4f6);
}

.hozaro-media-carousel img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  background: transparent !important;
}

div.flex.flex-col.gap-1:has(> img:nth-of-type(2))::before,
div.flex.border-y.bg-black:has(> :nth-child(2)):not(.hozaro-media-carousel)::before {
  content: "";
  position: sticky;
  left: 0;
  z-index: 20;
  flex: 0 0 auto;
  width: var(--ig-w, 100%);
  height: 44px;
  margin-right: calc(var(--ig-w, 100%) * -1);
  align-self: center;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: left 10px center, right 10px center;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='19' fill='white'/><polyline points='23 12 15 20 23 28' fill='none' stroke='%23111111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='19' fill='white'/><polyline points='17 12 25 20 17 28' fill='none' stroke='%23111111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}