@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");
:root {
--bfw-font: 'Montserrat', sans-serif;
--bfw-accent:      #CA5E50;
--bfw-accent-dark: #b34d40;
--bfw-text:        #2c2c2c;
--bfw-meta:        #888;
--bfw-card-bg:     #ffffff;
--bfw-radius:      14px;
--bfw-bar-radius:  40px;
--bfw-shadow:      0 4px 20px rgba(0,0,0,.08);
--bfw-shadow-hover:0 8px 32px rgba(0,0,0,.14);
--bfw-transition:  .25s ease;
} .bfw-wrapper {
width: 100%;
font-family: var(--bfw-font);
} .bfw-filter-bar {
display: flex;
justify-content: center;
margin-bottom: 48px;
}
.bfw-filter-nav {
display: flex;
flex-wrap: wrap;
gap: 0;
background: #ffffff;
border-radius: var(--bfw-bar-radius);
box-shadow: var(--bfw-shadow);
padding: 10px 16px;
align-items: center;
justify-content: center;
} .bfw-filter-btn {
background: transparent;
border: none;
cursor: pointer;
font-family: var(--bfw-font);
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
color: var(--bfw-text);
padding: 10px 28px;
border-radius: 30px;
transition: background var(--bfw-transition),
color var(--bfw-transition),
transform var(--bfw-transition),
box-shadow var(--bfw-transition);
line-height: 1;
white-space: nowrap;
}
.bfw-filter-btn:hover {
background: var(--bfw-accent);
color: #fff;
box-shadow: 0 4px 16px rgba(202,94,80,.35);
}
.bfw-filter-btn.bfw-active {
background: var(--bfw-accent);
color: #fff;
box-shadow: 0 4px 16px rgba(202,94,80,.35);
} .bfw-grid-wrapper {
width: 100%;
}
.bfw-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
position: relative;
min-height: 200px;
} .bfw-card {
background: var(--bfw-card-bg);
border-radius: var(--bfw-radius);
overflow: hidden;
box-shadow: var(--bfw-shadow);
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
transition: transform var(--bfw-transition),
box-shadow var(--bfw-transition);
animation: bfw-fade-in .35s ease both;
}
@keyframes bfw-fade-in {
from { opacity: 0; transform: translateY(18px); }
to   { opacity: 1; transform: translateY(0); }
} .bfw-card-img-wrap {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
background: #e8e8e8;
}
.bfw-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .45s ease, filter .45s ease;
} .bfw-card-overlay {
position: absolute;
inset: 0;
background: rgba(202,94,80,.35);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--bfw-transition);
}
.bfw-card-overlay svg {
width: 42px;
height: 42px;
fill: #fff;
border-radius: 50%;
background: var(--bfw-accent);
padding: 10px;
box-sizing: border-box;
box-shadow: 0 4px 16px rgba(0,0,0,.2);
} .bfw-card:hover {
transform: translateY(-4px);
box-shadow: var(--bfw-shadow-hover);
}
.bfw-card:hover .bfw-card-img-wrap img {
transform: scale(1.05);
filter: brightness(.88);
}
.bfw-card:hover .bfw-card-overlay {
opacity: 1;
} .bfw-card-no-img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f0ece8;
min-height: 180px;
}
.bfw-card-no-img span {
font-size: 42px;
} .bfw-card-body {
padding: 20px 22px 22px;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.bfw-card-title {
font-family: var(--bfw-font);
font-size: 17px;
font-weight: 700;
line-height: 1.4;
color: var(--bfw-text);
margin: 0;
}
.bfw-card-meta {
font-family: var(--bfw-font);
font-size: 12px;
color: var(--bfw-meta);
letter-spacing: .04em;
margin: 0;
margin-top: auto;
} .bfw-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.75);
z-index: 10;
border-radius: var(--bfw-radius);
}
.bfw-spinner {
width: 40px;
height: 40px;
border: 3px solid #e0d9d5;
border-top-color: var(--bfw-accent);
border-radius: 50%;
animation: bfw-spin .7s linear infinite;
}
@keyframes bfw-spin {
to { transform: rotate(360deg); }
} .bfw-empty {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: var(--bfw-meta);
font-size: 15px;
} .bfw-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 40px;
flex-wrap: wrap;
}
.bfw-page-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid transparent;
background: #fff;
box-shadow: var(--bfw-shadow);
cursor: pointer;
font-family: var(--bfw-font);
font-size: 14px;
font-weight: 600;
color: var(--bfw-text);
transition: all var(--bfw-transition);
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.bfw-page-btn:hover {
background: var(--bfw-accent);
color: #fff;
border-color: var(--bfw-accent);
}
.bfw-page-btn.bfw-page-active {
background: var(--bfw-accent);
color: #fff;
border-color: var(--bfw-accent);
box-shadow: 0 4px 14px rgba(202,94,80,.35);
}
.bfw-page-btn.bfw-page-prev,
.bfw-page-btn.bfw-page-next {
width: auto;
padding: 0 18px;
border-radius: 20px;
font-size: 13px;
}  @media (max-width: 1024px) {
.bfw-grid {
grid-template-columns: repeat(2, 1fr);
gap: 22px;
}
} @media (max-width: 768px) {
.bfw-filter-nav {
flex-direction: column;
border-radius: 20px;
padding: 10px;
width: 100%;
max-width: 320px;
gap: 4px;
}
.bfw-filter-btn {
width: 100%;
text-align: center;
padding: 12px 20px;
border-radius: 12px;
}
.bfw-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.bfw-card-title {
font-size: 15px;
}
}