/* /alarmy/: 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: wiersze sprawa / wyjaśnienie na antracycie */
.alarm-details__rows { border-top: 2px solid var(--alu-edge); max-width: 64rem; }
.alarm-details__row { display: grid; gap: var(--s-3); padding: var(--s-5) 0; border-bottom: 1px solid var(--on-ral-line); }
.alarm-details__title { font: 600 var(--h3) / 1.25 var(--font-text); color: var(--on-ral); }
.alarm-details__text p { margin: 0; color: var(--on-ral-2); max-width: 58ch; }
.alarm-details__text p + p { margin-top: var(--s-3); }
/* połączenie z kamerami: osobny panel z aluminium, nie czwarta sprawa */
.alarm-details__cameras {
	display: grid; gap: var(--s-3); justify-items: start; max-width: 64rem;
	padding: var(--s-6) var(--s-5); border-radius: var(--r-panel);
	background-color: var(--alu);
	background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 1px, transparent 1px 3px);
	box-shadow: 0 0 0 1px var(--alu-edge);
	color: var(--ink);
}
.alarm-details__more { margin-top: var(--s-7); max-width: 64rem; }
.alarm-details__cameras .alarm-details__title { color: var(--ink); }
.alarm-details__cameras p { margin: 0; color: var(--ink); max-width: 58ch; } /* AD D5: na aluminium --ink */
.fence .alarm-details__cameras .pill--outline { border-color: var(--ink); color: var(--ink); }
.fence .alarm-details__cameras .pill--outline:hover { background: var(--ink); border-color: var(--ink); color: var(--enamel); }
.fence .alarm-details__cameras :focus-visible { outline-color: var(--ink); }
.alarm-details__cameras .pill { margin-top: var(--s-2); }
.alarm-details__cameras .pill svg { transition: transform var(--d-fast) var(--ease-out); }
.alarm-details__cameras .pill:hover svg { transform: translateX(3px); }

@media (max-width: 599px) {
	.alarm-details__cameras .pill { width: 100%; white-space: normal; text-align: center; }
}
@media (min-width: 900px) {
	.alarm-details__row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-6); padding: var(--s-6) 0; align-items: baseline; }
	.alarm-details__cameras { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--s-6); align-items: baseline; padding: var(--s-6); }
	.alarm-details__cameras > p, .alarm-details__cameras > .pill { grid-column: 2; }
	.alarm-details__cameras > .alarm-details__title { grid-row: 1 / span 2; }
}

/* 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; }
}