/* ============================================================================
 * Блок «Преподаватели» (teachers-section) — общий компонент темы.
 *
 * Канонический источник стилей — страница «О нас» (tpl-about.php).
 * Подключается условно на шаблонах, где есть блок (см. inc/enqueue.php).
 *
 * Структура DOM:
 *   <section class="teachers-section">
 *     <div class="container">
 *       <h2 class="teachers-title">...</h2>
 *       <div class="teachers-cards-wrapper">           ← desktop (>=1400px)
 *         <div class="teacher-card teacher-card-N">    ← 3 карточки (1, 2, 3)
 *           <div class="teacher-avatar teacher-avatar-N"></div>
 *           <div class="teacher-info">
 *             <div class="teacher-header"><h4>Имя</h4><div class="teacher-position">...</div></div>
 *             <ul class="teacher-achievements"><li>...</li></ul>
 *             [<div class="teacher-achievement-right">...</div>]  ← только в card-3
 *             <a class="more">Подробнее</a>
 *           </div>
 *         </div>
 *       </div>
 *       <div class="teachers-adaptive-wrapper">        ← планшеты/мобила (<=1399px)
 *         <div class="teacher-adaptive-group">
 *           <div class="teacher-adaptive-photo"><div class="teacher-avatar teacher-avatar-N"></div></div>
 *           <div class="teacher-adaptive-info">...</div>
 *         </div>
 *       </div>
 *       <div class="teachers-actions"><a class="btn">Все преподаватели</a></div>
 *     </div>
 *   </section>
 *
 * Использование на новой странице:
 *   1) Скопировать разметку из tpl-about.php (≈670–738 строки).
 *   2) В inc/enqueue.php добавить шаблон в массив enqueue для dk-teachers-section.
 *   3) Положить картинки в assets/img/webp/ (имена ниже жёстко зашиты).
 * ========================================================================== */


/* === DESKTOP (>= 1400px) =================================================== */

.teachers-section {
    padding: 80px 0 0;
}

.teachers-title {
    margin-left: 28px;
    margin-bottom: 26px;
}

.teachers-cards-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.teacher-card {
    border-radius: 30px;
    padding: 28px;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
}

.teacher-card-1,
.teacher-card-2 {
    height: 335px;
    flex-direction: row;
}

.teacher-card-3 {
    height: 412px;
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 1.5rem;
}

.teacher-card-1 { background: url('../img/webp/AboutUs_TeacherBack_1.webp') center/cover; }
.teacher-card-2 { background: url('../img/webp/AboutUs_TeacherBack_2.webp') center/cover; }
.teacher-card-3 { background: url('../img/webp/AboutUs_TeacherBack_3.webp') center/cover; }

.teacher-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    order: 1;
    justify-content: space-between;
}

.teacher-card-1 .teacher-info,
.teacher-card-2 .teacher-info {
    margin-right: 245px;
    padding-right: 1.5rem;
}

.teacher-card-1 .teacher-header,
.teacher-card-2 .teacher-header,
.teacher-card-3 .teacher-header {
    flex-shrink: 0;
}

.teacher-card-3 .teacher-info {
    flex: 1;
    justify-content: space-between;
}

.teacher-card-3 .teacher-achievements {
    margin-top: auto;
    margin-bottom: 0;
    max-width: 320px;
}

.teacher-card-3 .teacher-achievement-right {
    position: absolute;
    bottom: 28px;
    right: 28px;
    max-width: 400px;
    margin: 0;
}

.teacher-card-3 .teacher-achievement-right p {
    margin: 0;
    color: var(--color-text-main);
    position: relative;
    padding-left: 1.5rem;
}

.teacher-card-3 .teacher-achievement-right p:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: var(--color-burgundy);
    border-radius: 50%;
}

.teacher-avatar {
    background: transparent;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    order: 2;
}

.teacher-card-1 .teacher-avatar,
.teacher-card-2 .teacher-avatar {
    position: absolute;
    top: 0;
    right: 0;
    width: 295px;
    height: 335px;
    border-radius: 0 0 30px 0;
    margin: 0;
    order: initial;
}

.teacher-card-3 .teacher-avatar {
    position: absolute;
    left: 53%;
    top: 0;
    transform: translateX(-50%);
    width: 428px;
    height: 412px;
    border-radius: 0;
    margin: 0;
    order: initial;
}

.teacher-avatar-1 { background-image: url('../img/webp/TeacherAvatar_4.webp'); }
.teacher-avatar-2 { background-image: url('../img/webp/AboutUs_TeacherAvatar_5.webp'); }
.teacher-avatar-3 { background-image: url('../img/webp/AboutUs_TeacherAvatar_6.webp'); }

.teacher-info h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--color-text-primary);
}

.teacher-position {
    margin-bottom: 1.25rem;
    margin-top: 0.5rem;
    color: var(--color-text-secondary);
}

.teacher-achievements {
    list-style: none;
    padding: 0;
    max-width: 320px;
}

.teacher-achievements li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-main);
}

.teacher-achievements li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: var(--color-burgundy);
    border-radius: 50%;
}

.teacher-card-1 .teacher-achievements li:before,
.teacher-card-2 .teacher-achievements li:before {
    background: var(--color-primary);
}

.teacher-card-1 .teacher-info .more,
.teacher-card-2 .teacher-info .more,
.teacher-card-3 .teacher-info .more {
    position: absolute;
    right: 28px;
    border: none;
    text-decoration: underline;
    align-self: auto;
    background: transparent;
    margin: 0;
    padding: 0;
}

.teacher-card-1 .teacher-info .more { bottom: 22px; color: var(--color-text-main); }
.teacher-card-2 .teacher-info .more { bottom: 22px; color: var(--color-white); }
.teacher-card-3 .teacher-info .more { top: 12px; color: var(--color-text-main); }

.teacher-card-1 .teacher-info .more:hover { background: transparent; color: var(--color-text-main); opacity: 0.8; }
.teacher-card-2 .teacher-info .more:hover { background: transparent; color: var(--color-white);     opacity: 0.8; }
.teacher-card-3 .teacher-info .more:hover { background: transparent; color: var(--color-text-main); opacity: 0.8; }

.teachers-actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

.teachers-actions .btn { width: 100%; }
.teachers-actions .btn:hover { background: var(--color-hover-green); }

.teachers-adaptive-wrapper { display: none; }

.teacher-adaptive-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.teacher-adaptive-photo {
    border-radius: 30px;
    padding: 0;
    overflow: hidden;
    position: relative;
    min-height: 300px;
}

.teacher-adaptive-photo .teacher-avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    order: initial;
    margin: 0;
    transform: none;
}

.teacher-adaptive-info {
    background: var(--color-white);
    border-radius: 30px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.teacher-adaptive-info .teacher-header {
    flex-shrink: 0;
    margin-bottom: 1.5rem;
}

.teacher-adaptive-info .teacher-achievements {
    list-style: none;
    padding: 0;
    margin: 0 0 auto 0;
    flex: 1;
}

.teacher-adaptive-info .teacher-achievements li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-main);
}

.teacher-adaptive-info .teacher-achievements li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

.teacher-adaptive-info .teacher-achievements li:last-child {
    margin-bottom: 1.5rem;
}

.teacher-adaptive-info .btn {
    align-self: flex-start;
    margin-top: auto;
}


/* === ПЛАНШЕТ (1025–1399px) =================================================
 * Переключаем desktop wrapper на адаптивный — карточки в 2 колонки с белой
 * плашкой и фоном-фотографией.
 * ========================================================================== */
@media screen and (max-width: 1399px) and (min-width: 1025px) {
    .teachers-cards-wrapper { display: none; }
    .teachers-adaptive-wrapper { display: block; }

    .teacher-adaptive-group { grid-template-columns: 1fr 1fr; gap: 1.25rem; }

    .teacher-adaptive-photo {
        min-height: 300px;
        overflow: hidden;
        background-color: var(--color-white);
    }
    .teacher-adaptive-photo .teacher-avatar {
        width: 100%;
        height: 100%;
        background-size: contain;
        background-position: center right;
        background-repeat: no-repeat;
        border-radius: 30px;
    }

    .teachers-adaptive-wrapper .teacher-avatar-1 { background-image: url('../img/webp/TeacherAvatar_1024_4_2.webp'); }
    .teachers-adaptive-wrapper .teacher-avatar-2 { background-image: url('../img/webp/TeacherAvatar_1024_5.webp');   }
    .teachers-adaptive-wrapper .teacher-avatar-3 { background-image: url('../img/webp/TeacherAvatar_1024_6.webp');   }
}


/* === DESKTOP ПЕРЕХОД 1025–1400px ============================================
 * Подстройка desktop-карточек на средних разрешениях (только если на этих
 * ширинах остаётся desktop-режим — для иерархии каскада с предыдущим query).
 * ========================================================================== */
@media screen and (max-width: 1400px) and (min-width: 1025px) {
    .teacher-card-1,
    .teacher-card-2 {
        height: auto;
        min-height: 335px;
    }
    .teacher-card-1 .teacher-avatar,
    .teacher-card-2 .teacher-avatar {
        position: absolute;
        bottom: 0;
        right: 0;
        top: auto;
        width: 295px;
        height: 350px;
        border-radius: 0 0 30px 0;
    }
    .teacher-card-3 .teacher-info { max-width: 420px; }
    .teacher-card-3 .teacher-avatar { left: 50%; }
    .teacher-card-3 .teacher-achievement-right { max-width: 350px; }
}


/* === ПЛАНШЕТ-МОБИЛ (<= 1024px) ============================================ */
@media screen and (max-width: 1024px) {
    .teachers-section { padding: 80px 0 0; }
    .teachers-title { margin-left: 20px; }

    .teachers-cards-wrapper { display: none; grid-template-columns: 1fr; gap: 1rem; }
    .teachers-adaptive-wrapper { display: block; }

    .teacher-card {
        padding: 20px;
        border-radius: 20px;
        flex-direction: column;
        text-align: center;
        height: auto !important;
    }
    .teacher-card-3 { grid-column: 1; flex-direction: column; }

    .teacher-card-1 .teacher-info,
    .teacher-card-2 .teacher-info,
    .teacher-card-3 .teacher-info {
        max-width: none;
        flex: none;
        order: 2;
        margin-right: 0;
        padding-right: 0;
    }

    .teacher-avatar,
    .teacher-card-3 .teacher-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        order: 1;
    }
    .teacher-avatar { align-self: center; margin: 0 auto 1rem; }

    .teacher-card-1 .teacher-avatar,
    .teacher-card-2 .teacher-avatar {
        position: static;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 0 auto 1rem;
        order: 1;
    }

    .teacher-card-1 .teacher-info,
    .teacher-card-2 .teacher-info { justify-content: flex-start; }

    .teacher-card-1 .teacher-achievements,
    .teacher-card-2 .teacher-achievements { margin-top: 1rem; margin-bottom: 1rem; }

    .teacher-card-3 .teacher-info { margin-left: 0; padding-left: 0; justify-content: flex-start; }
    .teacher-card-3 .teacher-avatar {
        position: static;
        margin: 0 auto 1rem;
        transform: none;
        left: auto;
        top: auto;
    }
    .teacher-card-3 .teacher-achievements { margin-top: 1rem; margin-bottom: 1rem; }
    .teacher-card-3 .teacher-achievement-right { position: static; max-width: none; margin-top: 0.5rem; }

    .teacher-card-1 .teacher-info .btn,
    .teacher-card-2 .teacher-info .btn,
    .teacher-card-3 .teacher-info .btn {
        position: static;
        background: var(--color-primary);
        color: var(--color-white);
        text-decoration: none;
        padding: 0.75rem 1.5rem;
        border-radius: 25px;
        align-self: center;
        margin-top: auto;
    }
    .teacher-card-1 .teacher-info .btn:hover,
    .teacher-card-2 .teacher-info .btn:hover,
    .teacher-card-3 .teacher-info .btn:hover {
        background: var(--color-hover-green);
        opacity: 1;
    }

    .teacher-info { height: auto; }
    .teacher-achievements li:last-child { margin-bottom: 1rem; }
    .teachers-actions .btn { width: 100%; }

    .teachers-adaptive-wrapper .teacher-avatar-1 { background-image: url('../img/webp/TeacherAvatar_1024_4_2.webp'); }
    .teachers-adaptive-wrapper .teacher-avatar-2 { background-image: url('../img/webp/TeacherAvatar_1024_5.webp');   }
    .teachers-adaptive-wrapper .teacher-avatar-3 { background-image: url('../img/webp/TeacherAvatar_1024_6.webp');   }
}


/* === МОБИЛ (<= 768px) ====================================================== */
@media screen and (max-width: 768px) {
    .teachers-section { padding: 60px 0 0; }
    .teachers-title { margin-left: 15px; }

    .teacher-card {
        padding: 15px;
        border-radius: 15px;
        gap: 1rem;
        flex-direction: column;
        text-align: center;
    }

    .teacher-card-1 .teacher-info,
    .teacher-card-2 .teacher-info,
    .teacher-card-3 .teacher-info {
        max-width: none;
        flex: none;
        order: 2;
        margin-right: 0;
        padding-right: 0;
    }

    .teacher-avatar,
    .teacher-card-1 .teacher-avatar,
    .teacher-card-2 .teacher-avatar {
        margin: 0 auto 1rem;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        order: 1;
    }

    .teacher-card-1 .teacher-avatar,
    .teacher-card-1 .teacher-info .btn,
    .teacher-card-2 .teacher-avatar,
    .teacher-card-2 .teacher-info .btn { position: static; }

    .teacher-card-3 .teacher-info { margin-left: 0; padding-left: 0; justify-content: flex-start; }
    .teacher-card-3 .teacher-avatar {
        position: static;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto 1rem;
        order: 1;
        transform: none;
        left: auto;
        top: auto;
    }
    .teacher-card-3 .teacher-achievements { margin-top: 1rem; margin-bottom: 1rem; }
    .teacher-card-3 .teacher-achievement-right { position: static; max-width: none; margin-top: 0.5rem; }
    .teacher-card-3 .teacher-info .btn { position: static; }

    .teacher-achievements,
    .teacher-card-3 .teacher-achievements { max-width: none; }

    .teachers-actions .btn { width: 100%; }

    .teacher-card-1 .teacher-info .btn,
    .teacher-card-2 .teacher-info .btn,
    .teacher-card-3 .teacher-info .btn {
        background: var(--color-primary);
        color: var(--color-white);
        text-decoration: none;
        padding: 0.75rem 1.5rem;
        border-radius: 25px;
        align-self: center;
        margin-top: auto;
    }
    .teacher-card-1 .teacher-info .btn:hover,
    .teacher-card-2 .teacher-info .btn:hover,
    .teacher-card-3 .teacher-info .btn:hover {
        background: var(--color-hover-green);
        opacity: 1;
    }

    .teacher-adaptive-group { grid-template-columns: 1fr; gap: 1rem; }

    .teacher-adaptive-photo {
        min-height: 250px;
        border-radius: 20px;
        background-size: cover;
        background-position: right center;
        background-repeat: no-repeat;
    }
    .teacher-adaptive-photo .teacher-avatar {
        border-radius: 0;
        position: absolute;
        bottom: 0;
        right: 0;
        width: min(250px, 45%);
    }

    .teacher-adaptive-group:first-child  .teacher-adaptive-photo { background-image: url('../img/webp/AboutUs_TeacherBack_1.webp'); }
    .teacher-adaptive-group:nth-child(2) .teacher-adaptive-photo { background-image: url('../img/webp/AboutUs_TeacherBack_2.webp'); }
    .teacher-adaptive-group:nth-child(3) .teacher-adaptive-photo { background-image: url('../img/webp/AboutUs_TeacherBack_3.webp'); }

    .teachers-adaptive-wrapper .teacher-avatar-1 { background-image: url('../img/webp/TeacherAvatar_4.webp');           }
    .teachers-adaptive-wrapper .teacher-avatar-2 { background-image: url('../img/webp/AboutUs_TeacherAvatar_5.webp');   }
    .teachers-adaptive-wrapper .teacher-avatar-3 { background-image: url('../img/webp/AboutUs_TeacherAvatar_6.webp');   }

    .teacher-adaptive-info { padding: 20px; border-radius: 20px; }
    .teacher-adaptive-info .teacher-achievements li:last-child,
    .teacher-adaptive-info .teacher-header { margin-bottom: 1rem; }
}


/* === МАЛЫЙ МОБИЛ (<= 480px) ================================================ */
@media screen and (max-width: 480px) {
    .teachers-section { padding: 80px 0 0; }
    .teachers-title { margin-left: 10px; }

    .teacher-card {
        padding: 12px;
        border-radius: 12px;
        gap: 0.75rem;
        flex-direction: column;
        text-align: center;
    }

    .teacher-card-1 .teacher-info,
    .teacher-card-2 .teacher-info,
    .teacher-card-3 .teacher-info {
        max-width: none;
        flex: none;
        order: 2;
        margin-right: 0;
        padding-right: 0;
    }

    .teacher-avatar,
    .teacher-card-1 .teacher-avatar,
    .teacher-card-2 .teacher-avatar {
        margin: 0 auto 0.75rem;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        order: 1;
    }
    .teacher-card-1 .teacher-avatar,
    .teacher-card-2 .teacher-avatar { position: static; }

    .teacher-card-1 .teacher-info .btn,
    .teacher-card-2 .teacher-info .btn { position: static; border-radius: 20px; }

    .teacher-position { margin-bottom: 1rem; }

    .teacher-card-3 .teacher-info { margin-left: 0; padding-left: 0; justify-content: flex-start; }
    .teacher-card-3 .teacher-avatar {
        position: static;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin: 0 auto 0.75rem;
        order: 1;
        transform: none;
        left: auto;
        top: auto;
    }
    .teacher-card-3 .teacher-achievements { margin-top: 1rem; margin-bottom: 0.75rem; }
    .teacher-card-3 .teacher-achievement-right { position: static; max-width: none; margin-top: 0.5rem; }
    .teacher-card-3 .teacher-info .btn { position: static; border-radius: 20px; }

    .teachers-actions .btn { width: 100%; }

    .teacher-achievements li,
    .teacher-adaptive-info .teacher-achievements li,
    .teacher-info h4 { margin-bottom: 0.5rem; }

    .teacher-achievements li:last-child,
    .teacher-adaptive-info .teacher-achievements li:last-child { margin-bottom: 0.75rem; }

    .teacher-card-1 .teacher-info .btn,
    .teacher-card-2 .teacher-info .btn,
    .teacher-card-3 .teacher-info .btn {
        background: var(--color-primary);
        color: var(--color-white);
        text-decoration: none;
        padding: 0.5rem 1rem;
        align-self: center;
        margin-top: auto;
    }
    .teacher-card-1 .teacher-info .btn:hover,
    .teacher-card-2 .teacher-info .btn:hover,
    .teacher-card-3 .teacher-info .btn:hover {
        background: var(--color-hover-green);
        opacity: 1;
    }

    .teacher-adaptive-photo {
        min-height: 200px;
        border-radius: 15px;
        background-size: cover;
        background-position: right center;
        background-repeat: no-repeat;
    }
    .teacher-adaptive-photo .teacher-avatar {
        position: absolute;
        bottom: 0;
        right: 0;
        width: min(200px, 50%);
    }

    .teacher-adaptive-group:first-child  .teacher-adaptive-photo { background-image: url('../img/webp/AboutUs_TeacherBack_1.webp'); }
    .teacher-adaptive-group:nth-child(2) .teacher-adaptive-photo { background-image: url('../img/webp/AboutUs_TeacherBack_2.webp'); }
    .teacher-adaptive-group:nth-child(3) .teacher-adaptive-photo { background-image: url('../img/webp/AboutUs_TeacherBack_3.webp'); }

    .teachers-adaptive-wrapper .teacher-avatar-1 { background-image: url('../img/webp/TeacherAvatar_4.webp');           }
    .teachers-adaptive-wrapper .teacher-avatar-2 { background-image: url('../img/webp/AboutUs_TeacherAvatar_5.webp');   }
    .teachers-adaptive-wrapper .teacher-avatar-3 { background-image: url('../img/webp/AboutUs_TeacherAvatar_6.webp');   }

    .teacher-adaptive-info { border-radius: 15px; padding: 15px; }
    .teacher-adaptive-info .teacher-header { margin-bottom: 0.75rem; }
}