/* 幸せレポートの横型カード(Figma: report-card/small)
 * SPをベースに、768px以上でPC variantへ切り替える。 */
.guest-report-card-small {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-0);
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  height: 173.333px;
  overflow: hidden;
  border-radius: var(--radius-4);
  background: var(--guest-color-background-white);
  box-shadow: 0 0 16px rgba(248, 150, 65, 0.2);
  transition: box-shadow 0.3s ease;
  color: var(--guest-color-text-default);
  font-family: var(--guest-font-family);
  text-decoration: none;
}

.guest-report-card-small:hover {
  box-shadow: 0 0 24px rgba(248, 150, 65, 0.6);
}

.guest-report-card-small__visual {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 1px;
  overflow: hidden;
}

.guest-report-card-small__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guest-report-card-small__title {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacing-1) var(--spacing-2);
  backdrop-filter: blur(4px);
  background: #fffdfacc;
  color: var(--guest-color-text-default);
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-heading);
  word-break: break-word;
}

.guest-report-card-small__meta {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  box-sizing: border-box;
  width: 100px;
  height: 100%;
  padding: var(--spacing-6);
  font-size: var(--guest-font-size-xs);
  line-height: var(--guest-line-height-body);
  white-space: nowrap;
}

.guest-report-card-small__person {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
}

.guest-report-card-small__gender,
.guest-report-card-small__age {
  font-weight: var(--guest-font-weight-bold);
}

.guest-report-card-small__gender--male {
  color: #8690df;
}

.guest-report-card-small__gender--female {
  color: #f17eaf;
}

.guest-report-card-small__cross {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
}

.guest-report-card-small__cross::before {
  position: absolute;
  inset: 0;
  content: "";
  background-color: var(--color-brown-400);
  -webkit-mask: url(/img/guest/icon_cross.svg) no-repeat center / contain;
  mask: url(/img/guest/icon_cross.svg) no-repeat center / contain;
}

@media (min-width: 768px) {
  .guest-report-card-small {
    height: 168px;
  }

  .guest-report-card-small__visual {
    flex: none;
    width: 252px;
  }

  .guest-report-card-small__title {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--guest-font-size-base);
  }

  .guest-report-card-small__meta {
    width: 108px;
    font-size: var(--guest-font-size-sm);
  }
}