/* =================================================================
   Business West Profile v8.0 — EXACT MATCH
   Ref: Screenshots 3-4-5 (West City Auto Group)
   Page: #f0f0f0 gray bg, white rounded cards
   Brand: Blue #006cb0, Green #69b654
   ================================================================= */

/* ── Page Background ──────────────────────────────────────────── */

.page-id-159864 .post-content {
    background-color: #f7f7f7;
}

.bwp-wrap {
    background: #f7f7f7;
    padding: 24px 0 40px;
}
.bwp {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
    font-family: inherit;
}
.bwp, .bwp *, .bwp *::before, .bwp *::after { box-sizing: border-box; }
.bwp img { max-width: 100%; height: auto; display: block; }
.bwp a { text-decoration: none; color: inherit; }
.bwp h2, .bwp h3, .bwp p { margin: 0; padding: 0; }

/* ── Back to Members Link ────────────────────────────────────── */
.bwp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px 25px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: #69b654;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none !important;
    text-align: center;
}
.bwp-back-link:hover {
    background: #5aa543;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(105, 182, 84, 0.25);
    color: #fff;
}
.bwp-back-link:visited,
.bwp-back-link:active { color: #fff; }
.bwp-back-link svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.bwp-back-link:hover svg {
    transform: translateX(-3px);
}

/* ── White Card ───────────────────────────────────────────────── */
.bwp-card {
    background: #fff;
    border-radius: 10px;
    padding: 32px 36px;
    margin-bottom: 20px;
}
/* Flush bottom — gallery sits edge-to-edge at bottom */
.bwp-card--gal {
    overflow: hidden;
}

/* Row of separate cards */
.bwp-cards-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

/* ── Scroll Animation ─────────────────────────────────────────── */
.bwp-anim {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s cubic-bezier(.25,.46,.45,.94),
                transform .65s cubic-bezier(.25,.46,.45,.94);
}
.bwp-anim.bwp-visible { opacity: 1; transform: translateY(0); }

/* =================================================================
   1. LOGO + SOCIAL + GALLERY  (one card)
   Logo ~40-50px, social ~20px, gallery flush at bottom
   ================================================================= */
.bwp-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.bwp-logo {
    max-height: 80px;
    max-width: 200px;
    width: auto;
    object-fit: contain;
}

.bwp-social { display: flex; gap: 10px; align-items: center; }
.bwp-social a { display: block; width: 28px; height: 28px; color: #333; transition: color .2s; }
.bwp-social a:hover { color: #69b654; }
.bwp-social svg { width: 100%; height: 100%; }

/* Gallery: 3-col, 2-row, first col ~47% spans 2 rows, gap 6px, ~330px tall */
.bwp-gal {
    display: grid;
    grid-template-columns: 47% 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
    height: 330px;
}
.bwp-gi { display: block; overflow: hidden; line-height: 0; cursor: pointer; }
.bwp-gi-big { grid-row: 1 / 3; }
.bwp-gi img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.bwp-gi:hover img { transform: scale(1.03); }

/* =================================================================
   2. CONTACT ROW — 3 separate white rounded cards
   Green outlined icons, centered vertically
   ================================================================= */
.bwp-contact-row { grid-template-columns: repeat(3, 1fr); }

.bwp-ci {
    background: #fff;
    border-radius: 10px;
    padding: 28px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.bwp-ci-icon { width: 38px; height: 38px; flex-shrink: 0; color: #69b654; }

.bwp-ci-text { font-size: 15px; line-height: 1.5; color: #555; }
.bwp-ci-text a { color: #555; }
.bwp-ci-text a:hover { color: #69b654; }

/* =================================================================
   3. TAGLINE + DESCRIPTION (one card)
   ================================================================= */
.bwp-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #006cb0 !important;
    line-height: 1.25 !important;
    margin: 0 0 22px !important;
}

.bwp-tagline {
    font-size: 16px;
    color: #666;
    font-style: italic;
    margin: -16px 0 18px;
    line-height: 1.4;
}

.bwp-desc { color: #000000; }

/* =================================================================
   4. SERVICES — 3 separate white rounded cards
   Image INSIDE card with padding (not flush). Small images.
   Green titles. Green "Read more".
   ================================================================= */
.bwp-svcs-row { grid-template-columns: repeat(3, 1fr); }

.bwp-svc {
    background: #fff;
    border-radius: 10px;
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
}

/* Service image: PADDED inside card, not full-width */
.bwp-svc-img { margin-bottom: 18px; overflow: hidden; border-radius: 4px; }
.bwp-svc-img img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.bwp-svc-t {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #69b654 !important;
    line-height: 1.3 !important;
    margin: 0 0 12px !important;
}

.bwp-svc-d {
    color: #000000;
    margin: 0 0 16px;
    flex: 1;
}

/* "Read more" is GREEN in reference (not black underlined) */
.bwp-svc-l {
    margin-top: 18px;
    color: #006cb0 !important;
    text-decoration: underline;
}
.bwp-svc-l:hover { color: #005397 !important }

/* =================================================================
   5. CAROUSEL + MAP — ONE white card, side by side inside
   ================================================================= */
.bwp-split {
    /* display: grid; */
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.bwp-split-item { overflow: hidden; border-radius: 4px; height: 380px; }
.bwp-split-item iframe { width: 100%; height: 100%; border: 0; display: block; }

.bwp-carousel { position: relative; width: 100%; height: 100%; }
.bwp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.bwp-slide.active { opacity: 1; z-index: 1; }
.bwp-slide img { width: 100%; height: 100%; object-fit: cover; }

/* =================================================================
   6. HEADINGS (videos, more about)
   ================================================================= */
.bwp-h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #006cb0 !important;
    line-height: 1.25 !important;
    margin: 0 0 24px !important;
}

/* =================================================================
   7. VIDEOS
   ================================================================= */
.bwp-vids { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.bwp-vid {
    position: relative; padding-bottom: 56.25%; height: 0;
    overflow: hidden; background: #000; border-radius: 4px;
}
.bwp-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* =================================================================
   8. ARTICLES (square images, dark titles)
   ================================================================= */
.bwp-arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; }

.bwp-art-img { display: block; overflow: hidden; margin-bottom: 16px; border-radius: 4px; }
.bwp-art-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .3s; }
.bwp-art:hover .bwp-art-img img { transform: scale(1.03); }

.bwp-art h5 { margin: 0 0 10px; line-height: 1.35; color: #333; }
.bwp-art h5 a { color: inherit; }
.bwp-art h5 a:hover { color: #006cb0; }

.bwp-art p { font-size: 14px; line-height: 1.7; color: #666; margin: 0 0 12px; }

.bwp-rm { font-size: 14px; font-weight: 600; color: #333; }
.bwp-rm:hover { color: #006cb0; }

/* =================================================================
   LIGHTBOX
   ================================================================= */
.bwp-lb {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(0,0,0,.92);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .25s;
}
.bwp-lb.active { opacity: 1; }
.bwp-lb > img { max-width: 90vw; max-height: 88vh; object-fit: contain; }
.bwp-lb-close {
    position: absolute; top: 16px; right: 20px;
    background: none; border: none; color: #fff;
    font-size: 32px; cursor: pointer; opacity: .8; line-height: 1;
}
.bwp-lb-close:hover { opacity: 1; }
.bwp-lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.15); border: none; color: #fff;
    font-size: 22px; width: 44px; height: 44px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.bwp-lb-nav:hover { background: rgba(255,255,255,.3); }
.bwp-lb-prev { left: 16px; }
.bwp-lb-next { right: 16px; }
.bwp-lb-counter {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.7); font-size: 14px;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 960px) {
    .bwp { padding: 0 16px; }
    .bwp-svcs-row { grid-template-columns: 1fr 1fr; }
    .bwp-contact-row { grid-template-columns: 1fr 1fr; }
    .bwp-split { grid-template-columns: 1fr; }
    .bwp-split-item { height: 280px; }
    .bwp-gal {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        height: auto;
    }
    .bwp-gi-big { grid-column: 1 / -1; height: 240px; }
    .bwp-gi:not(.bwp-gi-big) { height: 150px; }
}

@media (max-width: 640px) {
    .bwp-wrap { padding: 12px 0 24px; }
    .bwp { padding: 0 10px; }
    .bwp-card { padding: 22px 18px; margin-bottom: 14px; border-radius: 8px; }
    .bwp-cards-row { gap: 14px; margin-bottom: 14px; }
    .bwp-head { flex-direction: column; gap: 8px; }
    .bwp-svcs-row, .bwp-contact-row { grid-template-columns: 1fr; }
    .bwp-split { grid-template-columns: 1fr; }
    .bwp-gal { grid-template-columns: 1fr; height: auto; }
    .bwp-gi-big, .bwp-gi:not(.bwp-gi-big) { height: 200px; grid-column: auto; }
    .bwp-vids { grid-template-columns: 1fr; }
    .bwp-title { font-size: 22px !important; }
    .bwp-svc-t { font-size: 17px !important; }
    .bwp-h2 { font-size: 22px !important; }
}