/* Gasmaster v8 additions (2026-09-28): the area directory that replaces the plain town-link
   lists, the pieces used by the converted town / service / legal pages, and the areas-page rows.
   Built only from the v7 design tokens in gm.css. */

/* ---------- area directory (was .towns: plain two-column link lists) ---------- */
.adir { display: grid; gap: 14px; margin-top: var(--s-3); }
.adir__group { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 22px; border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
@media (min-width: 900px) { .adir__group { grid-template-columns: 240px 1fr; gap: 28px; padding: 26px 28px; align-items: start; } }
.adir__head { display: flex; align-items: center; gap: 14px; }
@media (min-width: 900px) { .adir__head { flex-direction: column; align-items: flex-start; gap: 10px; position: sticky; top: 110px; } }
.adir__pin { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--hot); color: #1a0700; box-shadow: var(--shadow-flame); }
.adir__pin .ic { width: 22px; height: 22px; }
.adir__head h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0; line-height: 1.15; }
.adir__count { display: inline-block; font-size: 0.8rem; font-weight: 600; color: var(--flame-700); background: var(--flame-100); border-radius: 999px; padding: 4px 10px; }
.adir__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.adir__list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 0.975rem; line-height: 1.2; transition: border-color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.adir__list a .ic { width: 16px; height: 16px; flex: none; color: var(--flame-600); opacity: 0.45; transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.adir__list a:hover, .adir__list a:focus-visible { border-color: var(--flame-500); background: var(--paper-2); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.adir__list a:hover .ic, .adir__list a:focus-visible .ic { opacity: 1; transform: translateX(3px); }
.adir__list a.is-home { background: var(--navy-950); border-color: var(--navy-950); color: var(--white); }
.adir__list a.is-home .ic { color: var(--flame-300); opacity: 1; }
.adir__list a.is-here { border-style: dashed; color: var(--ink-soft); pointer-events: none; }
.adir__note { grid-column: 1 / -1; margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.sec--dark .adir__group { background: rgba(255,255,255,0.04); border-color: var(--white-12); box-shadow: none; }
.sec--dark .adir__head h3 { color: var(--white); }
.sec--dark .adir__list a { background: var(--white-06); border-color: var(--white-12); color: var(--white); }

/* ---------- areas page: town rows become cards with two clear actions ---------- */
.town-rows { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)) !important; gap: 12px !important; }
.town-rows li { display: flex; flex-direction: column; align-items: stretch !important; gap: 12px; padding: 18px 18px 16px !important; border-radius: var(--r-lg) !important; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: border-color 180ms var(--ease), transform 180ms var(--ease); }
.town-rows li:hover { border-color: var(--flame-400); transform: translateY(-2px); }
.town-rows strong { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; color: var(--ink); }
.town-rows strong::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--flame-500); box-shadow: 0 0 0 5px var(--flame-100); flex: none; }
.town-rows span { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
.town-rows a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; white-space: nowrap; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink) !important; font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; text-decoration: none; text-align: center; transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease); }
.town-rows a:first-child { background: var(--flame-100); border-color: var(--flame-300); }
.town-rows a:hover { background: var(--hot); border-color: transparent; color: #1a0700 !important; }

/* ---------- area chips (suburbs / villages covered) ---------- */
.achips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.achip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); font-size: 0.9rem; font-weight: 500; line-height: 1.2; }
.achip .ic { width: 15px; height: 15px; color: var(--flame-600); flex: none; }
a.achip { text-decoration: none; font-weight: 600; transition: border-color 160ms var(--ease), transform 160ms var(--ease); }
a.achip:hover { border-color: var(--flame-500); transform: translateY(-1px); }
.sec--dark .achip, .hero .achip { background: var(--white-06); border-color: var(--white-12); color: var(--white); }
.sec--dark .achip .ic { color: var(--flame-300); }
.card .achips { margin-top: 12px; }
.area-cards .card { padding-bottom: 22px; }

/* ---------- pieces used by converted pages ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.split__side > * + * { margin-top: 18px; }
.split__side .card { height: auto; }
.split > div > .prose + .checks, .split > div > .checks + .prose, .split > div > .prose + .cards, .split > div > .cards + .prose,
.container > .prose + .checks, .container > .checks + .prose, .container > .cards + .pull, .container > .pull, .split > div > .pull { margin-top: 20px; }
.split > div > .eyebrow + .h2 { margin-top: 8px; }
.split > div > .h2 + .prose, .split > div > .h2 + .checks { margin-top: 16px; }
.container > .sec__head + .cards, .container > .sec__head + .checks, .container > .sec__head + .achips, .container > .sec__head + .brands, .container > .sec__head + .quotes, .container > .sec__head + .steps2, .container > .sec__head + .prose, .container > .sec__head + .tbl, .container > .sec__head + .price-table { margin-top: var(--s-4); }
.hero__alt { margin-top: 14px; font-size: 0.95rem; }
.hero__alt .text-link { color: var(--white); }
.split--strip { align-items: start; }
@media (min-width: 900px) { .split--strip { grid-template-columns: 1.3fr 1fr; } }
.split--strip .stats { margin-bottom: 0; }
.faq-sub { margin: 26px 0 12px; font-size: 1.15rem; }
.faq-sub:first-child { margin-top: 0; }
.brands--logos .brand-chip { display: inline-flex; align-items: center; padding: 10px 18px; background: var(--paper-2); }
.brands--logos img { height: 34px; width: auto; display: block; }
.card .btn { align-self: flex-start; }
.pkg.pkg--hot .btn { width: 100%; justify-content: center; }
.split__side .pkg { max-width: 460px; }
.price-table + .price-table { margin-top: 12px; }

/* legal pages: one readable column */
.legal-doc { max-width: 780px; }
.legal-doc .prose h2 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 2.2rem 0 0.8rem; letter-spacing: -0.02em; }
.legal-doc .prose h3 { font-size: 1.1rem; margin: 1.6rem 0 0.5rem; }
.legal-doc > .prose:first-child h2:first-child { margin-top: 0; }
.legal-doc .checks { margin: 14px 0; }
.legal-doc .tbl { margin: 18px 0; overflow-x: auto; }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
.legal-doc th, .legal-doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-doc th { font-family: var(--font-display); background: var(--paper); }

/* converted-page fixes after the first visual pass */
.split--strip .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--strip .stat strong { font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.15; }
.card .checks { gap: 6px; margin-top: 12px; }
.card .checks li { background: none; border: 0; padding: 4px 0; font-size: 0.95rem; }
.sec--dark .card .checks li { background: none; }
.sec__head > .rating { display: inline-flex; margin-bottom: 14px; }
.sec__head > .rating + .eyebrow { display: flex; }

/* article pages: the quick-answer box was styled for dark sections (white text) but sits on the
   white article body, so the text was nearly invisible — give it its own dark panel */
.pst-art .qa { background: linear-gradient(160deg, var(--navy-800), var(--navy-950)); border-color: transparent; box-shadow: var(--shadow-2); }
.pst-art .qa p, .pst-art .qa .qa__text { color: #eef1fb; }
.pst-art .qa a { color: var(--flame-300); }
.pst-links { margin-top: 28px; }
.pst-links .linkgrid { margin-top: 12px; }