.product-card {
  border-radius: 24px;
  background-color: #ffffff0a;
  border: 1px solid #353535;
  padding: 16px;
  height: 100%;
  transition: border-color 0.3s ease;

  /* SVG Mask for rounded chamfer */
  --mask-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 100 100 L 0 100 Q 20 100 30 90 L 90 30 Q 100 20 100 0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--mask-svg), linear-gradient(#fff, #fff);
  -webkit-mask-position:
    bottom right,
    center;
  -webkit-mask-size:
    80px 80px,
    100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: destination-out;
  mask-image: var(--mask-svg), linear-gradient(#fff, #fff);
  mask-position:
    bottom right,
    center;
  mask-size:
    80px 80px,
    100%;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}

.product-card:hover {
  border-color: #666666;
}

.product-card-inner {
  position: relative;
  background-color: #ffffff;
  border-radius: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;

  /* Inner SVG Mask (slightly smaller for padding) */
  --mask-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M 100 100 L 0 100 Q 20 100 30 90 L 90 30 Q 100 20 100 0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--mask-svg), linear-gradient(#fff, #fff);
  -webkit-mask-position:
    bottom right,
    center;
  -webkit-mask-size:
    64px 64px,
    100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: destination-out;
  mask-image: var(--mask-svg), linear-gradient(#fff, #fff);
  mask-position:
    bottom right,
    center;
  mask-size:
    64px 64px,
    100%;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}

.product-card-inner img {
  width: 100%;
  height: auto !important;
  min-height: unset !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.product-card__title-container {
  position: static !important;  /* take it out of absolute so it sits below the image */
  padding: 12px 32px 14px 14px;
}

.product-card__title {
  color: #000000;
  font-size: 18px;
  font-weight: 400;
  font-family: "DM Sans", Sans-serif;
  margin: 0;
  line-height: 1.2;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-container {
  margin-top: 24px;
}

.content-list-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  grid-column: 1 / -1; /* spans across all columns if inside grid */
}

.content-list-pagination .page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background-color: #ffffff0a;
  color: #ffffff;
  text-decoration: none;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 16px;
  border: 1px solid #353535;
  transition: all 0.3s ease;
}

.content-list-pagination .page-numbers:hover {
  background-color: #353535;
  border-color: #666666;
}

.content-list-pagination .page-numbers.current {
  background-color: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.content-list-item.service-card {
  position: relative;
  border-radius: 16px;
  background-color: #ffffff0a;
  border: 1px solid #353535;
  padding: 16px;
  height: 100%;
  transition: border-color 0.3s ease;
}

.service-card__inner {
  img {
    width: 100%;
    border-radius: 16px;
    margin-bottom: 16px;
    aspect-ratio: 4/3;
    object-fit: cover;
  }
  .content-list-item__title {
    font-size: 24px;
    font-family: "DM Sans", Sans-serif;
    font-weight: 500;
    margin-bottom: 6px;
    color: #ffffff;
  }
  .content-list-item__content {
    font-size: 16px;
    color: #ffffff;
    font-family: "DM Sans", Sans-serif;
    font-weight: 400;
    margin-bottom: 16px;
  }
  .content-list-item__read {
    font-family: "DM Sans", Sans-serif;
    font-weight: 500;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffd503;
  }

  .content-list-item__date {
    color: #ffffff;
    font-size: 16px;
    font-family: "DM Sans", Sans-serif;
    font-weight: 400;
    display: flex;
    align-items: center;
  }
}