.stellar-hero video {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  border-radius: 55px;
  box-shadow: 4px 4px 21px 0 rgba(0,0,0,0.25);
}
.stellar-hero .stellar-vimeo-embed {
  border-radius: 55px;
  overflow: hidden;
  box-shadow: 4px 4px 21px 0 rgba(0,0,0,0.25);
  margin: 0 auto;
  @media (max-width: 1320px) {
    padding: 21px;
  }
  @media (max-width: 1366px) {
    padding: 21px;
    box-shadow: none;
  }
  @media (max-width: 1024px) {
    padding: 21px;
    box-shadow: none;
  }
  @media (max-width: 680px) {
    padding: 8px;
    box-shadow: none;
  }
}
.stellar-hero .stellar-vimeo-embed iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 55px;
  overflow: hidden;
  box-shadow: 4px 4px 21px 0 rgba(0,0,0,0.25);

  @media (max-width: 1024px) {
    border: none;
  }
}
.stellar-video-poster {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 55px;
  box-shadow: 4px 4px 21px 0 rgba(0,0,0,0.25);
}
.stellar-accordion {
  margin-bottom: 12px;
}
.stellar-plan {
  display: block;
}
.stellar-trening-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
  @media (max-width: 1024px) {
    justify-content: center;
  }

  &:has(.stellar-btn-prev) {
    justify-content: space-between;
    padding: 0 10px;
  }
}

.stellar-btn-next,
.stellar-btn-finish,
.stellar-btn-prev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: none;
  background: #00b9f2;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
  text-decoration: none;
  width: 324px;
  height: 65px;
  font-weight: 500;
  font-size: 19px;
  line-height: 32px;
  @media (max-width: 1024px) {
    width: 100%;
    max-width: 220px;
    height: 46px;
    font-size: 13px;
    line-height: 20px;
    border-radius: 34px;
  }
}
.stellar-btn-prev {
  background: none;
  border: 3px solid #fff;
  color: #fff;
  transition: 0.3s;
  &:hover {
    background: #fff;
    color: #303030;
    transition: 0.3s;
  }
}
.stellar-btn-next[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.stellar-btn-finish[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.stellar-btn-next:not([disabled]):hover {
  background: #005a87;
}
.stellar-btn-finish:not([disabled]):hover {
  background: #005a87;
}
.stellar-next-status {
  color: #9bdcf6;
  font-size: 14px;
  display: none;
}

.spp-day-inline__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  list-style: none;
  padding: 0;
  margin: 0;

  /* Mobile carousel behavior – similar to .stellar-program-list__items */
  @media (max-width: 1024px) {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 60px 0 16px;
    width: 100%;
    scroll-padding-left: 16px;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .spp-day-item {
    display: flex;
    flex-direction: row;
    background: #303030;
    border-radius: 34px;
    padding: 13px;
    color: #fff;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    position: relative;
    

    @media (max-width: 1024px) {
      flex-direction: column;
      flex: 0 0 auto;
      width: 100%;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      height: 100%;
      min-height: 300px;
    }

    @media (min-width: 1024px) {
      background-image: none !important;
    }

    .spp-day-thumb {
      flex: 0 0 auto;

      img {
        width: 400px;
        height: 200px;
        border-radius: 21px;
        object-fit: cover;
        display: block;

        @media (max-width: 1024px) {
          width: 100%;
          height: auto;
          aspect-ratio: 1/1;
        }
      }
    }
      .spp-day-body {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1 1 auto;
      @media (max-width: 1024px) {
        position: absolute;
        bottom: 25px;
        left: 25px;
      }
      .spp-day-title {
        font-weight: 500;
        font-size: 34px;
        line-height: 55px;
        margin: 0;
        @media (max-width: 1024px) {
          font-size: 20px;
          line-height: 28px;
        }
      }
      .spp-day-meta {
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        @media (max-width: 1024px) {
          gap: 6px;
        }
        .spp-day-meta__item {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          @media (max-width: 1024px) {
            gap: 3px;
            span {
              font-size: 12px;
            }
          }

          .spp-day-meta__icon-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 34px;
            @media (max-width: 1024px) {
              font-size: 20px;
              flex-direction: column;
              gap: 2px;
            }
          }
        }
        .spp-day-meta__icon {
          width: 15px;
          height: 15px;
          flex: 0 0 auto;
        }
      }
    }
    .spp-day-cta {
      width: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #00b9f2;
      border-radius: 21px;
      @media (max-width: 1024px) {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        position: absolute;
        top: 25px;
        right: 25px;
        z-index: 1;
      }

      &:has(.is-current) {
        background: #797979;

        .spp-ex-cta {
          cursor: not-allowed;
        }
      }
      &:hover {
        background: #005a87;
        transition: 0.3s;
      }

      .spp-ex-cta {
        width: 100%;
        min-width: 60px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        padding: 0;
        border: none;
        cursor: pointer;
        text-decoration: none;
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;
        transition: 0.3s;
        text-align: center;
      }
    }
  }
}

/* Header meta layout in .stellar-duration */
.stellar-duration .spp-day-meta__item {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;

  .spp-day-meta__icon-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 34px;
    @media (max-width: 1024px) {
      font-size: 15px;
      gap: 2px;
    }
  }
}
.stellar-duration .spp-day-meta__icon {
  filter: brightness(0) saturate(100%);
  width: 30px;
  height: 30px;
  flex: 0 0 auto;

  @media (max-width: 1024px) {
    width: 20px;
    height: 20px;
  }
}
.stellar-duration .spp-day-meta__value {
  font-weight: 600;
  font-size: 34px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
}
.stellar-duration .spp-day-meta__label {
  font-size: 12px;
  opacity: 0.8;
  flex-basis: 100%;
  @media (max-width: 1024px) {
    display: none;
  }
}

/* Ćwiczenia dnia – obrazek jako tło całego itema na mobile */
@media (max-width: 1024px) {
  .spp-day-inline__list .spp-day-item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    -webkit-box-shadow: inset 0px -50px 334px -51px rgba(0, 0, 0, 1);
    -moz-box-shadow: inset 0px -50px 334px -51px rgba(0, 0, 0, 1);
    box-shadow: inset 0px -50px 334px -51px rgba(0, 0, 0, 1);
  }

  .spp-day-inline__list .spp-day-item .spp-day-thumb {
    display: none;
  }

  .spp-day-inline__list .spp-day-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }

  .spp-day-inline__list .spp-day-item .spp-day-body,
  .spp-day-inline__list .spp-day-item .spp-day-cta {
    z-index: 1;
  }
}