/* ===============================
   Back To Stories Button
================================ */

.story-details .back-to-stories{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 30px;
  background-color: transparent;
  color: #ff5a1f !important;
  border: 2px solid #ff5a1f;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
}

.story-details .back-to-stories::before{
  content: "←";
  font-size: 18px;
  transition: transform 0.3s ease;
}

.story-details .back-to-stories:hover{
  background-color: #ff5a1f;
  color: #fff !important;
  transform: translateY(-2px);
}

.story-details .back-to-stories:hover::before{
  transform: translateX(-4px);
}


/* ===============================
   Story Details - Image Styling
================================ */

.story-details .image-column .image-box{
  position: relative;
}

.story-details .image-column figure.image{
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,0.15);
  transition: all 0.4s ease;
}

.story-details .image-column figure.image img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.story-details .image-column figure.image:hover img{
  transform: scale(1.05);
}

.story-details .image-column figure.image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.15)
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.story-details .image-column figure.image:hover::after{
  opacity: 1;
}