/* ==========================================================================
   講師紹介ページ用スタイル
   ========================================================================== */

.instructor-grid {
    display: grid;
    /* 画面幅に合わせて列数を自動調整 */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.instructor-card {
    /* 既存のcardスタイルを継承しつつ、中の要素を中央揃えに */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.instructor-card img {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 50%; /* 画像を正円形に */
    margin-bottom: 1.2rem;
    /* 既存のカードホバーと合わせ、少しリッチな影を追加 */
    box-shadow: 0 6px 12px rgba(141, 110, 99, 0.1);
    border: 5px solid #fff; /* 白い縁取りで写真を際立たせる */
    transition: all 0.3s ease-in-out;
}

/* カードのホバーエフェクトと連動して、画像も少し動かす */
.instructor-card:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(141, 110, 99, 0.2);
}

.instructor-card .card-title {
    /* 講師名は少し濃い色にして読みやすく */
    color: var(--color-heading); 
}

.instructor-card .card-text {
    /* 経歴の文字サイズを少し調整 */
    font-size: 0.9rem;
    flex-grow: 1; /* カードの高さを揃えるため */
}

/* レスポンシブ対応 */
@media (max-width: 520px) {
    .instructor-grid {
        /* スマートフォンでは少しギャップを狭くする */
        gap: 1.5rem;
    }
}