/* References Page Styles */

/* Center orphaned items in the last row */
@media screen and (min-width: 981px) {
  /* Add a pseudo-element to push the last row items */
  .posts::before {
    content: "";
    width: calc(16.66666% - 0.75rem);
    order: 10; /* Place it after the 3rd item but before the 4th */
  }

  /* Specifically for 5 items total */
  /* 4th item when there are exactly 5 */
  .posts > div:nth-child(4):nth-last-child(2) {
    /* Give it a higher order to come after the pseudo-element */
    order: 11;
    /* Reset the width calculation that was modified by main.css */
    width: calc(33.33333% + -0.5rem) !important;
    padding: 1.5rem !important;
    padding-left: 0 !important;
  }

  /* 5th and last item */
  .posts > div:nth-child(5):last-child {
    order: 12;
    width: calc(33.33333% + -0.5rem) !important;
    padding: 1.5rem !important;
    padding-right: 0 !important;
  }

  /* Add another pseudo-element at the end */
  .posts::after {
    content: "";
    width: calc(16.66666% - 0.75rem);
    order: 13;
  }
}

@media screen and (max-width: 1280px) and (min-width: 981px) {
  /* Adjust for medium desktop screens */
  .posts::before,
  .posts::after {
    width: calc(16.66666% - 0.5rem);
  }

  .posts > div:nth-child(4):nth-last-child(2) {
    width: calc(33.33333% + -0.33333rem) !important;
    padding: 1rem !important;
    padding-left: 0 !important;
  }

  .posts > div:nth-child(5):last-child {
    width: calc(33.33333% + -0.33333rem) !important;
    padding: 1rem !important;
    padding-right: 0 !important;
  }
}

/* Make all reference card images the same height */
.posts > div > article > .image {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}

.posts > div > article > .image img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Add padding specifically for SVG logos */
.posts > div > article > .image img[src$=".svg"] {
  padding: 20px;
}

/* Ensure consistent card heights */
.posts > div > article {
  display: flex;
  flex-direction: column;
  height: 420px;
}

.posts > div > article > .content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.posts > div > article > .content h3 {
  margin-bottom: 1rem;
}

.posts > div > article > .content p {
  flex: 1;
  margin-bottom: 1.5rem;
}

.posts > div > article > .content .actions {
  margin-top: auto;
}

/* Responsive adjustments */
@media screen and (max-width: 980px) {
  .posts > div > article > .image {
    height: 180px;
  }
}

@media screen and (max-width: 736px) {
  .posts > div > article > .image {
    height: 160px;
  }
}

/* Make all reference card images the same height */
.posts > div > article > .image {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}

.posts > div > article > .image img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Add padding specifically for SVG logos */
.posts > div > article > .image img[src$=".svg"] {
  padding: 20px;
}

/* Ensure consistent card heights */
.posts > div > article {
  display: flex;
  flex-direction: column;
  height: 420px;
}

.posts > div > article > .content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.posts > div > article > .content h3 {
  margin-bottom: 1rem;
}

.posts > div > article > .content p {
  flex: 1;
  margin-bottom: 1.5rem;
}

.posts > div > article > .content .actions {
  margin-top: auto;
}

/* Responsive adjustments */
@media screen and (max-width: 980px) {
  .posts > div > article > .image {
    height: 180px;
  }
}

@media screen and (max-width: 736px) {
  .posts > div > article > .image {
    height: 160px;
  }
}