/* BLOG INTEGRATION - new file.
   Public blog pages and the "Dal nostro blog" slider. All classes start with "tb-"
   so nothing clashes with the existing site styles. No web fonts, no frameworks:
   it has its own containers (.tb-container), so it does not depend on Bootstrap. */

:root {
    --tb-blue: #0b4899;
    --tb-blue-soft: #e8f0fb;
    --tb-ink: #1d2433;
    --tb-muted: #5d6779;
    --tb-line: #e3e8f0;
    --tb-bg: #f7f9fc;
    --tb-accent: #f5a623;
    --tb-radius: 14px;
}

.tb-wrap { padding: 32px 0 56px; color: var(--tb-ink); }
.tb-crumbs { font-size: .85rem; color: var(--tb-muted); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
.tb-crumbs a { color: var(--tb-muted); text-decoration: none; }
.tb-crumbs a:hover { color: var(--tb-blue); }
.tb-crumbs li + li::before { content: "›"; margin-right: 6px; color: #aab3c2; }

/* ---------- list ---------- */
.tb-head h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; color: var(--tb-blue); margin: 0 0 8px; line-height: 1.2; }
.tb-head p { color: var(--tb-muted); max-width: 720px; margin: 0 0 22px; font-size: 1.05rem; }
.tb-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 26px; scrollbar-width: thin; }
.tb-chip { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--tb-line); background: #fff; color: var(--tb-ink); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.tb-chip:hover { border-color: var(--tb-blue); color: var(--tb-blue); }
.tb-chip.on { background: var(--tb-blue); border-color: var(--tb-blue); color: #fff; }

.tb-featured { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; background: #fff; border: 1px solid var(--tb-line); border-radius: var(--tb-radius); overflow: hidden; margin-bottom: 30px; text-decoration: none; color: inherit; }
.tb-featured:hover { box-shadow: 0 10px 30px rgba(11, 72, 153, .10); }
.tb-featured .tb-img { aspect-ratio: 16 / 10; }
.tb-featured-body { padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.tb-featured-body h2 { font-size: 1.6rem; line-height: 1.25; margin: 8px 0 12px; color: var(--tb-ink); }
.tb-badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tb-blue); background: var(--tb-blue-soft); padding: 4px 9px; border-radius: 6px; }
.tb-badge.tb-badge-hot { background: #fff3dc; color: #9a5b00; }

.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.tb-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tb-line); border-radius: var(--tb-radius); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.tb-card:hover { box-shadow: 0 10px 24px rgba(11, 72, 153, .10); transform: translateY(-2px); }
.tb-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--tb-blue-soft); }
.tb-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tb-card-body h3 { font-size: 1.08rem; line-height: 1.35; margin: 0; color: var(--tb-ink); }
.tb-card-body p { font-size: .92rem; color: var(--tb-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tb-meta { font-size: .8rem; color: var(--tb-muted); margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 10px; }

.tb-pager { display: flex; justify-content: center; gap: 6px; margin-top: 34px; flex-wrap: wrap; }
.tb-pager a, .tb-pager span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--tb-line); text-decoration: none; color: var(--tb-ink); padding: 0 12px; }
.tb-pager .on { background: var(--tb-blue); color: #fff; border-color: var(--tb-blue); }
.tb-empty { text-align: center; padding: 50px 20px; color: var(--tb-muted); background: var(--tb-bg); border-radius: var(--tb-radius); }

/* ---------- article ---------- */
.tb-article { max-width: 780px; margin: 0 auto; }
.tb-article h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.2; font-weight: 700; margin: 10px 0 14px; color: var(--tb-ink); }
.tb-lead { font-size: 1.15rem; color: var(--tb-muted); margin-bottom: 18px; }
.tb-byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--tb-line); border-bottom: 1px solid var(--tb-line); margin-bottom: 22px; font-size: .9rem; color: var(--tb-muted); }
.tb-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--tb-blue-soft); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--tb-blue); }
.tb-byline strong { color: var(--tb-ink); display: block; }
.tb-byline a { color: var(--tb-blue); }
.tb-hero { margin: 0 0 26px; }
.tb-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--tb-radius); background: var(--tb-blue-soft); }
.tb-hero figcaption { font-size: .82rem; color: var(--tb-muted); margin-top: 6px; }

.tb-toc { background: var(--tb-bg); border: 1px solid var(--tb-line); border-radius: 12px; padding: 14px 18px; margin-bottom: 26px; }
.tb-toc summary { font-weight: 700; cursor: pointer; color: var(--tb-blue); }
.tb-toc ol { margin: 10px 0 0; padding-left: 20px; }
.tb-toc li { margin: 4px 0; }
.tb-toc li.l3 { margin-left: 16px; list-style: circle; }
.tb-toc a { color: var(--tb-ink); text-decoration: none; }
.tb-toc a:hover { color: var(--tb-blue); text-decoration: underline; }

.tb-body { font-size: 1.07rem; line-height: 1.75; color: var(--tb-ink); overflow-wrap: anywhere; }
.tb-body h2 { font-size: 1.55rem; margin: 36px 0 12px; color: var(--tb-blue); scroll-margin-top: 90px; }
.tb-body h3 { font-size: 1.22rem; margin: 26px 0 10px; scroll-margin-top: 90px; }
.tb-body p { margin: 0 0 18px; }
.tb-body img { max-width: 100%; height: auto; border-radius: 10px; }
.tb-body figure { margin: 24px 0; }
.tb-body figcaption { font-size: .85rem; color: var(--tb-muted); }
.tb-body blockquote { border-left: 4px solid var(--tb-accent); padding: 6px 18px; margin: 22px 0; background: #fffaf0; font-style: italic; }
.tb-body a { color: var(--tb-blue); text-decoration: underline; text-underline-offset: 2px; }
.tb-body ul, .tb-body ol { padding-left: 22px; margin-bottom: 18px; }
.tb-body iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; width: 100%; border: 0; border-radius: 10px; }
.blog-table-wrap { overflow-x: auto; margin: 20px 0; }
.tb-body table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tb-body th, .tb-body td { border: 1px solid var(--tb-line); padding: 8px 10px; text-align: left; }
.tb-body th { background: var(--tb-bg); }

.tb-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 10px; }
.tb-fact { font-size: .85rem; background: var(--tb-bg); border: 1px solid var(--tb-line); border-radius: 999px; padding: 6px 12px; color: var(--tb-ink); text-decoration: none; }
a.tb-fact:hover { border-color: var(--tb-blue); color: var(--tb-blue); }

.tb-cta { background: linear-gradient(120deg, var(--tb-blue), #1f6fd1); color: #fff; border-radius: var(--tb-radius); padding: 26px; margin: 34px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.tb-cta h2 { margin: 0; font-size: 1.35rem; color: #fff; }
.tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--tb-accent); color: #1d2433; font-weight: 700; padding: 12px 20px; border-radius: 10px; text-decoration: none; border: 0; cursor: pointer; font-size: 1rem; }
.tb-btn:hover { filter: brightness(1.05); color: #1d2433; }
.tb-btn-line { background: #fff; color: var(--tb-blue); border: 1px solid var(--tb-blue); }

.tb-section-title { font-size: 1.35rem; margin: 40px 0 16px; color: var(--tb-ink); }
.tb-tours { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tb-tour { border: 1px solid var(--tb-line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; }
.tb-tour .tb-img { aspect-ratio: 4 / 3; }
.tb-tour div { padding: 12px 14px; font-size: .92rem; }
.tb-tour strong { display: block; margin-bottom: 4px; color: var(--tb-ink); }

/* comments */
.tb-comments { margin-top: 44px; }
.tb-comment { border-top: 1px solid var(--tb-line); padding: 16px 0; }
.tb-comment .who { font-weight: 700; font-size: .95rem; }
.tb-comment .when { font-size: .8rem; color: var(--tb-muted); margin-left: 8px; font-weight: 400; }
.tb-comment p { margin: 6px 0 0; white-space: pre-line; }
.tb-comment .tb-reply { margin: 12px 0 0 22px; padding: 12px 14px; background: var(--tb-bg); border-radius: 10px; border: 0; }
.tb-author-tag { font-size: .7rem; background: var(--tb-blue); color: #fff; border-radius: 4px; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.tb-form { background: var(--tb-bg); border: 1px solid var(--tb-line); border-radius: var(--tb-radius); padding: 20px; margin-top: 18px; }
.tb-form label { display: block; font-weight: 600; font-size: .9rem; margin: 10px 0 4px; }
.tb-form input[type=text], .tb-form input[type=email], .tb-form textarea { width: 100%; border: 1px solid #cdd5e1; border-radius: 10px; padding: 10px 12px; font: inherit; background: #fff; }
.tb-form textarea { min-height: 120px; resize: vertical; }
.tb-form .tb-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: .85rem; }
.tb-form .tb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tb-note { font-size: .85rem; color: var(--tb-muted); }
.tb-alert { padding: 12px 14px; border-radius: 10px; margin: 12px 0; font-size: .95rem; }
.tb-alert.ok { background: #e7f6ec; color: #17603a; }
.tb-alert.error { background: #fdecec; color: #8a1f1f; }
.tb-preview-bar { position: sticky; top: 0; z-index: 50; background: #fff3dc; color: #7a4a00; text-align: center; padding: 8px; font-size: .9rem; font-weight: 600; }

/* ---------- slider (country / state / city / home) ---------- */
.tb-slider { padding: 36px 0; }
.tb-slider-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tb-slider-head h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: var(--tb-blue); }
.tb-slider-head a { font-weight: 600; color: var(--tb-blue); text-decoration: none; white-space: nowrap; }
.tb-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 44px) / 3)); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.tb-track > * { scroll-snap-align: start; }
.tb-nav { display: flex; gap: 8px; }
.tb-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--tb-line); background: #fff; cursor: pointer; font-size: 1.1rem; color: var(--tb-blue); }
.tb-nav button:hover { border-color: var(--tb-blue); }

@media (max-width: 900px) {
    .tb-featured { grid-template-columns: 1fr; }
    .tb-track { grid-auto-columns: 78%; }
}
@media (max-width: 575px) {
    .tb-wrap { padding: 20px 0 40px; }
    .tb-featured-body { padding: 18px; }
    .tb-featured-body h2 { font-size: 1.3rem; }
    .tb-body { font-size: 1.02rem; }
    .tb-cta { padding: 20px; }
    .tb-nav { display: none; }
    .tb-track { grid-auto-columns: 84%; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .tb-card, .tb-card:hover { transition: none; transform: none; } }


/* ---------- Design update (matches the "Travilioo Blog, Step by Step" demo) ---------- */
:root {
    --tb-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --tb-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    --tb-amber-soft: #fff3df;
    --tb-bg: #f4f6fa;
}
.tb-wrap, .tb-slider { font-family: var(--tb-text); }
.tb-head h1, .tb-article h1, .tb-body h2, .tb-body h3, .tb-section-title, .tb-featured-body h2,
.tb-card-body h3, .tb-slider-head h2, .tb-cta h2 { font-family: var(--tb-display); letter-spacing: -.01em; text-wrap: balance; }
.tb-head h1 { color: var(--tb-ink); }
.tb-head::before { content: "Travilioo · Blog"; display: block; font: 700 .78rem/1 var(--tb-text); letter-spacing: .12em; text-transform: uppercase; color: var(--tb-blue); margin-bottom: 12px; }
.tb-badge { font-size: .68rem; letter-spacing: .07em; background: none; padding: 0; border-radius: 0; }
.tb-badge.tb-badge-hot { background: var(--tb-accent); color: #1d2433; padding: 3px 8px; border-radius: 6px; }
.tb-img { background: linear-gradient(135deg, var(--tb-blue-soft), var(--tb-amber-soft)); }
.tb-card { border-radius: 12px; }
.tb-card-body h3 { font-size: 1.12rem; font-weight: 600; }
.tb-chip { font-weight: 600; font-size: .88rem; }
.tb-featured { border: 2px solid var(--tb-blue); }
.tb-byline strong { font-family: var(--tb-display); }
.tb-cta { background: var(--tb-blue); }
.tb-slider { background: var(--tb-bg); margin: 24px 0; }
.tb-slider-head h2 { color: var(--tb-ink); }
.tb-slider-head h2::before { content: "Travilioo · Blog"; display: block; font: 700 .72rem/1 var(--tb-text); letter-spacing: .12em; text-transform: uppercase; color: var(--tb-blue); margin-bottom: 8px; }
.tb-featured-body .tb-meta { margin-top: 14px; }

/* ---------------------------------------------------------------------------------
   Blog containers: our own copy of the container sizes, so the blog does NOT depend on
   Bootstrap (a Bootstrap upgrade cannot change the blog layout). The sizes match what the
   site navigation uses today; change the variables below to change every blog page.
   --------------------------------------------------------------------------------- */
:root {
    --tb-gutter: 12px;          /* side padding of a container */
    --tb-c-sm: 540px;           /* screen >= 576px  */
    --tb-c-md: 720px;           /* screen >= 768px  */
    --tb-c-lg: 960px;           /* screen >= 992px  */
    --tb-c-xl: 1140px;          /* screen >= 1200px */
    --tb-c-xxl: 1320px;         /* screen >= 1400px */
}
.tb-container, .tb-container-fluid { box-sizing: border-box; width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--tb-gutter); padding-right: var(--tb-gutter); }
.tb-container-fluid { padding-left: clamp(16px, 4vw, 56px); padding-right: clamp(16px, 4vw, 56px); }
@media (min-width: 576px)  { .tb-container { max-width: var(--tb-c-sm); } }
@media (min-width: 768px)  { .tb-container { max-width: var(--tb-c-md); } }
@media (min-width: 992px)  { .tb-container { max-width: var(--tb-c-lg); } }
@media (min-width: 1200px) { .tb-container { max-width: var(--tb-c-xl); } }
@media (min-width: 1400px) { .tb-container { max-width: var(--tb-c-xxl); } }

/* Article layout (same for all articles, set in appsettings.json "Blog"): text width + banner width.
   Widths follow .tb-container above. */
.tb-wrap { overflow-x: clip;
    /* inner width of .tb-container (max-width minus the two gutters) */
    --tb-cw: calc(100vw - 2 * var(--tb-gutter)); }
@media (min-width: 576px)  { .tb-wrap { --tb-cw: calc(var(--tb-c-sm) - 2 * var(--tb-gutter)); } }
@media (min-width: 768px)  { .tb-wrap { --tb-cw: calc(var(--tb-c-md) - 2 * var(--tb-gutter)); } }
@media (min-width: 992px)  { .tb-wrap { --tb-cw: calc(var(--tb-c-lg) - 2 * var(--tb-gutter)); } }
@media (min-width: 1200px) { .tb-wrap { --tb-cw: calc(var(--tb-c-xl) - 2 * var(--tb-gutter)); } }
@media (min-width: 1400px) { .tb-wrap { --tb-cw: calc(var(--tb-c-xxl) - 2 * var(--tb-gutter)); } }

/* Text width */
.tb-article.tb-w-narrow { max-width: 680px; }                                  /* reading column, centred */
.tb-article.tb-w-standard, .tb-article.tb-w-wide { max-width: 100%; }          /* = .tb-container */
.tb-article.tb-w-fluid { max-width: none; }                                    /* = .tb-container-fluid */

/* Banner width. Standard = same as the text. */
/* Wide = width of .tb-container, even when the text is Narrow */
.tb-hero.tb-hero-wide { width: var(--tb-cw); max-width: none; margin-left: calc(50% - var(--tb-cw) / 2); }
.tb-w-fluid .tb-hero.tb-hero-wide { width: 100%; margin-left: 0; }
/* Full = edge to edge of the screen */
.tb-hero.tb-hero-full { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
.tb-hero.tb-hero-full img { border-radius: 0; aspect-ratio: 21 / 9; max-height: 72vh; }
.tb-hero.tb-hero-full figcaption { padding: 0 16px; max-width: var(--tb-cw); margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .tb-hero.tb-hero-full img { aspect-ratio: 16 / 9; } }

/* "Dal nostro blog" slider on phones and tablets: swipe works everywhere and the arrows stay visible */
.tb-slider .tb-track { min-width: 0; width: 100%; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scroll-padding-left: 0; }
.tb-slider .tb-track > .tb-card { min-width: 0; }
@media (hover: none) { .tb-card:hover { transform: none; box-shadow: none; } }
@media (max-width: 575px) {
    .tb-slider-head { flex-wrap: wrap; align-items: center; }
    .tb-slider-head h2 { flex: 1 1 100%; }
    .tb-slider-head > div { width: 100%; justify-content: space-between; }
    .tb-slider .tb-nav { display: flex; }
    .tb-slider .tb-nav button { width: 36px; height: 36px; }
    .tb-slider .tb-track { grid-auto-columns: 86%; gap: 12px; }
}
/* Only one or two articles: no empty space, cards keep a normal width */
.tb-slider .tb-track:has(> .tb-card:only-child) { grid-auto-columns: minmax(260px, 420px); }

/* Slider pagination dots (shown when the cards do not all fit, e.g. on phones) */
.tb-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tb-dots[hidden] { display: none; }
.tb-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: #c9d2e0; cursor: pointer; transition: width .2s, background .2s; }
.tb-dots button.on { width: 24px; background: var(--tb-blue); }
.tb-dots button:focus-visible { outline: 2px solid var(--tb-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tb-dots button { transition: none; } }

/* No visible horizontal scrollbar on the slider (and the category chips): swipe, arrows and dots still work */
.tb-track, .tb-chips { scrollbar-width: none; -ms-overflow-style: none; }
.tb-track::-webkit-scrollbar, .tb-chips::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tb-track { padding-bottom: 2px; }