/* wide.css — wider comic layout for the service pages (loaded after each page's own <style>).
   Keeps the comic cards (cream panels, black borders, drop shadows) in ONE column, just wider,
   and fills the sides with the homepage's green comic-dot pattern instead of flat black.
   Layout only: no wording, colours or fonts change. Mobile-first. */

/* Sides of the page: the green Ben-Day dot field from the homepage contact section. */
body {
  background-color: #2E7D32;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.22) 1px, transparent 0);
  background-size: 14px 14px;
}

/* One wider column of comic cards. */
.wrap { max-width: 1200px; }

/* Comfortable reading length for body text inside the wider cards. */
main.wrap p, main.wrap li, main.wrap dd, main.wrap .lede { max-width: 75ch; }

/* Cards and plans: 1 column on phones, 2–3 on wider screens. */
.grid, .plans { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid, .plans { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  /* Exactly 2 or 4 cards: keep them in even pairs (no orphan card on its own row). */
  .grid:has(> :nth-child(4):last-child), .grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  .panel { padding: 2rem 2.2rem; }
  /* Form fields stay full width on phones; on desktop they stop at a comfortable width. */
  main.wrap .field { max-width: 760px; }
}

/* Tap targets: at least 44px tall for buttons, fields and the small links in the bars and footer. */
.cta, .callbtn { min-height: 44px; }
.bookbar a, .site-footer a { display: inline-block; min-height: 44px; line-height: 44px; }
.site-footer p { margin: .2rem 0; }
input, select, textarea { min-height: 44px; }

/* Never scroll sideways on a phone. */
html, body { max-width: 100%; overflow-x: hidden; }