/* teachers section styles (shared, externalised) */
.tch-section { background: linear-gradient(180deg, #F8F6EF 0%, #F5F2E8 40%, #EEF5E8 100%); padding: 70px 0; position: relative; overflow: hidden; }
    .tch-section * { box-sizing: border-box; }
    .tch-head { margin: 0 auto 44px; text-align: center; }
    .tch-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: #97BC17; text-transform: uppercase; margin-bottom: 14px; padding: 6px 16px; background: rgba(151, 188, 23, .12); border-radius: 100px; }
    .tch-title { font-family: Georgia, 'Times New Roman', serif; font-size: 40px; font-weight: 700; color: #2d4d18; margin: 0 0 8px; line-height: 1.2; }
    .tch-title::after { content: ''; display: block; width: 90px; height: 4px; background: linear-gradient(90deg, #97BC17, #507C24); border-radius: 2px; margin: 18px auto 6px; }
    .tch-sub { font-size: 16.5px; line-height: 1.7; color: #5a6b52; margin: 0 auto; text-align: center;}

    .tch-carousel { position: relative; }
    .tch-viewport { overflow: hidden; padding: 8px 4px; }
    .tch-track { display: flex; gap: 24px; transition: transform .55s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
    .tch-card { flex: 0 0 calc((100% - 3 * 24px) / 4); background: #fffdf8; border: 1px solid #ece3cf; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px rgba(45, 77, 24, .08); transition: transform .3s ease, box-shadow .3s ease; }
    .tch-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(45, 77, 24, .15); }
    .tch-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
    .tch-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .5s ease; }
    .tch-card:hover .tch-photo img { transform: scale(1.05); }
    .tch-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(45, 77, 24, .35)); pointer-events: none; }
    .tch-exp { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #97BC17 0%, #507C24 100%); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 50px; box-shadow: 0 4px 12px rgba(45, 77, 24, .3); }
    .tch-body { padding: 18px 20px 22px; text-align: center; }
    .tch-name { font-family: Georgia, serif; font-size: 24px!important; font-weight: 700; color: #2d4d18; margin: 0 0 5px; }
    .tch-role { font-size: 13px; font-weight: 600; color: #507C24; margin: 0 0 8px; }
    .tch-spec { font-size: 13.5px; line-height: 1.5; color: #6a6450; margin: 0; text-align: center;}

    .tch-arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 6; width: 48px; height: 48px; border-radius: 50%; border: none; background: linear-gradient(135deg, #97BC17 0%, #507C24 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; box-shadow: 0 6px 18px rgba(45, 77, 24, .3); transition: transform .2s ease, box-shadow .2s ease; }
    .tch-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 24px rgba(45, 77, 24, .42); color: #fff; }
    .tch-arrow.prev { left: -10px; }
    .tch-arrow.next { right: -10px; }
    .tch-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
    .tch-dots button { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: rgba(80, 124, 36, .25); cursor: pointer; transition: all .25s ease; }
    .tch-dots button.is-active { background: linear-gradient(135deg, #97BC17, #507C24); width: 26px; border-radius: 6px; }

    @media (max-width: 1100px) { .tch-card { flex-basis: calc((100% - 2 * 24px) / 3); } .tch-arrow.prev { left: 4px; } .tch-arrow.next { right: 4px; } }
    @media (max-width: 768px) { .tch-card { flex-basis: calc((100% - 24px) / 2); } .tch-title { font-size: 30px; } .tch-arrow { width: 40px; height: 40px; font-size: 14px; } }
    @media (max-width: 500px) { .tch-card { flex-basis: 100%; } }
