/* Тема: головна сторінка (/) і пошук по сайту (/site/search, /site/search-post, /site/search-resources) */

/* ---- оболонка ---- */
.tb-home-wrap .tb-embedded { margin-top: 8px; }
.tb-embedded .tb-page.tb-home { max-width: none; margin: 0 auto; padding-bottom: 48px; } /* ширина — контейнер сторінки (theme/_layout.css), як у шапки */
.tb-home .tb-search input.form-control { height: auto; min-height: 46px; box-shadow: none; background: var(--card); border-color: var(--line-2); }
.tb-home .tb-search input.form-control:focus { border-color: var(--sky); }
.tb-home .lucide { flex: none; }

/* ---- hero ---- */
.tb-home-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 54%) minmax(0, 1fr); gap: 24px; align-items: center; min-height: 380px; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px); border-radius: 28px; background: linear-gradient(135deg, #fff8e1, #fff 55%); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.tb-home-hero-body { position: relative; z-index: 1; min-width: 0; }
/* body.tb-chrome у селекторі: класичний .library h1 { font-weight: 400; font-size: 27px } інакше перебивав заголовок */
body.tb-chrome .tb-home-h1, .tb-home-h1 { margin: 0 0 6px; font: 900 clamp(36px, 6vw, 58px)/1.05 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.tb-home .cd-headline.tb-home-headline { margin: 0 0 12px; font: 700 clamp(22px, 3.4vw, 34px)/1.25 var(--f-display); color: var(--ink); }
.tb-home .cd-headline.tb-home-headline .cd-words-wrapper b { font-weight: 800; color: var(--ink); }
.tb-home-lead { max-width: 560px; margin: 0 0 22px; font: 500 clamp(16px, 2vw, 19px)/1.4 var(--f-body); color: var(--ink-2); }
.tb-home-search { max-width: 640px; display: grid; gap: 12px; }
.tb-home-search-form { display: flex; align-items: stretch; gap: 10px; margin: 0; }
.tb-home-search-form .tb-search, .tb-home-search-form .tb-search input.form-control { height: 50px; min-height: 50px; margin: 0; }
.tb-home-search-form .tb-home-search-btn { height: 50px; min-height: 50px; margin: 0; padding-top: 0; padding-bottom: 0; align-self: stretch; }
.tb-home-search-field { flex: 1 1 auto; }
.tb-home-search-btn { flex: none; }
.tb-home-search-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-home-search-tags .tb-chip-btn { background: var(--paper-2); border-color: transparent; color: var(--ink); text-decoration: none; }
.tb-home-search-tags .tb-chip-btn:hover { background: var(--card); color: var(--ink); }
/* ілюстрація — у правому верхньому куті впритул до краю картки, як у класичній шапці (right top, 66%) */
.tb-home-hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; pointer-events: none; }
.tb-home-hero-art img { position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain; object-position: right top; }

/* ---- лічильники ---- */
.tb-home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.tb-home-stat { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "ico num" "ico text"; column-gap: 14px; row-gap: 2px; align-items: start; padding: 16px 18px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.tb-home-stat-ico { grid-area: ico; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--paper-2); color: var(--orange); }
.tb-home-stat-ico .lucide { width: 24px; height: 24px; }
.tb-home-stat-webinar .tb-home-stat-ico { background: var(--paper); color: var(--sky); }
.tb-home-stat-conf .tb-home-stat-ico { background: var(--paper); color: var(--grape); }
.tb-home-stat-num { grid-area: num; font: 900 28px/1.1 var(--f-display); color: var(--ink); }
.tb-home-stat-text { grid-area: text; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.tb-home-stat-text br { display: none; }
.tb-home-stat-text a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--go); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tb-home-stat-text a:hover { color: var(--orange-d); }

/* ---- заголовки секцій ---- */
.tb-home-section { margin: 26px 0 0; }
.tb-home-h2, .tb-home-h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font: 800 clamp(20px, 2.6vw, 24px)/1.2 var(--f-display); color: var(--ink); }
.tb-home-h2 .lucide, .tb-home-h3 .lucide { width: 24px; height: 24px; color: var(--orange); }
/* заголовок — звичайний текстовий блок з іконкою в рядку: у flex-рядку іконка на телефоні лишалася сама на першому рядку, а «текст + <a>» ставали окремими шматками */
.tb-home-h2, .tb-home-h3 { display: block; }
.tb-home-h2 > .lucide:first-child, .tb-home-h3 > .lucide:first-child { display: inline-block; vertical-align: -4px; margin-right: 6px; }
.tb-home-h3 a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--go); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.tb-home-h3 a:hover { color: var(--orange-d); }
.tb-home-h4 { margin: 14px 0 8px; font: 800 16px/1.25 var(--f-display); color: var(--ink); }
.tb-home-text { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.tb-home-text p { margin: 0 0 8px; }
.tb-home-text p:last-child { margin-bottom: 0; }

/* ---- найближчі заходи ---- */
.tb-home-events { margin: 18px 0; }
.tb-home-ev-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tb-home-ev { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); color: var(--ink) !important; text-decoration: none !important; transition: transform .12s, box-shadow .12s; }
.tb-home-ev:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--line-2); }
.tb-home-ev-img { position: relative; display: block; aspect-ratio: 16 / 7; background: var(--paper) center / cover no-repeat; }
.tb-home-ev-img .lucide { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 11px; border-radius: 50%; background: var(--go); color: var(--ink); }
.tb-home-ev-body { display: grid; gap: 8px; padding: 14px 16px; }
.tb-home-ev-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-home-ev-name { font: 800 16px/1.3 var(--f-display); }
.tb-home-ev-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tb-home-ev-date .lucide { width: 15px; height: 15px; color: var(--ink-3); }
.tb-home-ev-live { color: var(--coral); }
.tb-home-ev-lectors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.tb-home-ev-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line-2); }
.tb-home-ev-vector { position: absolute; right: 14px; bottom: 12px; line-height: 0; opacity: .9; }
.tb-home-ev-vector img { width: 84px; height: auto; display: block; }
/* одна подія (напр. пряма трансляція) — на всю ширину: прев’ю зліва, інформація справа, без порожніх колонок сітки */
.tb-home-ev-list:has(> .tb-home-ev:only-child) { grid-template-columns: minmax(0, 1fr); }
.tb-home-ev:only-child { display: grid; grid-template-columns: minmax(260px, 40%) minmax(0, 1fr); align-items: stretch; }
.tb-home-ev:only-child .tb-home-ev-img { aspect-ratio: auto; min-height: 200px; height: 100%; }
.tb-home-ev:only-child .tb-home-ev-body { align-content: center; gap: 10px; padding: 20px 24px 20px 22px; padding-bottom: 52px; }
.tb-home-ev:only-child .tb-home-ev-name { font-size: 20px; line-height: 1.25; }
.tb-home-ev:only-child .tb-home-ev-date { font-size: 14px; }
.tb-home-ev:only-child .tb-home-ev-vector { right: 20px; bottom: 16px; }
/* прев’ю приховане до 992px (hidden-sm/xs) — тоді звичайна картка в колонку */
@media (max-width: 991px) {
    .tb-home-ev:only-child { display: flex; }
    .tb-home-ev:only-child .tb-home-ev-body { padding: 14px 16px 48px; }
    .tb-home-ev:only-child .tb-home-ev-name { font-size: 17px; }
}

/* ---- онлайн-тести ---- */
.tb-home-tests { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: center; margin: 18px 0; padding: 20px 26px; border-radius: 22px; background: var(--card); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.tb-home-tests-img img { width: 100%; height: auto; display: block; }
.tb-home-tests-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.tb-home-or { color: var(--ink-3); font-weight: 600; }

/* ---- чат з постатями ---- */
.tb-home-chat { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tb-home-chat-link { display: flex; flex-direction: column; height: 100%; border-radius: 18px; overflow: hidden; background: var(--card); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); color: var(--ink) !important; text-decoration: none !important; transition: transform .12s, box-shadow .12s; }
.tb-home-chat-link:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--line-2); }
.tb-home-chat-img { display: block; aspect-ratio: 1 / 1; background: var(--paper); }
.tb-home-chat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-home-chat-name { display: block; padding: 10px 12px; font: 700 14px/1.25 var(--f-display); text-align: center; }
.tb-home-chat-all .tb-home-chat-img { background: var(--paper-2); }

/* ---- напрями ---- */
.tb-home-dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tb-home-dir { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); color: var(--ink) !important; text-decoration: none !important; transition: transform .12s, box-shadow .12s; }
.tb-home-dir:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--line-2); }
.tb-home-dir img { width: 56px; height: 56px; flex: none; object-fit: contain; }
.tb-home-dir-info { display: grid; gap: 4px; min-width: 0; }
.tb-home-dir-name { font: 800 15.5px/1.25 var(--f-display); }
.tb-home-dir-stat { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.tb-home-dir-all { background: var(--ink); border-color: var(--ink); box-shadow: 0 4px 0 var(--ink-shadow); color: var(--card) !important; }
.tb-home-dir-all:hover { box-shadow: 0 6px 0 var(--ink-shadow); }
.tb-home-dir-all .tb-home-dir-stat { color: var(--shadow-soft); }

/* ---- олімпіади та конкурси ---- */
.tb-home-contest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 38%); gap: 28px; align-items: center; padding: 22px 26px; background: var(--paper-2); }
.tb-home-contest-map svg { width: 100%; height: auto; display: block; }
.tb-home-contest-map .st0 { fill: var(--sun); opacity: .55; }
.tb-home-contest-map .st1 { fill: var(--orange); animation: tb-home-fade 2s ease-in-out; }
@keyframes tb-home-fade { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }
.tb-home-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tb-home-list li a { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 2px solid var(--line); color: var(--ink); font-weight: 700; font-size: 14.5px; line-height: 1.35; text-decoration: none; transition: border-color .12s; }
.tb-home-list li a:hover { border-color: var(--go); color: var(--ink); }
.tb-home-list li a .lucide { width: 18px; height: 18px; margin-top: 1px; color: var(--orange); }

/* ---- журнал ---- */
.tb-home-journal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; margin-top: 18px; padding: 22px 26px; }

/* ---- пошук по сайту ---- */
.tb-home-srch-head { display: grid; gap: 12px; }
.tb-home-srch-label { font: 800 clamp(20px, 2.6vw, 24px)/1.2 var(--f-display); color: var(--ink); }
.tb-home-srch-form { display: flex; gap: 10px; margin: 0; }
.tb-home-srch-field { flex: 1 1 auto; }
.tb-home-srch-btn { flex: none; }
.tb-home-srch-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-home-srch-opts .tb-chip-btn { position: relative; margin: 0; cursor: pointer; }
.tb-home-srch-opts .tb-chip-btn input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.tb-home-srch-block { margin-top: 4px; }
.tb-home-srch-count { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 800 18px/1.25 var(--f-display); color: var(--ink); }
.tb-home-srch-count .lucide { width: 20px; height: 20px; color: var(--orange); }
.tb-home-srch-more { margin-top: 12px; }
.tb-home-srch-videos, .tb-home-srch-posts { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tb-home-srch-video { color: var(--ink) !important; text-decoration: none !important; }
.tb-home-srch-video-img { position: relative; aspect-ratio: 16 / 9; }
.tb-home-srch-video-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; background: var(--go); color: var(--ink); }
.tb-home-srch-video-play .lucide { width: 22px; height: 22px; }
.tb-home-srch-video-name { display: block; }
.tb-home-srch-post-link { display: flex; flex-direction: column; height: 100%; color: var(--ink) !important; text-decoration: none !important; }
.tb-home-srch-post-ico { display: grid; place-items: center; aspect-ratio: 16 / 7; background: var(--paper-2); color: var(--orange); font-size: 40px; }
.tb-home-srch-author { font-size: 13px; color: var(--ink-3); }
.tb-home-srch-author a { color: var(--ink-2); font-weight: 700; }
.tb-home-srch-item .tb-lib-title a { color: var(--ink); }
.tb-home-srch-test { grid-template-columns: 56px minmax(0, 1fr) auto; }
.tb-home .tb-lib-file.is-test { display: grid; gap: 2px; place-items: center; background: var(--mint); }
.tb-home .tb-lib-file.is-test .lucide { width: 20px; height: 20px; }
.tb-home-srch-test-img { width: 120px; }
.tb-home-srch-test-img img { width: 100%; border-radius: 10px; display: block; }
.tb-home-srch-rating { white-space: nowrap; }
.tb-home-srch-item .tb-tcard-example { display: flex; align-items: flex-start; gap: 6px; }
.tb-home-srch-item .tb-tcard-example .lucide { width: 15px; height: 15px; margin-top: 2px; color: var(--ink-3); }
.tb-home-srch-empty img { max-width: 260px; margin: 0 auto 10px; display: block; }
.tb-home-srch-empty p { margin: 0; font: 800 20px/1.2 var(--f-display); color: var(--ink); }
/* фільтри (search-post / search-resources) */
.tb-home-srch-filter { display: grid; gap: 16px; margin: 0; }
.tb-home-srch-fhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; font: 800 15px/1.2 var(--f-display); color: var(--ink); }
.tb-home-srch-clear { float: none !important; font: 600 12.5px/1 var(--f-body); color: var(--coral) !important; text-decoration: none; }
.tb-home-srch-clear:hover { text-decoration: underline; }
.tb-home .tb-home-srch-checks { display: grid; gap: 2px; margin: 0; }
.tb-home-srch-checks-2 { grid-template-columns: 1fr 1fr; }
.tb-home .tb-home-srch-check { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px; border-radius: 10px; font: 500 14px/1.3 var(--f-body); color: var(--ink-2); cursor: pointer; min-height: 0; }
.tb-home .tb-home-srch-check:hover { background: var(--paper); }
.tb-home .tb-home-srch-check input { position: static; margin: 0; width: 16px; height: 16px; flex: none; accent-color: var(--orange); }
.tb-home .tb-home-srch-check:has(input:checked) { background: var(--paper-2); color: var(--ink); font-weight: 700; }

/* ---- адаптив ---- */
@media (max-width: 991px) {
    .tb-home-hero { grid-template-columns: 1fr; }
    .tb-home-hero { min-height: 0; grid-template-columns: 1fr; padding-top: 18px; }
    .tb-home-hero-art { position: relative; order: -1; width: 100%; height: 170px; margin: 0 0 6px; }
    .tb-home-hero-art img { position: static; width: 100%; height: 100%; object-fit: contain; object-position: center; }
    .tb-home-stats { grid-template-columns: 1fr 1fr; }
    .tb-home-chat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tb-home-dirs { grid-template-columns: 1fr 1fr; }
    .tb-home-contest, .tb-home-journal, .tb-home-tests { grid-template-columns: 1fr; }
    .tb-home-tests-img { max-width: 260px; }
    .tb-home-srch-grid { grid-template-columns: 1fr; grid-template-areas: "main" "top"; }
}
@media (max-width: 640px) {
    .tb-home-hero { padding: 22px 16px; border-radius: 22px; }
    .tb-home-search-form, .tb-home-srch-form, .tb-home-tests-action { flex-direction: column; align-items: stretch; }
    .tb-home-search-form .tb-btn, .tb-home-srch-form .tb-btn, .tb-home-tests-action .tb-btn { width: 100%; }
    .tb-home-or { text-align: center; }
    .tb-home-stats { grid-template-columns: 1fr; }
    .tb-home-chat { grid-template-columns: 1fr 1fr; }
    .tb-home-dirs, .tb-home-ev-list { grid-template-columns: 1fr; }
    .tb-home-tests-img { max-width: 200px; margin: 0 auto; }
    .tb-home-contest, .tb-home-journal, .tb-home-tests { padding: 16px; }
    .tb-home-srch-videos, .tb-home-srch-posts { grid-template-columns: 1fr; }
    .tb-home-srch-test { grid-template-columns: 56px minmax(0, 1fr); }
    .tb-home-srch-test-img { grid-column: 2; width: 100%; max-width: 200px; }
    .tb-home-srch-checks-2 { grid-template-columns: 1fr; }
}

/* онлайн-тести + помічник ШІ — поруч */
.tb-home-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.tb-home-duo .tb-home-tests { margin: 0; display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; padding: 20px; }
.tb-home-new { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.tb-home-new .tb-chip { font-size: 12px; }
.tb-home-ai { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 22px; background: var(--card); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.tb-home-ai-head { display: flex; align-items: center; gap: 10px; }
.tb-home-ai-head .tb-btn { pointer-events: none; }
.tb-home-ai-head .tb-btn svg { width: 14px; height: 14px; }
.tb-home-ai-head .tb-home-h2 { margin: 0; }
.tb-home-ai-tools .tb-chip-btn { text-decoration: none !important; color: var(--ink) !important; }
.tb-home-ai-tools .tb-chip-btn:hover { border-color: var(--go); background: var(--paper-2, #fff8e1); }
.tb-home-ai .tb-home-tests-action { margin-top: 2px; }
@media (max-width: 991px) { .tb-home-duo { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tb-home-tests-action .tb-btn { width: 100%; } .tb-home-or { display: none; } }

/* картка «Онлайн-тести» — у стилі нового конструктора/плеєра тестів */
.tb-home-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--go); color: #fff; box-shadow: 0 3px 0 var(--go-d); }
.tb-home-ico svg { width: 20px; height: 20px; }
.tb-home-duo .tb-home-tests .tb-home-text { margin: 0; }
.tb-home-duo .tb-home-tests .tb-home-new { margin: 0; }
.tb-home-quiz { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--paper); border: 2px solid var(--line); }
.tb-home-quiz-q { display: flex; align-items: center; gap: 10px; font: 700 15px/1.3 var(--f-body); color: var(--ink); }
.tb-home-quiz-q > span:nth-child(2) { flex: 1; min-width: 0; }
.tb-home-quiz-n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: #fff; font: 800 13px/1 var(--f-display); }
.tb-home-quiz-timer { flex: none; padding: 3px 8px; border-radius: 999px; background: #fff; border: 2px solid var(--line); font: 800 12px/1 var(--f-display); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tb-home-quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tb-home-quiz-opt { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 32px 8px 8px; border-radius: 12px; border: 3px solid transparent; background: var(--p); box-shadow: 0 3px 0 var(--p-d); font: 500 14px/1.2 var(--f-body); color: var(--ink); }
.tb-home-quiz-opt i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--c); color: #fff; font: 800 12px/1 var(--f-display); font-style: normal; box-shadow: 0 2px 0 var(--c-d); }
.tb-home-quiz-opt.is-a { --p: #e3f2fd; --p-d: #90caf9; --c: var(--sky); --c-d: var(--sky-d, #1e88e5); }
.tb-home-quiz-opt.is-b { --p: #fff8e1; --p-d: #ffe082; --c: var(--go); --c-d: var(--go-d); }
.tb-home-quiz-opt.is-c { --p: #e8f5e9; --p-d: #a5d6a7; --c: var(--mint); --c-d: var(--mint-d, #00897b); }
.tb-home-quiz-opt.is-d { --p: #f3e5f5; --p-d: #ce93d8; --c: var(--grape); --c-d: #5e35b1; }
.tb-home-quiz-opt.is-right { border-color: var(--c); transform: translateY(2px); box-shadow: 0 1px 0 var(--p-d), 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.tb-home-quiz-opt svg { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; padding: 2px; border-radius: 6px; background: var(--c); color: #fff; }
@media (max-width: 400px) { .tb-home-quiz-opts { grid-template-columns: 1fr; } }

/* «Освітній журнал» на головній: превʼю статей з обкладинками */
.tb-home-journal { grid-template-columns: 1fr !important; gap: 16px; }
.tb-home-journal-head { display: grid; gap: 6px; max-width: 760px; }
.tb-home-journal-head .tb-home-h3 { margin: 0; }
.tb-home-journal-head .tb-home-text { margin: 0; }
.tb-home-journal-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tb-home-post { display: grid; grid-template-rows: auto 1fr; border-radius: 16px; overflow: hidden; border: 2px solid var(--line); background: #fff; color: var(--ink) !important; text-decoration: none !important; box-shadow: 0 4px 0 var(--line); transition: transform .12s, box-shadow .12s, border-color .15s; }
.tb-home-post:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--line); border-color: var(--line-2); }
.tb-home-post-img { display: block; aspect-ratio: 16 / 9; background: var(--paper) center / cover no-repeat; }
.tb-home-post-body { display: grid; gap: 8px; align-content: start; padding: 12px 14px 14px; }
.tb-home-post-body .tb-chip { justify-self: start; }
.tb-home-post-title { font: 700 15px/1.3 var(--f-body); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tb-home-post-meta { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-3); }
.tb-home-post-meta .lucide { width: 13px; height: 13px; }
@media (max-width: 991px) { .tb-home-journal-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tb-home-journal-cards { grid-template-columns: 1fr; } }

/* анімований заголовок головної («Допомагає навчати / розвиватися / …») — ті самі правила, що й у класичному site.css, обмежені .tb-home */
.tb-home .homepage-main-screen .homepage-cta .cd-headline {
    color: #545454;
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
    margin: 0 0 0;
    padding: 0
}
.tb-home .cd-headline {
    font-size: 3rem;
    line-height: 1.2
}
.tb-home .cd-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left
}
.tb-home .cd-words-wrapper b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0
}
.tb-home .cd-words-wrapper b.is-visible {
    position: relative
}
.tb-home .no-js .cd-words-wrapper b {
    opacity: 0
}
.tb-home .no-js .cd-words-wrapper b.is-visible {
    opacity: 1
}
.tb-home .cd-headline.rotate-1 .cd-words-wrapper {
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    perspective: 300px
}
.tb-home .cd-headline.rotate-1 b {
    opacity: 0;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg)
}
.tb-home .cd-headline.rotate-1 b.is-visible {
    opacity: 1;
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    transform: rotateX(0);
    -webkit-animation: cd-rotate-1-in 1.2s;
    -moz-animation: cd-rotate-1-in 1.2s;
    animation: cd-rotate-1-in 1.2s
}
.tb-home .cd-headline.rotate-1 b.is-hidden {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
    -webkit-animation: cd-rotate-1-out 1.2s;
    -moz-animation: cd-rotate-1-out 1.2s;
    animation: cd-rotate-1-out 1.2s
}
.tb-home .cd-headline.type .cd-words-wrapper {
    vertical-align: top;
    overflow: hidden
}
.tb-home .cd-headline.type .cd-words-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 90%;
    width: 1px;
    background-color: #aebcb9
}
.tb-home .cd-headline.type .cd-words-wrapper.waiting::after {
    -webkit-animation: cd-pulse 1s infinite;
    -moz-animation: cd-pulse 1s infinite;
    animation: cd-pulse 1s infinite
}
.tb-home .cd-headline.type .cd-words-wrapper.selected {
    background-color: #aebcb9
}
.tb-home .cd-headline.type .cd-words-wrapper.selected::after {
    visibility: hidden
}
.tb-home .cd-headline.type .cd-words-wrapper.selected b {
    color: #0d0d0d
}
.tb-home .cd-headline.type b {
    visibility: hidden
}
.tb-home .cd-headline.type b.is-visible {
    visibility: visible
}
.tb-home .cd-headline.type i {
    position: absolute;
    visibility: hidden
}
.tb-home .cd-headline.type i.in {
    position: relative;
    visibility: visible
}
.tb-home .cd-headline.rotate-2 .cd-words-wrapper {
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    perspective: 300px
}
.tb-home .cd-headline.rotate-2 em, .tb-home .cd-headline.rotate-2 i {
    display: inline-block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
.tb-home .cd-headline.rotate-2 b {
    opacity: 0
}
.tb-home .cd-headline.rotate-2 i {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-20px) rotateX(90deg);
    -moz-transform: translateZ(-20px) rotateX(90deg);
    -ms-transform: translateZ(-20px) rotateX(90deg);
    -o-transform: translateZ(-20px) rotateX(90deg);
    transform: translateZ(-20px) rotateX(90deg);
    opacity: 0
}
.tb-home .is-visible .cd-headline.rotate-2 i {
    opacity: 1
}
.tb-home .cd-headline.rotate-2 i.in {
    -webkit-animation: cd-rotate-2-in .4s forwards;
    -moz-animation: cd-rotate-2-in .4s forwards;
    animation: cd-rotate-2-in .4s forwards
}
.tb-home .cd-headline.rotate-2 i.out {
    -webkit-animation: cd-rotate-2-out .4s forwards;
    -moz-animation: cd-rotate-2-out .4s forwards;
    animation: cd-rotate-2-out .4s forwards
}
.tb-home .cd-headline.rotate-2 em {
    -webkit-transform: translateZ(20px);
    -moz-transform: translateZ(20px);
    -ms-transform: translateZ(20px);
    -o-transform: translateZ(20px);
    transform: translateZ(20px)
}
.tb-home .no-csstransitions .cd-headline.rotate-2 i {
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 0
}
.tb-home .no-csstransitions .cd-headline.rotate-2 i em {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
}
.tb-home .no-csstransitions .cd-headline.rotate-2 .is-visible i {
    opacity: 1
}
.tb-home .cd-headline.loading-bar span {
    display: inline-block;
    padding: .2em 0
}
.tb-home .cd-headline.loading-bar .cd-words-wrapper {
    overflow: hidden;
    vertical-align: top
}
.tb-home .cd-headline.loading-bar .cd-words-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #0096a7;
    z-index: 2;
    -webkit-transition: width .3s -.1s;
    -moz-transition: width .3s -.1s;
    transition: width .3s -.1s
}
.tb-home .cd-headline.loading-bar .cd-words-wrapper.is-loading::after {
    width: 100%;
    -webkit-transition: width 3s;
    -moz-transition: width 3s;
    transition: width 3s
}
.tb-home .cd-headline.loading-bar b {
    top: .2em;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    transition: opacity .3s
}
.tb-home .cd-headline.loading-bar b.is-visible {
    opacity: 1;
    top: 0
}
.tb-home .cd-headline.slide span {
    display: inline-block;
    padding: 5px 0
}
.tb-home .cd-headline.slide .cd-words-wrapper {
    overflow: hidden;
    vertical-align: top
}
.tb-home .cd-headline.slide b {
    opacity: 0;
    top: .2em
}
.tb-home .cd-headline.slide b.is-visible {
    top: 0;
    opacity: 1;
    -webkit-animation: slide-in .6s;
    -moz-animation: slide-in .6s;
    animation: slide-in .6s
}
.tb-home .cd-headline.slide b.is-hidden {
    -webkit-animation: slide-out .6s;
    -moz-animation: slide-out .6s;
    animation: slide-out .6s
}
.tb-home .cd-headline.clip span {
    display: inline-block;
    padding: .2em 0
}
.tb-home .cd-headline.clip .cd-words-wrapper {
    overflow: hidden;
    vertical-align: top
}
.tb-home .cd-headline.clip .cd-words-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: #aebcb9
}
.tb-home .cd-headline.clip b {
    opacity: 0
}
.tb-home .cd-headline.clip b.is-visible {
    opacity: 1
}
.tb-home .cd-headline.zoom .cd-words-wrapper {
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    perspective: 300px
}
.tb-home .cd-headline.zoom b {
    opacity: 0
}
.tb-home .cd-headline.zoom b.is-visible {
    opacity: 1;
    -webkit-animation: zoom-in .8s;
    -moz-animation: zoom-in .8s;
    animation: zoom-in .8s
}
.tb-home .cd-headline.zoom b.is-hidden {
    -webkit-animation: zoom-out .8s;
    -moz-animation: zoom-out .8s;
    animation: zoom-out .8s
}
.tb-home .cd-headline.rotate-3 .cd-words-wrapper {
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    perspective: 300px
}
.tb-home .cd-headline.rotate-3 b {
    opacity: 0
}
.tb-home .cd-headline.rotate-3 i {
    display: inline-block;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
.tb-home .is-visible .cd-headline.rotate-3 i {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0)
}
.tb-home .cd-headline.rotate-3 i.in {
    -webkit-animation: cd-rotate-3-in .6s forwards;
    -moz-animation: cd-rotate-3-in .6s forwards;
    animation: cd-rotate-3-in .6s forwards
}
.tb-home .cd-headline.rotate-3 i.out {
    -webkit-animation: cd-rotate-3-out .6s forwards;
    -moz-animation: cd-rotate-3-out .6s forwards;
    animation: cd-rotate-3-out .6s forwards
}
.tb-home .no-csstransitions .cd-headline.rotate-3 i {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
    opacity: 0
}
.tb-home .no-csstransitions .cd-headline.rotate-3 .is-visible i {
    opacity: 1
}
.tb-home .cd-headline.scale b {
    opacity: 0
}
.tb-home .cd-headline.scale i {
    display: inline-block;
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0)
}
.tb-home .is-visible .cd-headline.scale i {
    opacity: 1
}
.tb-home .cd-headline.scale i.in {
    -webkit-animation: scale-up .6s forwards;
    -moz-animation: scale-up .6s forwards;
    animation: scale-up .6s forwards
}
.tb-home .cd-headline.scale i.out {
    -webkit-animation: scale-down .6s forwards;
    -moz-animation: scale-down .6s forwards;
    animation: scale-down .6s forwards
}
.tb-home .no-csstransitions .cd-headline.scale i {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0
}
.tb-home .no-csstransitions .cd-headline.scale .is-visible i {
    opacity: 1
}
.tb-home .cd-headline.push b {
    opacity: 0
}
.tb-home .cd-headline.push b.is-visible {
    opacity: 1;
    -webkit-animation: push-in .6s;
    -moz-animation: push-in .6s;
    animation: push-in .6s
}
.tb-home .cd-headline.push b.is-hidden {
    -webkit-animation: push-out .6s;
    -moz-animation: push-out .6s;
    animation: push-out .6s
}
@-webkit-keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%)
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(20%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}
@keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(20%);
        -moz-transform: translateY(20%);
        -ms-transform: translateY(20%);
        -o-transform: translateY(20%);
        transform: translateY(20%)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}
@-webkit-keyframes slide-out {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }

    60% {
        opacity: 0;
        -webkit-transform: translateY(120%)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(100%)
    }
}
@keyframes slide-out {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    60% {
        opacity: 0;
        -webkit-transform: translateY(120%);
        -moz-transform: translateY(120%);
        -ms-transform: translateY(120%);
        -o-transform: translateY(120%);
        transform: translateY(120%)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
        transform: translateY(100%)
    }
}