/*!
 * Related Block — Base CSS v7.2
 * https://github.com/jonas-nicollin/squarespace-components
 */


.related-block__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 1vw;
}

.related-block__loader-dot {
  width: 4px;
  height: 4px;
  background-color: currentColor;
  opacity: 0.2;
  border-radius: 50%;
  animation: rb-loader 1.2s infinite ease-in-out;
}

.related-block__loader-dot:nth-child(1) { animation-delay: 0s; }
.related-block__loader-dot:nth-child(2) { animation-delay: 0.4s; }
.related-block__loader-dot:nth-child(3) { animation-delay: 0.8s; }

@keyframes rb-loader {
  0%, 100% { opacity: 0.2; }
  33%       { opacity: 0.6; }
  66%       { opacity: 0.4; }
}


.related-block {
  padding: clamp(1.5rem, 3vw, 3rem) 0;
}

.related-block--is-loading {
  min-height: 4rem;
}


.blog-item-wrapper section.related-block .related-block__inner {
  max-width: var(--sqs-site-max-width);
  margin: auto;
  padding-left: var(--sqs-mobile-site-gutter);
  padding-right: var(--sqs-mobile-site-gutter);
}
@media (min-width: 768px) {
  .blog-item-wrapper section.related-block .related-block__inner {
    padding-left: var(--sqs-site-gutter);
    padding-right: var(--sqs-site-gutter);
  }
}


.related-block__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.related-block__heading-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.related-block__heading-cta-text {
  display: inline-block;
  position: relative;
}

.related-block__heading-cta-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.333em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.related-block__heading-cta:hover .related-block__heading-cta-text::after {
  transform: scaleX(1);
}

.related-block__heading-cta-icon {
  display: inline-block;
  font-family: var(--ui-font-font-family);
  transition: transform 0.25s ease;
}

.related-block__heading-cta:hover .related-block__heading-cta-icon {
  transform: translateX(4px);
}


.related-block__empty {
  padding: 1rem;
  text-align: center;
}


.related-block__list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}


.related-block__item {
  display: block;
  text-decoration: none;
  color: inherit;
  font-family: var(--body-font-font-family);
  font-style: var(--body-font-font-style);
  font-weight: var(--body-font-font-weight);
  line-height: var(--body-font-line-height);
  letter-spacing: var(--body-font-letter-spacing);
  text-transform: var(--body-font-text-transform);
}


.related-block__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: rgba(0, 0, 0, 0.05);
}

.related-block__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position posé en inline style par le script via mediaFocalPoint */
}


.related-block__content {
  box-sizing: border-box;
}

.related-block__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.related-block__category {
  display: inline-block;
}


.related-block__tag-prefix {
  display: flex;
  align-items: center;
}

.related-block__tag-prefix-icon {
  font-family: var(--ui-font-font-family);
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
  margin-right: 0.2em;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.related-block__tag-prefix-text {
  vertical-align: middle;
}


.related-block__meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.related-block__meta-line .related-block__tag-prefix {
  display: flex;
  align-items: center;
}