{% extends 'expat_life/base.html' %}
{% load static %}

{% block title %}Event Experiences in Sri Lanka{% endblock %}

{% block content %}

<style>
    /* =========================================================
       GUEST HOSTING EXPERIENCES HOME — PREMIUM
    ========================================================= */

    .hosting-exp-home {
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.12), transparent 30%),
            radial-gradient(circle at top right, rgba(14, 116, 144, 0.12), transparent 34%),
            linear-gradient(180deg, #f8fafc 0%, #ffffff 45%, #fffaf0 100%);
        min-height: 100vh;
    }

    .hosting-exp-hero {
        position: relative;
        overflow: hidden;
        min-height: 720px;
        display: flex;
        align-items: center;
        color: #ffffff;
        background:
            linear-gradient(
                105deg,
                rgba(15, 23, 42, 0.92) 0%,
                rgba(15, 118, 110, 0.78) 48%,
                rgba(15, 23, 42, 0.45) 100%
            ),
            url("{% static 'expat_life/images/hosting_hero.webp' %}") center/cover no-repeat;
    }

    .hosting-exp-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 18% 22%, rgba(251, 191, 36, 0.22), transparent 28%),
            radial-gradient(circle at 82% 30%, rgba(20, 184, 166, 0.20), transparent 32%);
        pointer-events: none;
    }

    .hosting-exp-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 130px;
        background: linear-gradient(180deg, transparent 0%, #f8fafc 100%);
        pointer-events: none;
    }

    .hosting-exp-hero-inner {
        position: relative;
        z-index: 2;
        padding: 7rem 0 8rem;
    }

    .hosting-exp-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.55rem 1.05rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fef3c7;
        font-size: 0.85rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.055em;
        backdrop-filter: blur(10px);
        margin-bottom: 1.15rem;
    }

    .hosting-exp-hero h1 {
        max-width: 900px;
        font-size: clamp(2.5rem, 5.8vw, 5.5rem);
        font-weight: 950;
        line-height: 0.98;
        letter-spacing: -0.06em;
        margin-bottom: 1.2rem;
    }

    .hosting-exp-hero h1 span {
        color: #fbbf24;
    }

    .hosting-exp-hero-lead {
        max-width: 760px;
        color: rgba(255, 255, 255, 0.9);
        font-size: clamp(1.03rem, 1.35vw, 1.22rem);
        line-height: 1.82;
        margin-bottom: 1.65rem;
    }

    .hosting-exp-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.9rem;
        margin-bottom: 2rem;
    }

    .hosting-exp-hero-actions .btn {
        min-height: 54px;
        border-radius: 999px;
        padding: 0.9rem 1.5rem;
        font-weight: 900;
    }

    .hosting-exp-btn-gold {
        background: #fbbf24;
        color: #0f172a;
        border: none;
        box-shadow: 0 18px 34px rgba(251, 191, 36, 0.22);
    }

    .hosting-exp-btn-gold:hover {
        background: #fde68a;
        color: #0f172a;
        transform: translateY(-2px);
    }

    .hosting-exp-btn-glass {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.38);
        backdrop-filter: blur(10px);
    }

    .hosting-exp-btn-glass:hover {
        background: #ffffff;
        color: #0f172a;
    }

    .hosting-exp-proof-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.85rem;
        max-width: 980px;
    }

    .hosting-exp-proof-card {
        border-radius: 22px;
        padding: 1.05rem;
        background: rgba(255, 255, 255, 0.13);
        border: 1px solid rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(10px);
    }

    .hosting-exp-proof-card i {
        color: #fbbf24;
        font-size: 1.35rem;
        margin-bottom: 0.5rem;
    }

    .hosting-exp-proof-card strong {
        display: block;
        color: #ffffff;
        font-weight: 950;
        margin-bottom: 0.2rem;
    }

    .hosting-exp-proof-card span {
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .hosting-exp-section {
        padding: 6rem 0;
    }

    .hosting-exp-section-mini {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #0f766e;
        font-size: 0.82rem;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 0.8rem;
    }

    .hosting-exp-section-title {
        color: #0f172a;
        font-size: clamp(2rem, 4vw, 3.3rem);
        font-weight: 950;
        line-height: 1.08;
        letter-spacing: -0.05em;
        margin-bottom: 1rem;
    }

    .hosting-exp-section-text {
        color: #64748b;
        font-size: 1rem;
        line-height: 1.85;
        max-width: 830px;
    }

    .hosting-exp-category-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
        margin-top: 2.2rem;
    }

    .hosting-exp-category-card {
        position: relative;
        overflow: hidden;
        min-height: 270px;
        border-radius: 32px;
        padding: 1.55rem;
        color: #ffffff;
        background:
            linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(15, 118, 110, 0.72)),
            #0f766e;
        box-shadow: 0 24px 54px rgba(15, 23, 42, 0.14);
        transition: 0.25s ease;
    }

    .hosting-exp-category-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 34px 70px rgba(15, 23, 42, 0.20);
    }

    .hosting-exp-category-card::before {
        content: "";
        position: absolute;
        top: -70px;
        right: -70px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(251, 191, 36, 0.16);
    }

    .hosting-exp-category-icon {
        position: relative;
        z-index: 2;
        width: 56px;
        height: 56px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.14);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fbbf24;
        font-size: 1.45rem;
        margin-bottom: 1.2rem;
    }

    .hosting-exp-category-card h3 {
        position: relative;
        z-index: 2;
        font-size: 1.25rem;
        font-weight: 950;
        margin-bottom: 0.7rem;
    }

    .hosting-exp-category-card p {
        position: relative;
        z-index: 2;
        color: rgba(255, 255, 255, 0.82);
        line-height: 1.75;
        margin-bottom: 0;
    }

    .hosting-exp-venue-card {
        height: 100%;
        border-radius: 32px;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid rgba(226, 232, 240, 0.95);
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
        transition: 0.25s ease;
    }

    .hosting-exp-venue-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 34px 70px rgba(15, 23, 42, 0.13);
    }

    .hosting-exp-venue-img {
        position: relative;
        height: 230px;
        background: #e2e8f0;
        overflow: hidden;
    }

    .hosting-exp-venue-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.35s ease;
    }

    .hosting-exp-venue-card:hover .hosting-exp-venue-img img {
        transform: scale(1.05);
    }

    .hosting-exp-venue-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 34%),
            linear-gradient(135deg, #f8fafc, #ccfbf1);
        color: #0f766e;
        font-size: 3rem;
    }

    .hosting-exp-venue-badges {
        position: absolute;
        top: 1rem;
        left: 1rem;
        right: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.55rem;
        flex-wrap: wrap;
    }

    .hosting-exp-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        padding: 0.42rem 0.75rem;
        background: rgba(255, 255, 255, 0.92);
        color: #0f172a;
        font-size: 0.72rem;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        backdrop-filter: blur(10px);
    }

    .hosting-exp-badge.gold {
        background: rgba(251, 191, 36, 0.94);
        color: #0f172a;
    }

    .hosting-exp-venue-body {
        padding: 1.35rem;
    }

    .hosting-exp-venue-category {
        color: #0f766e;
        font-size: 0.78rem;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.45rem;
    }

    .hosting-exp-venue-body h3 {
        color: #0f172a;
        font-weight: 950;
        line-height: 1.3;
        font-size: 1.18rem;
        margin-bottom: 0.55rem;
    }

    .hosting-exp-venue-location {
        color: #64748b;
        display: flex;
        align-items: flex-start;
        gap: 0.4rem;
        font-size: 0.92rem;
        line-height: 1.5;
        margin-bottom: 0.85rem;
    }

    .hosting-exp-venue-location i {
        color: #0f766e;
        margin-top: 0.15rem;
    }

    .hosting-exp-venue-desc {
        color: #64748b;
        line-height: 1.7;
        font-size: 0.93rem;
        margin-bottom: 1rem;
    }

    .hosting-exp-chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin-bottom: 1rem;
    }

    .hosting-exp-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        border-radius: 999px;
        padding: 0.38rem 0.62rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #475569;
        font-size: 0.75rem;
        font-weight: 800;
    }

    .hosting-exp-venue-actions .btn {
        border-radius: 999px;
        font-weight: 850;
        min-height: 44px;
    }

    .hosting-exp-process-wrap {
        border-radius: 38px;
        padding: 2.4rem;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.10), transparent 32%),
            linear-gradient(135deg, #0f172a 0%, #0f766e 100%);
        color: #ffffff;
        box-shadow: 0 30px 68px rgba(15, 23, 42, 0.16);
    }

    .hosting-exp-process-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 2rem;
    }

    .hosting-exp-process-card {
        border-radius: 26px;
        padding: 1.25rem;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.16);
        backdrop-filter: blur(10px);
    }

    .hosting-exp-process-no {
        width: 44px;
        height: 44px;
        border-radius: 16px;
        background: #fbbf24;
        color: #0f172a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 950;
        margin-bottom: 0.9rem;
    }

    .hosting-exp-process-card h3 {
        font-weight: 950;
        font-size: 1.05rem;
        margin-bottom: 0.55rem;
    }

    .hosting-exp-process-card p {
        color: rgba(255, 255, 255, 0.78);
        line-height: 1.65;
        font-size: 0.92rem;
        margin-bottom: 0;
    }

    .hosting-exp-final-cta {
        border-radius: 38px;
        padding: 3rem 2.4rem;
        color: #ffffff;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 34%),
            linear-gradient(135deg, #0f172a 0%, #0e7490 52%, #0f766e 100%);
        box-shadow: 0 30px 68px rgba(15, 23, 42, 0.14);
    }

    .hosting-exp-final-cta h2 {
        font-size: clamp(2rem, 4vw, 3.3rem);
        font-weight: 950;
        letter-spacing: -0.05em;
        line-height: 1.08;
        margin-bottom: 0.9rem;
    }

    .hosting-exp-final-cta p {
        max-width: 820px;
        color: rgba(255, 255, 255, 0.84);
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    @media (max-width: 1199.98px) {
        .hosting-exp-proof-grid,
        .hosting-exp-process-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .hosting-exp-category-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 991.98px) {
        .hosting-exp-hero {
            min-height: auto;
        }

        .hosting-exp-hero-inner {
            padding: 6rem 0 7rem;
        }

        .hosting-exp-section {
            padding: 4.5rem 0;
        }
    }

    @media (max-width: 767.98px) {
        .hosting-exp-hero-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .hosting-exp-hero-actions .btn {
            width: 100%;
        }

        .hosting-exp-proof-grid,
        .hosting-exp-category-grid,
        .hosting-exp-process-grid {
            grid-template-columns: 1fr;
        }

        .hosting-exp-process-wrap,
        .hosting-exp-final-cta {
            padding: 2rem 1.35rem;
            border-radius: 30px;
        }
    }
    @media (max-width: 767.98px) {
        .hosting-exp-hero-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .hosting-exp-hero-actions .btn {
            width: 100%;
        }

        .hosting-exp-proof-grid,
        .hosting-exp-category-grid,
        .hosting-exp-process-grid {
            grid-template-columns: 1fr;
        }

        .hosting-exp-process-wrap,
        .hosting-exp-final-cta {
            padding: 2rem 1.35rem;
            border-radius: 30px;
        }

        .hosting-exp-hero-inner {
            padding-left: 1.15rem;
            padding-right: 1.15rem;
        }
    }

    @media (max-width: 575.98px) {
        .hosting-exp-hero-inner {
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }
    }

    /* =========================================================
    HOSTING EXPERIENCES — THEME RETOUCH
    Align guest-side experiences page with hosting app theme
    ========================================================= */

    .hosting-exp-home {
        background: #fffaf5;
        color: #2f211d;
    }

    /* HERO — warm hosting app style */
    .hosting-exp-hero {
        background:
            linear-gradient(
                100deg,
                rgba(27, 16, 15, 0.94) 0%,
                rgba(54, 27, 24, 0.88) 42%,
                rgba(89, 44, 30, 0.64) 72%,
                rgba(89, 44, 30, 0.48) 100%
            ),
            url("{% static 'expat_life/images/hosting_hero.webp' %}") center center / cover no-repeat;
    }

    .hosting-exp-hero::before {
        background:
            radial-gradient(circle at 82% 18%, rgba(255, 193, 7, 0.34), transparent 28%),
            radial-gradient(circle at 12% 78%, rgba(202, 95, 58, 0.28), transparent 32%);
    }

    .hosting-exp-hero::after {
        background: linear-gradient(180deg, transparent 0%, #fffaf5 100%);
    }

    .hosting-exp-kicker {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.18);
        color: #ffd36b;
    }

    .hosting-exp-hero h1 span {
        color: #ffd36b;
    }

    .hosting-exp-hero-lead {
        color: rgba(255, 255, 255, 0.86);
    }

    /* Buttons — same feeling as hosting app */
    .hosting-exp-btn-gold {
        border-radius: 18px;
        background: linear-gradient(135deg, #ffc83f, #df9219);
        color: #26160d;
        box-shadow: 0 18px 34px rgba(223, 146, 25, 0.32);
    }

    .hosting-exp-btn-gold:hover {
        background: linear-gradient(135deg, #ffd45f, #ec9f21);
        color: #26160d;
    }

    .hosting-exp-btn-glass {
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.34);
    }

    .hosting-exp-btn-glass:hover {
        background: rgba(255, 255, 255, 0.17);
        color: #ffffff;
    }

    /* Hero proof cards */
    .hosting-exp-proof-card {
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.11);
        border-color: rgba(255, 255, 255, 0.14);
    }

    .hosting-exp-proof-card i {
        color: #ffd36b;
    }

    /* Section headings */
    .hosting-exp-section-mini {
        padding: 8px 15px;
        border-radius: 999px;
        background: rgba(184, 111, 31, 0.12);
        border: 1px solid rgba(184, 111, 31, 0.18);
        color: #975816;
        font-weight: 850;
    }

    .hosting-exp-section-title {
        color: #2c1b17;
        font-weight: 900;
    }

    .hosting-exp-section-text {
        color: #78625a;
    }

    /* Experience category cards — warm premium cards */
    .hosting-exp-category-card {
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.12), transparent 34%),
            linear-gradient(145deg, #fffaf4 0%, #ffffff 100%);
        color: #38231d;
        border: 1px solid rgba(124, 74, 50, 0.10);
        box-shadow: 0 18px 42px rgba(55, 31, 22, 0.07);
    }

    .hosting-exp-category-card:hover {
        box-shadow: 0 24px 54px rgba(55, 31, 22, 0.12);
    }

    .hosting-exp-category-card::before {
        background: rgba(255, 193, 7, 0.12);
    }

    .hosting-exp-category-icon {
        background: #fff0d6;
        color: #a75e17;
    }

    .hosting-exp-category-card h3 {
        color: #38231d;
    }

    .hosting-exp-category-card p {
        color: #7b665e;
    }

    /* Venue cards */
    .hosting-exp-venue-card {
        border-radius: 30px;
        background: linear-gradient(145deg, #fffaf4 0%, #ffffff 100%);
        border: 1px solid rgba(124, 74, 50, 0.10);
        box-shadow: 0 18px 42px rgba(55, 31, 22, 0.07);
    }

    .hosting-exp-venue-card:hover {
        box-shadow: 0 24px 54px rgba(55, 31, 22, 0.12);
    }

    .hosting-exp-venue-placeholder {
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.18), transparent 34%),
            linear-gradient(135deg, #fffaf4, #ffe8bf);
        color: #a75e17;
    }

    .hosting-exp-badge.gold {
        background: rgba(255, 200, 63, 0.95);
        color: #26160d;
    }

    .hosting-exp-venue-category {
        color: #975816;
    }

    .hosting-exp-venue-body h3 {
        color: #38231d;
    }

    .hosting-exp-venue-location i {
        color: #a75e17;
    }

    .hosting-exp-venue-desc {
        color: #78625a;
    }

    .hosting-exp-chip {
        background: #fff7e8;
        border-color: #efd8b7;
        color: #6f4f3f;
    }

    /* Process section — dark warm hosting panel */
    .hosting-exp-process-wrap {
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.18), transparent 34%),
            linear-gradient(145deg, #301919 0%, #743129 68%, #a75f1b 100%);
        box-shadow: 0 28px 66px rgba(54, 28, 23, 0.20);
    }

    .hosting-exp-process-no {
        background: linear-gradient(135deg, #ffc83f, #dd9017);
        color: #27160f;
    }

    .hosting-exp-process-card {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.12);
    }

    .hosting-exp-process-card p {
        color: rgba(255, 255, 255, 0.78);
    }

    /* Final CTA */
    .hosting-exp-final-cta {
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.22), transparent 35%),
            linear-gradient(145deg, #2e1817 0%, #6d2e28 64%, #a3601b 100%);
        box-shadow: 0 30px 70px rgba(53, 27, 22, 0.22);
    }

    /* Empty section box support */
    .hosting-exp-home .bg-white.rounded-5 {
        background: linear-gradient(145deg, #fffaf4 0%, #ffffff 100%) !important;
        border-color: rgba(124, 74, 50, 0.10) !important;
    }

    /* Mobile padding fix for hero */
    @media (max-width: 575.98px) {
        .hosting-exp-hero > .container {
            padding-left: 1.25rem !important;
            padding-right: 1.25rem !important;
        }

        .hosting-exp-hero-inner {
            padding-top: 5.5rem;
            padding-bottom: 6.5rem;
        }

        .hosting-exp-btn-gold,
        .hosting-exp-btn-glass {
            border-radius: 18px;
        }
    }


</style>


<div class="hosting-exp-home">

    <!-- =====================================================
         HERO
    ====================================================== -->
    <section class="hosting-exp-hero">
        <div class="container hosting-exp-hero-inner">

            <span class="hosting-exp-kicker">
                <i class="bi bi-calendar-heart-fill"></i>
                Hosted Experiences in Sri Lanka
            </span>

            <h1>
                Celebrate beautiful moments <span>with local venues and hosts.</span>
            </h1>

            <p class="hosting-exp-hero-lead">
                Discover romantic dinners, proposal setups, birthday celebrations, anniversary surprises,
                honeymoon moments, private dining, engagement events, and custom celebrations arranged
                with trusted hosting partners across Sri Lanka.
            </p>

            <div class="hosting-exp-hero-actions">
                <a href="{% url 'expat_life:guest_host_venue_list' %}"
                   class="btn hosting-exp-btn-gold">
                    <i class="bi bi-search-heart-fill me-2"></i>
                    Browse Host Venues
                </a>

                <a href="#how-it-works"
                   class="btn hosting-exp-btn-glass">
                    <i class="bi bi-compass-fill me-2"></i>
                    How It Works
                </a>
            </div>

            <div class="hosting-exp-proof-grid">
                <div class="hosting-exp-proof-card">
                    <i class="bi bi-heart-fill"></i>
                    <strong>Romantic Moments</strong>
                    <span>Proposal dinners, private dates, and anniversary surprises.</span>
                </div>

                <div class="hosting-exp-proof-card">
                    <i class="bi bi-cup-hot-fill"></i>
                    <strong>Meals & Dining</strong>
                    <span>Meal plans, private dinners, and custom food arrangements.</span>
                </div>

                <div class="hosting-exp-proof-card">
                    <i class="bi bi-stars"></i>
                    <strong>Add-on Services</strong>
                    <span>Flowers, cakes, décor, music, photography, and more.</span>
                </div>

                <div class="hosting-exp-proof-card">
                    <i class="bi bi-shield-check"></i>
                    <strong>Coordinated Support</strong>
                    <span>Ensolanka helps connect guests with suitable local hosts.</span>
                </div>
            </div>

        </div>
    </section>


    <!-- =====================================================
         EXPERIENCE TYPES
    ====================================================== -->
    <section class="hosting-exp-section">
        <div class="container">

            <span class="hosting-exp-section-mini">
                <i class="bi bi-gem"></i>
                What You Can Plan
            </span>

            <h2 class="hosting-exp-section-title">
                From simple romantic dinners to unforgettable celebrations.
            </h2>

            <p class="hosting-exp-section-text">
                Our hosting experiences are designed for guests living in, visiting, or planning a special
                stay in Sri Lanka. Instead of searching separately for venues, meals, decorations, and local
                help, guests can explore host venues and combine available packages, meal plans, and services.
            </p>

            <div class="hosting-exp-category-grid">

                <div class="hosting-exp-category-card">
                    <div class="hosting-exp-category-icon">
                        <i class="bi bi-heart-arrow"></i>
                    </div>
                    <h3>Romantic Dates & Proposals</h3>
                    <p>
                        Private dinners, rooftop moments, candlelight setups, flowers, music, and discreet proposal support.
                    </p>
                </div>

                <div class="hosting-exp-category-card">
                    <div class="hosting-exp-category-icon">
                        <i class="bi bi-balloon-heart-fill"></i>
                    </div>
                    <h3>Birthdays & Anniversaries</h3>
                    <p>
                        Celebrate with a venue, food, cake, décor, photography, and custom surprise elements.
                    </p>
                </div>

                <div class="hosting-exp-category-card">
                    <div class="hosting-exp-category-icon">
                        <i class="bi bi-suit-heart-fill"></i>
                    </div>
                    <h3>Honeymoon Moments</h3>
                    <p>
                        Create calm, elegant, and private experiences for couples enjoying Sri Lanka together.
                    </p>
                </div>

                <div class="hosting-exp-category-card">
                    <div class="hosting-exp-category-icon">
                        <i class="bi bi-gift-fill"></i>
                    </div>
                    <h3>Engagement & Small Events</h3>
                    <p>
                        Suitable places and packages for small engagement events, intimate gatherings, and family-style celebrations.
                    </p>
                </div>

                <div class="hosting-exp-category-card">
                    <div class="hosting-exp-category-icon">
                        <i class="bi bi-building-heart"></i>
                    </div>
                    <h3>Private Venues</h3>
                    <p>
                        Villas, rooftops, gardens, beach spaces, boutique hotels, restaurants, and private rooms.
                    </p>
                </div>

                <div class="hosting-exp-category-card">
                    <div class="hosting-exp-category-icon">
                        <i class="bi bi-magic"></i>
                    </div>
                    <h3>Custom Celebrations</h3>
                    <p>
                        Tell us the idea, guest count, and preferred style. We help shape it into a practical local arrangement.
                    </p>
                </div>

            </div>

        </div>
    </section>


    <!-- =====================================================
         FEATURED VENUES
    ====================================================== -->
    <section class="hosting-exp-section pt-0">
        <div class="container">

            <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
                <div>
                    <span class="hosting-exp-section-mini">
                        <i class="bi bi-star-fill"></i>
                        Featured Host Venues
                    </span>

                    <h2 class="hosting-exp-section-title mb-0">
                        Explore places ready for special moments.
                    </h2>
                </div>

                <a href="{% url 'expat_life:guest_host_venue_list' %}"
                   class="btn btn-dark rounded-pill fw-bold px-4 py-3">
                    Browse All Venues
                    <i class="bi bi-arrow-right ms-2"></i>
                </a>
            </div>

            {% if featured_venues %}
                <div class="row g-4">
                    {% for venue in featured_venues %}
                        <div class="col-md-6 col-xl-4">
                            <div class="hosting-exp-venue-card">

                                <div class="hosting-exp-venue-img">
                                    {% if venue.cover_image %}
                                        <img src="{{ venue.cover_image.url }}" alt="{{ venue.venue_name }}">
                                    {% else %}
                                        <div class="hosting-exp-venue-placeholder">
                                            <i class="bi bi-building-heart"></i>
                                        </div>
                                    {% endif %}

                                    <div class="hosting-exp-venue-badges">
                                        <span class="hosting-exp-badge gold">
                                            <i class="bi bi-star-fill"></i>
                                            Featured
                                        </span>

                                        {% if venue.max_guest_capacity %}
                                            <span class="hosting-exp-badge">
                                                <i class="bi bi-people-fill"></i>
                                                Up to {{ venue.max_guest_capacity }}
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>

                                <div class="hosting-exp-venue-body">
                                    <div class="hosting-exp-venue-category">
                                        {% if venue.venue_category %}
                                            {{ venue.get_venue_category_display }}
                                        {% else %}
                                            Host Venue
                                        {% endif %}
                                    </div>

                                    <h3>{{ venue.venue_name }}</h3>

                                    <div class="hosting-exp-venue-location">
                                        <i class="bi bi-geo-alt-fill"></i>
                                        <span>
                                            {% if venue.city %}{{ venue.city }}{% endif %}
                                            {% if venue.city and venue.district %}, {% endif %}
                                            {% if venue.district %}{{ venue.district }}{% endif %}
                                        </span>
                                    </div>

                                    <p class="hosting-exp-venue-desc">
                                        {{ venue.short_description|truncatechars:145 }}
                                    </p>

                                    <div class="hosting-exp-chip-row">
                                        {% if venue.supports_romantic_dates %}
                                            <span class="hosting-exp-chip"><i class="bi bi-heart-fill"></i> Dates</span>
                                        {% endif %}
                                        {% if venue.supports_proposal_events %}
                                            <span class="hosting-exp-chip"><i class="bi bi-gem"></i> Proposal</span>
                                        {% endif %}
                                        {% if venue.supports_birthdays %}
                                            <span class="hosting-exp-chip"><i class="bi bi-balloon-heart"></i> Birthday</span>
                                        {% endif %}
                                        {% if venue.supports_private_dinners %}
                                            <span class="hosting-exp-chip"><i class="bi bi-cup-hot"></i> Dinner</span>
                                        {% endif %}
                                    </div>

                                    <div class="hosting-exp-venue-actions">
                                        <a href="{% url 'expat_life:guest_host_venue_detail' venue.slug %}"
                                           class="btn btn-outline-dark w-100">
                                            View Venue Details
                                            <i class="bi bi-arrow-right ms-2"></i>
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="bg-white rounded-5 border shadow-sm p-5 text-center">
                    <i class="bi bi-building-heart display-4 text-warning mb-3"></i>
                    <h3 class="fw-bold">Featured host venues are coming soon.</h3>
                    <p class="text-muted mb-4">
                        We are preparing selected venues, packages, meal plans, and add-on services for guest browsing.
                    </p>

                    <a href="{% url 'expat_life:guest_host_venue_list' %}"
                       class="btn btn-dark rounded-pill fw-bold px-4 py-3">
                        Browse Available Venues
                    </a>
                </div>
            {% endif %}

        </div>
    </section>


    <!-- =====================================================
         HOW IT WORKS
    ====================================================== -->
    <section class="hosting-exp-section" id="how-it-works">
        <div class="container">

            <div class="hosting-exp-process-wrap">
                <span class="hosting-exp-section-mini text-warning">
                    <i class="bi bi-compass-fill"></i>
                    How It Works
                </span>

                <h2 class="hosting-exp-section-title text-white">
                    A simple path from idea to celebration.
                </h2>

                <p style="max-width: 850px; color: rgba(255,255,255,0.82); line-height: 1.8;">
                    For now, guests can browse venues and review the available packages, meals, and services.
                    The booking and payment flow will be connected next so guests can create confirmed event orders.
                </p>

                <div class="hosting-exp-process-grid">

                    <div class="hosting-exp-process-card">
                        <div class="hosting-exp-process-no">1</div>
                        <h3>Browse Venues</h3>
                        <p>
                            Explore suitable host venues by location, atmosphere, and event suitability.
                        </p>
                    </div>

                    <div class="hosting-exp-process-card">
                        <div class="hosting-exp-process-no">2</div>
                        <h3>Review Options</h3>
                        <p>
                            View event packages, meal plans, add-on services, facilities, and important venue notes.
                        </p>
                    </div>

                    <div class="hosting-exp-process-card">
                        <div class="hosting-exp-process-no">3</div>
                        <h3>Select Experience</h3>
                        <p>
                            Choose a venue, package, meal plan, and optional add-ons once the booking flow is activated.
                        </p>
                    </div>

                    <div class="hosting-exp-process-card">
                        <div class="hosting-exp-process-no">4</div>
                        <h3>Confirm & Pay</h3>
                        <p>
                            A payable item will be created in the Guest Payment Center, then the host receives the booking.
                        </p>
                    </div>

                </div>
            </div>

        </div>
    </section>


    <!-- =====================================================
         LATEST VENUES
    ====================================================== -->
    {% if latest_venues %}
        <section class="hosting-exp-section pt-0">
            <div class="container">

                <span class="hosting-exp-section-mini">
                    <i class="bi bi-clock-history"></i>
                    Recently Added
                </span>

                <h2 class="hosting-exp-section-title">
                    More host venues to explore.
                </h2>

                <div class="row g-4">
                    {% for venue in latest_venues %}
                        <div class="col-md-6 col-xl-4">
                            <div class="hosting-exp-venue-card">

                                <div class="hosting-exp-venue-img">
                                    {% if venue.cover_image %}
                                        <img src="{{ venue.cover_image.url }}" alt="{{ venue.venue_name }}">
                                    {% else %}
                                        <div class="hosting-exp-venue-placeholder">
                                            <i class="bi bi-building-heart"></i>
                                        </div>
                                    {% endif %}

                                    <div class="hosting-exp-venue-badges">
                                        {% if venue.is_featured %}
                                            <span class="hosting-exp-badge gold">
                                                <i class="bi bi-star-fill"></i>
                                                Featured
                                            </span>
                                        {% endif %}

                                        {% if venue.max_guest_capacity %}
                                            <span class="hosting-exp-badge">
                                                <i class="bi bi-people-fill"></i>
                                                Up to {{ venue.max_guest_capacity }}
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>

                                <div class="hosting-exp-venue-body">
                                    <div class="hosting-exp-venue-category">
                                        {% if venue.venue_category %}
                                            {{ venue.get_venue_category_display }}
                                        {% else %}
                                            Host Venue
                                        {% endif %}
                                    </div>

                                    <h3>{{ venue.venue_name }}</h3>

                                    <div class="hosting-exp-venue-location">
                                        <i class="bi bi-geo-alt-fill"></i>
                                        <span>
                                            {% if venue.city %}{{ venue.city }}{% endif %}
                                            {% if venue.city and venue.district %}, {% endif %}
                                            {% if venue.district %}{{ venue.district }}{% endif %}
                                        </span>
                                    </div>

                                    <p class="hosting-exp-venue-desc">
                                        {{ venue.short_description|truncatechars:145 }}
                                    </p>

                                    <a href="{% url 'expat_life:guest_host_venue_detail' venue.slug %}"
                                       class="btn btn-outline-dark rounded-pill fw-bold w-100">
                                        View Details
                                        <i class="bi bi-arrow-right ms-2"></i>
                                    </a>
                                </div>

                            </div>
                        </div>
                    {% endfor %}
                </div>

            </div>
        </section>
    {% endif %}


    <!-- =====================================================
         FINAL CTA
    ====================================================== -->
    <section class="hosting-exp-section pt-0">
        <div class="container">
            <div class="hosting-exp-final-cta">
                <h2>
                    Planning something special in Sri Lanka?
                </h2>

                <p>
                    Start by exploring suitable venues and experience options. Soon, you will be able to select
                    packages, meals, add-ons, dates, guest count, and create a complete booking order directly
                    through the Live in Sri Lanka platform.
                </p>

                <div class="hosting-exp-hero-actions mb-0">
                    <a href="{% url 'expat_life:guest_host_venue_list' %}"
                       class="btn hosting-exp-btn-gold">
                        <i class="bi bi-search-heart-fill me-2"></i>
                        Browse Host Venues
                    </a>

                    <a href="{% url 'expat_life:contact_page' %}"
                       class="btn hosting-exp-btn-glass">
                        <i class="bi bi-chat-heart-fill me-2"></i>
                        Ask About an Event
                    </a>
                </div>
            </div>
        </div>
    </section>

</div>

{% endblock %}