/* /domofony/: tylko układ tej strony. Tokeny z main.css. */

/* dla jakiego domu: nagłówek obok listy sytuacji */
.fit .section-head { margin-bottom: 0; }
.fit__list { gap: var(--s-5); }
.fit__list li::before { top: 0.45em; }
.fit__title { font: 600 var(--h3) / 1.25 var(--font-text); }
.fit__text { margin: var(--s-2) 0 0; color: var(--ink-2); max-width: 52ch; }

/* konkrety: droga od furtki do domu, tabliczki emaliowane na antracycie */
.route .section-head { margin-bottom: 0; }
.route__split { display: grid; gap: var(--s-6); }
.route__upgrade { padding-top: var(--s-5); border-top: 1px solid var(--on-ral-line); max-width: 46ch; }
.route__upgrade-title { font: 600 var(--h3) / 1.25 var(--font-text); margin-bottom: var(--s-3); }
.route__upgrade p { color: var(--on-ral-2); margin-bottom: var(--s-3); }
.route__link { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; font-weight: 600; color: var(--on-ral); }
.route__link svg { flex: none; transition: transform var(--d-fast) var(--ease-out); }
.route__link:hover svg { transform: translateX(3px); }

.route__list { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--alu-edge); }
.route__stop { display: grid; gap: var(--s-3); padding: var(--s-5) 0; border-bottom: 1px solid var(--on-ral-line); }
.route__stop dt { margin: 0; }
.route__stop dd { margin: 0; color: var(--on-ral-2); max-width: 52ch; }

@media (min-width: 600px) {
	.route__stop { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-5); align-items: baseline; }
	.route__stop .plate { min-width: 100%; text-align: center; }
}
@media (min-width: 900px) {
	.route__split {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-areas: "head list" "upgrade list";
		column-gap: var(--s-8); row-gap: var(--s-7); align-items: start;
	}
	.route__split > .section-head { grid-area: head; }
	.route__list { grid-area: list; }
	.route__upgrade { grid-area: upgrade; }
}

/* powiązane usługi: trzecia karta na całą szerokość zamiast dziury w siatce (od 1100 px trzy w rzędzie daje main.css) */
@media (min-width: 700px) and (max-width: 1099px) {
	#powiazane .alu-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}