/* Блог: лента карточек (/blog) и страница статьи блога (/blog/<alias>).
   Цвета сайта: #FFDD2D — жёлтый, #2B3033 — тёмный, #656E73 — серый, #EDEFF0 — светлый фон. */

.tb-blog {
	--tb-yellow: #FFDD2D;
	--tb-dark: #2B3033;
	--tb-gray: #656E73;
	--tb-light: #EDEFF0;
	padding-bottom: 3rem;
}

/* Шапка ленты */
.tb-blog__head {margin: .5rem 0 2.25rem; max-width: 820px;}
.tb-blog__title {margin: 0 0 1rem; color: var(--tb-dark); font-weight: 700; text-transform: uppercase; overflow-wrap: break-word;}
.tb-blog__title::after {content: ""; display: block; width: 70px; height: 4px; margin-top: 1rem; background: var(--tb-yellow);}
.tb-blog__intro {color: var(--tb-gray); font-size: 17px; line-height: 1.6;}
.tb-blog__intro p:last-child {margin-bottom: 0;}
.tb-blog__page {margin: .75rem 0 0; color: var(--tb-gray); font-size: 14px;}

/* Сетка: 3 / 2 / 1 колонки */
.tb-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px;}
@media (max-width: 1199.98px) {.tb-grid {gap: 24px;}}
@media (max-width: 991.98px) {.tb-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 575.98px) {.tb-grid {grid-template-columns: minmax(0, 1fr); gap: 20px;}}

/* Карточка */
.tb-card {position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #E6EAEC; border-bottom: 3px solid var(--tb-yellow); transition: box-shadow .3s, transform .3s;}
.tb-card:hover,
.tb-card:focus-within {box-shadow: 0 10px 28px rgba(43, 48, 51, .14); transform: translateY(-3px);}

.tb-card__media {position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tb-light);}
@supports not (aspect-ratio: 1) {
	.tb-card__media {height: 0; padding-top: 62.5%;}
}
.tb-card__img,
.tb-card__noimg {position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%;}
.tb-card__img {object-fit: cover; transition: transform .5s;}
.tb-card:hover .tb-card__img {transform: scale(1.04);}

/* Заглушка, если у материала нет картинки */
.tb-card:nth-child(3n+2) .tb-card__noimg::before {right: auto; left: -15%; bottom: auto; top: -35%;}
.tb-card:nth-child(3n) .tb-card__noimg::before {right: 8%; bottom: -45%; width: 40%; padding-top: 40%;}
.tb-card__noimg {display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--tb-gray) 0%, var(--tb-dark) 100%);}
.tb-card__noimg::before {content: ""; position: absolute; right: -12%; bottom: -30%; width: 55%; padding-top: 55%; border-radius: 50%; border: 18px solid rgba(255, 221, 45, .18);}
.tb-card__noimg span {position: relative; padding-bottom: .6rem; border-bottom: 3px solid var(--tb-yellow); color: #fff; font-weight: 700; font-size: 18px; letter-spacing: .2em;}

.tb-card__body {letter-spacing: .01em; display: flex; flex: 1 1 auto; flex-direction: column; padding: 20px 22px 22px;}
.tb-card__date {display: block; margin-bottom: .5rem; color: var(--tb-gray); font-size: 13px; line-height: 1.4;}
.tb-card__title {margin: 0 0 .75rem; font-size: 19px; line-height: 1.35; font-weight: 700; text-transform: none; overflow-wrap: break-word; hyphens: manual;}
.tb-card__title a {color: var(--tb-dark) !important;}
/* вся карточка кликабельна */
.tb-card__link::after {content: ""; position: absolute; inset: 0; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;}
.tb-card__link:focus {outline: none;}
.tb-card__link:focus-visible::after {outline: 3px solid var(--tb-yellow); outline-offset: 2px;}
.tb-card:hover .tb-card__title a {color: var(--tb-gray) !important;}

.tb-card__text {margin: 0 0 1.25rem; color: var(--tb-gray); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}

.tb-card__more {align-self: flex-start; margin-top: auto; padding: 10px 18px; background: var(--tb-yellow); color: var(--tb-dark); font-weight: 600; font-size: 14px; line-height: 1.2; transition: background .3s;}
.tb-card__arrow {display: inline-block; margin-left: .35rem; transition: transform .3s;}
.tb-card:hover .tb-card__more {background: #F5CF00;}
.tb-card:hover .tb-card__arrow {transform: translateX(4px);}

/* Пагинация */
.tb-pager {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 3rem 0 0;}
.tb-pager__list {display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none;}
.tb-pager__num,
.tb-pager__nav,
.tb-pager__gap {display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid #D5DADD; background: #fff; color: var(--tb-dark) !important; font-weight: 600; font-size: 15px; line-height: 1;}
.tb-pager__nav {gap: .4rem; padding: 0 18px;}
.tb-pager__gap {border-color: transparent; min-width: 24px; padding: 0 4px; color: var(--tb-gray) !important;}
a.tb-pager__num:hover,
a.tb-pager__nav:hover {border-color: var(--tb-yellow); background: var(--tb-yellow); color: var(--tb-dark) !important;}
.tb-pager__num.is-current {border-color: var(--tb-dark); background: var(--tb-dark); color: #fff !important;}
.tb-pager__nav.is-disabled {color: #A9B0B4 !important; border-color: #E6EAEC; cursor: default;}

@media (max-width: 767.98px) {
	.tb-blog__title {font-size: 34px; line-height: 1.2;}
	.tb-blog__intro {font-size: 16px;}
	.tb-blog__head {margin-bottom: 1.75rem;}
}
@media (max-width: 575.98px) {
	.tb-card__body {padding: 18px 18px 20px;}
	.tb-card__title {font-size: 18px;}
	.tb-pager {gap: 8px;}
	.tb-pager__list {order: -1; width: 100%;}
	.tb-pager__nav {flex: 1 1 0;}
	.tb-pager__num, .tb-pager__nav {min-width: 40px; height: 42px;}
}

/* ---------- Статья блога ---------- */
.tb-article {max-width: 800px; margin: 0 auto; padding-bottom: 2rem; overflow-wrap: break-word;}
.tb-article .page-header h1 {font-size: 36px; line-height: 1.25; margin: .5rem 0 .75rem;}
.tb-article__meta {display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-bottom: 1.5rem; color: #656E73; font-size: 14px;}
.tb-article__back {color: #656E73; font-weight: 600;}
.tb-article__back:hover {color: #2B3033 !important;}
.tb-article .item-image,
.tb-article [itemprop="articleBody"] img {display: block; max-width: 100%; height: auto; margin: 0 auto 1.5rem;}
.tb-article .item-image img {display: block; width: 100%; max-height: 460px; object-fit: cover;}
.tb-article [itemprop="articleBody"] img {max-height: 520px; width: auto; object-fit: contain;}
.tb-article [itemprop="articleBody"] {font-size: 16px; line-height: 1.7;}
.tb-article [itemprop="articleBody"] h2 {font-size: 28px; line-height: 1.3; margin: 2rem 0 1rem;}
.tb-article [itemprop="articleBody"] h3 {font-size: 22px; line-height: 1.3; margin: 1.5rem 0 .75rem;}
.tb-article [itemprop="articleBody"] p,
.tb-article [itemprop="articleBody"] ul,
.tb-article [itemprop="articleBody"] ol {margin-bottom: 1rem;}
.tb-article [itemprop="articleBody"] a {color: #2B3033; border-bottom: 1px solid #FFDD2D;}
.tb-article [itemprop="articleBody"] table {display: block; max-width: 100%; overflow-x: auto;}
.tb-article__footer {margin-top: 2.5rem; padding-top: 1.5rem; border-top: 3px solid #EDEFF0;}
.tb-article__footer .tb-article__back {display: inline-block; padding: 12px 20px; background: #FFDD2D; color: #2B3033;}
.tb-article__footer .tb-article__back:hover {background: #F5CF00; color: #2B3033 !important;}
@media (max-width: 767.98px) {
	.tb-article .page-header h1 {font-size: 26px;}
	.tb-article [itemprop="articleBody"] h2 {font-size: 23px;}
	.tb-article [itemprop="articleBody"] h3 {font-size: 19px;}
}