/* Section overrides.
 * Loads after style.css and palette.css.
 *
 * THE POINT OF THIS FILE: sections that read as sections.
 *
 * Two theme families were tried and rejected on the same complaint -- the
 * body ran together as one slab. It was never really a family problem.
 * A band tint at 94-96% of white, as most layouts ship,
 * is a 1.14:1 change nobody can see.
 * palette.css fixes the colour half. This file does the rest: a rule at
 * every tone change, a third surface to alternate against, real padding
 * rhythm, and pictures big enough to break the text up.
 */

/* ===================================================================== *
 *  1. BAND SEPARATION
 * ===================================================================== */

/* A third surface, so three consecutive bands can all differ. */
.band-sand-2 { background: var(--sand-2); }

/* A hairline at every change of tone. Cheap, and it does most of the work:
   the eye gets a hard edge even where two surfaces are close in value. */
.band + .band { border-top: 1px solid var(--line); }
.band-ink + .band,
.band + .band-ink,
.band-ink + .band-ink { border-top: 0; }

/* Rhythm. Uniform 76px padding on every band was half the reason the page
   read as one continuous column: same colour, same gap, no punctuation. */
.band { padding: 84px 0; }
.band-tight { padding: 44px 0; }
.band-ink { padding: 96px 0; }
.band-sand-2 { padding: 76px 0; }

/* Dark bands are the punctuation. Give the first heading inside one a
   little more air so the change of gear registers. */
.band-ink .head { margin-bottom: 34px; }

/* ===================================================================== *
 *  2. PICTURES
 *  Rejected builds put two images inside a 45% column, so each rendered at
 *  about a fifth of the page width.
 * ===================================================================== */
.shots { display: grid; gap: 22px; }
.split-media .shots,
.split .shots { grid-template-columns: 1fr; }   /* one per row in a column */

.band-showcase { padding: 0 0 84px; border-top: 0 !important; }
.shots-wide { grid-template-columns: repeat(2, 1fr); gap: 26px; }

.shot {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--white);
  box-shadow: 0 2px 4px rgba(13, 27, 43, .07),
              0 18px 42px rgba(13, 27, 43, .13);
}
.shot img { display: block; width: 100%; height: auto; object-fit: cover; }
.shots-wide .shot img { aspect-ratio: 16 / 10; }
.split .shot img { aspect-ratio: 4 / 3; }

.shot-cap {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
}
.shot-cap strong {
  align-self: flex-start;
  background: var(--ink); color: var(--white);
  padding: 4px 11px; border-radius: 3px;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
}
.shot-cap span { color: var(--muted); font-size: .94rem; }

@media (max-width: 800px) {
  .shots-wide { grid-template-columns: 1fr; }
}

/* ===================================================================== *
 *  3. BREADCRUMB
 *  Every site in this network has shipped a BreadcrumbList in its schema
 *  for months. None of them ever showed the reader one.
 * ===================================================================== */
.hero-crumbs {
  font-size: .86rem; letter-spacing: .02em;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 18px;
}
.hero-crumbs a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.hero-crumbs a:hover { color: var(--amber); text-decoration: underline; }

/* .split is align-items:center, which is right for an image beside text and
   wrong for two text columns of different heights -- on the contact page it
   dropped the right-hand column 177px below the left. */
.split-top { align-items: start; }
/* ===================================================================== *
 *  4. ODDS AND ENDS
 * ===================================================================== */
.head-more { margin: -10px 0 26px; }
.signalrow {
  display: flex; gap: 22px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.signalrow h3 { margin: 0 0 4px; }
.signalrow p { margin: 0; color: var(--muted); }
.band-ink .signalrow p { color: rgba(255, 255, 255, .8); }

.writeup { max-width: 68ch; }
.writeup h2 { margin: 30px 0 8px; }
.writeup p { margin: 0 0 12px; }

/* Footer contact links are inline text in an 18px line box; WCAG 2.2 AA
   (2.5.8) wants a 24px target. */
.foot-about a[href^="tel:"],
.foot-about a[href^="mailto:"] {
  display: inline-block; padding: 8px 0; min-height: 24px;
}

/* Contact form -- the theme has none. */
.eform p { margin: 0 0 16px; }
.eform label { display: block; margin-bottom: 6px; font-weight: 600;
               font-size: .92rem; }
.eform input, .eform select, .eform textarea {
  width: 100%; padding: 13px 14px;
  font: inherit; font-size: 1rem;      /* 16px, or iOS zooms on focus */
  color: var(--text); background: var(--white);
  border: 1px solid var(--line); border-radius: 3px;
}
.eform textarea { resize: vertical; min-height: 130px; }
.eform input:focus, .eform select:focus, .eform textarea:focus {
  outline: 2px solid var(--brick); outline-offset: 1px;
  border-color: var(--brick);
}
.eform small { color: var(--muted); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brick); outline-offset: 2px;
}
.band-ink a:focus-visible, .hero a:focus-visible, .closer a:focus-visible {
  outline-color: var(--amber);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===================================================================== *
 *  5. ACCENT TEXT ON THE SAND BANDS
 *
 *  --brick (#0e7490) is 5.36:1 on white, but only 4.00 on --sand and 3.14
 *  on --sand-2, so eyebrows and inline links failed on exactly the bands
 *  this palette added. --brick-d clears all three (8.09 / 6.05 / 4.74).
 *
 *  The :not() guard matters: without it this beats a button's own colour
 *  rule on specificity, which is precisely the bug that had to be fixed in
 *  all six theme-kit families.
 * ===================================================================== */
.band-sand .eyebrow,
.band-sand-2 .eyebrow,
.band-sand .card-more,
.band-sand-2 .card-more,
.band-sand a:not([class*="btn"]),
.band-sand-2 a:not([class*="btn"]) { color: var(--brick-d); }

/* ===================================================================== *
 *  6. TAP TARGETS
 *
 *  Footer links, "All services"-style links and utility links all render
 *  in a 23px line box -- one pixel under the 24px WCAG 2.2 AA minimum
 *  (2.5.8 Target Size Minimum). Padding, not font-size, so nothing reflows.
 *
 *  The card title links are deliberately NOT in this list: `.card-link` has
 *  a stretched `::after` covering the whole card, so its real target is the
 *  card, not the text.
 * ===================================================================== */
footer a,
.card-more,
.utility-in a {
  display: inline-block;
  padding-block: 4px;
  min-height: 24px;
}

/* Name and phone side by side; they are short fields and a single column of
   five full-width inputs makes the form look longer than it is. */
.eform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .eform-row { grid-template-columns: 1fr; } }


/* ==========================================================================
   PATTERN VARIANTS

   data.PATTERN of "a", "b" or "c" -> body class pat-a|b|c. Colour alone is
   not enough across a dozen sites on one family; these change the geometry.

     a  the reference layout
     b  centred section heads, pill buttons, softer band edges
     c  ruled section heads, square everything, tighter band rhythm
   ========================================================================== */

.pat-b .head-block { text-align: center; margin-left: auto; margin-right: auto; }
.pat-b .btn { border-radius: 999px; }
.pat-b .band { border-top: 0; }
.pat-b .band-sand + .band-sand-2 { border-top: 1px solid var(--line); }
.pat-b .card, .pat-b .marks-grid > div { text-align: center; }
.pat-b .marks-grid > div::before { left: 50%; transform: translateX(-50%); }
.pat-b .card-icon { margin-left: auto; margin-right: auto; }

.pat-c .head-block { border-left: 5px solid var(--brick); padding-left: 20px; }
.pat-c .btn, .pat-c .card, .pat-c .marks-grid > div,
.pat-c .shot img, .pat-c .split-media img { border-radius: 0; }
.pat-c .band { padding: 62px 0; }
.pat-c .band-ink { border-top: 5px solid var(--brick); }
.pat-c .card { border-left: 3px solid var(--line-2); }
.pat-c .card:hover { border-left-color: var(--brick); }

/* Pattern A is the reference geometry. These rules restate it explicitly
   rather than leaving it implicit: it documents what the variants vary
   FROM, and it means all three pattern classes are genuinely defined --
   check.py fails the build on a class no stylesheet defines, and exempting
   one would have hidden a real leak later. */
.pat-a { --pattern: "a"; }

/* --- service-area map (contact page) ------------------------------------ */
/* The iframe must never size its grid column. An iframe with intrinsic
   dimensions inside a grid track widens the track to fit, and on a phone that
   pushes the whole row off screen -- the same failure a 300px Turnstile widget
   caused in a form grid on another site in this portfolio. So: the wrapper owns
   the box via aspect-ratio, and the iframe is absolutely positioned inside it
   with min-width:0. */
.mapframe {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(127, 127, 127, .10);
}
.mapframe iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  display: block;
}
.mapnote {
  margin: 12px 0 0;
  font-size: .9rem;
  opacity: .8;
}
@media (max-width: 720px) {
  /* Taller than wide reads better on a phone, where the pin is what matters
     rather than the surrounding streets. */
  .mapframe { aspect-ratio: 1 / 1; }
}