:root { --bb-accent: #e8a0a8; --bb-accent-deep: #c97b86; --bb-ink: #3d3a3c; --bb-muted: #8a8487; --bb-cream: #fbf7f4; --bb-line: #efe7e2; --bb-radius: 18px; --bb-shadow: 0 8px 28px rgba(61,58,60,.08); --bb-serif: Georgia, "Times New Roman", serif; }
.bb-section { margin: 3rem 0; }
.bb-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.bb-section__title { font-family: var(--bb-serif); font-size: clamp(1.5rem,3vw,2.1rem); font-weight: 400; color: var(--bb-ink); margin: 0; }
.bb-section__title em { color: var(--bb-accent); font-style: italic; }
.bb-section__all { font-size: .85rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--bb-accent-deep); text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.bb-section__all:hover { color: var(--bb-ink); }
.bollicine-blog-home { display: block !important; width: 100%; max-width: 1200px; margin: 2.5rem auto; padding: 0 15px; box-sizing: border-box; float: none; clear: both; }
.bb-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.bb-grid .bb-card { flex: 1 1 280px; max-width: 360px; }
@media (max-width: 767px) { .bollicine-blog-home { max-width: 100%; } .bb-grid { gap: 1rem; } .bb-grid .bb-card { flex: 1 1 100%; max-width: 100%; } }
.bb-card { display: flex; flex-direction: column; background: var(--bb-cream); border-radius: var(--bb-radius); overflow: hidden; box-shadow: var(--bb-shadow); text-decoration: none; color: inherit; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; }
.bb-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(61,58,60,.14); }
.bb-card__media { aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(135deg,#f3e3df,#e9d3d6); }
.bb-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.bb-card:hover .bb-card__media img { transform: scale(1.06); }
.bb-card__body { padding: 1.25rem 1.4rem 1.5rem; }
.bb-card__title { font-family: var(--bb-serif); font-size: 1.22rem; line-height: 1.3; color: var(--bb-ink); margin: 0 0 .6rem; }
.bb-card__excerpt { font-size: .94rem; line-height: 1.6; color: var(--bb-muted); margin: 0 0 1rem; }
.bb-card__more { font-size: .8rem; text-transform: uppercase; letter-spacing: 1.4px; color: var(--bb-accent-deep); font-weight: 600; }
.bb-col { background: var(--bb-cream); border-radius: var(--bb-radius); padding: 1.25rem; box-shadow: var(--bb-shadow); }
.bb-col__title { font-family: var(--bb-serif); font-size: 1.15rem; color: var(--bb-ink); margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--bb-line); }
.bb-col__item { display: flex; gap: .75rem; padding: .65rem 0; text-decoration: none; color: inherit; }
.bb-col__item + .bb-col__item { border-top: 1px solid var(--bb-line); }
.bb-col__thumb { flex: 0 0 60px; height: 60px; border-radius: 12px; object-fit: cover; background: #f0e2de; }
.bb-col__name { font-size: .9rem; line-height: 1.35; color: var(--bb-ink); transition: color .2s ease; }
.bb-col__item:hover .bb-col__name { color: var(--bb-accent-deep); }
.bb-article { max-width: 760px; margin: 2rem auto 4rem; }
.bb-article__title { font-family: var(--bb-serif); font-size: clamp(1.9rem,4vw,2.8rem); line-height: 1.15; color: var(--bb-ink); margin: 0 0 .5rem; }
.bb-article__date { color: var(--bb-muted); font-size: .85rem; }
.bb-article__cover { width: 100%; border-radius: var(--bb-radius); margin: 1.75rem 0; box-shadow: var(--bb-shadow); }
.bb-article__body { font-size: 1.06rem; line-height: 1.8; color: var(--bb-ink); }
.bb-article__body h2 { font-family: var(--bb-serif); font-size: 1.5rem; margin: 2.2rem 0 .8rem; }
.bb-article__body img { max-width: 100%; border-radius: 12px; }
.bb-cta { margin-top: 3rem; padding: 2rem; text-align: center; background: linear-gradient(135deg,#fbeef0,#f7e6e8); border-radius: var(--bb-radius); }
.bb-cta p { font-family: var(--bb-serif); font-size: 1.2rem; color: var(--bb-ink); margin: 0 0 1.2rem; }
.bb-cta a { display: inline-block; padding: .8rem 2rem; background: var(--bb-accent); color: #fff; border-radius: 999px; text-decoration: none; transition: background .25s ease, transform .25s ease; }
.bb-cta a:hover { background: var(--bb-accent-deep); transform: translateY(-2px); }