/* ============================================================
   Kotobuki Dental Clinic — doctors page styles
   - doctors/index.html 固有のスタイル
   - common.css の後に読み込む
   ============================================================ */

/* --- Director（院長紹介） -------------------------------- */
.director {
  display: grid;
  gap: var(--space-6);
}
/* CHIEF DENTIST は director 内では左揃え（共通の中央寄せを上書き） */
.director .section-title__sub {
  text-align: left;
}
@media (min-width: 880px) {
  .director { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); align-items: start; }
}
.director__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
}
.director__name {
  font-size: var(--size-2xl);
  margin: var(--space-2) 0 var(--space-5);
  letter-spacing: var(--tracking-tight);
}
.director__name small {
  display: block;
  font-size: var(--size-sm);
  color: var(--color-text-soft);
  font-weight: 400;
  margin-top: 2px;
}
.director__greet { margin-bottom: var(--space-6); }

/* --- Staff Grid ----------------------------------------- */
.staff-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
  .staff-grid { grid-template-columns: repeat(4, 1fr); }
}
.staff-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
}
.staff-card__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.staff-card__role {
  font-size: var(--size-xs);
  color: var(--color-accent-dark);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin: 0 0 var(--space-1);
  font-family: var(--font-en);
}
.staff-card__name {
  font-size: var(--size-md);
  margin: 0 0 var(--space-3);
}
.staff-card__msg {
  font-size: var(--size-sm);
  color: var(--color-text-soft);
  margin: 0;
  line-height: var(--leading-normal);
}

/* --- Recruit（求人案内・2カラム）-------------------------- */
.recruit {
  background: var(--color-accent-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

/* 左カラム:画像エリア（背景画像 or <img> 差し込み可） */
.recruit__media {
  min-height: 320px;
  aspect-ratio: 4 / 3;
  background-color: var(--color-accent);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recruit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右カラム:テキスト＋ボタン */
.recruit__body {
  padding: var(--space-7) var(--space-6);
}
.recruit__body .section-title__sub {
  text-align: left;
  margin: 0 0 var(--space-2);
}
.recruit__title {
  font-size: var(--size-xl);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.recruit__lead {
  margin: 0 0 var(--space-5);
  color: var(--color-text);
}

/* 募集職種タグ */
.recruit__roles {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.recruit__roles li {
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  color: var(--color-accent-dark);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--size-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
}

/* 歓迎条件の小見出し */
.recruit__h3 {
  font-size: var(--size-md);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.recruit__list {
  margin-bottom: var(--space-6);
}

/* CTA ボタン行 */
.recruit__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* デスクトップ:2カラム横並び（左:画像 / 右:テキスト） */
@media (min-width: 880px) {
  .recruit {
    grid-template-columns: 1.2fr 1fr;       /* 画像を広めに */
    align-items: stretch;
    min-height: 480px;
  }
  .recruit__media {
    min-height: 100%;
    aspect-ratio: auto;                     /* PC では grid に任せて全高で広げる */
  }
  .recruit__body {
    padding: var(--space-8) var(--space-7);
  }
  .recruit__title {
    font-size: var(--size-2xl);
  }
}

/* ============================================================
   Recruit フルワイド版（container を経由せず画面端まで広げる）
   - .section--full-bleed と .recruit--full のセット運用
   - 角丸を 0 にしてセクション全体ブロック型に
   ============================================================ */
.section--full-bleed {
  padding-left: 0;
  padding-right: 0;
}
.recruit--full {
  border-radius: 0;
}
.recruit--full .recruit__body {
  padding: var(--space-7) var(--gutter);
}
@media (min-width: 880px) {
  .recruit--full {
    grid-template-columns: 1fr 1fr;        /* フルワイドでは 1:1 */
    min-height: 560px;
  }
  .recruit--full .recruit__media {
    min-height: 100%;
    aspect-ratio: auto;
  }
  .recruit--full .recruit__body {
    padding: var(--space-9) var(--space-8);
    align-self: center;
    max-width: 640px;                      /* テキストの読みやすさ確保 */
  }
}
@media (min-width: 1200px) {
  .recruit--full {
    min-height: 640px;                     /* 大画面でさらに広げる */
  }
  .recruit--full .recruit__body {
    padding-left: var(--space-9);
  }
}