/**
 * Class 8 – Propel Plus Course Page Styles
 * ─────────────────────────────────────────
 * Architecture:
 *   1. Design Tokens (CSS Variables)
 *   2. Base / Typography Helpers
 *   3. Hero Section
 *   4. Why 1-to-1 Learning Card  (oto-card)
 *   5. Highlights Section
 *   6. Academic Excellence Features
 *   7. Teacher / Faculty Slider
 *   8. Testimonials
 *   9. Comparison Table
 *  10. How-it-Works Steps
 *  11. Dark-Background Text Overrides
 *  12. FAQ Accordion
 *  13. Responsive Breakpoints
 *
 * NOTE: Brand tokens inherit from v2-style.css via :root.
 *       Page-level tokens are defined here for overrides / extensions.
 *
 * @package 100PlusAcademy
 */

/* ══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {
    /* Colour aliases for course pages (keeps v2 names intact) */
    --c8-brand: #e62129;
    --primary: #e62129;
    /* same as --v-orange / --vedantu-orange */
    --c8-brand-light: #fff3f0;
    --c8-navy: #0b2149;
    /* same as --v-blue */
    --c8-navy-mid: #162f5e;
    --c8-white: #ffffff;
    --c8-bg-soft: #f8fbff;
    --c8-bg-light: #f4f7fb;
    --c8-border: #edf2f7;
    --c8-text: #333333;
    --c8-text-muted: #6c757d;
    --c8-text-on-dark: #ffffff;

    /* Radius scale */
    --c8-r-sm: 12px;
    --c8-r-md: 20px;
    --c8-r-lg: 25px;
    --c8-r-xl: 30px;

    /* Shadow scale */
    --c8-shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.04);
    --c8-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.07);
    --c8-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.10);

    /* Transition */
    --c8-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ══════════════════════════════════════════════════════════════
   2. BASE / TYPOGRAPHY HELPERS
   ══════════════════════════════════════════════════════════════ */
.text-orange {
    color: var(--c8-brand) !important;
}

.bg-orange {
    background-color: var(--c8-brand) !important;
}

.border-orange {
    border-color: var(--c8-brand) !important;
}

.text-navy {
    color: var(--c8-navy) !important;
}

.ls-2 {
    letter-spacing: 2px;
}


/* ══════════════════════════════════════════════════════════════
   3. HERO SECTION
   ══════════════════════════════════════════════════════════════ */
.hero .d-flex.gap-2 {
    flex-wrap: wrap;
}

/* Badges and inline text on dark hero must be white */
.hero p,
.hero h3,
.hero trust {
    color: var(--c8-white);
}

.hero small {
    color: var(--bs-black);
}

.hero h1 {
    color: var(--c8-white);
}

.hero .badge.bg-light {
    color: #222 !important;
}

/* keep badge text dark */

@media (max-width: 576px) {
    .hero .d-flex.gap-2 .btn {
        width: 100%;
    }

    .hero-title {
        font-size: 1.8rem !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   4. WHY 1-TO-1 LEARNING — OTO CARD
   ══════════════════════════════════════════════════════════════ */
.oto-card {
    margin-top: -3rem;
    /* PC & Tablet default */
}

@media (max-width: 767px) {
    .oto-card {
        margin-top: -2rem;
    }

    /* Mobile */
}

@media (max-width: 991px) {

    /* Remove the vertical divider on smaller screens */
    .oto-card .col-lg-6.border-end {
        border-right: none !important;
        border-bottom: 1px solid var(--c8-border);
        padding-bottom: 2rem;
    }

    .oto-card .col-lg-6.ps-lg-5 {
        padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
    }
}

@media (max-width: 576px) {

    /* Detail pills stack to full-width on small screens */
    .oto-card .row.g-2 .col-sm-4 {
        width: 100%;
    }
}


/* ══════════════════════════════════════════════════════════════
   5. HIGHLIGHTS SECTION
   ══════════════════════════════════════════════════════════════ */
.highlights-section {
    background-color: var(--c8-bg-soft);
}

.highlight-box {
    background: var(--c8-white);
    padding: 35px 30px;
    border-radius: var(--c8-r-lg);
    border: 1px solid var(--c8-border);
    box-shadow: var(--c8-shadow-sm);
    transition: var(--c8-transition);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.highlight-box:hover {
    transform: translateY(-10px);
    box-shadow: var(--c8-shadow-lg);
    border-color: var(--c8-brand);
}

.highlight-icon {
    width: 60px;
    height: 60px;
    background: var(--c8-brand-light);
    color: var(--c8-brand);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 25px;
    transition: 0.3s;
}

.highlight-box:hover .highlight-icon {
    background: var(--c8-brand);
    color: var(--c8-white);
}

/* Featured / active highlight variant */
.active-highlight {
    background: var(--c8-navy);
    color: var(--c8-white);
    border: none;
}

.active-highlight .highlight-icon {
    background: rgba(255, 255, 255, 0.12);
    color: var(--c8-brand);
}

.active-highlight p {
    color: rgba(255, 255, 255, 0.80) !important;
}

.active-highlight h5 {
    color: var(--c8-white) !important;
}


/* ══════════════════════════════════════════════════════════════
   6. ACADEMIC EXCELLENCE FEATURES
   ══════════════════════════════════════════════════════════════ */
.feature-card-new {
    background: var(--c8-white);
    padding: 30px;
    border-radius: var(--c8-r-md);
    border: 1px solid #f0f0f0;
    transition: var(--c8-transition);
    height: 100%;
    box-shadow: var(--c8-shadow-sm);
}

.feature-card-new:hover {
    transform: translateY(-8px);
    box-shadow: var(--c8-shadow-md);
    border-color: var(--c8-brand);
}

.f-icon-wrap {
    width: 50px;
    height: 50px;
    background: var(--c8-bg-light);
    color: var(--c8-navy);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 20px;
    transition: 0.3s;
}

.feature-card-new:hover .f-icon-wrap {
    background: var(--c8-brand);
    color: var(--c8-white);
}

.standout-feature {
    background: #fff8f4;
    border: 1px dashed var(--c8-brand);
}

.standout-feature .f-icon-wrap {
    color: var(--c8-brand);
}


/* ══════════════════════════════════════════════════════════════
   7. TEACHER / FACULTY SLIDER
   ══════════════════════════════════════════════════════════════ */
.teachers-premium {
    background: var(--c8-bg-soft);
    padding: 80px 0;
    position: relative;
}

/* Give the Swiper breathing room so hover-lift doesn't clip */
.teachers-premium .teacherSwiper {
    overflow: hidden;
    padding: 60px 10px;
    margin-top: -60px;
    margin-bottom: -60px;
}

.teachers-premium .swiper-slide {
    overflow: visible;
}


/* ══════════════════════════════════════════════════════════════
   8. TESTIMONIALS
   ══════════════════════════════════════════════════════════════ */
.testimonial-card {
    background: var(--c8-white);
    padding: 40px 30px;
    border-radius: var(--c8-r-lg);
    border: 1px solid #f0f0f0;
    position: relative;
    height: 100%;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--c8-shadow-md);
}

/* Quote icon */
.quote-mark {
    color: var(--c8-brand);
    font-size: 1.8rem;
    margin-bottom: 20px;
    opacity: 0.3;
}

.testimonial-text {
    font-style: italic;
    color: #555;
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Avatar */
.user-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--c8-bg-soft);
    border: 2px solid var(--c8-brand);
}

/* ── Featured (dark) testimonial ── */
.featured-testimonial {
    background: var(--c8-navy);
    border: none;
}

/* Force all text children WHITE on the dark card */
.featured-testimonial,
.featured-testimonial .testimonial-text,
.featured-testimonial .quote-mark,
.featured-testimonial h6,
.featured-testimonial small,
.featured-testimonial p {
    color: var(--c8-white) !important;
}

.featured-testimonial .quote-mark {
    opacity: 0.6;
}

/* Keep avatar border distinct on dark bg */
.featured-testimonial .user-avatar {
    border-color: rgba(255, 255, 255, 0.5);
}


/* ══════════════════════════════════════════════════════════════
   9. COMPARISON TABLE
   ══════════════════════════════════════════════════════════════ */
.comparison-container table thead th {
    font-weight: 700;
    font-size: 0.9rem;
    background: var(--c8-bg-light);
}

@media (max-width: 576px) {
    .comparison-container table {
        font-size: 0.82rem;
    }

    .comparison-container td,
    .comparison-container th {
        padding: 0.6rem 0.5rem;
    }
}


/* ══════════════════════════════════════════════════════════════
   10. HOW-IT-WORKS STEPS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    .step-number {
        width: 36px !important;
        height: 36px !important;
    }

    .step-box {
        margin-bottom: 1.5rem;
    }
}


/* ══════════════════════════════════════════════════════════════
   11. DARK-BACKGROUND TEXT OVERRIDES
   Ensures any text inside a dark-gradient section stays white
   ══════════════════════════════════════════════════════════════ */
/* Parent-connect dark panel */
[style*="linear-gradient(rgba(11, 33, 73"] p,
[style*="linear-gradient(rgba(11, 33, 73"] small,
[style*="linear-gradient(rgba(11, 33, 73"] li,
[style*="linear-gradient(rgba(11, 33, 73"] div {
    color: rgba(255, 255, 255, 0.88);
}

[style*="linear-gradient(rgba(11, 33, 73"] h2,
[style*="linear-gradient(rgba(11, 33, 73"] h3 {
    color: var(--c8-white);
}

/* Hero dark section */
section.hero [class*="text-muted"] {
    color: rgba(255, 255, 255, 0.75) !important;
}


/* ══════════════════════════════════════════════════════════════
   12. FAQ ACCORDION
   ══════════════════════════════════════════════════════════════ */
.accordion-item .accordion-button {
    font-size: 0.97rem;
}


/* ══════════════════════════════════════════════════════════════
   13. RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    section.py-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .teachers-premium {
        padding: 3rem 0;
    }

    .testimonial-card {
        padding: 30px 20px;
    }

    .oto-card .border-end {
        border-right: none !important;
        border-bottom: 1px solid var(--c8-border);
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 1.8rem !important;
    }

    .feature-card-new,
    .highlight-box {
        padding: 25px 20px;
    }
}