/* assets/ss-internal-links.css
 *
 * Related-link modules on charter and itinerary singles.
 * Keep exploring uses the same card grid as Related Guides.
 */

.ssil {
  --ss-navy: #12305c;
  --ss-blue: #2b6cb0;
  --ss-muted: rgba(14, 27, 42, .7);
  --ss-border: rgba(18, 48, 92, .14);
  --ss-alt-bg: rgba(18, 48, 92, .04);
  margin: 3rem 0;
}

.ssil-group + .ssil-group {
  margin-top: 3rem;
}

.ssil-group__title {
  margin: 0;
  color: var(--ss-navy);
}

.ssil-itinerary-intro {
  margin: 1em 0;
}

.ssil-cta {
  margin: 32px 0 8px;
  padding: 24px;
  background: var(--ss-alt-bg);
  border: 1px solid var(--ss-border);
  border-radius: 16px;
}

.ssil-cta__label {
  margin: 0 0 12px;
  color: var(--ss-navy);
  font-weight: 700;
}

.ssil-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;
  background: #2b6cb0;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.ssil-cta__btn:hover,
.ssil-cta__btn:focus,
.ssil-cta__btn:active {
  background: #215387;
  color: #fff;
}

.ssil .ssyc-card,
.ssyc-related-guides .ssyc-card,
.ssyc-related-itineraries .ssyc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ssil .ssyc-card__link,
.ssyc-related-guides .ssyc-card__link,
.ssyc-related-itineraries .ssyc-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.ssil .ssyc-card-body,
.ssyc-related-guides .ssyc-card-body,
.ssyc-related-itineraries .ssyc-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ssil .ssyc-card-image--empty,
.ssyc-related-guides .ssyc-card-image--empty,
.ssyc-related-itineraries .ssyc-card-image--empty {
  background: var(--ss-alt-bg, rgba(18, 48, 92, .06));
}

.ssil .ss-link,
.ssyc-related-guides .ss-link,
.ssyc-related-itineraries .ss-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  align-self: flex-end;
  color: var(--ss-navy, #12305c);
  font-weight: 800;
  line-height: 1;
}

.ssil .ss-link svg,
.ssyc-related-guides .ss-link svg,
.ssyc-related-itineraries .ss-link svg {
  display: block;
  flex: none;
}

.ssyc-highlights[data-count="0"] {
  display: none;
}