/* FIXME: Adjust font better with scrolling */

.lab-card {
  --lab-card-target-width: clamp(220px, 90vw, var(--lab-card-max-width, 350px));
  --lab-card-size-reference: min(var(--lab-card-target-width), max(200px, var(--lab-card-min-height, 375px)));
  --lab-card-base-font-size: clamp(0.7rem, calc(0.7rem + (var(--lab-card-size-reference) - 220px) * 0.05), 1.1rem);
  width: min(100%, var(--lab-card-target-width));
  min-height: var(--lab-card-min-height, 375px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  font-size: var(--lab-card-base-font-size);
  line-height: 1.4;
}

.lab-card__image {
  position: relative;
  width: 100%;
  flex: var(--lab-card-image-ratio, 60);
  min-height: calc(var(--lab-card-min-height, 375px) * var(--lab-card-image-ratio, 60) / 100);
  background-color: #e0e0e0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: flex 0.2s ease-in-out, min-height 0.2s ease-in-out;
}

.lab-card__image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lab-card__content {
  width: 100%;
  flex: var(--lab-card-content-ratio, 40);
  min-height: calc(var(--lab-card-min-height, 375px) * var(--lab-card-content-ratio, 40) / 100);
  background: #ffffff;
  padding: clamp(12px, 2vw, 16px) clamp(14px, 3vw, 18px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: flex 0.2s ease-in-out, min-height 0.2s ease-in-out, padding 0.2s ease-in-out;
  font-size: var(--lab-card-base-font-size);
}

.lab-card__title {
  margin: 0;
  font-size: clamp(calc(var(--lab-card-base-font-size) * 1.15), calc(var(--lab-card-base-font-size) * 1.25), calc(var(--lab-card-base-font-size) * 1.45));
  line-height: 1.2;
  text-wrap: balance;
}

.lab-card__description {
  margin: 0;
  font-size: clamp(calc(var(--lab-card-base-font-size) * 0.9), var(--lab-card-base-font-size), calc(var(--lab-card-base-font-size) * 1.1));
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lab-card__cta {
  font-weight: 700;
  margin-top: auto;
  font-size: clamp(calc(var(--lab-card-base-font-size) * 0.95), calc(var(--lab-card-base-font-size) * 1.05), calc(var(--lab-card-base-font-size) * 1.15));
  line-height: 1.3;
}

/* Clickable card link reset */
.lab-card--link {
  display: flex;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.lab-card__image--hidden {
  display: none;
}

.lab-card__content--hidden {
  display: none;
}

.lab-card--link:hover,
.lab-card--link:focus {
  text-decoration: none;
}