/*
 ============================================================
 LegalLearning Platform
 Authored & Architected by: Hany Awad Farag Gerges
 All rights reserved © 2026
 صفحة الرئيسية — نظام Navy/Gold (خاص بهذه الصفحة فقط) — v3.0
 ============================================================
*/

/* ── تعطيل حركة الظهور عند تفضيل تقليل الحركة (يُدار من intro.js) ── */
[data-reveal],
[data-reveal-group] > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
}

    [data-reveal].is-visible,
    [data-reveal-group].is-visible > * {
        opacity: 1;
        transform: none;
    }

    [data-reveal-group] > *:nth-child(2) { transition-delay: .08s; }
    [data-reveal-group] > *:nth-child(3) { transition-delay: .16s; }
    [data-reveal-group] > *:nth-child(4) { transition-delay: .24s; }

.hero-anim {
    opacity: 0;
    transform: translateY(16px);
    animation: home-fade-up .6s ease forwards;
}
.hero-anim.d1 { animation-delay: .05s; }
.hero-anim.d2 { animation-delay: .15s; }
.hero-anim.d3 { animation-delay: .25s; }
.hero-anim.d4 { animation-delay: .35s; }

@keyframes home-fade-up {
    to { opacity: 1; transform: none; }
}

/* ═══════════════════════ Hero ═══════════════════════ */
.home-hero {
    position: relative;
    min-height: 34rem;
    background-color: var(--navy-900);
    color: var(--parchment);
    padding-block: 3.5rem 3rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;
}

    /* الصورة في طبقة مستقلة كي يعمل عليها فلتر السطوع/التشبّع دون التأثير على النص فوقها */
    .home-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('/images/hero-justice.jpg');
        background-size: cover;
        background-position: left center;
        background-repeat: no-repeat;
        filter: brightness(1.85) saturate(.55) contrast(1.12);
        z-index: 0;
    }

    /* تدرّج التعتيم فوق الصورة مباشرة — فاتح عند اليسار (وضوح التمثال) وغامق تدريجياً نحو النص يميناً */
    .home-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(to right, rgba(7,19,34,.02) 0%, rgba(7,19,34,.22) 35%, rgba(7,19,34,.55) 65%, rgba(7,19,34,.82) 100%);
        z-index: 1;
    }

.home-hero > .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 2.5rem;
    align-items: center;
}

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(195,160,107,.14);
    border: 1px solid rgba(195,160,107,.35);
    color: var(--gold-500);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    padding: .35rem .9rem;
    margin-block-end: 1.1rem;
}

    .home-eyebrow .dot {
        width: .45rem;
        height: .45rem;
        border-radius: 50%;
        background: var(--gold-500);
    }

.home-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 1rem;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "dlig" 0, "clig" 0, "calt" 0;
}

    .home-hero h1 .accent {
        color: var(--gold-500);
    }

.home-hero .lead {
    color: #cdd4e2;
    font-size: 1.08rem;
    line-height: 1.9;
    max-width: 34rem;
    margin: 0 0 1.6rem;
}

.home-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-block-end: 1.75rem;
}

    .home-cta-row .btn {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        padding: .7rem 1.6rem;
        font-weight: 700;
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

        .home-cta-row .btn svg {
            flex-shrink: 0;
        }

/* زر شبحي فاتح — للاستخدام على الخلفيات الداكنة (الهيرو، CTA الختامي) */
.btn-ghost-light {
    background: transparent;
    border: 1px solid rgba(246,241,231,.4);
    color: var(--parchment);
    font-weight: 700;
    transition: border-color .15s ease, background .15s ease;
}

    .btn-ghost-light:hover {
        border-color: var(--gold-500);
        background: rgba(195,160,107,.1);
        color: var(--parchment);
    }

.home-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid rgba(255,255,255,.12);
}

.home-kpi {
    position: relative;
    text-align: center;
}

    .home-kpi:not(:first-child)::before {
        content: "";
        position: absolute;
        inset-inline-start: -.6rem;
        inset-block: .1rem;
        width: 1px;
        background: rgba(255,255,255,.12);
    }

.kpi-ic {
    display: inline-flex;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--gold-500);
    margin-block-end: .4rem;
}

    .kpi-ic svg {
        width: 100%;
        height: 100%;
    }

.home-kpi .v {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--gold-500);
}

.home-kpi .l {
    color: #a9b2c6;
    font-size: .8rem;
    margin-block-start: .2rem;
}

/* ── حاوية بطاقة الاقتباس فوق خلفية الهيرو الممتدة (الصورة أصبحت خلفية للقسم بالكامل أعلاه، وليست صندوقاً منفصلاً) ── */
.hero-art {
    position: relative;
    min-height: 22rem;
}

/* بطاقة اقتباس عائمة فوق صورة الهيرو — الزاوية السفلية (تبدأ من جهة النهاية RTL) */
.hero-quote-overlay {
    position: absolute;
    inset-block-end: 0rem;
    inset-inline-start: auto;
    inset-inline-end: 1.25rem;
    max-width: 20rem;
    background: rgba(7,19,34,.8);
    border: 1px solid rgba(195,160,107,.3);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.3rem 1rem;
    box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

.hero-quote-mark {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--gold-500);
    margin-block-end: -.25rem;
}

.hero-quote-overlay p {
    margin: 0;
    color: var(--parchment);
    font-size: .95rem;
    line-height: 1.7;
    font-weight: 600;
}

.hero-quote-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-block-start: .85rem;
}

    .hero-quote-brand .line {
        width: 1.75rem;
        height: 1px;
        background: var(--gold-500);
        flex-shrink: 0;
    }

    .hero-quote-brand span:last-child {
        font-family: var(--font-display);
        font-size: .76rem;
        font-weight: 700;
        color: var(--gold-500);
        letter-spacing: .01em;
    }

@media (max-width: 991.98px) {
    .home-hero {
        min-height: 0;
    }

        .home-hero::before {
            background-position: 65% center;
        }

    .home-hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-art {
        min-height: 11rem;
    }

    .home-hero .lead {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .home-hero {
        padding-block: 2.25rem 2rem;
    }

        .home-hero::before {
            background-position: 60% center;
        }

        .home-hero::after {
            background-image: linear-gradient(180deg, rgba(7,19,34,.55) 0%, rgba(7,19,34,.8) 55%, rgba(7,19,34,.98) 100%);
        }

    .home-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-quote-overlay {
        max-width: none;
    }
}

/* ═══════════════════════ شريط المزايا ═══════════════════════ */
.feature-strip {
    background: var(--surface);
    padding-block: 2.75rem;
}

.feature-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.feature-strip-item {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--bg-app);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.25rem;
}

.feature-strip-ic {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .feature-strip-ic svg {
        width: 1.4rem;
        height: 1.4rem;
        fill: none;
        stroke: var(--navy-900);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

        .feature-strip-ic svg .ic-dot {
            fill: var(--navy-900);
            stroke: none;
        }

        .feature-strip-ic svg .ic-badge-bg {
            fill: var(--surface);
            stroke: var(--navy-900);
        }

.feature-strip-item h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--navy-900);
    margin: 0 0 .2rem;
}

.feature-strip-item p {
    font-size: .82rem;
    color: var(--text-muted-2);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .feature-strip-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .feature-strip-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════ الكورسات المميزة ═══════════════════════ */
.home-section {
    padding-block: 3rem;
}

.home-section.alt {
    background: var(--bg-app);
}

.home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block-end: 1.75rem;
}

    .home-section-head h2 {
        font-family: var(--font-display);
        font-size: 1.6rem;
        color: var(--navy-900);
        margin: 0;
        position: relative;
        padding-inline-end: 1rem;
    }

        .home-section-head h2::before {
            content: "";
            position: absolute;
            inset-inline-start: -1.1rem;
            inset-block-start: .25rem;
            width: 4px;
            height: 1.6rem;
            background: var(--gold-500);
            border-radius: 2px;
        }

    .home-section-head .see-all {
        color: var(--navy-900);
        font-weight: 700;
        font-size: .9rem;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }

.featured-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

@media (max-width: 575.98px) {
    .featured-grid {
        flex-direction: column;
    }
}

.featured-course-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    flex: 0 1 16.5rem;
    width: 16.5rem;
    transition: transform .18s ease, box-shadow .18s ease;
}

@media (max-width: 575.98px) {
    .featured-course-card {
        width: 100%;
        flex-basis: 100%;
    }
}

    .featured-course-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lift);
    }

.featured-course-thumb {
    position: relative;
    height: 7.8rem;
    background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
}

    .featured-course-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .featured-course-thumb .thumb-fallback {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gold-500);
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 700;
    }

    .featured-course-thumb .badge-category {
        position: absolute;
        inset-block-start: .6rem;
        inset-inline-start: .6rem;
    }

    .featured-course-thumb .badge-live {
        position: absolute;
        inset-block-start: .6rem;
        inset-inline-end: .6rem;
    }

    .featured-course-thumb .duration-chip {
        position: absolute;
        inset-block-end: .6rem;
        inset-inline-end: .6rem;
        background: rgba(7,19,34,.72);
        color: #fff;
        font-size: .72rem;
        font-weight: 600;
        border-radius: var(--radius-sm);
        padding: .18rem .5rem;
    }

.featured-course-body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .featured-course-body h3 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--navy-900);
        margin: 0 0 .5rem;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 3rem;
    }

        .featured-course-body h3 a {
            color: inherit;
        }

            .featured-course-body h3 a:hover {
                color: var(--gold-600);
                text-decoration: none;
            }

.featured-instructor {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--text-muted-2);
    margin-block-end: .7rem;
}

    .featured-instructor .avatar,
    .featured-instructor .avatar-fallback {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .featured-instructor .avatar-fallback {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--navy-900);
        color: var(--gold-500);
        font-family: var(--font-display);
        font-weight: 700;
        font-size: .72rem;
    }

.featured-course-meta {
    display: flex;
    gap: .6rem;
    font-size: .78rem;
    color: var(--text-muted-2);
    margin-block-end: .9rem;
}

    .featured-course-meta span {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }

    .featured-course-meta svg {
        width: .95rem;
        height: .95rem;
        fill: var(--gold-600);
    }

.featured-course-body .btn-block-cta {
    margin-block-start: auto;
}

/* Skeleton */
.featured-course-card.is-skeleton .sk {
    background: linear-gradient(90deg, var(--line-soft) 25%, #f1f2f6 37%, var(--line-soft) 63%);
    background-size: 400% 100%;
    animation: home-shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
}
.featured-course-card.is-skeleton .featured-course-thumb { background: var(--line-soft); }
.featured-course-card.is-skeleton .sk-line { height: .8rem; margin-block-end: .5rem; }
.featured-course-card.is-skeleton .sk-line.w-60 { width: 60%; }
.featured-course-card.is-skeleton .sk-line.w-40 { width: 40%; }

@keyframes home-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.featured-empty {
    flex: 1 1 100%;
    width: 100%;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted-2);
    background: var(--surface);
    border: 1px dashed var(--line-soft);
    border-radius: var(--radius-lg);
}

/* ═══════════════════════ شريط الإحصاءات الداكن ═══════════════════════ */
.stats-banner {
    background: linear-gradient(120deg, var(--navy-900), var(--navy-950));
    color: var(--parchment);
    padding-block: 2.75rem;
}

.stats-banner-grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr);
    gap: 1.5rem;
    align-items: center;
}

.stats-banner-item {
    text-align: center;
}

    .stats-banner-item .ic {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.1rem;
        height: 2.1rem;
        margin: 0 auto .6rem;
        color: var(--gold-500);
    }

        .stats-banner-item .ic svg {
            width: 100%;
            height: 100%;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.6;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .stats-banner-item .v {
        font-family: var(--font-display);
        font-size: 1.6rem;
        font-weight: 700;
    }

    .stats-banner-item .l {
        color: #a9b2c6;
        font-size: .82rem;
        margin-block-start: .2rem;
    }

.stats-banner .quote-card {
    background: rgba(255,255,255,.05);
    border-inline-start: 3px solid var(--gold-500);
}

@media (max-width: 991.98px) {
    .stats-banner-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-banner .quote-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .stats-banner-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════ صف: بث مباشر + اشترك الآن ═══════════════════════ */
.split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 991.98px) {
    .split-row { grid-template-columns: 1fr; }
}

.live-upcoming-card,
.subscribe-card {
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    color: var(--parchment);
    display: flex;
    flex-direction: column;
    min-height: 16rem;
    position: relative;
    overflow: hidden;
}

.live-upcoming-card {
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(195,160,107,.16), transparent 60%),
        linear-gradient(150deg, var(--navy-800), var(--navy-950));
    justify-content: center;
}

    .live-upcoming-card .badge-live {
        align-self: flex-start;
        margin-block-end: 1rem;
    }

    .live-upcoming-card h3 {
        font-family: var(--font-display);
        font-size: 1.25rem;
        margin: 0 0 .6rem;
    }

    .live-upcoming-card p {
        color: #b7c0d4;
        font-size: .9rem;
        line-height: 1.8;
        margin: 0 0 1.3rem;
    }

    .live-upcoming-card .meta-row {
        display: flex;
        align-items: center;
        gap: .6rem;
        font-size: .85rem;
        color: #cdd4e2;
        margin-block-end: .5rem;
    }

    .live-upcoming-card .meta-row svg {
        width: 1rem;
        height: 1rem;
        fill: none;
        stroke: var(--gold-500);
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    .live-upcoming-card .speaker-chip {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin-block-end: 1.3rem;
    }

        .live-upcoming-card .speaker-chip .avatar-fallback {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            background: var(--gold-500);
            color: var(--navy-950);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: .85rem;
        }

.subscribe-card {
    background: linear-gradient(150deg, var(--gold-600), var(--navy-900) 78%);
    justify-content: space-between;
}

    .subscribe-card h3 {
        font-family: var(--font-display);
        font-size: 1.35rem;
        margin: 0 0 .6rem;
    }

    .subscribe-card p {
        color: #f0e6d3;
        font-size: .92rem;
        line-height: 1.8;
        margin: 0 0 1.3rem;
        max-width: 26rem;
    }

    .subscribe-card .perks {
        display: flex;
        flex-wrap: wrap;
        gap: 1.1rem;
        margin-block-end: 1.5rem;
    }

        .subscribe-card .perks span {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            font-size: .82rem;
            color: #f4ecdd;
        }

        .subscribe-card .perks svg {
            width: 1.1rem;
            height: 1.1rem;
            fill: none;
            stroke: var(--gold-500);
            stroke-width: 1.8;
        }

    .subscribe-card .btn-brass {
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

/* ═══════════════════════ آراء المتدربين ═══════════════════════ */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 991.98px) {
    .testimonials-grid { grid-template-columns: 1fr; }
}

.testimonial-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow-card);
}

    .testimonial-card .stars {
        color: var(--gold-500);
        font-size: .95rem;
        letter-spacing: .15rem;
        margin-block-end: .7rem;
    }

    .testimonial-card p {
        color: var(--text);
        font-size: .92rem;
        line-height: 1.85;
        margin: 0 0 1.1rem;
    }

    .testimonial-card .who {
        display: flex;
        align-items: center;
        gap: .65rem;
    }

    .testimonial-card .avatar-fallback {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 50%;
        background: var(--navy-900);
        color: var(--gold-500);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-weight: 700;
        flex-shrink: 0;
    }

    .testimonial-card .name {
        font-weight: 700;
        color: var(--navy-900);
        font-size: .88rem;
    }

    .testimonial-card .role {
        color: var(--text-muted-2);
        font-size: .78rem;
    }

/* ═══════════════════════ الدعوة الختامية ═══════════════════════ */
.home-final-cta {
    background: linear-gradient(135deg, var(--navy-900), var(--navy-950));
    color: var(--parchment);
    text-align: center;
    padding-block: 3.5rem;
}

    .home-final-cta h2 {
        font-family: var(--font-display);
        font-size: 1.9rem;
        margin: 0 0 .8rem;
    }

    .home-final-cta p {
        color: #b7c0d4;
        max-width: 34rem;
        margin: 0 auto 1.6rem;
        line-height: 1.8;
    }

    .home-final-cta .home-cta-row {
        justify-content: center;
        margin-block-end: 0;
    }

/* ═══════════════════════ تقليل الحركة ═══════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .hero-anim,
    [data-reveal],
    [data-reveal-group] > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}