/* Resource Cards Grid Component Styles */

.grid-title-section {
  margin-bottom: 3rem;
}

.cards-grid {
  gap: 3rem;
}

/* Resourcing Card Styles */

.resourcing-card {
  margin-bottom: 2rem;
}

.card-container {
  overflow: visible;
  /* Container height auto-adjusts based on content */
}

.image-container {
  z-index: 10;
}

.image-container .card-image img {
  height: auto;
  width: 100%;
  border-radius: 30px;
  -o-object-fit: cover;
     object-fit: cover;
  --tw-backdrop-blur: blur(40px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.content-box {
  position: relative;
}

.content-box .content-description div > ul {
  list-style-type: disc;
}

.content-box .content-description div > ol {
  list-style-type: decimal;
}

.content-box .content-description div > ul,
.content-box .content-description div > ol {
  padding-left: 2rem;
  --tw-text-opacity: 1;
  color: rgb(26 115 232 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

.content-box .content-description div > ul li,
.content-box .content-description div > ol li {
  margin-bottom: 0.5rem;
}

.content-box .content-description div > ul li::marker,
.content-box .content-description div > ol li::marker {
  --tw-text-opacity: 1;
  color: rgb(26 115 232 / var(--tw-text-opacity, 1));
}

.links-list {
  max-height: 8rem;
  overflow-y: auto;
}

.link-item {
  border-left-width: 2px;
  border-color: var(--color-primary-100);
  padding-left: 0.75rem;
}

.link-item:hover {
  border-color: var(--color-primary-300);
}

/* Responsive Design */

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem;
  }

  .content-box {
    margin-left: 5%;
    margin-top: -4rem;
    padding: 1rem;
    min-height: 180px;
  }

  .image-container {
    aspect-ratio: 14/9;
    width: 100%;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .cards-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .content-box {
    margin-left: 8%;
    margin-top: -4rem;
  }

  .image-container {
    aspect-ratio: 14/9;
  }
}

/* Utility classes for text overflow */

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}