/**
 * ==========================================================
 * Visit Bedford Homepage
 * ==========================================================
 */

/* ==========================================================
   Variables
========================================================== */

:root {

    --vb-primary: #0057b8;
    --vb-primary-dark: #123a73;
    --vb-accent: #18b5b0;

    --vb-white: #ffffff;
    --vb-light: #f6f8fb;

    --vb-text: #1f2937;
    --vb-muted: #64748b;

    --vb-radius: 20px;

    --vb-shadow:
        0 20px 60px rgba(0,0,0,.18);

    --vb-container: 1280px;

}

/* ==========================================================
   Layout
========================================================== */

.vb-container{

    width:min(
        var(--vb-container),
        calc(100% - 48px)
    );

    margin-inline:auto;

}

/* ==========================================================
   Hero
========================================================== */

.vb-home-hero {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 92vh;

    overflow: hidden;

    background-image:
        linear-gradient(
            135deg,
            rgba(3,16,45,.88) 0%,
            rgba(6,45,95,.72) 45%,
            rgba(0,87,184,.48) 100%
        ),
        url("/wp-content/themes/kadence-child/assets/images/bedford-bridge.jpg");

    background-size: cover;

    background-position: center 35%;

    background-repeat: no-repeat;

    color: #fff;

}

.vb-home-hero__overlay{

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,.12),
            transparent 50%
        );

}

.vb-home-hero .vb-container{

    position:relative;

    z-index:2;

}

.vb-home-hero__content{

    max-width:900px;

    padding:120px 0;

}

/* ==========================================================
   Typography
========================================================== */

.vb-home-hero__eyebrow{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    margin-bottom:24px;

    border-radius:999px;

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

    backdrop-filter:blur(12px);

    font-size:.9rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    font-weight:700;

}

.vb-home-hero__title{

    margin:0;

    font-size:clamp(3.2rem,7vw,5.8rem);

    line-height:1;

    font-weight:800;
    
    color:#ffffff;

}

.vb-home-hero__subtitle{

    margin:32px 0;

    max-width:640px;

    font-size:1.35rem;

    line-height:1.8;

    color:rgba(255,255,255,.92);

}

/* ==========================================================
   Search
========================================================== */

.vb-home-hero__search{

    margin:48px 0 36px;

}

.vb-home-hero__search form{

    position:relative;

}



/* ==========================================================
   Popular Searches
========================================================== */

.vb-home-hero__popular{

    margin-top:20px;

}

.vb-home-hero__popular-label{

    display:block;

    margin-bottom:16px;

    font-size:.95rem;

    font-weight:600;

    color:rgba(255,255,255,.75);

}

.vb-home-hero__chips{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.vb-home-hero__chip{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    color:#fff;

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

    backdrop-filter:blur(14px);

    transition:.25s ease;

}

.vb-home-hero__chip:hover{

    background:#fff;

    color:var(--vb-primary);

    transform:translateY(-2px);

}

/* ==========================================================
   Hero Buttons
========================================================== */

.vb-home-hero__actions{

    display:flex;

    gap:18px;

    margin-top:48px;

}

.vb-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:22px;

    font-weight:700;

    text-decoration:none;

    transition:.25s ease;

}

.vb-button--primary{
    background:linear-gradient(135deg,#1E88FF,#0A84FF);
    color:#fff;
    box-shadow:0 12px 30px rgba(10,132,255,.30);
}

.vb-button--primary:hover{
    background:linear-gradient(135deg,#0A84FF,#0066FF);
    transform:translateY(-3px);

}

.vb-button--secondary{

    border:2px solid rgba(255,255,255,.45);

    color:#fff;

    background:transparent;

}

.vb-button--secondary:hover{

    background:#fff;

    color:var(--vb-primary);

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:992px){

    .vb-home-hero{

        min-height:auto;

    }

    .vb-home-hero__content{

        padding:100px 0 80px;

    }

    .vb-home-hero__title{

        font-size:3.4rem;

    }

}

@media (max-width:768px){

    .vb-home-hero{

        text-align:center;

    }

    .vb-home-hero__content{

        max-width:100%;

    }

    .vb-home-hero__subtitle{

        font-size:1.15rem;

    }

    .vb-home-hero__chips{

        justify-content:center;

    }

    .vb-home-hero__actions{

        flex-direction:column;

    }

    .vb-button{

        width:100%;

    }

}

@media (max-width:576px){

    .vb-home-hero__title{

        font-size:2.7rem;

    }

    .vb-home-hero__subtitle{

        font-size:1rem;

        line-height:1.7;

    }

    .vb-home-hero__content{

        padding:80px 0 60px;

    }

}

/* ==========================================================
   Featured Businesses
========================================================== */

.vb-featured-businesses{

    background:#ffffff;

    padding:90px 0;

    position:relative;

}

.vb-featured-businesses h2{

    color:var(--vb-primary-dark);

    margin-bottom:40px;

}

/* ==========================================================
   Places You'll Love
========================================================== */


.vb-section-heading{

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:30px;

    margin-bottom:50px;

}

.vb-section-heading h2{

    margin:0 0 10px;

    font-size:2.4rem;

    color:var(--vb-primary-dark);

}

.vb-section-heading p{

    margin:0;

    color:var(--vb-muted);

    font-size:1.05rem;

    max-width:650px;

}

.vb-section-heading a{

    color:var(--vb-primary);

    font-weight:700;

    text-decoration:none;

}

.vb-section-heading a:hover{

    text-decoration:underline;

}

/* ========================================
   FEATURED BUSINESS CARDS V2
======================================== */

.vb-featured-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}

.vb-business-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:
        0 10px 30px rgba(15,23,42,.06),
        0 25px 60px rgba(15,23,42,.08);
    transition:.35s ease;
    border:1px solid #edf2f7;
}

.vb-business-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 20px 45px rgba(15,23,42,.10),
        0 40px 90px rgba(15,23,42,.12);
}

.vb-business-card a{
    display:block;
    height:100%;
    color:inherit;
    text-decoration:none;
}

/* IMAGE */

.vb-business-card__image{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
}

.vb-business-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.vb-business-card:hover img{
    transform:scale(1.06);
}

/* subtle image gradient */

.vb-business-card__image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.45),
        transparent 45%
    );
    pointer-events:none;
}

/* BADGES */

.vb-business-card__badges{
    position:absolute;
    top:18px;
    left:18px;
    right:18px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    z-index:5;
}

.vb-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:700;
    backdrop-filter:blur(10px);
}

.vb-badge--featured{
    background:linear-gradient(135deg,#FFD54F,#F4B400);
    color:#4a3600;
}

.vb-badge--editor{
    background:#ffffff;
    color:#d63384;
}

.vb-badge--verified{
    background:#0A84FF;
    color:#fff;
}

/* CONTENT */

.vb-business-card__content{
    padding:28px;
}

.vb-business-card h3{
    font-size:1.45rem;
    line-height:1.3;
    margin:0 0 12px;
    color:#172033;
}

.vb-business-card__location{
    color:#64748b;
    font-size:.95rem;
    margin-bottom:14px;
}

.vb-business-card__rating{
    margin-bottom:16px;
    font-weight:600;
    color:#f5a623;
}

.vb-business-card p{
    color:#475569;
    line-height:1.7;
    margin:0 0 22px;
}

/* CHIPS */

.vb-business-card__chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:24px;
}

.vb-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 14px;
    border-radius:999px;
    background:#eef6ff;
    color:#0A84FF;
    font-size:.82rem;
    font-weight:600;
}

/* CTA */

.vb-business-card__link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    color:#0A84FF;
    transition:.25s;
}

.vb-business-card:hover .vb-business-card__link{
    gap:14px;
}

/* MOBILE */

@media (max-width:768px){

    .vb-featured-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .vb-business-card__content{
        padding:22px;
    }

}



/* ==========================================================
   Responsive
========================================================== */

@media (max-width:1100px){

    .vb-featured-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .vb-section-heading{

        flex-direction:column;

        align-items:flex-start;

    }

    .vb-featured-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   Explore Bedford
========================================================== */

.vb-categories{

    padding:100px 0;

    background:#f7f9fc;

}

.vb-category-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

    margin-top:50px;

}

.vb-category-card{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:24px;

    aspect-ratio:4 / 3;

    box-shadow:0 18px 45px rgba(0,0,0,.10);

    transition:.45s ease;

}

.vb-category-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}

.vb-category-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.72),
            rgba(0,0,0,.12),
            transparent
        );

}

.vb-category-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 70px rgba(0,0,0,.18);

}

.vb-category-card:hover img{

    transform:scale(1.08);

}

/* ==========================================================
   Overlay
========================================================== */

.vb-category-card__overlay{

    position:absolute;

    inset:0;

    z-index:5;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:32px;

}

.vb-category-card__overlay h3{

    margin:0;

    color:#fff;

    font-size:2rem;

    font-weight:800;

    line-height:1.1;

}

.vb-category-card__overlay p{

    margin-top:12px;

    color:rgba(255,255,255,.90);

    font-size:1rem;

}

/* ==========================================================
   Hover Arrow
========================================================== */

.vb-category-card__overlay::after{

    content:"→";

    position:absolute;

    right:30px;

    bottom:28px;

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:1.5rem;

    transition:.3s ease;

}

.vb-category-card:hover .vb-category-card__overlay::after{

    transform:translateX(6px);

    background:#0057b8;

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:1100px){

    .vb-category-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .vb-category-grid{

        grid-template-columns:1fr;

    }

    .vb-category-card__overlay h3{

        font-size:1.7rem;

    }

}

/* ==========================================================
   Discover Bedford (Articles)
========================================================== */

.vb-guides{

    padding:100px 0;

    background:#ffffff;

}

.vb-guides-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

    margin-top:50px;

}

.vb-guide-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    transition:all .35s ease;

}

.vb-guide-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.vb-guide-card a{

    display:block;

    text-decoration:none;

    color:inherit;

}

.vb-guide-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:transform .5s ease;

}

.vb-guide-card:hover img{

    transform:scale(1.06);

}

.vb-guide-card__content{

    padding:28px;

}

.vb-guide-card__content h3{

    margin:0 0 14px;

    font-size:1.45rem;

    color:var(--vb-text);

    line-height:1.3;

}

.vb-guide-card__content p{

    margin:0;

    color:var(--vb-muted);

    line-height:1.7;

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:1100px){

    .vb-guides-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:768px){

    .vb-guides-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   Business CTA
========================================================== */

.vb-business-cta{

    padding:100px 0;

    background:#ffffff;

}

.vb-business-cta__content{

    position:relative;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:60px;

    align-items:center;

    padding:60px;

    border-radius:30px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #2575f5 0%,
        #0b67da 55%,
        #004fb3 100%
    );

    color:#fff;

    box-shadow:0 25px 70px rgba(0,87,184,.25);

}

.vb-business-cta__content::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top left,
            rgba(255,255,255,.16),
            transparent 45%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(255,255,255,.10),
            transparent 40%
        );

    pointer-events:none;

}

.vb-business-copy{

    position:relative;

    z-index:2;

}

.vb-business-price{

    position:relative;

    z-index:2;

    text-align:center;

}

.vb-business-cta__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:18px;

    padding:10px 18px;

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

    backdrop-filter:blur(10px);

    border-radius:999px;

    color:#fff;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:.9rem;

}

.vb-business-cta h2{

    margin:0 0 20px;

    font-size:clamp(2.5rem,5vw,3.6rem);

    line-height:1.1;

    color:#fff;

}

.vb-business-cta p{

    margin:0;

    max-width:650px;

    font-size:1.2rem;

    line-height:1.8;

    opacity:.95;

}

.vb-business-benefits{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:14px 30px;

    margin:40px 0 0;

    padding:0;

    list-style:none;

}

.vb-business-benefits li{

    font-size:1.05rem;

    font-weight:500;

}

.vb-business-price__amount{

    display:block;

    font-size:4.4rem;

    font-weight:800;

    line-height:1;

}

.vb-business-price__period{

    display:block;

    margin-top:10px;

    font-size:1.2rem;

    opacity:.9;

}

.vb-business-actions{

    margin-top:35px;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.vb-button--light{

    background:#34c759;

    color:#fff;

    border:none;

    font-weight:700;

}

.vb-button--light:hover{

    background:#2fb451;

    transform:translateY(-3px);

    box-shadow:0 18px 45px rgba(52,199,89,.35);

}

.vb-button--outline{

    background:transparent;

    color:#fff;

    border:2px solid rgba(255,255,255,.35);

}

.vb-button--outline:hover{

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

}

@media(max-width:992px){

    .vb-business-cta__content{

        grid-template-columns:1fr;

        text-align:center;

    }

    .vb-business-benefits{

        grid-template-columns:1fr;

    }

}

.vb-business-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:18px 28px;
    border-radius:12px;
    text-decoration:none;
    font-size:1.2rem;
    font-weight:700;
    transition:.25s ease;
}

.vb-business-button--primary{
    background:#59c63f;
    color:#fff !important;
    border:2px solid #59c63f;
}

.vb-business-button--primary:hover{
    background:#47b12d;
    border-color:#47b12d;
    color:#fff !important;
    transform:translateY(-2px);
}

.vb-business-button--secondary{
    background:#123a73;
    color:#fff !important;
    border:2px solid rgba(255,255,255,.8);
}

.vb-business-button--secondary:hover{
    background:#0f3261;
    color:#fff !important;
    transform:translateY(-2px);
}

.vb-button--primary,
.vb-button--primary:visited,
.vb-button--primary:hover{
    background:#26c26a !important;
    color:#ffffff !important;
    border:none;
}

.vb-button--secondary,
.vb-button--secondary:visited{
    background:#123a73 !important;
    color:#ffffff !important;
    border:2px solid rgba(255,255,255,.5);
}

.vb-button--secondary:hover{
    background:#ffffff !important;
    color:#0057b8 !important;
    border-color:#ffffff !important;
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}


/* ==========================================================
   Homepage - Places You'll Love Cards
   ========================================================== */

.vb-featured-businesses .vb-business-card {
	display: flex;
	flex-direction: column;

	overflow: hidden;
}


.vb-featured-businesses .vb-business-card__image {
	position: relative;

	width: 100%;
	height: 220px;

	overflow: hidden;
}


.vb-featured-businesses .vb-business-card__image > a {
	display: block;

	width: 100%;
	height: 100%;
}


.vb-featured-businesses .vb-business-card__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


.vb-featured-businesses .vb-business-card__content {
	position: relative;

	width: 100%;

	flex: 1 1 auto;
}


.vb-featured-businesses .vb-business-card__content-link {
	display: flex;

	flex-direction: column;

	height: 100%;

	text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| Favourite button
|--------------------------------------------------------------------------
*/

.vb-featured-businesses .vb-favourite-button {
	position: absolute;

	top: 18px;
	right: 18px;

	z-index: 10;
}


/*
|--------------------------------------------------------------------------
| Badges remain on the image
|--------------------------------------------------------------------------
*/

.vb-featured-businesses .vb-business-card__badges {
	position: absolute;

	top: 12px;
	left: 12px;

	z-index: 9;

	display: flex;

	flex-wrap: wrap;

	gap: 6px;
}