@extends('frontend.layouts.app')

@section('title')
    {{ $club->name }}
@endsection

@push('style')
    <style>
        /* পুরো সেকশন */
        .club-split-section {
            padding: 80px 0;
            background-color: #fff;
        }

        /* ইমেজের কলাম ডিজাইন */
        .club-image-container {
            position: sticky;
            /* টেক্সট পড়লেও ইমেজ সাথে থাকবে */
            top: 100px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .club-feature-img {
            width: 100%;
            height: 500px;
            /* ফিক্সড হাইট যাতে বেশি লম্বা না হয় */
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }

        .club-image-container:hover .club-feature-img {
            transform: scale(1.05);
        }

        /* টেক্সট কলাম ডিজাইন */
        .club-content-area {
            padding-left: 40px;
            /* ইমেজ থেকে লেখার দূরত্ব */
        }

        /* টাইটেল ডিজাইন */
        .club-title-main {
            font-size: 42px;
            font-weight: 800;
            color: #2c3e50;
            line-height: 1.2;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 20px;
        }

        /* টাইটেল এর নিচে ডেকোরেটিভ লাইন */
        .club-title-main::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 80px;
            height: 5px;
            background: linear-gradient(90deg, #0d6efd, #00d2ff);
            border-radius: 3px;
        }

        /* ডেসক্রিপশন ডিজাইন */
        .club-description-text {
            font-size: 18px;
            line-height: 1.8;
            color: #555;
            text-align: justify;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* প্রথম প্যারাগ্রাফের প্রথম অক্ষর স্টাইল (Drop Cap) */
        .club-description-text p:first-child::first-letter {
            font-size: 3.5rem;
            font-weight: bold;
            color: #0d6efd;
            float: left;
            margin-right: 12px;
            line-height: 1;
        }

        /* মোবাইল রেসপন্সিভ */
        @media (max-width: 991px) {
            .club-split-section {
                padding: 40px 0;
            }

            .club-content-area {
                padding-left: 0;
                margin-top: 30px;
            }

            .club-image-container {
                position: static;
                /* মোবাইলে স্টিকি হবে না */
                height: auto;
            }

            .club-feature-img {
                height: 300px;
            }

            .club-title-main {
                font-size: 30px;
            }
        }
    </style>
@endpush

@section('content')
    @include('frontend.layouts.include.breadcrumb', [
        'items' => [
            ['name' => 'Co-Curricular', 'url' => '#'],
            ['name' => 'Clubs', 'url' => '#'],
            ['name' => $club->name, 'url' => null],
        ],
    ])

    <div class="club-split-section">
        <div class="container-fluid">
            <div class="row align-items-start">

                <div class="col-lg-5">
                    <div class="club-image-container">
                        <img src="{{ asset($club->image) }}" class="club-feature-img" alt="{{ $club->name }}">
                    </div>
                </div>

                <div class="col-lg-7">
                    <div class="club-content-area">
                        <h1 class="club-title-main">{{ $club->name }}</h1>

                        <div class="club-description-text">
                            {!! $club->description !!}
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('script')
@endpush