/* /monitoring/: dla jakiego domu, karty urządzeń z markami, ile kamer, noc/prąd/internet, powiązane usługi.
   Części: parts/monitoring/*.php. Tokeny tylko z main.css. */

/* --- dla jakiego domu: lista sytuacji obok zdjęcia poglądowego --- */
.mon-homes__list { font-size: var(--text-lg); gap: var(--s-4); max-width: 40rem; }
.mon-homes__name { display: block; font-weight: 600; color: var(--ink); }
.mon-homes__list li { color: var(--ink-2); line-height: 1.45; }
.mon-homes__media { overflow: hidden; }
.mon-homes__media img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 35% 40%; }
@media (min-width: 900px) {
	.mon-homes__split { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
}

/* --- karty urządzeń: przy nieparzystej liczbie ostatnia karta zajmuje cały wiersz --- */
@media (min-width: 700px) {
	.mon-devices .alu-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* powiązane usługi: od 1100 px trzy karty w rzędzie robi main.css */
@media (min-width: 700px) and (max-width: 1099px) {
	.mon-related .alu-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.mon-devices .alu-card { grid-template-columns: 1fr; }
@media (min-width: 600px) {
	.mon-devices .alu-card:has(.alu-card__device) { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--s-5); }
	.mon-devices .alu-card:has(.alu-card__device) > :not(.alu-card__device) { grid-column: 2; }
	.mon-devices .alu-card__device { grid-row: 1 / span 3; }
}

/* --- marki: nazwy z jednym zdaniem, bez logotypów --- */
.mon-brands { margin-top: var(--s-7); }
.mon-brands__title { font: 600 var(--h3) / 1.25 var(--font-text); margin-bottom: var(--s-4); }
.mon-brands__list { display: grid; gap: var(--s-4) var(--s-5); margin: 0; }
@media (min-width: 700px) { .mon-brands__list { grid-template-columns: 1fr 1fr; } }
.mon-brands__item { border-top: 2px solid var(--ink); padding-top: var(--s-3); }
.mon-brands__item dt { font-weight: 600; font-size: var(--text-lg); }
.mon-brands__item dd { margin: var(--s-1) 0 0; color: var(--ink-2); max-width: 46ch; }
.mon-brands__link { margin: var(--s-5) 0 0; font-weight: 600; }
.mon-brands__link a { display: inline-block; padding-block: var(--s-2); }

/* --- jak dobieramy kamery i dysk: zasady obok listy miejsc na posesji --- */
.mon-sizing .section-head { margin-bottom: var(--s-5); }
.mon-sizing__p { max-width: 52ch; color: var(--ink-2); }
.mon-sizing__p:first-of-type { color: var(--ink); }
.mon-places { background: var(--enamel); border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); padding: var(--s-5); }
.mon-places__title { font: 600 var(--h3) / 1.25 var(--font-text); margin-bottom: var(--s-3); }
.mon-places__list { margin: 0; }
.mon-places__item { display: grid; gap: var(--s-1); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.mon-places__item dt { font-weight: 600; }
.mon-places__item dd { margin: 0; color: var(--ink-2); }
@media (min-width: 600px) {
	.mon-places { padding: var(--s-6); }
	.mon-places__item { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
}

/* --- noc, prąd, internet: pary pojęcie + wyjaśnienie na antracycie --- */
.mon-specs__list { display: grid; gap: var(--s-5) var(--s-7); margin: 0; }
@media (min-width: 700px) { .mon-specs__list { grid-template-columns: 1fr 1fr; } }
.mon-specs__item { border-top: 2px solid var(--on-ral-line); padding-top: var(--s-4); }
.mon-specs__item dt { font: 600 var(--h3) / 1.25 var(--font-text); color: var(--on-ral); }
.mon-specs__item dd { margin: var(--s-2) 0 0; color: var(--on-ral-2); max-width: 52ch; }

/* zdjęcie rejestratora pod listą „Noc, prąd i internet” */
.mon-specs__photo { margin-top: var(--s-7); max-width: 40rem; }