/* =========================================================
   Unified story media — shortstory + fullstory (r20)
   Stable aspect-ratio canvases reserve layout before media is
   downloaded. Standalone assets remain fully visible with a
   blurred fill; adaptive grids use clean edge-to-edge crops.
   ========================================================= */

.feed-card__media-fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 18px;
  background: var(--surface-3);
  color: var(--text-fade);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  cursor: default;
}

.feed-card__media-fallback .i-svg {
  width: 28px;
  height: 28px;
}

.feed-card__media.is-image-error {
  background: var(--surface-3) !important;
  cursor: default !important;
}

.feed-card__media.is-image-error .feed-card__media-bg,
.feed-card__media.is-image-error .feed-card__media-content {
  display: none !important;
}

.feed-card__media.is-image-error .feed-card__media-fallback {
  display: grid !important;
}

.related-card__media-fallback {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--surface-3);
  color: var(--text-fade);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.related-card__media-fallback .i-svg {
  width: 24px;
  height: 24px;
}

.related-card__media.is-image-error .related-card__media-bg,
.related-card__media.is-image-error .related-card__media-inner {
  display: none !important;
}

.related-card__media.is-image-error .related-card__media-fallback {
  display: grid !important;
}

.fh-slider__slide.is-image-error,
.pk-gallery__link.is-image-error,
.full_story .full_text figure.story-image > a.is-image-error {
  position: relative !important;
  overflow: hidden !important;
  background: var(--surface-3) !important;
  cursor: default !important;
  pointer-events: none !important;
}

.fh-slider__slide.is-image-error > .fh-slider__bg,
.fh-slider__slide.is-image-error > .fh-slider__img,
.pk-gallery__link.is-image-error > img,
.full_story .full_text figure.story-image > a.is-image-error > .unified-media__blur,
.full_story .full_text figure.story-image > a.is-image-error > img {
  visibility: hidden !important;
}

.gallery-image-fallback {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--text-fade);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.gallery-image-fallback .i-svg {
  width: 28px;
  height: 28px;
}

.short_story,
.full_story {
  --unified-media-surface: #11161c;
  --unified-grid-surface: #e9edf1;
  --unified-media-gap: 4px;
}

.theme-dark .short_story,
.theme-dark .full_story {
  --unified-grid-surface: #151a20;
}

/* First-paint fallbacks use server/runtime classes, so the media box is
   reserved even before the deferred normalizer adds data-media-format. */
.feed-card .story-primary-media .fh-slider,
.feed-card .story-primary-media .modern-player {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
}

.feed-card .pk-gallery.pk-gallery--1,
.feed-card .pk-gallery.pk-gallery--2,
.feed-card .pk-gallery.pk-gallery--3,
.feed-card .pk-gallery.pk-gallery--4 {
  aspect-ratio: 4 / 3 !important;
}

.feed-card .pk-gallery.pk-gallery--5,
.feed-card .pk-gallery.pk-gallery--6,
.feed-card .pk-gallery.pk-gallery--7,
.feed-card .pk-gallery.pk-gallery--8,
.feed-card .pk-gallery.pk-gallery--9 {
  aspect-ratio: 3 / 4 !important;
}

.full_story .full_text figure.story-image > a {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
}

/* One image / poster: 4:3. */
.feed-card .story-primary-media .feed-card__media[data-media-format="poster-4x3"] {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  isolation: isolate;
  background: var(--unified-media-surface) !important;
}

.feed-card .story-primary-media .feed-card__media[data-media-format="poster-4x3"] .feed-card__media-content {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.feed-card .story-primary-media .feed-card__media[data-media-format="poster-4x3"] .feed-card__image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

/* Horizontal slider: one square reserved viewport per slide. */
.feed-card .story-primary-media .fh-slider[data-media-format="slider-1x1"] {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background: var(--unified-media-surface) !important;
}

.feed-card .story-primary-media .fh-slider[data-media-format="slider-1x1"] .fh-slider__track,
.feed-card .story-primary-media .fh-slider[data-media-format="slider-1x1"] .fh-slider__slide {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}

.feed-card .story-primary-media .fh-slider[data-media-format="slider-1x1"] .fh-slider__track {
  position: absolute !important;
  inset: 0 !important;
}

.feed-card .story-primary-media .fh-slider[data-media-format="slider-1x1"] .fh-slider__img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

/* Grid: 1–4 images use 4:3; 5–9 images use 3:4. */
.feed-card .pk-gallery[data-media-format^="grid-"] {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  background: var(--unified-grid-surface) !important;
}

.feed-card .pk-gallery[data-media-format="grid-4x3"] {
  aspect-ratio: 4 / 3 !important;
}

.feed-card .pk-gallery[data-media-format="grid-3x4"] {
  aspect-ratio: 3 / 4 !important;
}

.feed-card .pk-gallery[data-media-format^="grid-"] > .pk-gallery__grid {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  gap: var(--unified-media-gap) !important;
  overflow: hidden !important;
  background: var(--unified-grid-surface) !important;
}

.feed-card .pk-gallery[data-media-format^="grid-"] > .pk-gallery__grid > .pk-gallery__link {
  min-width: 0 !important;
  min-height: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  isolation: auto;
  background: var(--unified-grid-surface) !important;
}

.feed-card .pk-gallery[data-media-format^="grid-"] .pk-gallery__link img {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: block !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

.feed-card .pk-gallery .unified-media__blur,
.feed-card .pk-gallery .feed-card__media-bg,
.feed-card .pk-gallery .fh-slider__bg {
  display: none !important;
}

.feed-card .pk-gallery.pk-gallery--1 > .pk-gallery__grid {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.feed-card .pk-gallery.pk-gallery--2 > .pk-gallery__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.feed-card .pk-gallery.pk-gallery--3 > .pk-gallery__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--3 > .pk-gallery__grid > .pk-gallery__link:first-child {
  grid-column: 1 / -1 !important;
}

.feed-card .pk-gallery.pk-gallery--4 > .pk-gallery__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--5 > .pk-gallery__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--5 > .pk-gallery__grid > .pk-gallery__link:first-child {
  grid-column: 1 / -1 !important;
}

.feed-card .pk-gallery.pk-gallery--6 > .pk-gallery__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--7 > .pk-gallery__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--7 > .pk-gallery__grid > .pk-gallery__link:first-child {
  grid-column: 1 / -1 !important;
}

.feed-card .pk-gallery.pk-gallery--8 > .pk-gallery__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--8 > .pk-gallery__grid > .pk-gallery__link:first-child {
  grid-column: span 2 !important;
}

.feed-card .pk-gallery.pk-gallery--9 > .pk-gallery__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

/* Adaptive VK/Telegram-style compositions. The outer canvas keeps its
   stable ratio, while the inner cells respond to the source orientations. */
.feed-card .pk-gallery.pk-gallery--2-square > .pk-gallery__grid,
.feed-card .pk-gallery.pk-gallery--2-vertical > .pk-gallery__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.feed-card .pk-gallery.pk-gallery--2-wide > .pk-gallery__grid {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--3-wide > .pk-gallery__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--3-wide > .pk-gallery__grid > .pk-gallery__link:first-child {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

.feed-card .pk-gallery.pk-gallery--3-vertical > .pk-gallery__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--3-vertical > .pk-gallery__grid > .pk-gallery__link:first-child {
  grid-column: auto !important;
  grid-row: 1 / -1 !important;
}

.feed-card .pk-gallery.pk-gallery--3-row > .pk-gallery__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

.feed-card .pk-gallery.pk-gallery--3-row > .pk-gallery__grid > .pk-gallery__link:first-child {
  grid-column: auto !important;
  grid-row: auto !important;
}

.feed-card .pk-gallery.pk-gallery--4-square > .pk-gallery__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--4-wide > .pk-gallery__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--4-wide > .pk-gallery__grid > .pk-gallery__link:first-child {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

.feed-card .pk-gallery.pk-gallery--5-vertical > .pk-gallery__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--5-vertical > .pk-gallery__grid > .pk-gallery__link:first-child {
  grid-column: 1 / 3 !important;
  grid-row: 1 / -1 !important;
}

.feed-card .pk-gallery.pk-gallery--5-vertical > .pk-gallery__grid > .pk-gallery__link:not(:first-child) {
  grid-column: span 2 !important;
  grid-row: auto !important;
}

.feed-card .pk-gallery.pk-gallery--5-wide > .pk-gallery__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--5-wide > .pk-gallery__grid > .pk-gallery__link:first-child {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

.feed-card .pk-gallery.pk-gallery--5-wide > .pk-gallery__grid > .pk-gallery__link:not(:first-child) {
  grid-column: auto !important;
  grid-row: auto !important;
}

.feed-card .pk-gallery.pk-gallery--6-grid > .pk-gallery__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--7-grid > .pk-gallery__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--7-grid > .pk-gallery__grid > .pk-gallery__link:first-child {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

.feed-card .pk-gallery.pk-gallery--8-grid > .pk-gallery__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

.feed-card .pk-gallery.pk-gallery--8-grid > .pk-gallery__grid > .pk-gallery__link:first-child {
  grid-column: span 2 !important;
  grid-row: auto !important;
}

.feed-card .pk-gallery.pk-gallery--9-grid > .pk-gallery__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

/* Shared blurred fill for standalone media only; adaptive grids stay clean. */
.unified-media__cell {
  position: relative !important;
  isolation: isolate;
  background: var(--unified-media-surface, #11161c) !important;
}

.unified-media__blur {
  position: absolute !important;
  z-index: 0 !important;
  inset: -20px !important;
  display: block !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  filter: blur(24px) brightness(.62) saturate(.9) !important;
  opacity: .86 !important;
  transform: scale(1.12) !important;
  pointer-events: none !important;
}

.feed-card .pk-gallery[data-media-format^="grid-"] .pk-gallery__caption {
  z-index: 2 !important;
}

/* Standalone Editor.js image: the same complete 4:3 presentation. */
.full_story .full_text figure.story-image.story-image--unified > a {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  isolation: isolate;
  background: var(--unified-media-surface) !important;
}

.full_story .full_text figure.story-image.story-image--unified > a img {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

/* Primary and Editor.js video: square in-card canvas, fully visible video. */
.feed-card .story-primary-media .modern-player[data-media-format="video-1x1"],
.full_story .full_text figure.story-video > .modern-player[data-media-format="video-1x1"],
.full_story .full_text figure.story-video .story-video__frame {
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  background: #05070a !important;
}

.feed-card .modern-player[data-media-format="video-1x1"] .modern-player__canvas,
.full_story .full_text figure.story-video .story-video__frame iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.feed-card .modern-player[data-media-format="video-1x1"] .modern-player__video {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

/* Fullscreen is a viewport, never a square card. */
.feed-card .modern-player[data-media-format="video-1x1"]:fullscreen,
.feed-card .modern-player[data-media-format="video-1x1"]:-webkit-full-screen,
.feed-card .modern-player[data-media-format="video-1x1"].is-fallback-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
}

.feed-card .modern-player[data-media-format="video-1x1"]:fullscreen .modern-player__video,
.feed-card .modern-player[data-media-format="video-1x1"]:-webkit-full-screen .modern-player__video,
.feed-card .modern-player[data-media-format="video-1x1"].is-fallback-fullscreen .modern-player__video {
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

@media screen and (max-width: 640px) {
  .short_story,
  .full_story {
    --unified-media-gap: 3px;
  }

  .full_story .full_text .pk-gallery[data-media-format^="grid-"] {
    max-height: none !important;
  }

  .full_story .full_text .pk-gallery[data-media-format^="grid-"] > .pk-gallery__grid {
    max-height: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feed-card .story-primary-media .fh-slider__track {
    scroll-behavior: auto !important;
  }

  .feed-card .pk-gallery[data-media-format^="grid-"] .pk-gallery__link img,
  .unified-media__blur {
    animation: none !important;
    transition: none !important;
  }
}