/* Виды ремонта на странице ремонта квартир: общий блок вариантов A и B.
   Компьютер — шесть фотоплиток в ряд; планшет и телефон — лента со свайпом. */
.repair-types-head { margin-bottom: 24px; }
.repair-types-kicker { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sec); }
.repair-types-lead { margin: 12px 0 0; max-width: 640px; font-size: 18px; line-height: 1.5; color: var(--main); opacity: .75; }

.repair-types-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.repair-types-item { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 18px; background: var(--main); isolation: isolate; }
.repair-types-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.repair-types-item::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .78) 100%); }
.repair-types-caption { position: absolute; inset: auto 0 0; z-index: 2; padding: 16px; color: #fff; }
.repair-types-name { display: block; margin: 0 0 6px; font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: #fff; }
.repair-types-sub { display: block; margin: 0; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .82); }
@media (hover: hover) { .repair-types-item:hover .repair-types-photo { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .repair-types-photo { transition: none; } }

.repair-types-tile { all: unset; position: absolute; inset: 0; z-index: 2; display: block; cursor: pointer; box-sizing: border-box; border-radius: 18px; text-align: left; }
.repair-types-tile:focus-visible { outline: 2px solid var(--sec); outline-offset: -3px; }
.repair-types-plus { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #111; font-size: 20px; line-height: 1; transition: transform .2s ease; }
.repair-types-tile[aria-expanded="true"] .repair-types-plus { transform: rotate(45deg); }
.repair-types-tile[aria-expanded="true"] { box-shadow: inset 0 0 0 3px var(--sec); }
.repair-types-panels { margin-top: 12px; }
.repair-types-panel { padding: 20px 24px; border-radius: 18px; background: rgba(0, 0, 0, .05); }
.repair-types-panel h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.repair-types-panel p { margin: 0 0 12px; max-width: 760px; font-size: 15px; line-height: 1.6; }
.repair-types-panel a { font-size: 15px; font-weight: 600; color: inherit; text-decoration: underline; }
.repair-page .repair-types-panel { background: var(--repair-soft); }
.repair-page .repair-types-panel p { color: var(--repair-muted); font-size: 14px; }
.repair-page .repair-types-panel a { color: var(--repair-accent); }
@media (prefers-reduced-motion: reduce) { .repair-types-plus { transition: none; } }

/* Вариант A: отступы и заголовок в масштабе страницы. */
#single-services .repair-types:not(.repair-section) { padding: 48px 0 24px; }
#single-services .repair-types:not(.repair-section) .block-title { margin-bottom: 0; }
#single-services .repair-types:not(.repair-section) .repair-types-kicker { color: var(--main); opacity: .6; }

/* Вариант B: тёплая палитра и типографика новой страницы. */
.repair-page .repair-types-head { margin-bottom: 22px; }
.repair-page .repair-types-kicker { color: var(--repair-accent); }
.repair-page .repair-types-lead { font-size: 15px; opacity: 1; }
.repair-page .repair-types-item { background: var(--repair-soft); }

/* Планшет и телефон: лента, следующая плитка выглядывает справа. */
@media (max-width: 1099px) {
	.repair-types-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; }
	.repair-types-grid::-webkit-scrollbar { display: none; }
	.repair-types-item { flex: 0 0 30%; scroll-snap-align: start; }
	#single-services .repair-types:not(.repair-section) { padding: 32px 0 12px; }
}
@media (max-width: 699px) {
	.repair-types-item { flex-basis: 64%; aspect-ratio: 4 / 5; }
	.repair-types-lead { font-size: 15px; }
	.repair-types-caption { padding: 14px; }
}