/* === ЭТАП 2, Блок 3.5: стили архивов категорий ===
   Дополняет page-flexible-content.css недостающими классами:
   - .stl2-card__visual--image (фоновая картинка вместо иконки)
   - .stl2-video-text-grid (блок видео + интро-текст)
   - .stl2-faq* (FAQ-аккордеон)
   - .stl2-section__head (заголовок секции + ссылка справа, для "Наши работы")
   - .stl2-link-arrow
*/

/* --- card__visual--image: фото вместо цветного icon-плейсхолдера --- */
.stl2-card__visual--image {
	height: 150px;
	background-size: cover;
	background-position: center;
	background-color: #f0f0f0;
}
.stl2-cardgrid--grid-3 .stl2-card__visual--image {
	height: 180px;
}

/* --- Наши работы: переиспользует .stl2-case-card из portfolio.css.
   portfolio.css подключается только на странице Портфолио (is_page(10620)),
   поэтому здесь (как и в single-common.php) минимально дублируем нужные
   стили, чтобы не тянуть архивы в зависимость от чужой страницы. ---------- */
.stl2-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stl2-case-card { background: #fff; border: 1px solid var(--stl2-border); border-radius: 10px; overflow: hidden; transition: box-shadow .2s; }
.stl2-case-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.stl2-case-card__img {
	display: flex; height: 180px; background: var(--stl2-dark) center/cover no-repeat; border-radius: 10px 10px 0 0;
	align-items: center; justify-content: center; color: rgba(255,255,255,.3); font-size: 36px;
}
.stl2-case-card__body { padding: 18px 20px; }
.stl2-case-card__date {
	font-size: 12px; color: #9CA3AF; font-weight: 400; font-family: Montserrat, sans-serif; margin-bottom: 8px;
}
.stl2-case-card__title {
	display: block; font-size: 16px; font-weight: 700; color: var(--stl2-dark); line-height: 1.35;
	margin-bottom: 10px; font-family: Montserrat, sans-serif; text-decoration: none;
}
.stl2-case-card__title:hover { color: var(--stl2-brand); }
.stl2-case-card__excerpt { font-size: 13px !important; color: var(--stl2-text-muted); line-height: 1.55; }
.stl2-case-card__more {
	display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--stl2-brand);
	text-decoration: underline; font-family: Montserrat, sans-serif;
}
@media (max-width: 900px) {
	.stl2-case-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.stl2-case-grid { grid-template-columns: 1fr; }
}

/* --- Видео + интро-текст --- */
.stl2-video-text-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}
.stl2-video-wrap {
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

/* --- FAQ-аккордеон --- */
.stl2-faq-item {
	border-bottom: 1px solid #e5e7eb;
}
.stl2-faq-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	padding: 20px 0;
	gap: 16px;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
}
.stl2-faq-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #F34423;
	font-size: 13px;
	transition: transform .2s;
}
.stl2-faq-answer {
	padding: 0 0 20px;
	font-size: 14px;
	color: #6b7280;
	line-height: 1.6;
	font-family: Montserrat, sans-serif;
	max-width: 760px;
}

/* --- Заголовок секции + ссылка справа ("Наши работы" + "Все работы →") --- */
.stl2-section__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 32px;
}
.stl2-section__head .stl2-h2 {
	margin: 0;
}
.stl2-link-arrow {
	font-size: 14px;
	font-weight: 600;
	color: #F34423;
	text-decoration: none;
	font-family: Montserrat, sans-serif;
	white-space: nowrap;
}
.stl2-link-arrow:hover {
	color: #D63516;
}

@media (max-width: 900px) {
	.stl2-video-text-grid { grid-template-columns: 1fr; }
}