/* Product examples: chip links, «Ещё» expander, example FAQ.
   Lives outside assets/ — build:theme wipes that directory. */

.usluga__variant-chip--hidden {
	display: none;
}

.usluga__variant-link {
	color: inherit;
	text-decoration: none;
	display: block;
}

.usluga__variant-chip--active {
	background: var(--color-blue-pale);
	outline: 1px solid var(--color-blue);
}

.usluga__variant-more-btn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* Example promo: rich-text body mirrors the static promo — the static
   markup puts each paragraph as a direct flex child of .usluga__promo-body
   (column, gap 20px); here they all sit inside one .usluga__promo-prose,
   so the prose wrapper reproduces that column+gap itself. Imageless
   examples let the body span the full row. */
.usluga__promo-prose {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.usluga__promo-prose p {
	font: var(--text-paragraph);
	color: var(--color-black);
	margin: 0;
}

.usluga__promo-prose ul {
	margin: 0;
	padding-left: var(--space-20);
	font: var(--text-paragraph);
	color: var(--color-black);
}

.usluga__promo-prose ul li {
	margin-bottom: var(--space-5);
}

.usluga__promo-prose ul li:last-child {
	margin-bottom: 0;
}

.usluga__promo--example:not(:has(.usluga__promo-photo)) .usluga__promo-body {
	max-width: none;
}

.example-faq__list {
	margin: 0;
	display: grid;
	gap: var(--space-20, 20px);
}

.example-faq__q {
	font: var(--text-h3, inherit);
	margin: 0 0 8px;
}

.example-faq__a {
	margin: 0;
	color: var(--color-gray);
}

/* Examples gallery: tile trigger buttons + hidden overflow tiles. */
.usluga__example-trigger {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.usluga__example--extra {
	display: none;
}

/* A real control now (owner fix 2026-09-17): it folds the rest of the gallery
   back open, so it has to take clicks and look like a button. */
.usluga__examples-more {
	cursor: pointer;
}