/* Product related cards — fork of content-card styles for this module only */

/* Base */
.content-cards.row { margin: 0 -30px }
.content-cards .col { padding: 0 30px }

@media (max-width: 1139px){
  .content-cards.row { margin: 0 -16px }
  .content-cards .col { padding: 0 16px }
}

@media (max-width: 767px){
  .content-cards.row { margin: 0 -12px }
  .content-cards .col { padding: 0 12px }
}

.content-card {
  height: 100%;
  position: relative;
  box-shadow: 0px 16px 32px rgba(85, 85, 85, 0.05), 0px 8px 16px rgba(85, 85, 85, 0.05);
  border-radius: 3px;
  padding-bottom: .56rem;/* #1 */
  margin-bottom: 24px;
  transition: .2s ease-in-out;
}

/* Top accent — theme blue (same 3px treatment as recommended red bar) */

.content-card:not(.content-card--recommended)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(111.02deg, #1E4275 0%, #051221 100%);
  border-radius: 3px 3px 0 0;
  z-index: 2;
  pointer-events: none;
}

.content-card--no-img-just-icon {
  margin-top: 1.82rem; /* half the icon--large size */
}

.content-card--extra-bottom-space {
  padding-bottom: calc(.56rem + 1.82rem / 2); /* #1 + #2 / 2 */
}

.content-card--with-link:hover,
.content-card--collapse-desc:hover {
  box-shadow: 0px 32px 64px rgba(85, 85, 85, 0.05), 0px 16px 32px rgba(85, 85, 85, 0.05);
  transform: scale(1.02);
}

/* Recommended / featured — Viking blue card, white type, red bar + red badge (white label) */

.content-card--recommended {
  z-index: 2;
  border: none;
  box-shadow: 0px 16px 32px rgba(85, 85, 85, 0.05), 0px 8px 16px rgba(85, 85, 85, 0.05), 0 0 0 1px rgba(255, 255, 255, .2);
}

.content-card--recommended.content-card--gray {
  border: none;
}

.content-card--recommended::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #E4353F;
  border-radius: 3px 3px 0 0;
  z-index: 2;
  pointer-events: none;
}

.content-card--recommended.content-card--with-link:hover,
.content-card--recommended.content-card--collapse-desc:hover {
  box-shadow: 0px 32px 64px rgba(85, 85, 85, 0.05), 0px 16px 32px rgba(85, 85, 85, 0.05), 0 0 0 1px rgba(255, 255, 255, .2), 0 0 24px rgba(228, 53, 63, 0.25);
}

.content-card__recommended-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  padding: 0.35rem 0.65rem;
  max-width: min(11rem, calc(100% - 20px));
  font-family: var(--ui-font-family);
  font-style: var(--ui-font-style);
  font-weight: var(--ui-font-weight);
  font-size: 0.6rem;
  line-height: 1.15;
  letter-spacing: 0.055rem;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: #E4353F;
  border-radius: 3px;
  pointer-events: none;
}

.content-card--dark a.arrow-link {
  color: #fff
}

.content-card__header a,
.content-card__body a {
  position: relative;
  z-index: 2;
}

/* Link */

.content-card__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* Image */

.content-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
}

.content-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .2s ease-in-out;
}

#related .content-card img {
  background: #fff;
  object-fit: contain;
  padding: 8px;
}

/* Safari corners fix on hover */

.content-card__img,
.content-card__icon {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Icon */

.content-card__icon {
  padding: 0 12.0px;
  margin-top: -1.82rem; /* half the icon--large size */ /* #2 */
  transition: .2s ease-in-out;
}

.content-card--with-link:hover .content-card__icon,
.content-card--collapse-desc:hover .content-card__icon {
  transform: translateY(-.56rem);
}

/* Header */

.content-card__header {
  padding: 24px;
}

.content-card--no-title-space .content-card__header {
  padding-bottom: 0;
}

.content-card .section-intro__divider-line {
  height: 2px;
  margin: 10px 20px;
  margin-top: 0
  border-radius: 3px;
  background: #E4353F;
  width: 50px;
}

/* Label */

.content-card__label {
  margin-bottom: .56rem;
  color: #555555;
  text-decoration: none;
  font-family: var(--ui-font-family);
  font-style: var(--ui-font-style);
  font-weight: var(--ui-font-weight);
  font-size: .67rem;
  line-height: 1rem;
  letter-spacing: .067rem;
  text-transform: uppercase;
}

/* Title */

.content-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h3.content-card__title,
.content-card__title h3 {
  text-transform: none;
  font-weight: 700;
}

.content-card--collapse-desc .content-card__title {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.content-card__title-tag {
  width: 100%;
  margin-bottom: 0;
}

.content-card__chevron {
  flex-shrink: 0;
  margin: 0;
  margin-inline-start: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  transition: .2s ease-in-out;
  cursor: pointer;
}

.content-card__chevron:not(:focus-visible) {
  outline: none;
}

.content-card__header:hover .content-card__chevron {
  transform: scale(1.15, 1.15);
}

.content-card__chevron__up,
.content-card__chevron__down {
  display: block;
}

.content-card__chevron__up,
.content-card--expanded .content-card__chevron__down {
  display: none;
}

.content-card--expanded .content-card__chevron__up {
  display: block;
}

/* Date */

.content-card__date {
  margin-top: 24px;
  margin-bottom: 0;
}

.content-card--no-title-space .content-card__date {
  margin-top: 0;
  margin-bottom: 24px;
}

.content-card__body {
  padding: 24px;
  padding-top: 0;
}

.content-card--collapse-desc .content-card__body {
  display: none;
}

.content-card--expanded .content-card__body {
  display: block;
  animation: .2s ease-in-out uiPop;
}

.content-card__desc > *:last-child {
  margin-bottom: 0;
}

.content-card__desc + .content-card__btn {
  margin-top: 24px;
}

/* Module-entered copy (preserve line breaks without nl2br filter) */

.content-card__desc--multiline {
  white-space: pre-line;
}

/* Fit note — subtle size; color follows body copy (light/gray/dark/recommended via txt-- + shared desc rules) */

.content-card__fit-note {
  margin-top: 20rem;
  font-size: 0.93em;
  line-height: 1.5;
}

.content-card__fit-note em {
  font-style: italic;
}

.content-card__fit-note strong {
  font-weight: 700;
}

/* Light scheme — theme white */

.content-card--light {
  background: #fff;
}

/* Gray scheme — theme light + borders */

.content-card--gray {
  background: #EDEDED;
  border: 1px solid #E3E6EC;
}

/* Recommended must keep Viking blue (light/gray set background later with equal specificity) */

.content-card--recommended.content-card--light,
.content-card--recommended.content-card--gray {
  background-image: linear-gradient(111.02deg, #1E4275 0%, #051221 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Light & gray — dark text surfaces (brand typography tokens) */

.content-card--light .content-card__chevron,
.content-card--gray .content-card__chevron {
  color: #555555;
}

.content-card--light .content-card__title-tag,
.content-card--light .content-card__title h3,
.content-card--gray .content-card__title-tag,
.content-card--gray .content-card__title h3 {
  color: #142942;
}

.content-card--light .content-card__desc,
.content-card--gray .content-card__desc,
.content-card--light .content-card__fit-note,
.content-card--gray .content-card__fit-note {
  color: #555555;
}

.content-card--light .content-card__btn.arrow-link,
.content-card--gray .content-card__btn.arrow-link {
  color: #2C68DF;
}

.content-card--light .content-card__btn.arrow-link:hover,
.content-card--gray .content-card__btn.arrow-link:hover {
  color: #2C68DF;
}

/* Dark scheme — theme dark surface (shadow from .content-card) */

.content-card--dark {
  background: #555555;
}

.content-card--dark .content-card__chevron {
  color: #fff;
}

.content-card--dark .arrow-link.txt--dark {
  color: #fff !important;
}

/* Recommended — white type on Viking blue (placed last so it wins over light/gray/dark scheme rules) */

.content-card--recommended .content-card__label {
  color: #fff;
}

.content-card--recommended .content-card__title-tag,
.content-card--recommended .content-card__title h3 {
  color: #fff;
}

.content-card--recommended .content-card__desc,
.content-card--recommended .content-card__fit-note {
  color: rgba(255, 255, 255, 1.00);
}

.content-card--recommended .content-card__btn.arrow-link {
  color: #fff !important;
}

.content-card--recommended .content-card__btn.arrow-link:hover {
  color: #E4353F !important;
}