/* ========================================
   Cards
   ======================================== */

.card {
  display: block;
  box-sizing: border-box;
}

.card__placeholder-icon {
  width: 2.5rem; /* 40px */
  height: 2.5rem;
  color: var(--color-grey-400);
}

/* ---------- review-card ---------- */
.card-review {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 23.9375rem; /* 383px */
  height: 28.625rem; /* 458px */
  padding: 1.875rem 3.125rem; /* 30px 50px */
  border-radius: 1.875rem; /* 30px */
  background-color: var(--color-brand-light-2);
  text-align: center;
}

.card-review__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18rem; /* 288px */
  height: 18rem; /* 288px */
  margin-bottom: 2.5rem; /* 40px */
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-brand-light-3);
  flex-shrink: 0;
}

.card-review__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9375rem; /* 15px */
}

.card-review__title {
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: 1rem; /* 16px */
  color: var(--color-text-dark);
}

.card-review__text {
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  color: var(--color-text-dark);
}

/* ---------- cta-product-card ---------- */
.card-cta-product {
  position: relative;
  width: 34.1875rem; /* 547px */
  height: 39.6875rem; /* 635px */
  padding: 3.75rem 2.5rem; /* 60px 40px */
  border-radius: 1.875rem; /* 30px */
  overflow: hidden;
  background-color: var(--color-brand-light-3);
}

.card-cta-product__media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-light-3);
}

.card-cta-product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-cta-product__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1.25rem; /* 20px */
  padding: 3.75rem 2.5rem; /* 60px 40px */
  background-color: rgba(51, 51, 51, 0.3); /* #333 30% */
  opacity: 0;
  transition: opacity 0.4s ease;
  text-align: left;
  pointer-events: none;
}

.card-cta-product:hover .card-cta-product__overlay,
.card-cta-product:focus-within .card-cta-product__overlay {
  opacity: 1;
}

.card-cta-product:hover .card-cta-product__media .card__placeholder-icon,
.card-cta-product:focus-within .card-cta-product__media .card__placeholder-icon {
  opacity: 0;
}

.card-cta-product__title {
  font-family: var(--font-suit);
  font-weight: 500;
  font-size: 1.75rem; /* 28px */
  color: var(--color-white);
}

.card-cta-product__text {
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5; /* 150% */
  color: var(--color-white);
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .card-cta-product {
    width: 100%;
    height: 25.6875rem; /* 411px */
    padding: 2.5rem 1.25rem; /* 40px 20px */
  }

  .card-cta-product__overlay {
    gap: 0.75rem; /* 12px */
    padding: 2.5rem 1.25rem; /* 40px 20px */
  }

  .card-cta-product__title {
    font-size: clamp(1.091rem, 2.737vw, 1.5rem); /* 24px */
  }

  .card-cta-product__text {
    font-size: clamp(0.75rem, 1.955vw, 1rem); /* 16px */
  }
}

@media (max-width: 47.9375rem) {
  .card-cta-product {
    width: 100%;
    height: 20.3125rem; /* 325px */
    padding: 2.5rem 1.25rem; /* 40px 20px */
  }

  .card-cta-product__overlay {
    gap: 0.625rem; /* 10px */
    padding: 2.5rem 1.25rem; /* 40px 20px */
  }

  .card-cta-product__title {
    font-size: clamp(0.909rem, 4.545vw, 1.25rem); /* 20px */
  }

  .card-cta-product__text {
    font-size: clamp(0.75rem, 3.636vw, 1rem); /* 16px */
    word-break: keep-all;
    text-wrap: pretty;
  }
}

/* ---------- material-card ---------- */
.card-material {
  position: relative;
  width: 35rem; /* 560px */
  height: 39.5625rem; /* 633px */
  padding: 3.75rem 5rem; /* 60px 80px */
  overflow: hidden;
  background-color: var(--color-brand-light-3);
}

.card-material__media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-light-3);
}

.card-material__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.4s ease;
}

.card-material__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 3.75rem 5rem; /* 60px 80px */
  background-color: rgba(166, 142, 114, 0.7); /* brand/point 70% */
  opacity: 0;
  transition: opacity 0.4s ease;
  text-align: center;
  pointer-events: none;
}

.card-material:hover .card-material__overlay,
.card-material:focus-within .card-material__overlay {
  opacity: 1;
}

.card-material:hover .card-material__media img,
.card-material:focus-within .card-material__media img {
  transform: scale(1.05);
}

.card-material:hover .card-material__media .card__placeholder-icon,
.card-material:focus-within .card-material__media .card__placeholder-icon {
  opacity: 0;
}

.card-material__eng-title {
  margin-bottom: 0.625rem; /* 10px */
  font-family: var(--font-paperlogy);
  font-weight: 500;
  font-size: 1.25rem; /* 20px */
  color: var(--color-brand-light-2);
}

.card-material__title {
  margin-bottom: 2.1875rem; /* 35px */
  font-family: var(--font-suit);
  font-weight: var(--fw-suit-bold);
  font-size: 1.75rem; /* 28px */
  color: var(--color-white);
}

.card-material__text {
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5; /* 150% */
  color: var(--color-white);
}

/* ---------- product-card ---------- */
.card-product {
  display: flex;
  flex-direction: column;
  width: 51.875rem; /* 830px */
}

.card-product__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 51.875rem; /* 830px */
  height: 23.5625rem; /* 377px */
  margin-bottom: 1rem; /* 16px */
  overflow: hidden;
  background-color: var(--color-brand-light-3);
}

.card-product__media img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
}

.card-product__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.25rem;
  padding-block: 1.875rem; /* 30px */
  border-top: 0.0625rem solid var(--color-grey-300); /* #D2D5DA */
  border-bottom: 0.0625rem solid var(--color-grey-300);
  text-align: left;
}

.card-product__title {
  margin: 0;
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  letter-spacing: 0.1em; /* 10% */
  color: var(--color-text-dark); /* #333 */
}

.card-product__name {
  font-family: var(--font-paperlogy);
  font-weight: 600; /* Semibold */
  font-size: 1.125rem; /* 18px */
}

.card-product__text {
  margin: 0;
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: #737373;
}

.card-product__sizes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0;
  padding: 0.375rem 0.875rem; /* 6px 14px */
  border-radius: 6.25rem; /* pill */
  background-color: var(--color-grey-400);
  font-family: var(--font-paperlogy);
  font-weight: 500; /* Medium */
  font-size: 0.875rem; /* 14px */
  letter-spacing: 0.1em; /* 10% */
  color: var(--color-white);
}

/* ---------- event-card ---------- */
.card-event {
  width: 34.125rem; /* 546px */
}

.card-event__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34.125rem; /* 546px */
  height: 26.9375rem; /* 431px */
  margin-bottom: 0.875rem; /* 14px */
  overflow: hidden;
  background-color: var(--color-brand-light-3);
}

.card-event__media img,
.card-event__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-event__title {
  margin: 0;
  font-family: var(--font-suit);
  font-weight: 600;
  font-size: 1.375rem; /* 22px */
  color: var(--color-text-dark); /* #333 */
  text-align: left;
}

a.card-event {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.card-event--ended {
  pointer-events: none;
  cursor: default;
  user-select: none;
}

.card-event--ended .card-event__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
}

.card-event__status {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font-suit);
  font-weight: 500;
  font-size: 1.25rem; /* 20px */
  color: var(--color-white);
  text-align: center;
  pointer-events: none;
}

@media (max-width: 63.9375rem) {
  .card-event__status {
    font-size: clamp(0.75rem, 1.368vw, 0.875rem); /* 14px */
  }
}

@media (max-width: 47.9375rem) {
  .card-material__eng-title {
    margin-bottom: 0.625rem; /* 10px */
    font-size: clamp(0.818rem, 4.091vw, 1.125rem); /* 18px */
  }

  .card-material__title {
    margin-bottom: 2.1875rem; /* 35px */
    font-size: clamp(1.091rem, 5.455vw, 1.5rem); /* 24px */
  }

  .card-material__text {
    max-width: 21.25rem; /* 340px */
    word-break: keep-all;
    text-wrap: pretty;
    font-size: clamp(0.75rem, 3.636vw, 1rem); /* 16px */
  }
}