/* ============================================================
   shortstory.css — стили компонента shortstory (BEM)
   Сущность: modules/shortstory.tpl
   ============================================================ */

/* === CARD (бывший .news-link) === */

.shortstory__card {
  border-bottom: 5px solid rgba(85, 122, 149, 0.2);
  background: hsla(240, 7%, 12%, 0.88);
  padding: 25px 10px;
  box-shadow: 0px -1px 4px rgb(200 196 196 / 8%), 0px 4px 4px rgb(200 196 196 / 25%);
  border-radius: 10px;
  display: block;
  margin-bottom: 45px;
  padding-bottom: 65px;
}

/* === CATEGORY (бывший span.just-news) === */

.shortstory__category {
  position: absolute;
  right: 35px;
  background: linear-gradient(to right, #8d4ce0, #6b36ff);
  font-size: 18px;
  color: #fff;
  padding: 7px 20px;
  border-radius: 6px;
  margin-top: -6px;
  font-weight: 700;
  box-shadow: 0 10px 40px 0 rgba(90, 185, 234, 0.2);
}

@media (max-width: 575.98px) {
  .shortstory__category {
    display: none;
  }
}

/* === TITLE (бывший .news-log) === */

.shortstory__title {
  margin-left: 15px;
  max-width: 665px;
}

@media (max-width: 1199.98px) {
  .shortstory__title {
    max-width: 525px;
  }
}

@media (max-width: 767.98px) {
  .shortstory__title {
    max-width: 350px;
  }
}

/* === POSTER (бывший .poster) === */

.shortstory__poster {
  margin-top: 15px;
  margin-bottom: 20px;
}

.shortstory__poster img {
  width: 850px;
}

/* === DESCRIPTION (бывший .description) === */

.shortstory__description {
  margin: 15px;
  font-size: 18px;
}

/* === BTN (бывший a.btn-view) === */

.shortstory__btn {
  background: rgba(85, 178, 253, 0.10);
  padding: 0 10px;
  color: #55b2fd;
  border-radius: 8px;
  width: 160px;
  height: 47px;
  border: 1px solid rgba(85, 178, 253, 0.28);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  display: block;
  line-height: 42px;
  text-align: -webkit-center;
  float: right;
  margin-right: 10px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.shortstory__btn:hover {
  background: rgba(85, 178, 253, 0.22);
  border-color: rgba(85, 178, 253, 0.65);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 16px rgba(85, 178, 253, 0.35), 0 4px 12px rgba(85, 178, 253, 0.20);
  transform: translateY(-2px);
}

.shortstory__btn:active {
  background: rgba(85, 178, 253, 0.30);
  border-color: rgba(85, 178, 253, 0.80);
  color: #fff;
  box-shadow: 0 0 8px rgba(85, 178, 253, 0.20);
  transform: translateY(0);
  text-decoration: none;
}

.shortstory__btn::after {
  content: "";
  display: block;
  margin-top: -45px;
  margin-left: 50px;
}

/* === BTN ICON (бывший span.ic-sx24) === */

.shortstory__btn-icon {
  width: 23px;
  height: 15px;
  background: url(../../icons/eye.png) no-repeat;
  background-size: contain;
  margin-left: 10px;
  float: left;
  margin-top: 13px;
  padding-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

/* === DATE (бывший span.time-data) === */

.shortstory__date {
  font-size: 12px;
  color: #d5dfea;
  background: hsla(240, 7%, 12%, 0.88);
  padding: 15px 20px;
  box-shadow: 0px -1px 4px rgb(200 196 196 / 8%), 0px 4px 4px rgb(200 196 196 / 25%);
  border-radius: 8px;
  float: left;
  margin-right: 6px;
  font-weight: 600;
}

/* === VIEWS (бывший span.views) === */

.shortstory__views {
  font-size: 12px;
  color: #d5dfea;
  background: hsla(240, 7%, 12%, 0.88);
  padding: 15px 20px;
  box-shadow: 0px -1px 4px rgb(200 196 196 / 8%), 0px 4px 4px rgb(200 196 196 / 25%);
  border-radius: 8px;
  float: left;
  margin-right: 6px;
  font-weight: 600;
}

.shortstory__views svg {
  margin-right: 0.25rem;
}

@media (max-width: 491px) {
  .shortstory__views {
    display: none;
  }

  .shortstory__date {
    padding: 15px 15px;
  }
}

/* === COMMENTS (бывший span.comments) === */

.shortstory__comments {
  font-size: 12px;
  color: #d5dfea;
  background: hsla(240, 7%, 12%, 0.88);
  padding: 15px 20px;
  box-shadow: 0px -1px 4px rgb(200 196 196 / 8%), 0px 4px 4px rgb(200 196 196 / 25%);
  border-radius: 8px;
  float: left;
  margin-right: 6px;
  font-weight: 600;
}

.shortstory__comments svg {
  margin-right: 0.25rem;
}

@media (max-width: 510px) {
  .shortstory__comments {
    display: none;
  }
}

@media (max-width: 491px) {
  .shortstory__comments {
    display: none;
  }
}