/* Native blog: geometry and typography from design-system/styles.css, 19 October 2026. */
.bbr-blog { --bbr-block-accent: var(--bbr-brand); min-height:50vh; }
.blog-container { width:min(100% - var(--bbr-gutter) * 2,var(--bbr-container)); margin-inline:auto; }
.blog-section { padding-block:var(--bbr-space-16); }
.bbr-blog :where(h1,h2,h3,p) { margin:0 0 var(--bbr-space-4); }
.bbr-blog h1 { letter-spacing:-.035em; }
.bbr-blog h2 { font-size:var(--bbr-text-xl); letter-spacing:-.02em; }
.bbr-blog a { color:inherit; text-decoration:none; }
.bbr-blog a:hover { color:var(--bbr-link); }
.bbr-blog .muted { color:var(--bbr-muted); }
.bbr-blog .blog-categories a { color:var(--bbr-muted); }
.bbr-blog .blog-categories a[aria-current],.bbr-blog .blog-categories a:hover { color:var(--bbr-brand); }
body.bbr-native .bbr-blog .article-cover h1 { color:#fff; }
.bbr-blog .blog-link { color:var(--bbr-link); font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.blog-link { display:inline-flex; align-items:center; min-height:44px; }
.bbr-blog .blog-link:hover { color:var(--bbr-link); }
.blog-link > .bbr-arrow { margin-inline:var(--bbr-space-1); }
.blog-icon { display:inline-block; flex-shrink:0; width:18px; height:18px; background:currentColor; mask:var(--blog-icon) center/contain no-repeat; }
.blog-icon.bbr-arrow { background:none; mask:none; fill:currentColor; stroke:none; }
.blog-icon--sharing { --blog-icon:url('../images/BBR-icon-sharing.svg'); }
.blog-icon--search { --blog-icon:url('../images/BBR-icon-cerca.svg'); }
/* Cards and carousels use the shared rules in blocks.css. */
.blog-hero { position:relative; isolation:isolate; overflow:hidden; padding:var(--bbr-space-6) 0; background:var(--bbr-header-gradient); border-bottom:1px solid var(--bbr-border); }
.blog-hero h1 { max-width:900px; margin-bottom:var(--bbr-space-4); }
.blog-hero p { color:var(--bbr-muted); max-width:760px; font-size:var(--bbr-text-lg); }
.blog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:32px; }
.blog-categories { display:flex; flex-wrap:wrap; gap:4px 20px; }
.blog-categories a { display:flex; align-items:center; min-height:44px; font-size:14px; font-weight:600; color:var(--bbr-muted); border-bottom:2px solid transparent; }
.blog-categories a[aria-current],.blog-categories a:hover { color:var(--bbr-brand); border-bottom-color:var(--bbr-brand); }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.blog-list-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.blog-list-heading h2 { margin:0; }
.blog-list-heading > span { font-size:14px; white-space:nowrap; }
.blog-pagination { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:40px; }
.blog-pagination .btn { min-width:48px; padding:12px 16px; }
.blog-empty { padding:48px 24px; background:var(--bbr-surface); border:1px solid var(--bbr-border); border-radius:var(--bbr-radius-lg); text-align:center; }
.article-recommendations .section-heading h2 { margin-bottom:12px; }
.article-recommendations .section-heading p { margin:0; font-size:14px; }
.article-carousel-actions > a { min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; }
.article-header { padding-top:16px; padding-bottom:16px; }
.article-back { display:flex; align-items:center; gap:8px; min-height:44px; width:fit-content; margin-bottom:0; }
.article-header > .article-category { display:inline-flex; align-items:center; min-height:44px; }
.article-header h1 { max-width:1080px; text-transform:uppercase; font-size:clamp(28px,2.8vw,40px); margin-bottom:12px; }
.article-lead { max-width:900px; font-size:16px; line-height:1.5; color:var(--bbr-muted); margin-bottom:0; }
.article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; font-size:13px; padding-block:12px; border-bottom:1px solid var(--bbr-border); }
.article-cover { margin-block:0; }
.article-cover img { display:block; width:100%; height:clamp(160px,22vh,260px); object-fit:cover; border-radius:var(--bbr-radius-lg); }
.article-cover figcaption { margin-top:12px; font-size:12px; color:var(--bbr-muted); }
.article-layout { display:grid; grid-template-columns:minmax(180px,1fr) minmax(0,740px) minmax(0,.35fr); gap:48px; padding-block:24px; align-items:start; }
.article-index { position:sticky; top:24px; }
.article-index nav { padding:24px; border:1px solid var(--bbr-border); border-radius:var(--bbr-radius-lg); background:var(--bbr-header-gradient); margin-bottom:20px; }
.article-index-title { font-size:16px; font-weight:700; line-height:1.3; letter-spacing:.02em; color:var(--bbr-text); margin-bottom:16px; }
.article-index nav a { display:block; width:100%; min-height:44px; text-align:left; padding:10px 0; border:0; border-bottom:1px solid var(--bbr-border); background:none; color:var(--bbr-text); font:inherit; font-size:14px; line-height:1.4; cursor:pointer; }
.article-index nav a:last-child { border-bottom:0; }
.article-index nav a:hover { color:var(--bbr-brand); }
.article-index > a { font-size:14px; }
.article-prose { min-width:0; }
.article-prose section { scroll-margin-top:24px; margin-bottom:40px; }
.article-prose h2 { font-size:var(--bbr-text-xl); text-transform:uppercase; margin-bottom:20px; }
.article-prose p { font-size:17px; line-height:1.8; color:var(--bbr-muted); margin-bottom:20px; }
.article-callout { margin-block:32px; padding:24px; background:var(--bbr-header-gradient); border:1px solid var(--bbr-border); border-radius:var(--bbr-radius-lg); }
.article-callout strong { font-size:20px; display:block; margin-bottom:12px; }
.article-callout p { font-size:15px; }
.article-callout .btn { white-space:normal; }
.article-end { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-top:24px; border-top:1px solid var(--bbr-border); }

@media(max-width:1100px) {
 .blog-toolbar { flex-direction:column; align-items:stretch; }
 .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .article-layout { grid-template-columns:220px minmax(0,1fr); gap:24px; }
}
@media(max-width:760px) {
 .blog-hero { padding-block:32px; }
 .blog-hero h1 { font-size:32px; }
 .blog-categories { flex-wrap:nowrap; overflow-x:auto; gap:20px; padding-bottom:4px; }
 .blog-categories a { white-space:nowrap; }
 .article-grid { grid-template-columns:1fr; gap:20px; }
 .article-header h1 { font-size:32px; overflow-wrap:anywhere; }
 .article-lead { font-size:16px; }
 .article-cover img { height:180px; }
 .article-layout { display:flex; flex-direction:column; gap:32px; padding-block:32px; }
 .article-index { position:static; width:100%; }
 .article-index nav { padding:16px 20px; }
 .article-prose p { font-size:16px; line-height:1.75; }
 .blog-list-heading h2 { font-size:20px; overflow-wrap:anywhere; }
}

.article-prose blockquote { margin:32px 0; padding:20px 24px; border-left:3px solid var(--bbr-brand); background:var(--bbr-surface); }
.article-prose blockquote p { color:var(--bbr-text); font-size:20px; line-height:1.5; margin:0; }
.article-prose ul { padding-left:24px; margin:0 0 24px; color:var(--bbr-muted); font-size:17px; line-height:1.8; }
.article-prose li { margin-bottom:8px; }
.article-prose li::marker { color:var(--bbr-brand); }
:where(.blog-list-heading h2,.article-prose h2)::before { content:""; display:block; width:var(--bbr-space-12); height:var(--bbr-space-1); margin-bottom:var(--bbr-space-4); background:var(--bbr-brand); }

/* Editorial refinement: compact opening and focused hover affordance. */
.article-topline { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; }
.article-topline > .article-category { margin-left:auto; text-align:right; display:inline-flex; align-items:center; min-height:44px; }
.article-share { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px 16px; }
.article-share > span { color:var(--bbr-muted); font-size:13px; }
.article-share > a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.article-share-status { flex-basis:100%; font-size:14px; margin:0; }
.article-share-status:empty { display:none; }
.blog-hero-layout { position:relative; z-index:1; }
.blog-hero-copy { max-width:72%; }
.blog-hero h1 { font-size:clamp(28px,3vw,40px); margin-bottom:12px; }
.blog-hero h1 span { color:var(--bbr-brand); }
.blog-hero .blog-hero-kicker { display:flex; gap:12px; align-items:center; font-size:11px; font-weight:700; letter-spacing:.06em; margin-bottom:12px; }
.blog-hero-kicker::before { content:""; width:32px; height:3px; background:var(--bbr-brand); flex-shrink:0; }
.blog-hero-copy > p:not(.blog-hero-kicker) { font-size:16px; line-height:1.5; margin-bottom:12px; }
/* Decorative photo fades into the shared hero gradient; no separate image card. */
.blog-hero-art { position:absolute; inset:0 0 0 auto; width:46%; pointer-events:none; mask-image:linear-gradient(to right,transparent,black 65%); }
.blog-hero-art img { width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.blog-hero-art::after { content:""; position:absolute; inset:0; background:var(--bbr-header-gradient); opacity:.35; }
:root[data-appearance="light"] .blog-hero h1 span { color:var(--bbr-focus); }
@media(max-width:760px) {
 .blog-hero-copy { max-width:none; }
 .blog-hero-art { display:none; }
 .blog-hero { padding-block:24px; }
 .article-topline { gap:12px; }
 .article-header h1 { font-size:28px; }
 .article-share { justify-content:flex-start; }
}

.article-cover img { object-position:center 30%; }

/* Article cover with text overlay; category belongs to the metadata row. */
.blog-categories a:hover,.blog-categories a:focus-visible { text-decoration:none; }
.article-topline { padding-block:12px; margin-bottom:0; }
.article-cover { position:relative; display:grid; align-items:end; min-height:clamp(360px,42vh,460px); overflow:hidden; border-radius:var(--bbr-radius-lg); }
.article-cover > img { position:absolute; inset:0; width:100%; height:100%; max-height:none; border-radius:0; object-position:center 35%; }
.article-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,15,20,.83),rgba(0,15,20,.25)),linear-gradient(0deg,rgba(0,15,20,.85),transparent 80%); }
.article-cover .article-header { position:relative; z-index:1; padding:clamp(24px,3vw,40px); }
.article-cover h1 { color:#fff; max-width:1000px; }
.article-cover .article-lead { color:#eee; max-width:800px; }
.article-meta > .article-category { margin-left:auto; text-align:right; min-height:32px; display:inline-flex; align-items:center; }
.article-index nav { border-radius:var(--bbr-radius-sm); }
.article-native-share { display:inline-flex; align-items:center; gap:8px; min-height:44px; border:0; padding:0; background:none; color:inherit; font:inherit; font-size:14px; text-decoration:underline; cursor:pointer; }
.article-native-share .blog-icon { width:18px; height:18px; fill:currentColor; stroke:none; }
@media(max-width:760px) {
 .article-cover { min-height:380px; }
 .article-cover .article-header { padding:24px 20px; }
 .article-meta { gap:6px 12px; }
 .article-meta > small { flex-basis:100%; order:1; }
}


/* WordPress links and content keep the same appearance with and without JS. */
.blog-hero { margin:0; }
.blog-list-heading h2 { text-transform:uppercase; }
.blog-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:48px; min-height:48px; padding:12px 16px; border:1px solid var(--bbr-control-border); border-radius:var(--bbr-radius-sm); font-size:14px; font-weight:700; line-height:1.3; }
.blog-pagination a:hover { color:var(--bbr-text); background:var(--bbr-surface-raised); }
.blog-pagination .current { color:#080d0e; background:var(--bbr-brand); border-color:transparent; }
.blog-pagination .dots { border-color:transparent; }
.blog-empty p { margin-bottom:0; }
.blog-empty p + a { display:inline-flex; align-items:center; min-height:44px; margin-top:16px; }
.article-cover { background:var(--bbr-surface-raised); padding-inline:0; }
.article-meta .article-category { color:var(--bbr-brand); text-decoration:none; }
.article-index nav a { text-decoration:none; font-weight:400; }
.article-index .article-index-level-3 { padding-left:12px; }
.article-prose { width:100%; max-width:740px; overflow-wrap:anywhere; }
.article-prose > :first-child { margin-top:0; }
.article-prose :where(h2,h3,h4,h5,h6,[id]) { scroll-margin-top:24px; }
.article-prose h3 { font-size:20px; margin-block:32px 16px; }
.article-prose :where(ol) { padding-left:24px; margin:0 0 24px; color:var(--bbr-muted); font-size:17px; line-height:1.8; }
.article-prose a { color:var(--bbr-brand); text-decoration:underline; }
.article-prose figure { margin:32px 0; max-width:100%; }
.article-prose figcaption { color:var(--bbr-muted); font-size:12px; line-height:1.5; margin-top:12px; }
.article-prose :where(img,video,iframe) { max-width:100%; }
.article-prose .wp-block-image img { height:auto; border-radius:var(--bbr-radius-lg); }
.article-prose :where(pre,.wp-block-table) { overflow-x:auto; max-width:100%; }
.article-prose .article-callout { margin-block:32px; }
.article-prose .article-callout > p:first-child { margin-bottom:12px; }
.article-callout .wp-block-button__link { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:12px 20px; color:#080d0e; font-size:14px; line-height:1.3; font-weight:700; text-decoration:none; }
.article-callout .wp-block-button__link::before { content:""; display:block; width:18px; height:18px; flex-shrink:0; background:currentColor; mask:url('../images/BBR-icon-cerca.svg') center/contain no-repeat; }
.article-end .article-back { font-size:14px; }
.article-native-share { color:var(--bbr-link); font-weight:400; border-radius:0; white-space:normal; line-height:1.5; }
.article-native-share:hover { background:none; color:var(--bbr-brand-hover); }
.article-share .blog-icon { width:18px; height:18px; }
.article-carousel-controls .blog-icon { width:22px; height:22px; color:var(--bbr-text); }
.article-page-links { display:flex; flex-wrap:wrap; gap:12px; margin-block:24px; }
@media(min-width:761px) { .article-layout--no-index .article-prose { grid-column:2; } }
@media(max-width:760px) { .article-prose :where(ul,ol) { font-size:16px; line-height:1.75; } }

@media(max-width:760px) { .blog-section { padding-block:32px; } }