@extends('frontend.layouts.app')

@section(
    'title',
    ($venue->meta_title ?: $venue->name) .
    ' | CCULB Resort'
)

@section(
    'meta_description',
    $venue->meta_description
        ?: $venue->short_description
        ?: 'Discover ' . $venue->name .
            ' at CCULB Resort for memorable events,
            celebrations and gatherings.'
)

@php
    $facilities = collect(
        $venue->facilities ?? []
    )->filter()->values();

    $openingTime = $venue->opening_time
        ? \Carbon\Carbon::parse(
            $venue->opening_time
        )->format('g:i A')
        : null;

    $closingTime = $venue->closing_time
        ? \Carbon\Carbon::parse(
            $venue->closing_time
        )->format('g:i A')
        : null;

    /*
     * current_price accessor formatted string ফেরত দেয়।
     * তাই calculation/display-এর জন্য raw price field
     * ব্যবহার করা হচ্ছে।
     */
    $displayPrice = $venue->has_discount
        ? $venue->discount_price
        : $venue->base_price;
@endphp

@section('content')
    {{-- Hero --}}
    <section class="venue-details-hero">
        @if($venue->featured_image)
            <img
                src="{{ asset(
                    'storage/' . $venue->featured_image
                ) }}"
                alt="{{ $venue->name }}"
                class="venue-details-hero-image"
            >
        @else
            <div class="venue-details-placeholder">
                <span>◇</span>
                <small>CCULB Resort</small>
            </div>
        @endif

        <div class="venue-details-overlay"></div>
        <div class="venue-details-pattern"></div>

        <div class="container venue-details-hero-container">
            <nav
                class="venue-details-breadcrumb"
                aria-label="Breadcrumb"
            >
                <a href="{{ route('home') }}">Home</a>
                <span aria-hidden="true">/</span>

                <a href="{{ route('venues.index') }}">
                    Venues & Events
                </a>

                <span aria-hidden="true">/</span>
                <span>{{ $venue->name }}</span>
            </nav>

            <div class="venue-details-hero-content">
                <div class="venue-hero-badges">
                    @if($venue->venue_type)
                        <span>{{ $venue->venue_type }}</span>
                    @endif

                    @if($venue->is_featured)
                        <span class="featured">
                            Featured Venue
                        </span>
                    @endif
                </div>

                @if($venue->small_title)
                    <span class="venue-details-eyebrow">
                        {{ $venue->small_title }}
                    </span>
                @endif

                <h1>{{ $venue->name }}</h1>

                @if($venue->short_description)
                    <p>{{ $venue->short_description }}</p>
                @endif
            </div>
        </div>
    </section>

    {{-- Information Strip --}}
    <section class="venue-summary-section">
        <div class="container">
            <div class="venue-summary-grid">
                <div class="venue-summary-item">
                    <span class="summary-icon">♙</span>

                    <div>
                        <small>Guest Capacity</small>

                        <strong>
                            @if(
                                $venue->minimum_guests
                                !== $venue->maximum_guests
                            )
                                {{
                                    number_format(
                                        $venue->minimum_guests
                                    )
                                }}
                                –
                            @endif

                            {{
                                number_format(
                                    $venue->maximum_guests
                                )
                            }}
                            Guests
                        </strong>
                    </div>
                </div>

                @if($venue->venue_size)
                    <div class="venue-summary-item">
                        <span class="summary-icon">□</span>

                        <div>
                            <small>Venue Size</small>
                            <strong>
                                {{ $venue->venue_size }}
                            </strong>
                        </div>
                    </div>
                @endif

                @if($openingTime || $closingTime)
                    <div class="venue-summary-item">
                        <span class="summary-icon">◷</span>

                        <div>
                            <small>Operating Hours</small>

                            <strong>
                                @if(
                                    $openingTime
                                    && $closingTime
                                )
                                    {{ $openingTime }}
                                    –
                                    {{ $closingTime }}
                                @elseif($openingTime)
                                    From {{ $openingTime }}
                                @else
                                    Until {{ $closingTime }}
                                @endif
                            </strong>
                        </div>
                    </div>
                @endif

                <div class="venue-summary-item price-item">
                    <span class="summary-icon">৳</span>

                    <div>
                        <small>Starting From</small>

                        <strong>
                            ৳{{ number_format(
                                (float) $displayPrice,
                                0
                            ) }}
                        </strong>

                        @if($venue->has_discount)
                            <del>
                                ৳{{ number_format(
                                    (float) $venue->base_price,
                                    0
                                ) }}
                            </del>
                        @endif
                    </div>
                </div>

                <a
                    href="{{ route('home', [
                        'venue' => $venue->slug,
                    ]) }}#booking"
                    class="venue-main-book-button"
                >
                    <span>
                        {{
                            $venue->button_text
                                ?: 'Reserve This Venue'
                        }}
                    </span>

                    <span aria-hidden="true">→</span>
                </a>
            </div>
        </div>
    </section>

    {{-- Main Content --}}
    <section class="venue-main-section">
        <div class="container venue-main-grid">
            <main class="venue-content-column">
                <article class="venue-content-card">
                    <span class="section-eyebrow">
                        Venue Overview
                    </span>

                    <h2>
                        A Remarkable Space for
                        <em>Memorable Occasions</em>
                    </h2>

                    @if($venue->description)
                        <div class="venue-full-description">
                            {!! nl2br(
                                e($venue->description)
                            ) !!}
                        </div>
                    @elseif($venue->short_description)
                        <div class="venue-full-description">
                            <p>
                                {{ $venue->short_description }}
                            </p>
                        </div>
                    @else
                        <div class="venue-full-description">
                            <p>
                                Discover an elegant and thoughtfully
                                arranged event space at CCULB Resort,
                                designed for comfortable gatherings
                                and memorable occasions.
                            </p>
                        </div>
                    @endif
                </article>

                @if($facilities->isNotEmpty())
                    <article class="venue-content-card">
                        <div class="content-heading-row">
                            <div>
                                <span class="section-eyebrow">
                                    Venue Amenities
                                </span>

                                <h2>Facilities & Features</h2>
                            </div>

                            <span class="facility-count">
                                {{ $facilities->count() }}

                                {{
                                    Str::plural(
                                        'Facility',
                                        $facilities->count()
                                    )
                                }}
                            </span>
                        </div>

                        <div class="venue-facility-grid">
                            @foreach($facilities as $facility)
                                <div class="venue-facility-item">
                                    <span aria-hidden="true">✓</span>
                                    <strong>{{ $facility }}</strong>
                                </div>
                            @endforeach
                        </div>
                    </article>
                @endif
            </main>

            {{-- Sidebar --}}
            <aside class="venue-sidebar">
                <div class="venue-booking-card">
                    <span class="booking-eyebrow">
                        Event Enquiry
                    </span>

                    <h3>Plan Your Event</h3>

                    <p>
                        Contact our hospitality team for availability,
                        arrangements and a personalised quotation.
                    </p>

                    <div class="sidebar-price">
                        <small>Venue starts from</small>

                        <strong>
                            ৳{{ number_format(
                                (float) $displayPrice,
                                0
                            ) }}
                        </strong>

                        @if($venue->has_discount)
                            <div>
                                Regular price:
                                <del>
                                    ৳{{ number_format(
                                        (float)
                                        $venue->base_price,
                                        0
                                    ) }}
                                </del>
                            </div>
                        @endif
                    </div>

                    <div class="venue-sidebar-list">
                        @if($venue->venue_type)
                            <div>
                                <span>◇</span>

                                <p>
                                    <small>Venue Type</small>
                                    <strong>
                                        {{ $venue->venue_type }}
                                    </strong>
                                </p>
                            </div>
                        @endif

                        <div>
                            <span>♙</span>

                            <p>
                                <small>Maximum Capacity</small>

                                <strong>
                                    {{
                                        number_format(
                                            $venue
                                                ->maximum_guests
                                        )
                                    }}
                                    Guests
                                </strong>
                            </p>
                        </div>

                        @if($venue->venue_size)
                            <div>
                                <span>□</span>

                                <p>
                                    <small>Venue Size</small>
                                    <strong>
                                        {{ $venue->venue_size }}
                                    </strong>
                                </p>
                            </div>
                        @endif
                    </div>

                    <a
                        href="{{ route('home', [
                            'venue' => $venue->slug,
                        ]) }}#booking"
                        class="sidebar-venue-button"
                    >
                        <span>
                            {{
                                $venue->button_text
                                    ?: 'Reserve This Venue'
                            }}
                        </span>

                        <span aria-hidden="true">→</span>
                    </a>

                    <a
                        href="{{ route('venues.index') }}"
                        class="sidebar-back-link"
                    >
                        ← View All Venues
                    </a>
                </div>

                <div class="venue-help-card">
                    <span>✦</span>
                    <h3>Need a Custom Arrangement?</h3>

                    <p>
                        Let our event team customise the venue,
                        facilities and arrangements for your occasion.
                    </p>

                    <a href="{{ route('home') }}#contact">
                        Speak with Our Team →
                    </a>
                </div>
            </aside>
        </div>
    </section>

    {{-- Related Venues --}}
    @if($relatedVenues->count())
        <section class="related-venues-section">
            <div class="container">
                <div class="related-venues-heading">
                    <div>
                        <span class="section-eyebrow">
                            More Event Spaces
                        </span>

                        <h2>
                            Explore Related
                            <em>Venues</em>
                        </h2>
                    </div>

                    <a href="{{ route('venues.index') }}">
                        View All Venues →
                    </a>
                </div>

                <div class="related-venues-grid">
                    @foreach($relatedVenues as $relatedVenue)
                        @php
                            $relatedPrice =
                                $relatedVenue->has_discount
                                    ? $relatedVenue
                                        ->discount_price
                                    : $relatedVenue
                                        ->base_price;
                        @endphp

                        <article class="related-venue-card">
                            <a
                                href="{{ route(
                                    'venues.show',
                                    $relatedVenue->slug
                                ) }}"
                                class="related-venue-image"
                            >
                                @if(
                                    $relatedVenue->featured_image
                                )
                                    <img
                                        src="{{ asset(
                                            'storage/' .
                                            $relatedVenue
                                                ->featured_image
                                        ) }}"
                                        alt="{{
                                            $relatedVenue->name
                                        }}"
                                        loading="lazy"
                                    >
                                @else
                                    <div
                                        class="related-placeholder"
                                    >
                                        <span>◇</span>
                                        <small>CCULB Resort</small>
                                    </div>
                                @endif

                                <span
                                    class="related-image-overlay"
                                ></span>

                                @if($relatedVenue->venue_type)
                                    <span
                                        class="related-type-badge"
                                    >
                                        {{
                                            $relatedVenue
                                                ->venue_type
                                        }}
                                    </span>
                                @endif
                            </a>

                            <div class="related-venue-content">
                                @if($relatedVenue->small_title)
                                    <small>
                                        {{
                                            $relatedVenue
                                                ->small_title
                                        }}
                                    </small>
                                @endif

                                <h3>
                                    <a
                                        href="{{ route(
                                            'venues.show',
                                            $relatedVenue->slug
                                        ) }}"
                                    >
                                        {{ $relatedVenue->name }}
                                    </a>
                                </h3>

                                <div class="related-venue-footer">
                                    <div>
                                        <small>Starting From</small>

                                        <strong>
                                            ৳{{ number_format(
                                                (float)
                                                $relatedPrice,
                                                0
                                            ) }}
                                        </strong>
                                    </div>

                                    <a
                                        href="{{ route(
                                            'venues.show',
                                            $relatedVenue->slug
                                        ) }}"
                                        aria-label="View {{
                                            $relatedVenue->name
                                        }}"
                                    >
                                        →
                                    </a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- Bottom CTA --}}
    <section class="venue-bottom-cta">
        <div class="venue-cta-pattern"></div>

        <div class="container venue-bottom-container">
            <div>
                <span class="venue-details-eyebrow">
                    Your Occasion Awaits
                </span>

                <h2>
                    Ready to Plan an
                    <em>Exceptional Event?</em>
                </h2>

                <p>
                    Reserve this venue or contact our team for a
                    tailored event experience at CCULB Resort.
                </p>
            </div>

            <a
                href="{{ route('home', [
                    'venue' => $venue->slug,
                ]) }}#booking"
            >
                Plan Your Event →
            </a>
        </div>
    </section>
@endsection

@push('styles')
<style>
    :root {
        --vd-deep: #0d3029;
        --vd-green: #174a3d;
        --vd-gold: #c7a35a;
        --vd-gold-light: #e3cb94;
        --vd-cream: #f7f4ed;
        --vd-heading: #17352e;
        --vd-text: #61716c;
        --vd-border: #e1e8e4;
    }

    .venue-details-hero {
        position: relative;
        min-height: 620px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        isolation: isolate;
        background: var(--vd-deep);
    }

    .venue-details-hero-image,
    .venue-details-placeholder {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -3;
    }

    .venue-details-hero-image {
        object-fit: cover;
    }

    .venue-details-placeholder {
        display: grid;
        place-content: center;
        gap: 10px;
        color: var(--vd-gold-light);
        text-align: center;
        background:
            radial-gradient(
                circle at 70% 28%,
                rgba(199, 163, 90, .3),
                transparent 27%
            ),
            linear-gradient(135deg, #09251f, #174a3d);
    }

    .venue-details-placeholder span {
        font-size: 80px;
    }

    .venue-details-placeholder small {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 3px;
        text-transform: uppercase;
    }

    .venue-details-overlay {
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
            linear-gradient(
                to top,
                rgba(5, 28, 23, .96),
                rgba(5, 28, 23, .25) 72%
            );
    }

    .venue-details-pattern {
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: .08;
        background-image:
            linear-gradient(
                45deg,
                transparent 48%,
                rgba(255, 255, 255, .35) 49%,
                rgba(255, 255, 255, .35) 51%,
                transparent 52%
            );
        background-size: 70px 70px;
    }

    .venue-details-hero-container {
        width: 100%;
        padding-top: 120px;
        padding-bottom: 75px;
    }

    .venue-details-breadcrumb {
        margin-bottom: 65px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        color: rgba(255, 255, 255, .6);
        font-size: 12px;
    }

    .venue-details-breadcrumb a {
        color: var(--vd-gold-light);
        text-decoration: none;
    }

    .venue-details-hero-content {
        max-width: 900px;
    }

    .venue-hero-badges {
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .venue-hero-badges span {
        padding: 8px 11px;
        background: rgba(13, 48, 41, .86);
        color: #fff;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .venue-hero-badges .featured {
        background: var(--vd-gold);
        color: var(--vd-deep);
    }

    .venue-details-eyebrow,
    .section-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--vd-gold-light);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .venue-details-eyebrow::before,
    .section-eyebrow::before {
        width: 30px;
        height: 1px;
        content: "";
        background: currentColor;
    }

    .venue-details-hero h1 {
        margin: 15px 0 18px;
        color: #fff;
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(45px, 6vw, 76px);
        font-weight: 500;
        line-height: 1.08;
    }

    .venue-details-hero-content p {
        max-width: 720px;
        margin: 0;
        color: rgba(255, 255, 255, .74);
        font-size: 16px;
        line-height: 1.8;
    }

    .venue-summary-section {
        position: relative;
        z-index: 3;
        background: var(--vd-cream);
    }

    .venue-summary-grid {
        position: relative;
        top: -34px;
        padding: 24px;
        display: grid;
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) auto;
        gap: 12px;
        border: 1px solid rgba(199, 163, 90, .25);
        background: #fff;
        box-shadow: 0 18px 50px rgba(11, 48, 40, .1);
    }

    .venue-summary-item {
        min-width: 0;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-right: 1px solid var(--vd-border);
    }

    .summary-icon {
        width: 35px;
        height: 35px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #edf4f0;
        color: var(--vd-gold);
    }

    .venue-summary-item small,
    .venue-sidebar-list small,
    .sidebar-price small {
        display: block;
        margin-bottom: 3px;
        color: #899690;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .venue-summary-item strong {
        color: #405a52;
        font-size: 11px;
    }

    .venue-summary-item del {
        display: block;
        margin-top: 3px;
        color: #9ca7a3;
        font-size: 10px;
    }

    .venue-main-book-button,
    .sidebar-venue-button {
        min-height: 52px;
        padding: 0 19px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: var(--vd-green);
        color: #fff;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .7px;
        text-decoration: none;
        text-transform: uppercase;
        transition: .25s ease;
    }

    .venue-main-book-button:hover,
    .sidebar-venue-button:hover {
        gap: 14px;
        background: var(--vd-gold);
        color: var(--vd-deep);
    }

    .venue-main-section {
        padding: 50px 0 105px;
        background: var(--vd-cream);
    }

    .venue-main-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.65fr) minmax(290px, .65fr);
        gap: 34px;
        align-items: start;
    }

    .venue-content-column {
        display: grid;
        gap: 25px;
    }

    .venue-content-card {
        padding: 38px;
        border: 1px solid var(--vd-border);
        background: #fff;
    }

    .section-eyebrow {
        color: var(--vd-gold);
    }

    .venue-content-card h2 {
        margin: 14px 0 22px;
        color: var(--vd-heading);
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(30px, 4vw, 43px);
        font-weight: 500;
        line-height: 1.2;
    }

    .venue-content-card h2 em,
    .related-venues-heading h2 em,
    .venue-bottom-container h2 em {
        color: var(--vd-gold);
        font-weight: inherit;
    }

    .venue-full-description {
        color: var(--vd-text);
        font-size: 14px;
        line-height: 1.95;
    }

    .content-heading-row,
    .related-venues-heading {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 25px;
    }

    .facility-count {
        padding: 8px 11px;
        background: #edf4f0;
        color: var(--vd-green);
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .venue-facility-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .venue-facility-item {
        padding: 15px;
        display: flex;
        align-items: center;
        gap: 11px;
        background: #f2f6f3;
        color: #496159;
        font-size: 12px;
    }

    .venue-facility-item > span {
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #fff;
        color: var(--vd-gold);
    }

    .venue-sidebar {
        display: grid;
        gap: 22px;
    }

    .venue-booking-card {
        position: sticky;
        top: 115px;
        overflow: hidden;
        border: 1px solid rgba(199, 163, 90, .28);
        background: var(--vd-deep);
        color: #fff;
    }

    .venue-booking-card {
        padding: 29px 25px;
    }

    .booking-eyebrow {
        color: var(--vd-gold-light);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .venue-booking-card h3,
    .venue-help-card h3 {
        margin: 9px 0 12px;
        font-family: "Playfair Display", Georgia, serif;
        font-size: 27px;
        font-weight: 500;
    }

    .venue-booking-card > p,
    .venue-help-card p {
        color: rgba(255, 255, 255, .65);
        font-size: 12px;
        line-height: 1.75;
    }

    .sidebar-price {
        margin: 22px 0;
        padding: 18px 0;
        border-top: 1px solid rgba(255, 255, 255, .1);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .sidebar-price strong {
        display: block;
        color: var(--vd-gold-light);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 32px;
        font-weight: 500;
    }

    .sidebar-price div {
        margin-top: 5px;
        color: rgba(255, 255, 255, .55);
        font-size: 10px;
    }

    .venue-sidebar-list {
        margin-bottom: 22px;
        display: grid;
        gap: 10px;
    }

    .venue-sidebar-list > div {
        padding: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, .06);
    }

    .venue-sidebar-list > div > span {
        width: 29px;
        height: 29px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, .08);
        color: var(--vd-gold-light);
    }

    .venue-sidebar-list p {
        margin: 0;
    }

    .venue-sidebar-list strong {
        font-size: 11px;
    }

    .sidebar-venue-button {
        width: 100%;
    }

    .sidebar-back-link {
        margin-top: 15px;
        display: block;
        color: rgba(255, 255, 255, .62);
        font-size: 11px;
        text-align: center;
        text-decoration: none;
    }

    .venue-help-card {
        padding: 26px 24px;
        border: 1px solid var(--vd-border);
        background: #fff;
    }

    .venue-help-card > span {
        color: var(--vd-gold);
        font-size: 27px;
    }

    .venue-help-card h3 {
        color: var(--vd-heading);
        font-size: 23px;
    }

    .venue-help-card p {
        color: var(--vd-text);
    }

    .venue-help-card a {
        color: var(--vd-green);
        font-size: 11px;
        font-weight: 800;
        text-decoration: none;
        text-transform: uppercase;
    }

    .related-venues-section {
        padding: 90px 0;
        background: #fff;
    }

    .related-venues-heading {
        margin-bottom: 35px;
    }

    .related-venues-heading h2 {
        margin: 11px 0 0;
        color: var(--vd-heading);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 42px;
        font-weight: 500;
    }

    .related-venues-heading > a {
        color: var(--vd-green);
        font-size: 11px;
        font-weight: 800;
        text-decoration: none;
        text-transform: uppercase;
    }

    .related-venues-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
    }

    .related-venue-card {
        overflow: hidden;
        border: 1px solid var(--vd-border);
        background: #fff;
        transition: .3s ease;
    }

    .related-venue-card:hover {
        border-color: rgba(199, 163, 90, .55);
        box-shadow: 0 18px 45px rgba(18, 58, 48, .1);
        transform: translateY(-6px);
    }

    .related-venue-image {
        position: relative;
        height: 225px;
        overflow: hidden;
        display: block;
        background: var(--vd-deep);
    }

    .related-venue-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .55s ease;
    }

    .related-venue-card:hover
    .related-venue-image img {
        transform: scale(1.06);
    }

    .related-placeholder {
        width: 100%;
        height: 100%;
        display: grid;
        place-content: center;
        gap: 7px;
        color: var(--vd-gold-light);
        text-align: center;
        background: linear-gradient(
            145deg,
            #0d3029,
            #174a3d
        );
    }

    .related-placeholder span {
        font-size: 44px;
    }

    .related-placeholder small {
        color: rgba(255, 255, 255, .6);
        font-size: 8px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .related-image-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            transparent 45%,
            rgba(7, 31, 25, .65)
        );
    }

    .related-type-badge {
        position: absolute;
        bottom: 14px;
        left: 14px;
        padding: 7px 10px;
        background: rgba(13, 48, 41, .88);
        color: #fff;
        font-size: 8px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .related-venue-content {
        padding: 21px;
    }

    .related-venue-content > small {
        color: var(--vd-gold);
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .related-venue-content h3 {
        min-height: 57px;
        margin: 7px 0 17px;
        font-family: "Playfair Display", Georgia, serif;
        font-size: 23px;
        font-weight: 500;
        line-height: 1.25;
    }

    .related-venue-content h3 a {
        color: var(--vd-heading);
        text-decoration: none;
    }

    .related-venue-footer {
        padding-top: 15px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        border-top: 1px solid var(--vd-border);
    }

    .related-venue-footer small {
        display: block;
        margin-bottom: 3px;
        color: #899690;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .related-venue-footer strong {
        color: var(--vd-green);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 21px;
    }

    .related-venue-footer > a {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        background: var(--vd-green);
        color: #fff;
        text-decoration: none;
    }

    .venue-bottom-cta {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        padding: 80px 0;
        background: var(--vd-deep);
    }

    .venue-cta-pattern {
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: .1;
        background-image:
            linear-gradient(
                45deg,
                transparent 48%,
                rgba(255, 255, 255, .3) 49%,
                rgba(255, 255,255, .3) 51%,
                transparent 52%
            );
        background-size: 64px 64px;
    }

    .venue-bottom-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }

    .venue-bottom-container h2 {
        margin: 14px 0 10px;
        color: #fff;
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(34px, 4vw, 51px);
        font-weight: 500;
    }

    .venue-bottom-container p {
        max-width: 650px;
        color: rgba(255, 255, 255, .68);
        line-height: 1.8;
    }

    .venue-bottom-container > a {
        min-height: 51px;
        padding: 0 20px;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(227, 203, 148, .55);
        color: #fff;
        font-size: 10px;
        font-weight: 900;
        text-decoration: none;
        text-transform: uppercase;
    }

    .venue-bottom-container > a:hover {
        background: var(--vd-gold);
        color: var(--vd-deep);
    }

    @media (max-width: 1150px) {
        .venue-summary-grid {
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
        }

        .venue-main-book-button {
            grid-column: span 2;
        }
    }

    @media (max-width: 900px) {
        .venue-main-grid {
            grid-template-columns: 1fr;
        }

        .venue-booking-card {
            position: static;
        }

        .related-venues-grid {
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 767px) {
        .venue-details-hero {
            min-height: 560px;
        }

        .venue-details-hero-container {
            padding-top: 95px;
            padding-bottom: 60px;
        }

        .venue-details-breadcrumb {
            margin-bottom: 45px;
        }

        .venue-summary-grid,
        .venue-facility-grid,
        .related-venues-grid {
            grid-template-columns: 1fr;
        }

        .venue-main-book-button {
            grid-column: auto;
        }

        .venue-summary-item {
            border-right: 0;
            border-bottom: 1px solid var(--vd-border);
        }

        .content-heading-row,
        .related-venues-heading,
        .venue-bottom-container {
            align-items: flex-start;
            flex-direction: column;
        }

        .venue-content-card {
            padding: 28px 22px;
        }

        .related-venue-content h3 {
            min-height: 0;
        }
    }

    @media (max-width: 480px) {
        .venue-details-hero h1 {
            font-size: 42px;
        }

        .venue-summary-grid {
            padding: 17px;
        }

        .venue-main-book-button,
        .venue-bottom-container > a {
            width: 100%;
            justify-content: center;
        }
    }
</style>
@endpush