/* =============================================================
   クリニック詳細 — 最小構成デザイン (tmp/clinic-detail-minimal.php)
   Figma: 事故治療ナビ 9875:4711「202607(クリニック詳細 皆無)」
          PC 9875:4882 / SP 9875:5138
   口コミ(.p-cdr__voice-*)・診療時間表(.p-cdr__calendar-*)・タグ(.p-cdr__tag*)・
   地域バナー(.p-detail-around-clinic) は sass/style.css の既存スタイルを流用する。
   (sen-ltd/iput-management#207)
   ============================================================= */
.p-cdm,
.p-cdm * {
  box-sizing: border-box;
}
.p-cdm {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* タグ行は右寄せ (Figma 9875:4885) */
.p-cdm__tags {
  justify-content: flex-end;
}

.p-cdm__cta {
  width: 100%;
}
/* 相談CTR(共通パーツ .c-cta)を本文幅いっぱいへ。共通 cta-soudan.css の PC ルール
   `.c-cta{max-width:728px}` を .p-cdm 配下だけ上書きする(他ページには波及しない)。 */
@media screen and (min-width: 769px) {
  .p-cdm .c-cta {
    max-width: 980px;
  }
}

/* ===== 基本情報カード (Figma 9875:4895) ===== */
.p-cdm__basic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 20px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.p-cdm__basic-title {
  width: 100%;
  margin: 0;
  padding: 0;
  color: #fd6122;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  word-break: break-word;
}
.p-cdm__basic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  padding: 10px 20px;
}
.p-cdm__basic-row {
  display: flex;
  gap: 21px;
  align-items: center;
  width: 100%;
  padding: 5px;
  border-bottom: 1px solid #faa268;
  color: #000;
  font-size: 16px;
  line-height: 1.5;
  word-break: break-word;
}
.p-cdm__basic-label {
  flex: 0 0 80px;
  width: 80px;
}
.p-cdm__basic-value {
  flex: 1 1 auto;
  min-width: 0;
}

/* 地図: Figma のアスペクト比 1860/1212 に合わせる */
.p-cdm__basic-map {
  width: 100%;
  aspect-ratio: 1860 / 1212;
  overflow: hidden;
}
.p-cdm__basic-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.p-cdm__basic-cal {
  width: 100%;
}

/* 外観写真: Figma のアスペクト比 266/189 */
.p-cdm__basic-ext {
  display: block;
  width: 100%;
  aspect-ratio: 266 / 189;
  object-fit: cover;
  border-radius: 10px;
}

/* PC: 左=院名/住所+地図+診療時間、右=最寄り/診療内容+外観写真。
   明示配置なので項目が未入力で行が減っても左右がずれない。 */
@media screen and (min-width: 769px) {
  .p-cdm__basic-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 5px;
    row-gap: 10px;
    align-items: start;
    padding: 0 20px;
  }
  .p-cdm__basic-row.is-l1 { grid-column: 1; grid-row: 1; }
  .p-cdm__basic-row.is-l2 { grid-column: 1; grid-row: 2; }
  .p-cdm__basic-row.is-r1 { grid-column: 2; grid-row: 1; }
  .p-cdm__basic-row.is-r2 { grid-column: 2; grid-row: 2; }
  .p-cdm__basic-map { grid-column: 1; grid-row: 3; }
  .p-cdm__basic-cal { grid-column: 1; grid-row: 4; }
  .p-cdm__basic-ext { grid-column: 2; grid-row: 3 / span 2; align-self: start; }

  /* 右カラムが空の院は1カラムに畳む(右半分が丸ごと空白になるのを防ぐ) */
  .p-cdm__basic-grid.is-single {
    grid-template-columns: 1fr;
  }
  .p-cdm__basic-grid.is-single > * {
    grid-column: 1;
    grid-row: auto;
  }
}

@media screen and (max-width: 768px) {
  .p-cdm {
    gap: 16px;
  }
  .p-cdm__basic-title {
    font-size: 18px;
  }
  .p-cdm__basic-grid {
    padding: 0 12px;
  }
  .p-cdm__basic-row {
    font-size: 14px;
    gap: 12px;
  }
  .p-cdm__basic-label {
    flex-basis: 64px;
    width: 64px;
  }
}