/* Guide pages written in batch 3 (cost, council, storm, laws, hiring). Uses the site's own CSS variables. */

/* Portrait job photos: keep the whole picture but stop it filling the 760 px column. */
.a-prose figure.w3-portrait { max-width: 360px; }
.a-prose figure.w3-portrait img { width: 100%; height: auto; }

/* Two photos side by side (stack on phones). */
.a-prose .w3-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 30px 0; }
.a-prose .w3-pair figure { margin: 0; }
.a-prose .w3-pair img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.a-prose .w3-pair .w3-top img { object-position: center 28%; }

/* Let the article grid shrink so a wide table scrolls inside its wrapper instead of widening the page. */
.a-article > * { min-width: 0; }
.a-tablewrap { max-width: 100%; }

/* Phone and contact lines in a table cell stay on one line. */
.a-table .w3-nowrap { white-space: nowrap; }

/* Hint shown only on phones, above tables that scroll sideways. */
.w3-swipe { display: none; }
.a-prose p.w3-swipe { margin: 0 0 6px; font: 600 12.5px/1.3 var(--sans); color: var(--mu); letter-spacing: .02em; }

/* Wide tables (3 or 4 columns): scroll inside the table wrapper on phones instead of squashing. */
@media (max-width: 700px) {
  .a-table.w3-wide { min-width: 560px; }
  .a-prose p.w3-swipe { display: block; }
  .a-prose .w3-pair { grid-template-columns: 1fr; }
  .a-prose figure.w3-portrait { max-width: 100%; }
}