/* =========================================================
 * medical-pages.css
 * - 親ページ（page-medical-units）のカードUI
 * - 診療科/専門外来/支援部門/チーム医療：共通UI（丸ボタンリスト）
 * - 診療科ページの案内ブロック
 *
 * NOTE:
 * - page-header / page-content / page-title / page-hero は common.css 側
 * - ここでは “医療部門系だけ” を責務にする
 * ======================================================= */


/* =========================================================
 * 0. 親ページ（page-medical-units）: 4カード
 * ======================================================= */
.page-medical-units{
  --page-title-color: var(--brand);

  /* 親ページのテーマ色（archive 側と揃える想定） */
  --tch-department: #4a90e2;
  --tch-special-clinic: #00856A;
  --tch-support-division: #F5A623;
  --tch-team-care: #7B61FF;

  --tch-card-radius: 20px;
  --tch-card-border: 1px;
  --tch-card-shadow: 0 2px 4px rgba(0,0,0,.04);
}

/* cards grid */
.page-medical-units .medical-units-list{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 20px;
}

@media (min-width: 768px){
  .page-medical-units .medical-units-list{
    /* 2行2列（4枚想定） */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* card */
.page-medical-units .medical-unit-item{
  margin: 0;
  padding: 0 0 18px;

  border-radius: var(--tch-card-radius);
  background: #fff;
  box-shadow: var(--tch-card-shadow);
  overflow: hidden;

  border: var(--tch-card-border) solid #00a0c6; /* fallback */
}

/* 枠色：順番前提（診療科 / 専門外来 / 支援部門 / チーム医療） */
.page-medical-units .medical-unit-item:nth-child(1){ border-color: var(--tch-department); }
.page-medical-units .medical-unit-item:nth-child(2){ border-color: var(--tch-special-clinic); }
.page-medical-units .medical-unit-item:nth-child(3){ border-color: var(--tch-support-division); }
.page-medical-units .medical-unit-item:nth-child(4){ border-color: var(--tch-team-care); }

/* header link */
.page-medical-units .medical-unit-link{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 18px;
  text-decoration: none;
  color: #fff;

  border-radius: calc(var(--tch-card-radius) - 2px) calc(var(--tch-card-radius) - 2px) 0 0;
  position: relative;
}

/* header bg */
.page-medical-units .medical-unit-item:nth-child(1) .medical-unit-link{ background: var(--tch-department); }
.page-medical-units .medical-unit-item:nth-child(2) .medical-unit-link{ background: var(--tch-special-clinic); }
.page-medical-units .medical-unit-item:nth-child(3) .medical-unit-link{ background: var(--tch-support-division); }
.page-medical-units .medical-unit-item:nth-child(4) .medical-unit-link{ background: var(--tch-team-care); }

/* hover/focus bg（濃色） */
.page-medical-units .medical-unit-item:nth-child(1) .medical-unit-link:hover,
.page-medical-units .medical-unit-item:nth-child(1) .medical-unit-link:focus-visible{
  background: #3a7ad3;
}
.page-medical-units .medical-unit-item:nth-child(2) .medical-unit-link:hover,
.page-medical-units .medical-unit-item:nth-child(2) .medical-unit-link:focus-visible{
  background: #006e59;
}
.page-medical-units .medical-unit-item:nth-child(3) .medical-unit-link:hover,
.page-medical-units .medical-unit-item:nth-child(3) .medical-unit-link:focus-visible{
  background: #e6971f;
}
.page-medical-units .medical-unit-item:nth-child(4) .medical-unit-link:hover,
.page-medical-units .medical-unit-item:nth-child(4) .medical-unit-link:focus-visible{
  background: #684CF0;
}

/* focus ring */
.page-medical-units .medical-unit-link:focus-visible{
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.page-medical-units .medical-unit-title{
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

/* arrow (hover/focus only) */
.page-medical-units .medical-unit-link::after{
  content: "➜";
  font-size: 18px;

  width: 28px;
  height: 28px;

  border-radius: 999px;
  border: 2px solid #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: 8px;

  opacity: 0;
  transform: translateX(4px);
  transition: opacity .2s ease, transform .2s ease;
}

.page-medical-units .medical-unit-link:hover::after,
.page-medical-units .medical-unit-link:focus-visible::after{
  opacity: 1;
  transform: translateX(0);
}

/* children list */
.page-medical-units .medical-unit-children{
  list-style: none;
  margin: 10px 16px 0 18px;
  padding: 0;

  column-count: 2;
  column-gap: 24px;

  /* multi-column の詰め方を安定（崩れに見えやすいのを軽減） */
  column-fill: balance;
}

.page-medical-units .medical-unit-child-item{
  break-inside: avoid;
  margin: 0 0 4px;
}

.page-medical-units .medical-unit-child-link{
  display: inline-block;
  font-size: 16px;
  line-height: 1.6;
  text-decoration: none;

  color: var(--brand, #004b8d);
  border-bottom: 1px dotted rgba(0,75,141,.3);
}

.page-medical-units .medical-unit-child-link:hover,
.page-medical-units .medical-unit-child-link:focus-visible{
  border-bottom-style: solid;
}

@media (max-width: 600px){
  .page-medical-units .medical-unit-children{
    column-count: 1;
  }
}


/* =========================================================
 * 1. 医療部門ページ群（固定ページ + CPTアーカイブ）
 * - “この範囲だけ” 共通UIを当てる（誤爆防止）
 * ======================================================= */

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
){
  --unit-color: #4a90e2; /* default */
}

/* 部門別テーマ色 */
:where(.page-special-clinics, .post-type-archive-special_clinic){ --unit-color: #00856A; }
:where(.page-support-units, .post-type-archive-support_division){ --unit-color: #F5A623; }
:where(.page-team-care, .post-type-archive-team_care){ --unit-color: #7B61FF; }


/* =========================================================
 * 2. 医療部門共通：丸ボタンリスト
 * ======================================================= */

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .unit-list{
  list-style: none;
  margin: 32px 0 48px;
  padding: 0;

  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 20px;
}

@media (min-width: 768px){
  :where(
    .page-special-clinics,
    .page-support-units,
    .page-team-care,
    .post-type-archive-department,
    .post-type-archive-special_clinic,
    .post-type-archive-support_division,
    .post-type-archive-team_care
  ) .unit-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .unit-list-item{
  margin: 0;
}

/* 通常リンク / ブロックボタンを同一UIへ */
:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) :is(
  .unit-list-link,
  .unit-list-button .wp-block-button__link,
  .wp-block-button.unit-list-button .wp-block-button__link
){
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 64px;
  padding: 12px 16px;

  border-radius: 999px;
  border: 2px solid var(--unit-color, #4a90e2);
  background: #fff;
  color: var(--unit-color, #4a90e2);

  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;

  box-shadow: 0 2px 4px rgba(0,0,0,.04);
  transition:
    background-color .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    transform .1s ease;
}

/* WPボタンの色は上書きされやすいので最小限 !important */
:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,

  .post-type-archive-team_care
) :is(
  .unit-list-button .wp-block-button__link,
  .wp-block-button.unit-list-button .wp-block-button__link
){
  color: var(--unit-color, #4a90e2) !important;
}

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) :is(
  .unit-list-link,
  .unit-list-button .wp-block-button__link,
  .wp-block-button.unit-list-button .wp-block-button__link
):hover,
:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) :is(
  .unit-list-link,
  .unit-list-button .wp-block-button__link,
  .wp-block-button.unit-list-button .wp-block-button__link
):focus-visible{
  background: var(--unit-color, #4a90e2);
  color: #fff !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* フォーカス強調（a11y） */
:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) :is(
  .unit-list-link,
  .unit-list-button .wp-block-button__link,
  .wp-block-button.unit-list-button .wp-block-button__link
):focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px var(--unit-color, #4a90e2);
}


/* =========================================================
 * 3. 子ページ未設定時のメッセージ
 * ======================================================= */

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .no-units{
  margin-top: 24px;
  padding: 16px 20px;
  border-left: 4px solid var(--unit-color, #4a90e2);
  background: var(--surface, #f5f7fa);
  color: var(--text, #333);
  font-size: 14px;
}


/* =========================================================
 * 4. 診療科ページ特有の案内ブロック（医療部門ページ群に限定）
 * ======================================================= */

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .wp-block-group.departments-info-block{
  max-width: var(--container, 1100px);
  margin: 40px auto 60px;
  padding: 24px 28px;
  background: var(--surface, #f5f7fa);
  border-left: 4px solid var(--brand, #004b8d);
  border-radius: 4px;
}

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .departments-info-block h2,
:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .departments-info-block h3{
  margin-top: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand, #004b8d);
}

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .departments-info-block p{
  line-height: 1.7;
  margin: 0 0 14px;
  color: var(--muted, #444);
}

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .departments-info-block ul{
  margin: 8px 0 16px;
  padding-left: 20px;
}

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .departments-info-block ul li{
  margin-bottom: 4px;
  line-height: 1.6;
  color: var(--text, #333);
}

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .departments-info-block a{
  color: var(--brand, #004b8d);
  text-decoration: underline;
}

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .departments-info-block a:hover,
:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .departments-info-block a:focus-visible{
  text-decoration: none;
}

@media (max-width: 600px){
  :where(
    .page-special-clinics,
    .page-support-units,
    .page-team-care,
    .post-type-archive-department,
    .post-type-archive-special_clinic,
    .post-type-archive-support_division,
    .post-type-archive-team_care
  ) .wp-block-group.departments-info-block{
    padding: 18px 20px;
  }

  :where(
    .page-special-clinics,
    .page-support-units,
    .page-team-care,
    .post-type-archive-department,
    .post-type-archive-special_clinic,
    .post-type-archive-support_division,
    .post-type-archive-team_care
  ) .departments-info-block h2,
  :where(
    .page-special-clinics,
    .page-support-units,
    .page-team-care,
    .post-type-archive-department,
    .post-type-archive-special_clinic,
    .post-type-archive-support_division,
    .post-type-archive-team_care
  ) .departments-info-block h3{
    font-size: 18px;
  }
}


/* =========================================================
 * 5. common.css の .page-content ul/li の影響を打ち消す（医療部門限定）
 * ======================================================= */

/* 5-1) 親ページ：カード一覧 ul を common.css から守る */
.page-medical-units .page-content :is(ul.medical-units-list){
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 5-2) 診療科/専門外来/支援部門/チーム医療：丸ボタン ul の無指定化 */
:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .page-content :is(ul.unit-list){
  list-style: none !important;
  margin: 32px 0 48px !important; /* 設計値を維持 */
  padding: 0 !important;
}

/* li 側も念のため（marker を確実に消す） */
:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .page-content :is(.unit-list-item){
  margin: 0 !important;
  list-style: none !important;
}

:where(
  .page-special-clinics,
  .page-support-units,
  .page-team-care,
  .post-type-archive-department,
  .post-type-archive-special_clinic,
  .post-type-archive-support_division,
  .post-type-archive-team_care
) .page-content :is(.unit-list-item)::marker{
  content: "" !important;
}

/* 5-3) 親ページ：子ページ一覧（リンク群）も marker 無効化 */
.page-medical-units .page-content :is(ul.medical-unit-children){
  list-style: none !important;
  padding: 0 !important;
}

.page-medical-units .page-content :is(.medical-unit-child-item){
  list-style: none !important;
}

.page-medical-units .page-content :is(.medical-unit-child-item)::marker{
  content: "" !important;
}


/* ======================================================
 * 6. 専門外来テーブル（specialty-table）
 * - SP：外来名＋診療科を1行・中央
====================================================== */

@media (max-width: 767px){

  /* 対象テーブルのみ構造を解除 */
  .wp-block-table.specialty-table table,
  .wp-block-table.specialty-table thead,
  .wp-block-table.specialty-table tbody,
  .wp-block-table.specialty-table tr,
  .wp-block-table.specialty-table th,
  .wp-block-table.specialty-table td{
    display: block;
    width: 100%;
  }

  /* ヘッダー行は非表示 */
  .wp-block-table.specialty-table thead{
    display: none;
  }

  /* 1外来＝1カード */
  .wp-block-table.specialty-table tbody tr{
    margin: 0 0 20px;
    padding: 16px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 12px;
    background: #fff;

    /* 行頭（外来名＋診療科）を中央へ */
    text-align: center;
  }

  /* セル共通（table由来のborder/paddingを排除） */
  .wp-block-table.specialty-table td{
    padding: 6px 0;
    border: none;
  }

  /* 外来名（1列目） */
  .wp-block-table.specialty-table td:nth-child(1){
    display: inline;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
  }

  /* 担当診療科（4列目） */
  .wp-block-table.specialty-table td:nth-child(4){
    display: inline;
    margin-left: 8px;

    font-size: 15px;
    font-weight: 600;
    color: var(--brand, #1e5aa6);

    border: none;
    padding: 0;
  }

  /* 主な診療内容・診療日時は下段（左寄せ） */
  .wp-block-table.specialty-table td:nth-child(2),
  .wp-block-table.specialty-table td:nth-child(3){
    display: block;
    text-align: left;
    margin-top: 10px;
    line-height: 1.7;
  }

  /* 診療日時の <br> 折返しは自然に */
  .wp-block-table.specialty-table td:nth-child(3){
    white-space: normal;
  }
}