#site-logo {
  position: relative;
}

#site-logo.logo--story-active {
  cursor: pointer;
}

#site-logo.logo--story-active::before {
  content: "";
  position: absolute;
  inset: -5px;
  display: block;
  box-sizing: border-box;
  background: url("../images/insta_act_ring.svg") center / contain no-repeat;
  pointer-events: none;
}

#site-logo.logo--story-active.logo--story-seen::before {
  filter: grayscale(1);
  opacity: 0.45;
}

.sf-home-hub .sf-tab[data-target="sf-tab-stories"]:not(.sf-stories-available) .sf-tab__icon::after,
.sf-home-hub .sf-tab[data-target="sf-home-stories-root"]:not(.sf-stories-available) .sf-tab__icon::after,
.sf-home-hub .sf-tab[data-target="sf-tab-stories"]:not(.sf-stories-available) .sf-menu-icon::after,
.sf-home-hub .sf-tab[data-target="sf-home-stories-root"]:not(.sf-stories-available) .sf-menu-icon::after {
  background-image: url("../images/home_dis_ring1.svg");
  filter: none;
  opacity: 1;
}

.sf-home-hub .sf-tab[data-target="sf-tab-stories"].is-active:not(.sf-stories-available) .sf-tab__icon::after,
.sf-home-hub .sf-tab[data-target="sf-home-stories-root"].is-active:not(.sf-stories-available) .sf-tab__icon::after,
.sf-home-hub .sf-tab[data-target="sf-tab-stories"].is-active:not(.sf-stories-available) .sf-menu-icon::after,
.sf-home-hub .sf-tab[data-target="sf-home-stories-root"].is-active:not(.sf-stories-available) .sf-menu-icon::after {
  background-image: url("../images/home_act_ring1.svg");
}

.sf-home-hub .sf-tab[data-target="sf-tab-stories"].sf-stories-available .sf-tab__icon::after,
.sf-home-hub .sf-tab[data-target="sf-home-stories-root"].sf-stories-available .sf-tab__icon::after,
.sf-home-hub .sf-tab[data-target="sf-tab-stories"].sf-stories-available .sf-menu-icon::after,
.sf-home-hub .sf-tab[data-target="sf-home-stories-root"].sf-stories-available .sf-menu-icon::after {
  background-image: url("../images/insta_act_ring.svg");
  filter: none;
  opacity: 1;
}

.sf-home-hub .sf-tab.sf-stories-available.sf-stories-seen .sf-tab__icon::after,
.sf-home-hub .sf-tab.sf-stories-available.sf-stories-seen .sf-menu-icon::after {
  filter: grayscale(1);
  opacity: 0.45;
}

.sf-home-stories,
.sf-stories-grid,
.sf-stories-item {
  min-width: 0;
}

.sf-stories-grid {
  padding: 0;
  list-style: none;
}

.sf-story-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  aspect-ratio: 3 / 4;
  background: var(--sf-color-surface-muted, #ebeaf2);
  cursor: pointer;
}

.sf-story-card:focus-visible {
  outline: 2px solid var(--sf-color-focus, #ff9d57);
  outline-offset: 2px;
}

.sf-story-card img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

@media screen and (min-width: 601px) {

    .sf_modal {
        .stark_modal_window.stories-gallery {
            width: min(900px, calc(100% - 4em)) !important;
            height: calc(100% - 4em) !important;
        }
    }
}



.sf-gallery-page--stories {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  grid-template-areas: "view" !important;
  gap: 0 !important;
  transition: none;

  &.sf-gallery-page-skel {
    .sf-stories-skeleton {
      position: relative;
      width: auto;
      height: calc(100% - 4em);
      max-width: calc(100% - 2em);
      max-height: calc(100% - 4em);
      overflow: hidden;
      justify-self: center;
      align-self: center;
      border-radius: 10px;
      aspect-ratio: 9 / 16;
      background: linear-gradient(140deg, rgb(0 0 0 / 18%) 0%, rgb(0 0 0 / 42%) 100%);

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 12%) 50%, rgb(255 255 255 / 0%) 100%);
        animation: skel-shimmer var(--skel-speed, 1.35s) ease-in-out infinite;
      }
    }
  }

  .sf-gallery-viewport {
    &::before {
      content: none;
    }

    .swiper-slide {
      .sf-stories-media {
        position: relative;
        display: grid;
        width: auto;
        height: calc(100% - 4em);
        max-width: calc(100% - 2em);
        max-height: calc(100% - 4em);
        overflow: hidden;
        aspect-ratio: 9 / 16;
        border-radius: 10px;
        background: linear-gradient(140deg, rgb(0 0 0 / 18%) 0%, rgb(0 0 0 / 55%) 100%);

        > .sf-gallery-img,
        > .sf-gallery-video,
        > .starkframe-video-wrapper {
          width: 100% !important;
          height: 100% !important;
          max-width: none !important;
          max-height: none !important;
          bottom: 0 !important;
          margin: 0 !important;
          border-radius: inherit !important;
          object-fit: contain;
        }

        > .starkframe-video-wrapper {
          background: transparent !important;

          .sf-gallery-video {
            width: 100%;
            height: 100%;
            bottom: 0;
            border-radius: inherit;
            object-fit: contain;
          }
        }

        .sf-stories-overlay {
            position: absolute;
            top: 0.75em;
            left: 0.75em;
            z-index: 9999999;
            display: grid;
            grid-template-columns: min-content minmax(0, 1fr);
            align-items: center;
            gap: 0.65em;
            box-sizing: border-box;
            max-width: calc(100% - 2em);
            padding: 0;
            border-radius: 8px;
            color: rgb(255 255 255 / 92%);
            pointer-events: none;

            .sf-stories-overlay__avatar {
                display: block;
                width: 50px;
                height: auto;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
                object-fit: cover;
                max-width: unset;
                max-height: unset;
                bottom: unset;
            }

            .sf-stories-overlay__meta {
                display: flex;
                min-width: 0;
                flex-direction: column;
                gap: 0.1em;
            }

          .sf-stories-overlay__name,
          .sf-stories-overlay__date {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .sf-stories-overlay__name {
            font-family: var(--sf-font-ui, "Poppins", sans-serif);
            font-size: 14px;
            font-weight: 600;
            line-height: 1.25;
          }

          .sf-stories-overlay__date {
            color: rgb(255 255 255 / 100%);
            font-family: var(--sf-font-body, "DM Sans", sans-serif);
            font-size: 12px;
            line-height: 1.25;
          }
        }
      }
    }
  }

  @media screen and (max-width: 600px) {
    &.sf-gallery-page-skel .sf-stories-skeleton {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      border-radius: 0;
    }

    .sf-gallery-viewport {
      .swiper-slide {
        .sf-stories-media {
          width: 100%;
          height: 100%;
          max-width: 100%;
          max-height: 100%;
          border-radius: 0;

            > .sf-play-butt.sf-play {
                transform: translate(-50%, calc(-50% - 1.5em)) !important;
            }

            .starkframe__custom-controls {
                display: none !important;
            }

          .sf-stories-overlay {
            top: 1em;
            left: 1em;
            max-width: calc(100% - 2em);
          }
        }
      }
    }
  }
}

@container main (max-width: 900px) {
  .sf-story-card {
    border-radius: 0;
  }
}