@extends('layouts.site')

@section('title', 'الدورات | XRD LAB')

@push('styles')
<style>
    .courses-coming-soon {
        padding: 32px 0 48px;
    }

    .courses-coming-soon-card {
        border: 1px solid color-mix(in oklab, rgba(255, 255, 255, 0.92) 72%, rgba(160, 174, 192, 0.42));
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)),
            rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(14px) saturate(145%);
        -webkit-backdrop-filter: blur(14px) saturate(145%);
        box-shadow:
            0 12px 28px rgba(15, 23, 42, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.42);
        border-radius: 16px;
        padding: 28px 24px;
        text-align: center;
    }

    .courses-coming-soon-card h3 {
        margin-bottom: 10px;
        color: var(--theme-primary);
    }

    .courses-coming-soon-card p {
        margin: 0;
        color: var(--theme-text-muted);
        font-size: 1rem;
        line-height: 1.8;
    }
</style>
@endpush

@section('content')
<main id="main">
    @include('partials.breadcrumbs', [
        'items' => [
            ['label' => 'الدورات'],
        ],
    ])

    <section class="courses-coming-soon" dir="rtl">
        <div class="container">
            <div class="courses-coming-soon-card">
                <h3>الدورات قريباً</h3>
                <p>نعمل حالياً على تجهيز محتوى الدورات، وستتوفر الدورات قريباً على هذه الصفحة.</p>
            </div>
        </div>
    </section>
</main>
@endsection