/* ============================================
   c-comment-01 — POINTコメントカード
   丸写真+コメント、白カード＋左上リボン帯（Figma照合済）
   ============================================ */

/* --- WP ブロックマージンリセット --- */
:is(.c-comment-01 *) {
  margin: 0;
}

/* --- Card container --- */
.c-comment-01 {
  container-type: inline-size;
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* --- Decorative ribbon band (top-left pink accent, Figma) --- */
.c-comment-01::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32rem;
  max-width: 60%;
  height: 5rem;
  background: var(--color-primary-lightest);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
}

/* --- Inner layout (photo + body) --- */
.c-comment-01__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-xl);
  padding: var(--space-3-xl);
}

@container (max-width: 599px) {
  .c-comment-01__inner {
    padding: var(--space-2-xl);
    gap: var(--space-xl);
  }
}

/* --- Doctor avatar --- */
.c-comment-01__avatar-wrap {
  flex-shrink: 0;
}

.c-comment-01__avatar {
  width: var(--thumb-sm);
  height: var(--thumb-sm);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-bg-sub);
}

@container (max-width: 599px) {
  .c-comment-01__avatar {
    width: var(--thumb-xs);
    height: var(--thumb-xs);
  }
}

.c-comment-01__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Body (label + text + doctor info) --- */
.c-comment-01__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* --- POINT label --- */
.c-comment-01__label {
  font-family: var(--font-family-en);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-normal);
  font-style: italic;
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-none);
}

/* --- Comment text --- */
.c-comment-01__text {
  font-size: var(--font-size-md);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}

/* --- Doctor info (title + name) --- */
.c-comment-01__doctor {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--font-size-md);
  color: var(--color-text);
}

.c-comment-01__doctor-title {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light);
}

.c-comment-01__doctor-name {
  font-weight: var(--font-weight-medium);
}

/* =============================================
   Responsive: SP (max-width: 599px)
   ============================================= */
@container (max-width: 599px) {
  .c-comment-01__label {
    font-size: var(--font-size-lg);
  }

  .c-comment-01__text {
    font-size: var(--font-size-sm);
  }

  .c-comment-01__doctor {
    font-size: var(--font-size-xs);
  }
}