/* Блог: лента, архивы, статья и страница «Meet Our Staff».
   Карточка ленты и статья повторяют строение образца
   (wilsusedautosalesllc.com/blog), палитра — монохром этого сайта. */

/* ---------- баннер над лентой/архивом/статьёй ----------
   Шапка донора прозрачная и лежит поверх картинки хиро — на белом фоне
   ленты её не видно, поэтому вверху страницы блога всегда есть тёмный
   баннер (та же картинка, что на «О компании»), а не просто отступ. */
.tsc-blog-hero {
	position: relative;
	overflow: hidden;
	padding: 168px 24px 64px;
	text-align: center;
	background-color: #111;
	background-image: url("../img/DSC05414-24-2-858724.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.tsc-blog-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: #000;
	opacity: .55;
	pointer-events: none;
}
.tsc-blog-hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.tsc-blog-hero-eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
}
.tsc-blog-hero-title {
	margin: 0;
	font-size: 48px;
	line-height: 1.1;
	font-weight: 700;
	color: #fff;
}

/* Баннер статьи: фоном служит её обложка, подпись прижата влево —
   бейдж рубрики, дата, заголовок. */
.tsc-blog-hero-post {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 520px;
	padding: 200px 24px 56px;
	text-align: left;
}
.tsc-blog-hero-post .tsc-blog-hero-overlay {
	opacity: 1;
	background-color: transparent;
	background-image: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .68) 30%, rgba(0, 0, 0, .4) 65%, rgba(0, 0, 0, .45) 100%);
}
.tsc-blog-hero-post .tsc-blog-hero-inner { max-width: 1180px; }
.tsc-blog-hero-post .tsc-post-date { margin-top: 16px; }
.tsc-blog-hero-post .tsc-blog-hero-title {
	margin-top: 8px;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .6px;
	text-transform: uppercase;
}

.tsc-blog {
	max-width: 1180px;
	margin: 0 auto;
	padding: 56px 24px 96px;
	color: #111827;
}

.tsc-blog-intro { max-width: 760px; margin: 0 0 40px; font-size: 18px; line-height: 1.7; color: #333; }
.tsc-blog-intro p { margin: 0 0 12px; }
.tsc-blog-empty { font-size: 18px; color: #555; }

/* ---------- лента: карточки-обложки в одну колонку ---------- */
.tsc-blog-list {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.tsc-post-card {
	position: relative;
	display: block;
	height: 320px;
	border-radius: var(--border-radius, 8px);
	overflow: hidden;
	background-color: #111;
	text-decoration: none;
}
.tsc-post-cover {
	position: absolute;
	inset: 0;
	background-color: #1a1a1a;
	background-position: center;
	background-size: cover;
	transition: transform .5s ease;
}
.tsc-post-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .15) 100%);
}
.tsc-post-card:hover .tsc-post-cover { transform: scale(1.04); }

.tsc-post-badge {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 22px 0 0 22px;
	padding: 7px 14px 6px;
	border-radius: 4px;
	background-color: #111;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}
.tsc-post-meta {
	position: absolute;
	z-index: 2;
	left: 22px;
	right: 22px;
	bottom: 24px;
}
.tsc-post-date {
	font-size: 14px;
	letter-spacing: .6px;
	color: rgba(255, 255, 255, .85);
}
.tsc-post-title {
	margin: 8px 0 0;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #fff;
}

/* ---------- постраничная навигация ---------- */
.tsc-blog-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}
.tsc-blog-pagination .page-numbers {
	min-width: 40px;
	padding: 9px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #272727;
	text-decoration: none;
}
.tsc-blog-pagination .page-numbers:hover { border-color: #272727; }
.tsc-blog-pagination .page-numbers.current { background: #272727; border-color: #272727; color: #fff; }
.tsc-blog-pagination .page-numbers.dots { border-color: transparent; }

/* ---------- статья и страница команды ---------- */
.tsc-single {
	max-width: 1180px;
	margin: 0 auto;
	padding: 56px 24px 96px;
}
.tsc-single-body {
	max-width: 820px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.85;
	letter-spacing: .2px;
	color: #444;
}
.tsc-single-body > * { margin: 0 0 18px; }
.tsc-single-body h2,
.tsc-single-body h3 {
	margin: 34px 0 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #111;
}
.tsc-single-body h2 { font-size: 22px; }
.tsc-single-body h3 { font-size: 18px; }
.tsc-single-body p { margin: 0 0 18px; }
.tsc-single-body ul,
.tsc-single-body ol { margin: 0 0 18px; padding-left: 22px; }
.tsc-single-body li { margin-bottom: 8px; }
.tsc-single-body a { color: #111; text-decoration: underline; }
.tsc-single-body img { max-width: 100%; height: auto; border-radius: var(--border-radius, 8px); }
.tsc-single-body figure { margin: 28px 0; }
.tsc-single-body figcaption { margin-top: 8px; font-size: 14px; color: #6b7280; }
.tsc-single-body blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid #111;
	font-size: 19px;
	font-style: italic;
	color: #111827;
}

/* Подпись в конце статьи: адрес, награда, слоган. */
.tsc-post-signoff {
	margin: 40px 0 0;
	padding: 28px 24px;
	border: 1px solid #e5e7eb;
	border-radius: var(--border-radius, 8px);
	background: #fafafa;
	text-align: center;
}
.tsc-post-signoff p { margin: 0; }
.tsc-signoff-name {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #111;
}
.tsc-signoff-address { margin-top: 8px !important; font-size: 15px; line-height: 1.6; color: #6b7280; }
.tsc-signoff-award {
	margin-top: 16px !important;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .4px;
	color: #111;
}
.tsc-signoff-tagline { margin-top: 10px !important; font-size: 14px; font-style: italic; color: #6b7280; }

.tsc-single-back { max-width: 820px; margin: 30px auto 0; }
.tsc-blog-btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, .15);
	background-color: rgba(0, 0, 0, .03);
	color: #111;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
}
.tsc-blog-btn:hover { background-color: rgba(0, 0, 0, .07); color: #111; }

/* ---------- блок команды ----------
   Ставится прямо в текст статьи: <div class="tsc-team"> и по одной
   <figure class="tsc-team-member"> на человека. Фотографии квадратные,
   под снимком имя, под именем должность. */
.tsc-team {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 40px 0;
}
/* .tsc-single-body figure задаёт свои отступы — перебиваем весом селектора */
.tsc-team .tsc-team-member { margin: 0; text-align: center; }
.tsc-team-photo {
	aspect-ratio: 1 / 1;
	margin-bottom: 14px;
	border-radius: var(--border-radius, 8px);
	overflow: hidden;
	background: #f3f4f6;
}
.tsc-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.tsc-team-name {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #111827;
}
.tsc-team-role {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: #6b7280;
}

/* ---------- галерея под текстом статьи ----------
   Ставится прямо в текст: <div class="tsc-post-gallery"> и по одной
   <figure class="tsc-gallery-item"> на снимок. На десктопе — ряд карточек
   одной высоты, на мобильных — карусель со свайпом и прилипанием. */
.tsc-post-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 40px 0;
}
/* .tsc-single-body figure задаёт свои отступы — перебиваем весом селектора */
.tsc-post-gallery .tsc-gallery-item {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--border-radius, 8px);
	overflow: hidden;
	background: #f3f4f6;
}
.tsc-post-gallery .tsc-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

@media (max-width: 900px) {
	.tsc-blog-hero-title { font-size: 36px; }
	.tsc-blog-hero-post .tsc-blog-hero-title { font-size: 26px; }
	.tsc-post-card { height: 260px; }
	.tsc-post-title { font-size: 22px; }
}

@media (max-width: 780px) {
	.tsc-team { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 640px) {
	.tsc-blog-hero { padding: 200px 16px 48px; }
	.tsc-blog-hero-post { padding: 200px 16px 40px; }
	.tsc-blog-hero-post .tsc-blog-hero-title { font-size: 22px; }
	.tsc-blog,
	.tsc-single { padding: 40px 16px 64px; }
	.tsc-post-card { height: 230px; }
	.tsc-post-title { font-size: 20px; }
	.tsc-single-body { font-size: 16px; }
}

/* Карусель: полоса со свайпом, соседний снимок выглядывает справа —
   так видно, что галерею можно листать. */
@media (max-width: 780px) {
	.tsc-post-gallery {
		display: flex;
		gap: 12px;
		margin: 32px 0;
		padding-bottom: 4px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.tsc-post-gallery::-webkit-scrollbar { display: none; }
	.tsc-post-gallery .tsc-gallery-item {
		flex: 0 0 86%;
		scroll-snap-align: center;
	}
}

@media (max-width: 640px) {
	.tsc-team { gap: 16px; margin: 32px 0; }
	.tsc-team-name { font-size: 15px; }
	.tsc-team-role { font-size: 13px; }
}

@media (max-width: 360px) {
	.tsc-team { grid-template-columns: 1fr; }
}