/* c-doctor-001: 医師プロフィールカード */

.c-doctor-001 {
  text-align: center;

  .c-doctor-001__photo {
    margin-bottom: var(--wp--preset--spacing--md);
    overflow: hidden;
    border-radius: var(--wp--custom--border--radius--lg);

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
      aspect-ratio: 4 / 5;
    }
  }

  .c-doctor-001__role {
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--gray-dark);
    margin-bottom: var(--wp--preset--spacing--xs);
  }

  .c-doctor-001__name {
    font-size: var(--wp--preset--font-size--lg);
    color: var(--wp--preset--color--gray-darkest);
    margin-bottom: var(--wp--preset--spacing--xs);
    letter-spacing: var(--wp--custom--letter-spacing--wide);
  }

  .c-doctor-001__cert {
    font-size: var(--wp--preset--font-size--tiny);
    color: var(--wp--preset--color--gray);
  }
}

/* ══════════════════════════════════════════════════
   写真形状
   ══════════════════════════════════════════════════ */

/** @element root  @group 写真形状  @label 円形  @order 1 */
.c-doctor-001--photo-circle .c-doctor-001__photo {
  border-radius: var(--wp--custom--border--radius--full);
}
.c-doctor-001--photo-circle .c-doctor-001__photo img {
  aspect-ratio: 1 / 1;
}

/** @element root  @group 写真形状  @label 正方形  @order 2 */
.c-doctor-001--photo-square .c-doctor-001__photo {
  border-radius: var(--wp--custom--border--radius--md);
}
.c-doctor-001--photo-square .c-doctor-001__photo img {
  aspect-ratio: 1 / 1;
}

/* ══════════════════════════════════════════════════
   配置
   ══════════════════════════════════════════════════ */

/** @element root  @group 配置  @label 左寄せ  @order 1 */
.c-doctor-001--align-left {
  text-align: left;
}

/* ══════════════════════════════════════════════════
   写真サイズ
   ══════════════════════════════════════════════════ */

/** @element root  @group 写真サイズ  @label 小  @order 1 */
.c-doctor-001--photo-sm .c-doctor-001__photo {
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

/** @element root  @group 写真サイズ  @label 大  @order 2 */
.c-doctor-001--photo-lg .c-doctor-001__photo {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}