/* ==========================================================
   1. Hero
   ========================================================== */
.spaces-hero {
    position: relative;
    min-height:100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #162f48;
    color: #fff;
}

.spaces-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/themes/belltower-2026/assets/images/bell-tower-event-spaces-hero.jpg');
    background-size: cover;
    background-position: center;
    transform: scale(1.08);
    z-index: 1;
}

.spaces-hero-overlay{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(18,47,73,.84) 0%,
            rgba(18,47,73,.76) 30%,
            rgba(18,47,73,.48) 58%,
            rgba(18,47,73,.14) 78%,
            rgba(18,47,73,.04) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.16) 0%,
            rgba(0,0,0,.04) 35%,
            rgba(0,0,0,.24) 100%
        );

    z-index: 2;
}

.spaces-hero .container {
    position: relative;
    z-index: 3;
}

.spaces-hero-content {
    max-width: 760px;
    padding: 10.25rem 0 8rem;
}

.spaces-hero .section-eyebrow {
    display: inline-block;
    margin-bottom: 1.5rem;
    color: #d7b46a;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: .94;
    letter-spacing: -.03em;
}

.spaces-hero h1 {
    margin: 0 0 1.5rem;
    color: #fff;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(4rem, 8vw, 7.5rem);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: -0.04em;
}

.spaces-hero p {
    margin: 2rem 0 2.5rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.65;
    max-width: 620px;
}

.spaces-hero .btn-gold {
    background: #d7b46a;
    border: 1px solid #d7b46a;
    color: #152f48;
    border-radius: 999px;
    padding: 0.95rem 1.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    transition: all 0.25s ease;
}

.spaces-hero .btn-gold:hover {
    background: #fff;
    border-color: #fff;
    color: #152f48;
    transform: translateY(-2px);
}

.hero-promise {
    margin-top: 2rem;
    font-size: .85rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.82);
    font-weight: 600;
}




/* ==========================================================
   2. Hero Scroll Indicator
   ========================================================== */
.hero-scroll-indicator{
    margin-top:5rem;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
}

.hero-scroll-indicator span{
    color:rgba(255,255,255,.58);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.28em;
    text-transform:uppercase;
}

.hero-scroll-line{
    width:1px;
    height:60px;
    background:rgba(255,255,255,.35);
    position:relative;
    overflow:hidden;
}

.hero-scroll-line::after{
    content:"";
    position:absolute;
    top:-30px;
    left:0;
    width:1px;
    height:30px;
    background:#d7b46a;
    animation:scrollIndicator 2.4s ease-in-out infinite;
}

@keyframes scrollIndicator{

    0%{
        top:-30px;
        opacity:0;
    }

    20%{
        opacity:1;
    }

    80%{
        opacity:1;
    }

    100%{
        top:60px;
        opacity:0;
    }

}



.space-jump-nav{

    position:sticky;
    top:84px;
    z-index:100;

    background:#fff;

    border-bottom:1px solid rgba(0,0,0,.06);

    box-shadow:0 6px 24px rgba(0,0,0,.04);

}

.space-jump-inner{

    display:flex;

    justify-content:center;

    gap:3rem;

    padding:1.25rem 0;

}

.space-jump-inner a{

    text-decoration:none;

    color:var(--btp-navy);

    font-weight:600;

    transition:.25s;

}

.space-jump-inner a:hover{

    color:var(--btp-gold);

}


/* ==========================================================
   3. Destination Selector
   ========================================================== */


.destination-selector{
    padding:8rem 0;
    background:#faf8f4;
}

.destination-intro{
    max-width:760px;
    margin:0 auto 5rem;
    text-align:center;
}

.destination-intro h2{
    margin-bottom:1.5rem;
}

.destination-intro p{
    font-size:1.2rem;
    line-height:1.9;
    color:#5b6773;
}

.destination-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
}

.destination-content{
    padding:2rem;
    display:flex;
    flex-direction:column;
    flex:1;
}

.destination-category{
    display:block;
    margin-bottom:.75rem;
    color:#c59b48;
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.22em;
}

.destination-content h3{
    margin-bottom:1rem;
}

.destination-content p{
    color:#66717d;
    line-height:1.8;
}

.destination-link{
    display:inline-flex;
    color:#18324b;
    font-weight:700;
    margin-top:auto;
}

.destination-image{
    overflow:hidden;
    aspect-ratio:4/3;
}

.destination-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.destination-card:hover img{
    transform:scale(1.08);
}

.destination-card{
    display:flex;
    flex-direction:column;
    height:100%;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    box-shadow:
        0 15px 45px rgba(20,30,40,.08);
    transition:.35s ease;
}

.destination-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 35px 70px rgba(20,30,40,.15);
}


/* ==========================================================
   4. Historic Chapel
   ========================================================== */

.chapel-section{
    background:#fff;
    position:relative;
}

.chapel-section h2{
    font-size:clamp(4rem,7vw,6.5rem);
    line-height:.95;
    margin-bottom:1.5rem;
}

.venue-image-stack{
    position:relative;
}

.venue-image-main{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    display:block;
    box-shadow:0 30px 70px rgba(20,30,40,.12);
}

.venue-image-note{
    position:absolute;
    left:-3rem;
    bottom:3rem;
    max-width:320px;
    background:#faf8f4;
    padding:1.5rem;
    border-left:4px solid #d7b46a;
    font-family:"Cormorant Garamond", serif;
    font-size:1.35rem;
    line-height:1.35;
    color:#18324b;
    box-shadow:0 18px 45px rgba(20,30,40,.12);
}

.venue-quote{
    margin:2rem 0 2.5rem;
    max-width:560px;
    font-family:"Cormorant Garamond", serif;
    font-size:1.65rem;
    font-style:italic;
    line-height:1.35;
    color:#18324b;
}

.venue-image-note span{
    display:block;
    margin-bottom:.7rem;
    color:#c59b48;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
}

.venue-image-note p{
    margin:0;
}

/* ==========================================================
   5. Courtyard
   ========================================================== */

.courtyard-section{
    padding:10rem 0 0;
    background:#faf8f4;
}

.courtyard-intro{
    max-width:760px;
    margin:0 auto 8rem;
    text-align:center;
}

.courtyard-intro h2{
    font-size:clamp(4rem,7vw,6.5rem);
    line-height:.92;
    margin:1rem 0 2rem;
}

.courtyard-feature-image{
    margin:0 auto 8rem;
}

.courtyard-feature-image img{
    width:100%;
    display:block;
}

.courtyard-story{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:6rem;
    align-items:start;
    margin-bottom:8rem;
}

.courtyard-quote{
    font-family:"Cormorant Garamond",serif;
    font-size:2rem;
    font-style:italic;
    color:#18324b;
    padding-top:2rem;

}

.courtyard-moments{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:3rem;
    margin-top:4rem;
}

.courtyard-moments img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;

}

figcaption{
    margin-top:1rem;
}

figcaption strong{
    display:block;
    margin-bottom:.5rem;
    font-size:.9rem;
    letter-spacing:.08em;
}

figcaption span{
    color:#66717d;
    font-size:.95rem;
}

.courtyard-ending{
    margin-top:10rem;
}

.courtyard-ending img{
    width:100%;
    display:block;
}


/* ==========================================================
   6. Meeting Rooms / Purpose
   ========================================================== */

.purpose-section{
    padding:10rem 0;
    background:#fff;
}

.purpose-intro{
    max-width:820px;
    margin:0 auto 7rem;
    text-align:center;
}

.purpose-intro h2{
    margin:1rem 0 2rem;
    font-size:clamp(4rem,7vw,6.75rem);
    line-height:.9;
}

.purpose-intro p{
    font-size:1.2rem;
    line-height:1.9;
    color:#5b6773;
}

.purpose-lounge-image{
    margin:0 auto 8rem;
}

.purpose-lounge-image img{
    width:100%;
    display:block;
}

.purpose-statement{
    max-width:760px;
    margin:0 auto 8rem;
    text-align:center;
}

.purpose-statement p{
    margin:0;
    font-family:"Cormorant Garamond", serif;
    font-size:clamp(2.75rem,5vw,5rem);
    font-style:italic;
    line-height:1;
    color:#18324b;
}

.purpose-editorial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:3rem;
    margin-bottom:10rem;
}

.purpose-editorial-grid figure{
    margin:0;
}

.purpose-editorial-grid img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    display:block;
}

.purpose-editorial-grid figcaption{
    margin-top:1.25rem;
}

.purpose-editorial-grid figcaption strong{
    display:block;
    margin-bottom:.45rem;
    color:#18324b;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.purpose-editorial-grid figcaption span{
    color:#66717d;
    font-size:.95rem;
    line-height:1.65;
}

.purpose-room-feature{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:5rem;
    align-items:center;
    margin-bottom:8rem;
}

.purpose-room-copy h3{
    margin:1rem 0 1.5rem;
    font-size:clamp(3rem,5vw,5.25rem);
    line-height:.95;
}

.purpose-room-copy p{
    font-size:1.15rem;
    line-height:1.85;
    color:#5b6773;
}

.purpose-room-image img{
    width:100%;
    aspect-ratio:16/11;
    object-fit:cover;
    display:block;
    border-radius:22px;
    box-shadow:0 30px 70px rgba(20,30,40,.12);
}

.purpose-capabilities{
    display:flex;
    gap:2.5rem;
    margin-top:2.5rem;
}

.purpose-capabilities strong{
    display:block;
    color:#c59b48;
    font-size:1.8rem;
    line-height:1;
    font-family:"Cormorant Garamond", serif;
}

.purpose-capabilities span{
    display:block;
    margin-top:.4rem;
    color:#18324b;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.purpose-quote{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.purpose-quote p{
    margin:0;
    font-family:"Cormorant Garamond", serif;
    font-size:clamp(2.4rem,4vw,4.25rem);
    font-style:italic;
    line-height:1.08;
    color:#18324b;
}


/* ==================================================
   7. Amenities
================================================== */

.spaces-amenities{

    padding:7rem 0;

    background:var(--btp-navy);

    color:white;

}

.amenity-card{

    text-align:center;

    background:rgba(255,255,255,.06);

    padding:2.5rem;

    border-radius:18px;

    height:100%;

    transition:.3s;

}

.amenity-card:hover{

    transform:translateY(-6px);

    background:rgba(255,255,255,.10);

}

.amenity-card i{

    font-size:3rem;

    color:var(--btp-gold);

    margin-bottom:1.5rem;

}

.amenity-card h3{

    margin-bottom:1rem;

}

/* ==========================================================
   Every Detail Considered
   ========================================================== */

.btp-details-section{
    padding:10rem 0;
    background:var(--btp-cream);
}

.btp-details-intro{
    max-width:760px;
    margin:0 auto 6rem;
    text-align:center;
}

.btp-details-intro h2{
    margin:1rem 0 2rem;
    font-size:clamp(3.5rem,6vw,5.5rem);
    line-height:.95;
}

.btp-details-intro p{
    font-size:1.15rem;
    line-height:1.9;
    color:#5d6875;
}

.btp-details-grid{

    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:5rem;
    align-items:center;

}

.btp-details-list article{

    padding:0 0 2rem;
    margin-bottom:2rem;
    border-bottom:1px solid rgba(24,50,75,.12);

}

.btp-details-list article:last-child{

    border:none;
    margin:0;
    padding:0;

}

.btp-details-list h3{

    margin:0 0 .5rem;
    font-size:1.35rem;

}

.btp-details-list p{

    margin:0;
    color:#66717d;
    line-height:1.8;

}

.btp-details-image img{

    width:100%;
    display:block;
    border-radius:20px;
    box-shadow:0 35px 80px rgba(0,0,0,.10);

}

.btp-details-closing{

    max-width:900px;
    margin:7rem auto 0;
    text-align:center;

}

.btp-details-closing p{

    margin:0;
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(2rem,3vw,3rem);
    font-style:italic;
    color:var(--btp-navy);

}


/* ==================================================
   8. Floor Plans
================================================== */

.spaces-floorplans{

    padding:7rem 0;

    background:white;

}

.socialtables-frame{

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 18px 50px rgba(0,0,0,.08);

}


/* ==========================================================
   9.1 Planning CTA
   ========================================================== */
.spaces-final-cta{

    min-height:60vh;

    display:flex;

    align-items:center;

    background:

    linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,.58)),

    url('../images/spaces-cta.jpg');

    background-size:cover;

    background-position:center;

    color:white;

}

.spaces-final-inner{

    max-width:720px;

}

.spaces-final-inner h2{

    font-size:clamp(3rem,6vw,5.5rem);

    line-height:.95;

    margin-bottom:1.5rem;

}

.spaces-final-inner p{

    font-size:1.15rem;

    margin-bottom:2rem;

}


/*======================================
 9.2 Final CTA
======================================*/

.spaces-cta{
    background:#fff;
    position:relative;
    padding:7rem 0;
}

.spaces-cta::before{
    content:"";
    display:block;
    width:80px;
    height:1px;
    background:#d8c7a2;
    margin:0 auto 3rem;
}



.spaces-cta-inner{
    max-width:760px;
    margin:0 auto;
}

.spaces-cta .section-eyebrow{
    margin-bottom:1rem;
}

.spaces-cta h2{
    font-family:var(--font-heading);
    font-size:clamp(2.4rem,4vw,3.6rem);
    line-height:1.1;
    color:var(--navy);
    margin-bottom:1.5rem;
}

.spaces-cta .lead{
    max-width:650px;
    margin:0 auto 2.5rem;
    font-size:1.2rem;
    line-height:1.9;
    color:#555;
}

.spaces-cta .btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--btp-gold);
    color: var(--btp-navy);
    border: 1px solid var(--btp-gold);
    border-radius: 999px;
    padding: .95rem 2.6rem;
    font-weight: 700;
    text-decoration: none;
}

.spaces-cta .btn-gold:hover {
    background: var(--btp-navy);
    color: #fff;
    border-color: var(--btp-navy);
}

.cta-actions{
    margin-top:2rem;
}

/* ==================================================
   10. Venue Components
================================================== */

.venue-section{

    padding:7rem 0;

}

.venue-dark{

    background:#fff;

}

.venue-light{

    background:var(--btp-ivory);

}

.venue-white{

    background:#fff;

}

.venue-section img{

    border-radius:22px;

    transition:.45s;

}

.venue-section img:hover{

    transform:scale(1.02);

}

.venue-lead{

    font-size:1.2rem;

    margin:2rem 0;

    line-height:1.8;

}

.venue-meta{

    display:flex;

    gap:3rem;

    margin:2.5rem 0;

}

.venue-meta strong{

    display:block;

    font-size:2.4rem;

    color:var(--btp-gold);

    line-height:1;

}

.venue-meta span{

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:.8rem;

}

.venue-feature-list{

    list-style:none;

    padding:0;

    margin:2rem 0 0;

}

.venue-feature-list li{

    padding:.7rem 0;

    border-bottom:1px solid rgba(0,0,0,.08);

    position:relative;

    padding-left:28px;

}

.venue-feature-list li:before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--btp-gold);

}



/* ==========================================================
   11. Responsive
   ========================================================== */
@media(max-width:991px){

    .space-jump-inner{

        gap:1.5rem;

        overflow:auto;

        justify-content:flex-start;

    }

    .purpose-editorial-grid,
    .purpose-room-feature{
        grid-template-columns:1fr;
    }

    .purpose-room-feature{
        gap:3rem;
    }

    .purpose-capabilities{
        flex-wrap:wrap;
        gap:1.75rem;
    }


    .venue-meta{

        flex-wrap:wrap;

        gap:1.5rem;

    }
	
	.destination-grid{

	grid-template-columns:1fr;

	}

	.destination-intro{

	margin-bottom:4rem;

	}

      .btp-details-grid{

        grid-template-columns:1fr;
        gap:4rem;

    }

}


/* Mobile */
@media (max-width: 767px) {
    .spaces-hero {
        min-height: 86vh;
    }

    .spaces-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(15, 32, 49, 0.72) 0%,
                rgba(15, 32, 49, 0.9) 58%,
                rgba(15, 32, 49, 0.96) 100%
            );
    }

    .spaces-hero-content {
        padding: 7rem 0 4rem;
    }

    .spaces-hero h1 {
        font-size: clamp(3.4rem, 16vw, 5rem);
    }

    .spaces-hero p {
        font-size: 1.08rem;
    }
	
    .venue-image-note{
    	position:relative;
    	left:auto;
    	bottom:auto;
    	margin-top:1.5rem;
    	max-width:none;
    }

    .chapel-section h2{
    	font-size:3.4rem;
    }
 
    .venue-section{

        padding:5rem 0;

    }
    .purpose-section{
        padding:7rem 0;
    }

    .purpose-intro{
        margin-bottom:5rem;
    }

    .purpose-lounge-image{
        margin-bottom:5rem;
    }

    .purpose-statement{
        margin-bottom:5rem;
    }

    .purpose-editorial-grid{
        gap:2.5rem;
        margin-bottom:6rem;
    }

    .btp-details-section{

        padding:7rem 0;

    }

    .btp-details-intro{

        margin-bottom:4rem;

    }
     .hero-promise {
        font-size: .75rem;
        line-height: 1.8;
    }
}