/* Страница «Советы по выбору» (stati-mebel.html) - список статей карточками
   по макету moskal-article-cards. Шаблон dz_art_list.tpl.html, скрипт
   js/art-list.js. Раскладка - по ширине блока (container queries): рядом
   левая колонка сайта, ширина окна о месте ничего не говорит. */

.sa {
	--sa-ink: #12486b;
	--sa-text: #4c6374;
	--sa-muted: #718a9c;
	--sa-line: #dce7ef;
	--sa-accent: #086ca8;
	--sa-btn: #096fa9;
	container-type: inline-size;
	color: var(--sa-text);
	font: 14px/1.6 Arial, sans-serif;
	margin: 0 0 30px;
}
.sa *, .sa *::before, .sa *::after { box-sizing: border-box; }
.sa [hidden] { display: none !important; }
.sa a { color: var(--sa-accent); text-decoration: none; }
.sa a:hover { text-decoration: underline; }
.sa a:focus-visible, .sa button:focus-visible { outline: 3px solid #0873b5; outline-offset: 3px; }

.ct-head .ct-title.sa-h1 { color: #12486b; text-align: left; }
.sa-intro { margin: 4px 0 20px; max-width: 640px; font-size: 15px; }

/* темы */
.sa-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.sa-tab {
	font: inherit; font-size: 13px; line-height: 1.3; cursor: pointer;
	border: 1px solid var(--sa-line); background: #fff; color: #40647d;
	border-radius: 22px; padding: 8px 16px; margin: 0;
	transition: background .15s, color .15s, border-color .15s;
}
.sa-tab:hover { border-color: #9cc6e0; color: var(--sa-accent); }
.sa-tab[aria-pressed="true"] { background: var(--sa-btn); border-color: var(--sa-btn); color: #fff; }
.sa-tab__n { font-size: 11px; opacity: .65; margin-left: 2px; }

/* карточки */
.sa-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sa-tile {
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--sa-line); border-radius: 12px;
	transition: box-shadow .2s, transform .2s;
}
.sa-tile:hover { box-shadow: 0 10px 28px rgba(18, 72, 107, .12); transform: translateY(-2px); }
.sa-tile__media { display: block; height: 170px; background: #eaf3f9; overflow: hidden; }
.sa-tile__media:hover { text-decoration: none; }
.sa-tile__cover { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.sa-tile:hover .sa-tile__cover { transform: scale(1.03); }
.sa-tile__graphic { display: flex; align-items: center; justify-content: center; gap: 14px; height: 100%; }
.sa-tile__graphic span {
	width: 62px; height: 62px; border-radius: 8px; background: #d4b99b;
	transform: rotate(-8deg); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .3);
}
.sa-tile__graphic span:nth-child(2) { background: #647f79; transform: rotate(5deg); }
.sa-tile__graphic span:nth-child(3) { background: #aebdca; transform: rotate(-3deg); }
.sa-tile__copy { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 17px; }
.sa-tile__label { font-size: 10px; line-height: 1.3; text-transform: uppercase; letter-spacing: 1.4px; color: #237cae; font-weight: 700; }
.sa .sa-tile__title { margin: 0; padding: 0; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--sa-ink); text-align: left; }
.sa .sa-tile__title a { color: var(--sa-ink); }
.sa-tile__desc { margin: 0; font-size: 13px; line-height: 1.6; }
.sa .sa-tile__read { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; }

.sa-empty { padding: 24px; background: #fff; border: 1px solid var(--sa-line); border-radius: 10px; color: #45677f; }
.sa-cards + .sa-empty { margin-top: 0; }

.sa-more-wrap { text-align: center; }
.sa-more {
	font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
	margin: 24px 0 0; padding: 11px 26px; border-radius: 22px;
	border: 1px solid var(--sa-btn); background: #fff; color: var(--sa-btn);
}
.sa-more:hover { background: var(--sa-btn); color: #fff; }

/* призыв в каталог */
.sa-foot {
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	margin-top: 28px; padding: 22px 0; border-top: 1px solid var(--sa-line); font-size: 14px;
}
.sa .sa-foot__btn {
	flex: none; display: inline-block; background: var(--sa-btn); color: #fff;
	border-radius: 7px; padding: 11px 18px; font-weight: 700; font-size: 13px;
}
.sa .sa-foot__btn:hover { background: #075b8b; text-decoration: none; }

@container (max-width: 760px) {
	.sa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.sa-tile__media { height: 150px; }
	.sa-tile__copy { padding: 14px; }
}
@container (max-width: 560px) {
	.sa-foot { flex-direction: column; align-items: flex-start; }
}
@container (max-width: 440px) {
	.sa-cards { grid-template-columns: 1fr; }
	.sa-tile__media { height: 190px; }
	.sa-tabs { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 2px 16px 6px 0; scrollbar-width: none; }
	.sa-tabs::-webkit-scrollbar { display: none; }
	.sa-tab { flex: none; }
}