@extends('frontend.layouts.app')

@section('title', 'Venues & Events | CCULB Resort')

@section(
    'meta_description',
    'Explore elegant indoor and outdoor venues at CCULB Resort
    for weddings, corporate events, celebrations and memorable
    gatherings.'
)

@section('content')
    {{-- Hero --}}
    <section class="venues-hero">
        <div class="venues-hero-pattern"></div>

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

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

                <span>Venues & Events</span>
            </nav>

            <div class="venues-hero-content">
                <span class="venues-eyebrow">
                    Exceptional Event Spaces
                </span>

                <h1>
                    Remarkable Venues for
                    <span>Memorable Occasions</span>
                </h1>

                <p>
                    Discover thoughtfully designed indoor and
                    outdoor spaces for weddings, celebrations,
                    corporate events and private gatherings.
                </p>

                <a
                    href="#available-venues"
                    class="venues-explore-button"
                >
                    <span>Explore Venues</span>
                    <span aria-hidden="true">↓</span>
                </a>
            </div>
        </div>

        <div class="venues-hero-line"></div>
    </section>

    {{-- Filters --}}
    <section
        class="venue-filter-section"
        aria-label="Venue filters"
    >
        <div class="container">
            <div class="venue-filter-wrap">
                <div class="venue-filter-heading">
                    <div>
                        <span>Browse Event Spaces</span>

                        <h2>Find Your Ideal Venue</h2>
                    </div>

                    <div class="venue-result-count">
                        <strong>{{ $venues->total() }}</strong>

                        <span>
                            {{
                                Str::plural(
                                    'venue',
                                    $venues->total()
                                )
                            }}
                            available
                        </span>
                    </div>
                </div>

                <div class="venue-filter-list">
                    <a
                        href="{{ route('venues.index') }}"
                        class="venue-filter-button {{
                            $selectedType === ''
                                ? 'active'
                                : ''
                        }}"
                    >
                        <span class="venue-filter-icon">✦</span>
                        <span>All Venues</span>
                    </a>

                    @foreach($venueTypes as $venueType)
                        <a
                            href="{{ route('venues.index', [
                                'type' => $venueType,
                            ]) }}"
                            class="venue-filter-button {{
                                $selectedType === $venueType
                                    ? 'active'
                                    : ''
                            }}"
                        >
                            <span class="venue-filter-icon">
                                ◇
                            </span>

                            <span>{{ $venueType }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- Listing --}}
    <section
        class="venues-listing-section"
        id="available-venues"
    >
        <div class="container">
            @if($selectedType)
                <div class="selected-venue-filter">
                    <div>
                        Showing
                        <strong>{{ $selectedType }}</strong>
                        venues
                    </div>

                    <a href="{{ route('venues.index') }}">
                        Clear Filter
                    </a>
                </div>
            @endif

            @if($venues->count())
                <div class="venues-grid">
                    @foreach($venues as $venue)
                        @php
                            $facilities = collect(
                                $venue->facilities ?? []
                            )
                                ->filter()
                                ->take(4);

                            $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;
                        @endphp

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

                                <div class="venue-image-overlay"></div>

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

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

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

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

                                @if(
                                    $venue->short_description
                                    || $venue->description
                                )
                                    <p class="venue-description">
                                        {{
                                            Str::limit(
                                                strip_tags(
                                                    $venue
                                                        ->short_description
                                                    ?: $venue
                                                        ->description
                                                ),
                                                145
                                            )
                                        }}
                                    </p>
                                @endif

                                <div class="venue-information">
                                    <div class="venue-info-item">
                                        <span class="venue-info-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-info-item">
                                            <span
                                                class="venue-info-icon"
                                            >
                                                □
                                            </span>

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

                                    @if(
                                        $openingTime
                                        || $closingTime
                                    )
                                        <div class="venue-info-item">
                                            <span
                                                class="venue-info-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>

                                @if($facilities->isNotEmpty())
                                    <ul class="venue-facilities">
                                        @foreach(
                                            $facilities
                                            as $facility
                                        )
                                            <li>
                                                <span
                                                    aria-hidden="true"
                                                >
                                                    ✓
                                                </span>

                                                <span>
                                                    {{ $facility }}
                                                </span>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif

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

                                        <div>
                                            <strong>
                                                ৳{{ number_format(
                                                    (float)
                                                    (
                                                        $venue
                                                            ->has_discount
                                                            ? $venue
                                                                ->discount_price
                                                            : $venue
                                                                ->base_price
                                                    ),
                                                    0
                                                ) }}
                                            </strong>

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

                                    <a
                                    href="{{ route(
                                        'venues.show',
                                        $venue->slug
                                    ) }}"
                                    class="venue-reserve-button"
                                >
                                    <span>View Details</span>
                                    <span aria-hidden="true">→</span>
                                </a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                @if($venues->hasPages())
                    <div class="venues-pagination">
                        {{ $venues->links() }}
                    </div>
                @endif
            @else
                <div class="venues-empty-state">
                    <div class="venues-empty-icon">◇</div>

                    <span class="venues-eyebrow-dark">
                        New Spaces Coming Soon
                    </span>

                    <h2>No Venue Available</h2>

                    <p>
                        No active venue is currently available under
                        this category. Explore all venues or contact
                        our team to plan your event.
                    </p>

                    <div class="venues-empty-actions">
                        @if($selectedType)
                            <a
                                href="{{ route('venues.index') }}"
                                class="venue-primary-button"
                            >
                                View All Venues
                            </a>
                        @endif

                        <a
                            href="{{ route('home') }}#contact"
                            class="venue-secondary-button"
                        >
                            Contact Our Team
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </section>

    {{-- CTA --}}
    <section class="venues-cta-section">
        <div class="venues-cta-pattern"></div>

        <div class="container venues-cta-container">
            <div>
                <span class="venues-eyebrow">
                    Your Event, Your Way
                </span>

                <h2>
                    Let Us Create Your
                    <span>Perfect Occasion</span>
                </h2>

                <p>
                    Share your event requirements with our team and
                    let us prepare a tailored resort experience.
                </p>
            </div>

            <a
                href="{{ route('home') }}#booking"
                class="venues-cta-button"
            >
                <span>Plan Your Event</span>
                <span aria-hidden="true">→</span>
            </a>
        </div>
    </section>
@endsection

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

    html {
        scroll-behavior: smooth;
    }

    .venues-hero {
        position: relative;
        min-height: 590px;
        overflow: hidden;
        display: flex;
        align-items: center;
        isolation: isolate;
        background:
            radial-gradient(
                circle at 78% 30%,
                rgba(199, 163, 90, .18),
                transparent 26%
            ),
            linear-gradient(
                125deg,
                #09251f,
                #103b31 53%,
                #174a3d
            );
    }

    .venues-hero-pattern,
    .venues-cta-pattern {
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: .11;
        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;
    }

    .venues-hero-container {
        padding-top: 115px;
        padding-bottom: 105px;
    }

    .venues-breadcrumb {
        margin-bottom: 52px;
        display: flex;
        gap: 11px;
        color: rgba(255, 255, 255, .62);
        font-size: 13px;
    }

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

    .venues-hero-content {
        max-width: 830px;
    }

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

    .venues-eyebrow::before,
    .venues-eyebrow-dark::before {
        width: 30px;
        height: 1px;
        content: "";
        background: currentColor;
    }

    .venues-eyebrow-dark {
        color: var(--venue-gold);
    }

    .venues-hero h1 {
        margin: 19px 0 23px;
        color: #fff;
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(43px, 6vw, 76px);
        font-weight: 500;
        line-height: 1.08;
    }

    .venues-hero h1 span,
    .venues-cta-container h2 span {
        color: var(--venue-light-gold);
        font-style: italic;
    }

    .venues-hero-content p {
        max-width: 680px;
        color: rgba(255, 255, 255, .72);
        font-size: 17px;
        line-height: 1.85;
    }

    .venues-explore-button,
    .venues-cta-button {
        width: fit-content;
        min-height: 52px;
        margin-top: 34px;
        padding: 0 22px;
        display: inline-flex;
        align-items: center;
        gap: 16px;
        border: 1px solid rgba(227, 203, 148, .55);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
        text-decoration: none;
        text-transform: uppercase;
        transition: .25s ease;
    }

    .venues-explore-button:hover,
    .venues-cta-button:hover {
        background: var(--venue-gold);
        color: var(--venue-deep);
        transform: translateY(-2px);
    }

    .venues-hero-line {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 5px;
        background: linear-gradient(
            90deg,
            var(--venue-gold),
            var(--venue-light-gold),
            var(--venue-gold)
        );
    }

    .venue-filter-section {
        background: var(--venue-cream);
    }

    .venue-filter-wrap {
        position: relative;
        top: -42px;
        z-index: 4;
        padding: 28px 32px;
        border: 1px solid rgba(199, 163, 90, .22);
        background: #fff;
        box-shadow: 0 18px 50px rgba(11, 48, 40, .09);
    }

    .venue-filter-heading {
        margin-bottom: 22px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
    }

    .venue-filter-heading > div:first-child > span {
        color: var(--venue-gold);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.8px;
        text-transform: uppercase;
    }

    .venue-filter-heading h2 {
        margin: 6px 0 0;
        color: var(--venue-heading);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 25px;
        font-weight: 500;
    }

    .venue-result-count {
        display: flex;
        align-items: baseline;
        gap: 7px;
        color: var(--venue-text);
        font-size: 12px;
    }

    .venue-result-count strong {
        color: var(--venue-green);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 25px;
    }

    .venue-filter-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .venue-filter-button {
        min-height: 44px;
        padding: 9px 15px;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        border: 1px solid var(--venue-border);
        background: #fff;
        color: #536761;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        transition: .25s ease;
    }

    .venue-filter-button:hover,
    .venue-filter-button.active {
        border-color: var(--venue-green);
        background: var(--venue-green);
        color: #fff;
        transform: translateY(-1px);
    }

    .venue-filter-icon {
        width: 25px;
        height: 25px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #eaf2ee;
        color: var(--venue-green);
    }

    .venue-filter-button:hover .venue-filter-icon,
    .venue-filter-button.active .venue-filter-icon {
        background: rgba(255, 255, 255, .14);
        color: var(--venue-light-gold);
    }

    .venues-listing-section {
        padding: 45px 0 105px;
        background: var(--venue-cream);
        scroll-margin-top: 100px;
    }

    .selected-venue-filter {
        margin-bottom: 25px;
        padding: 13px 17px;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        border-left: 3px solid var(--venue-gold);
        background: #fff;
        color: var(--venue-text);
        font-size: 13px;
    }

    .selected-venue-filter a {
        color: var(--venue-green);
        font-weight: 700;
        text-decoration: none;
    }

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

    .venue-card {
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--venue-border);
        background: #fff;
        box-shadow: 0 8px 30px rgba(19, 59, 49, .055);
        transition: .35s ease;
    }

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

    .venue-card-image {
        position: relative;
        height: 270px;
        overflow: hidden;
        background: var(--venue-deep);
        display: block;
        text-decoration: none;
    }

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

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

    .venue-image-placeholder {
        width: 100%;
        height: 100%;
        display: grid;
        place-content: center;
        gap: 8px;
        color: var(--venue-light-gold);
        text-align: center;
        background:
            radial-gradient(
                circle at 70% 25%,
                rgba(199, 163, 90, .28),
                transparent 30%
            ),
            linear-gradient(145deg, #0d3029, #174a3d);
    }

    .venue-image-placeholder span {
        font-size: 50px;
    }

    .venue-image-placeholder small {
        color: rgba(255, 255, 255, .65);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

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

    .venue-type-badge,
    .venue-featured-badge {
        position: absolute;
        z-index: 2;
        padding: 8px 11px;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

    .venue-type-badge {
        bottom: 16px;
        left: 16px;
        background: rgba(13, 48, 41, .88);
        color: #fff;
    }

    .venue-featured-badge {
        top: 15px;
        right: 15px;
        background: var(--venue-gold);
        color: var(--venue-deep);
    }

    .venue-card-content {
        padding: 25px 24px 23px;
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .venue-small-title {
        margin-bottom: 7px;
        color: #b38c43;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 1.3px;
        text-transform: uppercase;
    }

    .venue-card-content h2 {
        min-height: 61px;
        margin: 0;
        color: var(--venue-heading);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 25px;
        font-weight: 500;
        line-height: 1.25;
    }

    .venue-description {
        min-height: 69px;
        margin: 14px 0 20px;
        color: var(--venue-text);
        font-size: 13px;
        line-height: 1.75;
    }

    .venue-information {
        display: grid;
        gap: 9px;
    }

    .venue-info-item {
        padding: 10px 11px;
        display: flex;
        align-items: center;
        gap: 10px;
        background: #f2f6f3;
    }

    .venue-info-icon {
        width: 29px;
        height: 29px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #fff;
        color: var(--venue-gold);
    }

    .venue-info-item small,
    .venue-price small {
        display: block;
        margin-bottom: 2px;
        color: #8a9793;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .7px;
        text-transform: uppercase;
    }

    .venue-info-item strong {
        color: #415b53;
        font-size: 10px;
    }

    .venue-facilities {
        margin: 18px 0 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        list-style: none;
    }

    .venue-facilities li {
        display: flex;
        gap: 7px;
        color: #596c66;
        font-size: 11px;
    }

    .venue-facilities li > span:first-child {
        color: var(--venue-gold);
        font-weight: 900;
    }

    .venue-card-footer {
        margin-top: auto;
        padding-top: 20px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 14px;
        border-top: 1px solid var(--venue-border);
    }

    .venue-price strong {
        color: var(--venue-green);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 23px;
    }

    .venue-price del {
        margin-left: 6px;
        color: #9da7a4;
        font-size: 11px;
    }

    .venue-reserve-button {
        min-height: 42px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        background: var(--venue-green);
        color: #fff;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .5px;
        text-decoration: none;
        text-transform: uppercase;
        transition: .25s ease;
    }

    .venue-reserve-button:hover {
        gap: 13px;
        background: var(--venue-gold);
        color: var(--venue-deep);
    }

    .venues-pagination {
        margin-top: 45px;
    }

    .venues-pagination nav > div:first-child {
        display: none;
    }

    .venues-pagination nav > div:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
    }

    .venues-pagination nav p {
        color: var(--venue-text);
        font-size: 12px;
    }

    .venues-pagination nav span[aria-current="page"] > span,
    .venues-pagination nav a {
        min-width: 38px;
        height: 38px;
        padding: 0 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--venue-border);
        background: #fff;
        color: var(--venue-green);
        text-decoration: none;
    }

    .venues-pagination nav span[aria-current="page"] > span {
        border-color: var(--venue-green);
        background: var(--venue-green);
        color: #fff;
    }

    .venues-pagination svg {
        width: 16px;
    }

    .venues-empty-state {
        max-width: 720px;
        margin: 0 auto;
        padding: 65px 35px;
        border: 1px solid var(--venue-border);
        background: #fff;
        text-align: center;
    }

    .venues-empty-icon {
        margin-bottom: 15px;
        color: var(--venue-gold);
        font-size: 50px;
    }

    .venues-empty-state h2 {
        margin: 15px 0 12px;
        color: var(--venue-heading);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 36px;
        font-weight: 500;
    }

    .venues-empty-state p {
        color: var(--venue-text);
        line-height: 1.8;
    }

    .venues-empty-actions {
        margin-top: 25px;
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .venue-primary-button,
    .venue-secondary-button {
        min-height: 46px;
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        background: var(--venue-green);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        text-decoration: none;
        text-transform: uppercase;
    }

    .venue-secondary-button {
        border: 1px solid var(--venue-green);
        background: transparent;
        color: var(--venue-green);
    }

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

    .venues-cta-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 45px;
    }

    .venues-cta-container h2 {
        margin: 15px 0 12px;
        color: #fff;
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(34px, 4vw, 52px);
        font-weight: 500;
    }

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

    .venues-cta-button {
        margin-top: 0;
        flex: 0 0 auto;
    }

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

    @media (max-width: 767px) {
        .venues-hero {
            min-height: auto;
        }

        .venues-hero-container {
            padding-top: 85px;
            padding-bottom: 85px;
        }

        .venues-hero h1 {
            font-size: 43px;
        }

        .venue-filter-heading,
        .venues-cta-container {
            align-items: flex-start;
            flex-direction: column;
        }

        .venues-grid {
            grid-template-columns: 1fr;
        }

        .venue-card-content h2,
        .venue-description {
            min-height: 0;
        }

        .venues-pagination nav > div:last-child {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    @media (max-width: 480px) {
        .venue-filter-wrap {
            padding: 23px 18px;
        }

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

        .venue-card-footer,
        .venues-empty-actions {
            align-items: flex-start;
            flex-direction: column;
        }

        .venue-reserve-button,
        .venue-primary-button,
        .venue-secondary-button {
            width: 100%;
            justify-content: center;
        }

        .venue-facilities {
            grid-template-columns: 1fr;
        }
    }

    .venue-card-content h2 a {
    color: inherit;
    text-decoration: none;
    transition: color .25s ease;
}

.venue-card-content h2 a:hover {
    color: var(--venue-gold);
}



</style>
@endpush