/* ============================================================
   AIMDUK — teachers.css
   Page-specific styles for teachers.php ONLY.
   All selectors are prefixed with .teacher- to avoid collisions
   with existing global / section CSS. No global classes are
   overridden here.
   ============================================================ */


/* ════════════════════════════════════════════
   §1  HERO
   ════════════════════════════════════════════ */

/* .teacher-hero rides on top of the existing .hero-section
   shell (background, orbs, lines) — only page-specific
   overrides live here. */
.teacher-hero {
    min-height: 90vh;
}

.teacher-hero__title {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.12;
    letter-spacing: .01em;
}

/* ==========================================
   Teacher Hero Image
========================================== */

.teacher-hero__image-wrapper{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.teacher-hero__image-bg{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(184,150,62,.15),
        rgba(184,150,62,.03));
    border:1px solid rgba(184,150,62,.18);
    z-index:0;
}

.teacher-hero__image{
    position:relative;
    width:100%;
    max-width:420px;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:24px;
    border:4px solid rgba(184,150,62,.15);
    box-shadow:
        0 25px 60px rgba(0,0,0,.28),
        0 0 35px rgba(184,150,62,.12);
    z-index:2;
    transition:.45s ease;
}

.teacher-hero__image:hover{
    transform:translateY(-8px) scale(1.02);
}

.teacher-hero__badge{
    position:absolute;
    bottom:40px;
    right:20px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    background:rgba(74,10,24,.95);
    color:#fff;
    border:1px solid rgba(184,150,62,.35);
    border-radius:40px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    z-index:3;
}

.teacher-hero__badge i{
    color:var(--gold);
    font-size:1rem;
}

.teacher-hero__badge span{
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.05em;
}

/* Tablet */

@media (max-width:991px){

    .teacher-hero__image-wrapper{
        /* margin-top:40px; */
    }

    .teacher-hero__image-bg{
        width:340px;
        height:340px;
    }

    .teacher-hero__image{
        max-width:340px;
    }

    .teacher-hero__badge{
        bottom:20px;
        right:30px;
    }

}

/* Mobile */

@media (max-width:576px){

    .teacher-hero__image-bg{
        width:260px;
        height:260px;
    }

    .teacher-hero__image{
        max-width:260px;
        border-radius:18px;
    }

    .teacher-hero__badge{
        position:static;
        margin-top:20px;
        justify-content:center;
    }

}


/* ════════════════════════════════════════════
   §2  TEACHER INFORMATION
   ════════════════════════════════════════════ */
.teacher-info {
    padding: 6rem 0 2rem;
    background: var(--ivory);
}


/* ════════════════════════════════════════════
   §3  BENEFITS
   ════════════════════════════════════════════ */
.teacher-benefits {
    padding: 2rem 0 6rem;
    background: var(--ivory);
}

.teacher-benefits__card {
    background: #fff;
    border: var(--border-gold-soft);
    border-radius: var(--radius-md);
    padding: 2rem 1.75rem;
    height: 100%;
    transition: var(--transition);
}

.teacher-benefits__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(184,150,62,.3);
}

.teacher-benefits__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(123,28,46,.08), rgba(184,150,62,.14));
    border: var(--border-gold-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 1.1rem;
    transition: var(--transition);
}

.teacher-benefits__card:hover .teacher-benefits__icon {
    background: var(--grad-maroon);
    color: #fff;
}

.teacher-benefits__text {
    font-size: .87rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin: 0;
}


/* ════════════════════════════════════════════
   §4  LARGE CTA
   ════════════════════════════════════════════ */
.teacher-cta {
    padding: 1rem 0 6rem;
    background: var(--ivory);
}

.teacher-cta__card {
    background: var(--grad-maroon);
    border-radius: var(--radius-xl);
    padding: 4rem 2rem;
    box-shadow: var(--shadow-lg);
}

.teacher-cta__text {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: .5rem;
}

.teacher-cta__sub {
    font-family: var(--font-sans);
    font-size: .82rem;
    letter-spacing: .06em;
    color: rgba(255,255,255,.6);
    margin: 0;
}


/* ════════════════════════════════════════════
   §5  REGISTRATION FORM
   ════════════════════════════════════════════ */

/* Section holds the collapsible wrapper */
.teacher-form-section {
    background: var(--ivory);
    scroll-margin-top: 90px;
}

/* Collapsible / slide-down wrapper.
   Hidden by default via max-height + opacity, expanded via .is-open
   (toggled in teachers.js). Using max-height transition rather than
   display:none so the slide-down reads as a smooth animation. */
   
.teacher-form-wrapper{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(30px);
    transition:all .6s ease;
}

.teacher-form-wrapper.is-open{
    max-height:3000px;
    opacity:1;
    transform:translateY(0);
}

.teacher-form__card {
    background: #fff;
    border: var(--border-gold-soft);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-sm);
}

.teacher-form__req {
    color: var(--primary);
}

.teacher-form__hint {
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: .35rem;
}

/* Scoped form control styling (mirrors contact-section, kept local
   so global .form-control is never touched) */
.teacher-form__card .form-label {
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-mid);
    margin-bottom: .4rem;
}

.teacher-form__card .form-control,
.teacher-form__card .form-select {
    border: 1px solid rgba(184,150,62,.25);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    color: var(--text-dark);
    padding: .7rem 1rem;
    background: var(--ivory);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.teacher-form__card .form-control:focus,
.teacher-form__card .form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184,150,62,.15);
    background: #fff;
    outline: none;
}

.teacher-form__card .form-control.is-invalid,
.teacher-form__card .form-select.is-invalid {
    border-color: #b3261e;
    background-image: none;
}

.teacher-form__card .invalid-feedback {
    font-size: .74rem;
    color: #b3261e;
}

@media (max-width: 767.98px) {
    .teacher-form__card {
        padding: 1.5rem;
    }
}