/* ==========================================================
   VBC Framework
   Promo Tiles
   Version: 1.0.0
========================================================== */

.vbc-promo-tiles{
    padding:0 0 64px;
    background:var(--vbc-color-surface);
}

.vbc-promo-tiles__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.vbc-promo-tile{
    position:relative;
    display:flex;
    align-items:flex-end;
    min-height:220px;
    padding:28px;
    border-radius:var(--vbc-radius-lg);
    text-decoration:none;
    overflow:hidden;
    background:var(--vbc-color-heading);
}

.vbc-promo-tile::before{
    content:"";
    position:absolute;
    inset:0;
}

/* Solid brand-tone gradients instead of photography -- avoids relying
   on placeholder product/lifestyle images that don't exist yet. Swap
   these for real background photos later by adding
   background-image/background-size/background-position here once real
   photography is available. */

.vbc-promo-tile--primary{
    background:linear-gradient(135deg, var(--vbc-color-primary) 0%, #2c0e14 100%);
}

.vbc-promo-tile--light{
    background:linear-gradient(135deg, #8a7358 0%, #5c4a36 100%);
}

.vbc-promo-tile--dark{
    background:linear-gradient(135deg, #3a3630 0%, #171512 100%);
}

.vbc-promo-tile__body{
    position:relative;
    color:var(--vbc-color-white);
}

.vbc-promo-tile--light .vbc-promo-tile__body h3,
.vbc-promo-tile--light .vbc-promo-tile__body p{
    color:var(--vbc-color-white);
}

.vbc-promo-tile__body h3{
    margin:0 0 8px;
    font-size:20px;
    text-transform:uppercase;
    letter-spacing:.02em;
}

.vbc-promo-tile__body p{
    margin:0 0 14px;
    font-size:13px;
    line-height:1.6;
    max-width:280px;
    opacity:.9;
}

.vbc-promo-tile__cta{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    border-bottom:2px solid var(--vbc-color-accent);
    padding-bottom:2px;
}

@media (max-width:900px){

    .vbc-promo-tiles__grid{
        grid-template-columns:1fr;
    }

}