/*
 * doctor-related.css
 * ドクター紹介の「症例」「ブログ／YouTube（タブ）」（template-parts/block-doctor-related.php）
 * ボタン・Beforeラベルは症例写真（case.css）と同じ見た目。case.css に頼らず、このファイルだけで完結させる
 * 画像の縦横比は PC/SP 共通：症例 1:1、ブログ 16:10、YouTube 16:9、Instagram 3:4
 */

.p-doctor-related__more {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 320px;
  height: 44px;
  margin: 40px auto 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #fa657a;
  background: #fff;
  border: 1px solid #fa657a;
  border-radius: 22px;
  transition: 0.3s;
}
.p-doctor-related__more i {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
.p-doctor-related__more:hover {
  color: #fff;
  background: #fa657a;
  opacity: 1;
}

/* ====================================================
   症例
   ==================================================== */

.content .doctor-detail .p-doctor-case__lead {
  margin-bottom: 32px;
  font-size: 15px;
  line-height: 1.8;
}

.p-doctor-case__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 24px;
}

.p-doctor-case__image {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
  overflow: hidden;
  background: #f5f5f5;
}
.p-doctor-case__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.p-doctor-case__image:hover {
  opacity: 1;
}
.p-doctor-case__image:hover img {
  transform: scale(1.04);
}

.p-doctor-case__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  min-width: 77px;
  padding: 4px 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
  color: #333;
  background: #dfdfdf;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  box-sizing: border-box;
}

.content .doctor-detail .p-doctor-case__date {
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1;
  color: #999;
}

.content .doctor-detail .p-doctor-case__category {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: #fa657a;
}

.content .doctor-detail .p-doctor-case__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.p-doctor-case__title a {
  color: #333;
}

/* ====================================================
   タブ
   ==================================================== */

.p-doctor-tab__list {
  display: flex;
  gap: 4px;
  margin-bottom: 32px;
  border-bottom: 2px solid #fa657a;
}

.p-doctor-tab__btn {
  flex: 1;
  padding: 16px 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #333;
  background: #faf5f5;
  border: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: 0.3s;
}

.p-doctor-tab__btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

/* トップページの「DOCTORS BLOG ドクターズブログ」に合わせ、英字を大きく・日本語を小さく */
.p-doctor-tab__en {
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.06em;
}

.p-doctor-tab__ja {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.p-doctor-tab__btn[aria-selected="true"] {
  color: #fff;
  background: #fa657a;
}

.p-doctor-tab__panel[hidden] {
  display: none;
}

/* ブログ */
.p-doctor-blog__item {
  border-bottom: 1px solid #dedede;
}

.p-doctor-blog__link {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  color: #333;
}

.p-doctor-blog__link:hover {
  opacity: 0.7;
}

.p-doctor-blog__image {
  flex-shrink: 0;
  align-self: flex-start; /* タイトルが長くても 16:10 を保つ */
  width: 160px;
  height: 100px; /* 16:10 */
  overflow: hidden;
  background: #e6e6e6;
}

.p-doctor-blog__image img,
.p-doctor-video__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-doctor-blog__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.p-doctor-blog__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.p-doctor-blog__date,
.p-doctor-video__date {
  font-size: 12px;
  line-height: 1;
  color: #999;
}

.p-doctor-blog__category {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #fa657a;
  border: 1px solid #fa657a;
  border-radius: 2px;
}

.p-doctor-blog__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

/* YouTube */
.p-doctor-video {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 20px;
}

.p-doctor-video__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #333;
}

.p-doctor-video__link:hover {
  opacity: 0.7;
}

.p-doctor-video__image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e6e6e6;
}

/* 再生アイコン */
.p-doctor-video__image::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 40px;
  background: #f00;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

.p-doctor-video__image::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-35%, -50%);
}

.p-doctor-video__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

/* Instagram（タブの中。横に3件。画像は今のInstagramのプロフィール一覧と同じ縦長 3:4） */

.p-doctor-insta__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.p-doctor-insta__link {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  /* 画像が未登録のときは Instagram の色 */
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.p-doctor-insta__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.p-doctor-insta__link:hover {
  opacity: 1;
}

.p-doctor-insta__link:hover img {
  transform: scale(1.04);
}

/* リールの再生マーク（右上。白い写真の上でも見えるよう半透明の丸を敷く） */
.p-doctor-insta__reel {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
}

/* ====================================================
   SP
   ==================================================== */

@media (max-width: 768px) {
  .p-doctor-related__more {
    max-width: none;
    margin-top: 32px;
  }

  .p-doctor-case__label {
    min-width: 64px;
    padding: 2px 8px;
    font-size: 13px;
  }

  .p-doctor-case__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 13px;
  }

  /* SPは4件 */
  .p-doctor-case__item:nth-child(n + 5) {
    display: none;
  }

  .content .doctor-detail .p-doctor-case__title {
    font-size: 14px;
  }

  .p-doctor-tab__list {
    margin-bottom: 8px;
  }

  .p-doctor-tab__btn {
    padding: 10px 4px;
    font-size: 14px;
  }

  /* タブが3つでも「DOCTORS BLOG」が1行に収まる大きさ */
  .p-doctor-tab__en {
    font-size: 12px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .p-doctor-tab__ja {
    font-size: 10px;
  }

  .p-doctor-blog__link {
    gap: 12px;
    padding: 16px 0;
  }

  .p-doctor-blog__image {
    width: 112px;
    height: 70px; /* 16:10 */
  }

  .p-doctor-blog__title {
    font-size: 14px;
  }

  .p-doctor-video {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
  }

  /* SPは2件 */
  .p-doctor-video__item:nth-child(n + 3) {
    display: none;
  }

  .p-doctor-insta__list {
    gap: 4px;
    margin-top: 16px;
  }

  .p-doctor-insta__reel {
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
  }

  .p-doctor-insta__reel svg {
    width: 16px;
    height: 16px;
  }
}