/* SKX object preview card
 * Reuses the site's existing visual language: #3576b3 primary blue,
 * #17324c dark blue and square Bootstrap-style buttons.
 */

.skx-object-card {
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin: 20px 0 28px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.08) 0 2px 8px 0;
}

.skx-object-card__media {
  display: block;
  flex: 0 0 220px;
  min-height: 140px;
  overflow: hidden;
  background: #f2f2f2;
}

.skx-object-card__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
}

.skx-object-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px 20px 18px 0;
}

.skx-object-card__title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 400;
}

.skx-object-card__title a {
  color: #444444;
  text-decoration: none;
}

.skx-object-card__title a:hover,
.skx-object-card__title a:focus {
  color: #3576b3;
  text-decoration: none;
}

.skx-object-card__excerpt {
  color: #848484;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 14px;
}

.skx-object-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.skx-object-card__button {
  display: inline-block;
  padding: 9px 16px;
  font-size: 14px;
  line-height: 1.42857143;
  font-weight: 400;
  border-radius: 0 !important;
}

/* Match the normal primary button, while letting the theme's
 * .btn-primary hover/focus styling apply to both available actions. */
.skx-object-card__add {
  color: #fff !important;
  background: #3576b3 !important;
  border: 1px solid #3576b3 !important;
  text-decoration: none;
  opacity: 1 !important;
  text-shadow: none !important;
}

.skx-object-card__add:not(.added):not(.skx-added):hover,
.skx-object-card__add:not(.added):not(.skx-added):focus {
  color: inherit;
  background: inherit;
  border-color: inherit;
  text-decoration: none;
}

/* Added state: keep the same format, but use a softer blue to make
 * the completed state visually distinct from an available action. */
.skx-object-card__add.added,
.skx-object-card__add.skx-added,
.skx-object-card__add.added:hover,
.skx-object-card__add.skx-added:hover,
.skx-object-card__add.added:focus,
.skx-object-card__add.skx-added:focus {
  color: #fff !important;
  background: #79a7d1 !important;
  border-color: #79a7d1 !important;
  opacity: 1 !important;
  cursor: default;
  text-shadow: none !important;
}

.skx-object-card:hover {
  box-shadow: rgba(0, 0, 0, 0.16) 0 4px 14px 0;
}

@media screen and (max-width: 767px) {
  .skx-object-card {
    display: block;
    gap: 0;
  }

  .skx-object-card__media {
    width: 100%;
    min-height: 0;
  }

  .skx-object-card__img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .skx-object-card__body {
    padding: 16px 18px 18px;
  }

  .skx-object-card__title {
    font-size: 20px;
  }

  .skx-object-card__actions {
    align-items: stretch;
  }

  .skx-object-card__button {
    flex: 1 1 auto;
    text-align: center;
  }
}