/* ============================================================
   AIMDUK — subjects.css
   Page-specific styles for subjects.html ONLY.
   Depends on: theme.css (variables & global helpers)
   ============================================================ */


/* ── py-lg-7 utility (Bootstrap has py-5 max) ── */
@media (min-width: 992px) {
    .py-lg-7 {
        padding-top: 5.5rem !important;
        padding-bottom: 5.5rem !important;
    }
}


/* ============================================================
   §1  SUBJECT HERO
   ============================================================ */
.section-subject-hero {
    background: var(--grad-hero);
    padding: 6rem 0 5rem;
    position: relative;
    overflow: hidden;
}

.subject-hero__bg-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(184, 150, 62, .08) 0%, transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(184, 150, 62, .06) 0%, transparent 50%);
    pointer-events: none;
}

/* Stats */
.subject-hero__stats {
    border-top: 1px solid rgba(184, 150, 62, .18);
    padding-top: 1.5rem;
}

.subject-hero__stat-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.subject-hero__stat-num {
    font-family: var(--font-serif);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--gold-light);
    line-height: 1;
}

.subject-hero__stat-num--sm {
    font-size: 1.35rem;
}

.subject-hero__stat-label {
    font-family: var(--font-sans);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

/* Hero title */
.subject-hero__title {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.subject-hero__highlight {
    color: var(--gold-light);
}

/* Hero subject cards */
.subject-hero__card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(184, 150, 62, .2);
    border-radius: var(--radius-md);
    transition: var(--transition);
    cursor: pointer;
}

.subject-hero__card:hover {
    background: rgba(184, 150, 62, .1);
    border-color: rgba(184, 150, 62, .45);
    transform: translateX(4px);
}

.subject-hero__card-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.subject-hero__card--carnatic .subject-hero__card-icon {
    background: rgba(123, 28, 46, .55);
    color: var(--gold-light);
    border: 1px solid rgba(184, 150, 62, .25);
}

.subject-hero__card--bharata .subject-hero__card-icon {
    background: rgba(139, 89, 0, .45);
    color: var(--gold-shine);
    border: 1px solid rgba(184, 150, 62, .25);
}

.subject-hero__card--hindustani .subject-hero__card-icon {
    background: rgba(20, 80, 60, .5);
    color: #7FFFD4;
    border: 1px solid rgba(127, 255, 212, .18);
}

.subject-hero__card-body {
    flex: 1;
}

.subject-hero__card-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.subject-hero__card-sub {
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .42);
    text-transform: uppercase;
    margin-top: .15rem;
}

.subject-hero__card-arrow {
    color: var(--gold);
    font-size: .85rem;
    transition: transform .2s ease;
}

.subject-hero__card:hover .subject-hero__card-arrow {
    transform: translateX(4px);
}


/* ============================================================
   §2  SUBJECT NAV
   ============================================================ */
.section-subject-nav {
    position: sticky;
    top: 72px;
    z-index: 900;
    background: var(--ivory-2);
    border-bottom: 1px solid rgba(184, 150, 62, .15);
    padding: .6rem 0;
    box-shadow: 0 4px 16px rgba(74, 10, 24, .07);
}

.subject-nav__pills {
    gap: .25rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.subject-nav__pills::-webkit-scrollbar {
    display: none;
}

.subject-nav__link {
    font-family: var(--font-sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-mid) !important;
    padding: .45rem 1rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: var(--transition-fast);
    border: 1px solid transparent;
}

.subject-nav__link:hover {
    background: rgba(123, 28, 46, .07) !important;
    color: var(--primary) !important;
    border-color: rgba(123, 28, 46, .12);
}

.subject-nav__link.active {
    background: var(--grad-maroon) !important;
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(74, 10, 24, .25);
}


/* ============================================================
   §3–5  SECTION ALT (even sections)
   ============================================================ */
.section-alt {
    background: var(--ivory-2);
}


/* ============================================================
   SUBJECT CARD (left panel)
   ============================================================ */
.subject-card {
    background: #fff;
    border: var(--border-gold-soft);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

.subject-card__icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--primary-light), var(--primary-deep));
    box-shadow: 0 4px 16px rgba(74, 10, 24, .22);
}

.subject-card__icon-wrap--bronze {
    background: linear-gradient(145deg, #A0620A, #6B3E00);
}

.subject-card__icon-wrap--emerald {
    background: linear-gradient(145deg, #1A6B4A, #0A3828);
}

.subject-card__icon {
    font-size: 1.55rem;
    color: var(--gold-light);
}

.subject-card__badge {
    font-family: var(--font-sans);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(123, 28, 46, .07);
    border: 1px solid rgba(123, 28, 46, .12);
    padding: .25rem .85rem;
    border-radius: var(--radius-pill);
    display: inline-block;
}

.subject-card__badge--bronze {
    color: #7A4A00;
    background: rgba(160, 98, 10, .07);
    border-color: rgba(160, 98, 10, .15);
}

.subject-card__badge--emerald {
    color: #0D5C3A;
    background: rgba(26, 107, 74, .07);
    border-color: rgba(26, 107, 74, .15);
}

.subject-card__meta {
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: .04em;
}

.subject-card__desc {
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.75;
}

.subject-card__grade-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.subject-card__grade-item {
    font-size: .78rem;
    color: var(--text-mid);
    display: flex;
    align-items: center;
}

.subject-card__grade-item .bi-check-circle-fill {
    color: var(--gold);
    font-size: .75rem;
}


/* ============================================================
   SUBJECT CONTENT (right column)
   ============================================================ */
.subject-content__desc {
    font-size: .9rem;
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 620px;
}

/* Tag pills */
.subject-tag {
    font-family: var(--font-sans);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(123, 28, 46, .06);
    border: 1px solid rgba(123, 28, 46, .14);
    padding: .3rem .9rem;
    border-radius: var(--radius-pill);
}

.subject-tag--bronze {
    color: #7A4A00;
    background: rgba(160, 98, 10, .06);
    border-color: rgba(160, 98, 10, .16);
}

.subject-tag--emerald {
    color: #0D5C3A;
    background: rgba(26, 107, 74, .06);
    border-color: rgba(26, 107, 74, .16);
}

/* Feature list */
.subject-feature {
    font-size: .82rem;
    color: var(--text-mid);
    background: var(--ivory-2);
    border: var(--border-gold-soft);
    border-radius: var(--radius-sm);
    padding: .5rem .85rem;
    display: flex;
    align-items: center;
}

.subject-feature .bi-check2 {
    color: var(--gold);
    font-weight: 800;
}


/* ============================================================
   CURRICULUM CARDS
   ============================================================ */
.curriculum-card {
    border-radius: var(--radius-md);
    padding: 1.4rem 1.25rem;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.curriculum-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.curriculum-card__num {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: .5rem;
    opacity: .35;
}

.curriculum-card__title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .3rem;
}

.curriculum-card__sub {
    font-size: .72rem;
    color: inherit;
    opacity: .65;
}

/* Carnatic variants */
.curriculum-card--maroon {
    background: rgba(123, 28, 46, .06);
    border: 1px solid rgba(123, 28, 46, .12);
    color: var(--primary);
}

.curriculum-card--maroon::before {
    background: var(--primary);
}

.curriculum-card--mid {
    background: rgba(123, 28, 46, .04);
    border: 1px solid rgba(123, 28, 46, .1);
    color: var(--primary-mid);
}

.curriculum-card--mid::before {
    background: var(--gold);
}

.curriculum-card--deep {
    background: rgba(74, 10, 24, .05);
    border: 1px solid rgba(74, 10, 24, .1);
    color: var(--primary-deep);
}

.curriculum-card--deep::before {
    background: var(--primary-deep);
}

/* Bharatanatyam bronze variants */
.curriculum-card--bronze-1 {
    background: rgba(160, 98, 10, .06);
    border: 1px solid rgba(160, 98, 10, .13);
    color: #7A4A00;
}

.curriculum-card--bronze-1::before {
    background: #A0620A;
}

.curriculum-card--bronze-2 {
    background: rgba(160, 98, 10, .04);
    border: 1px solid rgba(160, 98, 10, .1);
    color: #6B3E00;
}

.curriculum-card--bronze-2::before {
    background: var(--gold);
}

.curriculum-card--bronze-3 {
    background: rgba(107, 62, 0, .05);
    border: 1px solid rgba(107, 62, 0, .1);
    color: #5A3200;
}

.curriculum-card--bronze-3::before {
    background: #6B3E00;
}

/* Hindustani emerald variants */
.curriculum-card--emerald-1 {
    background: rgba(26, 107, 74, .06);
    border: 1px solid rgba(26, 107, 74, .13);
    color: #0D5C3A;
}

.curriculum-card--emerald-1::before {
    background: #1A6B4A;
}

.curriculum-card--emerald-2 {
    background: rgba(26, 107, 74, .04);
    border: 1px solid rgba(26, 107, 74, .1);
    color: #0A3828;
}

.curriculum-card--emerald-2::before {
    background: var(--gold);
}

.curriculum-card--emerald-3 {
    background: rgba(10, 56, 40, .05);
    border: 1px solid rgba(10, 56, 40, .1);
    color: #072820;
}

.curriculum-card--emerald-3::before {
    background: #0A3828;
}


/* ============================================================
   SUBJECT STATS BAR
   ============================================================ */
.subject-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--grad-maroon);
    border-radius: var(--radius-md);
    padding: 1.5rem 2rem;
    align-items: center;
    justify-content: space-between;
}

.subject-stats-bar--bronze {
    background: linear-gradient(135deg, #3A1A00 0%, #7A4500 50%, #A06020 100%);
}

.subject-stats-bar--emerald {
    background: linear-gradient(135deg, #041E14 0%, #0A4028 50%, #1A6B4A 100%);
}

.subject-stats-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    flex: 1;
    min-width: 80px;
}

.subject-stats-bar__num {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold-light);
    line-height: 1;
}

.subject-stats-bar__label {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    text-align: center;
}

.subject-stats-bar__divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, .12);
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .subject-stats-bar {
        gap: .75rem;
        padding: 1.25rem;
    }

    .subject-stats-bar__divider {
        display: none;
    }

    .subject-stats-bar__item {
        min-width: calc(50% - .75rem);
    }
}


/* ============================================================
   §6  COMPARISON TABLE
   ============================================================ */
.section-subject-comparison {
    background: var(--ivory);
}

.subject-comparison-table {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: var(--border-gold-soft);
    box-shadow: var(--shadow-sm);
    font-size: .84rem;
}

.subject-comparison-table thead tr {
    background: var(--grad-maroon);
}

.subject-comparison-table thead th {
    color: #fff;
    font-family: var(--font-sans);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 1.1rem 1.25rem;
    border: none;
    vertical-align: middle;
}

.subject-comparison-table thead th i {
    color: var(--gold-light);
    font-size: .95rem;
}

.subject-comparison-table__th-feature {
    text-align: left !important;
    min-width: 140px;
}

.subject-comparison-table tbody tr th {
    font-family: var(--font-sans);
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-mid);
    padding: .9rem 1.25rem;
    background: var(--ivory-2);
    border-color: rgba(184, 150, 62, .1);
}

.subject-comparison-table tbody tr td {
    color: var(--text-dark);
    padding: .9rem 1.25rem;
    border-color: rgba(184, 150, 62, .1);
    font-size: .8rem;
}

.subject-comparison-table.table-hover tbody tr:hover {
    background: rgba(184, 150, 62, .04);
}

.subject-comparison-table .text-success {
    color: #186A3B !important;
    font-size: 1rem;
}


/* ============================================================
   §7  BENEFIT CARDS
   ============================================================ */
.section-subject-benefits {
    background: var(--ivory-2);
}

.benefit-card {
    background: #fff;
    border: var(--border-gold-soft);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.benefit-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad-gold-soft);
    opacity: 0;
    transition: opacity .3s ease;
}

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

.benefit-card:hover::after {
    opacity: 1;
}

.benefit-card__icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, var(--primary-light), var(--primary-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(74, 10, 24, .2);
}

.benefit-card__icon-wrap i {
    font-size: 1.25rem;
    color: var(--gold-light);
}

.benefit-card__title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: .6rem;
}

.benefit-card__desc {
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin: 0;
}


/* ============================================================
   §8  FAQ ACCORDION
   ============================================================ */
.section-subject-faq {
    background: var(--ivory);
}

.subject-faq__accordion {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.subject-faq__item {
    background: #fff;
    border: var(--border-gold-soft) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.subject-faq__btn {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    background: #fff;
    padding: 1.1rem 1.35rem;
    box-shadow: none !important;
}

.subject-faq__btn:not(.collapsed) {
    background: rgba(123, 28, 46, .04);
    color: var(--primary-deep);
}

.subject-faq__btn::after {
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237B1C2E'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.subject-faq__body {
    font-size: .85rem;
    color: var(--text-muted);
    line-height: 1.8;
    padding: .25rem 1.35rem 1.25rem;
    background: #fff;
}


/* ============================================================
   §9  CTA
   ============================================================ */
.section-subject-cta {
    background: var(--grad-hero);
    position: relative;
    overflow: hidden;
}

.subject-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin-inline: auto;
}

.subject-cta__bg-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(184, 150, 62, .07) 0%, transparent 50%),
        radial-gradient(circle at 85% 50%, rgba(184, 150, 62, .07) 0%, transparent 50%);
    pointer-events: none;
}

.subject-cta__label {
    color: var(--gold-light);
    border-color: rgba(184, 150, 62, .3);
}

.subject-cta__title {
    color: #fff;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
}

.subject-cta__desc {
    font-size: .9rem;
    color: rgba(255, 255, 255, .62);
    line-height: 1.8;
    max-width: 520px;
    margin-inline: auto;
}