/*
 * wt-families.css — Website Templates family-composition + integration CSS (Agent F).
 *
 * Complements templates-web.css (Agent A, the base primitives + family layout
 * hooks .wt-container/.wt-section/.wt-grid-cards/.wt-layout-sidebar/.wt-aside/
 * .wt-showcase-row). This partial adds ONLY:
 *   - the family wrapper wtRenderFamily() emits (.wt-family, --wt-section-pad),
 *   - the sidebar aside panels ("Talk to us" card) it composes,
 *   - the components the integration loaders emit (coverage map, quote-form
 *     embed wrapper, enquiry/contact form).
 * Per-block visuals (hero/about/services/fleet/testimonials/showcase/cta) live
 * in the block agents' partials (wt-blocks-home.css / wt-blocks-inner.css).
 *
 * 100% token-driven (--wt-*), no per-skin rules, responsive. No build step.
 */

/* ── Family wrapper ──────────────────────────────────────────────────────── */

.wt-family { display: block; }

/* Showcase family: give the alternating body bands a subtle alt background so
 * the zig-zag reads as banded — but never over the self-styled bands (hero has
 * its own hero bg, quote/cta their own coloured bands). */
[data-wt-family="showcase"] > section[data-wt-block]:nth-of-type(even):not([data-wt-block="hero"]):not([data-wt-block="quote"]):not([data-wt-block="cta"]) {
  background: var(--wt-alt-bg);
  color: var(--wt-alt-text, inherit);
}

/* ── Sidebar family composition (main column + sticky aside) ─────────────── */

.wt-sidebar-main > * + * { margin-top: calc(var(--wt-section-pad, 44px) * 0.5); }

.wt-aside { display: flex; flex-direction: column; gap: 20px; padding: 22px; }
.wt-aside__panel + .wt-aside__panel { border-top: 1px solid var(--wt-rule); padding-top: 18px; }

.wt-talk__title {
  font: var(--wt-heading-weight, 700) 15px/1.2 var(--wt-font-head);
  color: var(--wt-ink);
  margin: 0 0 12px;
  letter-spacing: var(--wt-heading-tracking, 0);
}
.wt-talk__row {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wt-body-text);
  text-decoration: none;
  margin-bottom: 7px;
}
a.wt-talk__row:hover { color: var(--wt-primary); }
.wt-talk__addr { color: var(--wt-mute-text); }

/* Aside-placed quote embed reads as a compact card, not a full band. */
[data-wt-family="sidebar"] .wt-aside .wt-quote-embed { padding: 0; }
[data-wt-family="sidebar"] .wt-aside .wt-quote-band { padding: 0; background: none; color: inherit; }

/* ── Coverage map (wtIntgCoverageMap) ────────────────────────────────────── */

.wt-coverage { display: grid; gap: 18px; }
[data-wt-family="grid"] .wt-coverage,
[data-wt-family="sidebar"] .wt-coverage { grid-template-columns: 1fr; }

.wt-coverage__map {
  position: relative;
  width: 100%;
  min-height: 300px;
  border-radius: var(--wt-radius-lg);
  overflow: hidden;
  border: var(--wt-card-border);
  box-shadow: var(--wt-card-shadow);
}
.wt-coverage__map--placeholder {
  background:
    repeating-linear-gradient(0deg, var(--wt-rule) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, var(--wt-rule) 0 1px, transparent 1px 44px),
    var(--wt-alt-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wt-coverage__pin {
  width: 18px; height: 18px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--wt-primary);
  box-shadow: 0 0 0 6px var(--wt-primary-tint);
}
.wt-coverage__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Quote-form embed wrapper (wtIntgQuoteForm) ──────────────────────────── */

.wt-quote-embed { display: block; }
.wt-quote-embed--hero {
  margin-top: 18px;
  background: var(--wt-surface);
  border-radius: var(--wt-radius-lg);
  box-shadow: var(--wt-card-shadow);
  border: var(--wt-card-border);
  padding: 18px;
}
.wt-quote-embed__cta { margin-top: 4px; }
/* Keep the legacy quote-form markup fluid inside the skinned wrapper. */
.wt-quote-embed table { width: 100%; border-collapse: collapse; }
.wt-quote-embed input,
.wt-quote-embed select,
.wt-quote-embed textarea { max-width: 100%; }

/* ── Enquiry / contact form (wtIntgContactForm) ──────────────────────────── */

.wt-contact-form { display: flex; flex-direction: column; gap: 14px; }
.wt-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.wt-field { display: flex; flex-direction: column; gap: 6px; }
.wt-field__label {
  font: 700 12px/1 var(--wt-font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wt-mute-text);
}
.wt-field__input {
  font: 400 15px/1.4 var(--wt-font-body);
  color: var(--wt-ink);
  background: var(--wt-surface);
  border: 1px solid var(--wt-rule);
  border-radius: var(--wt-radius);
  padding: 11px 13px;
  width: 100%;
}
.wt-field__input:focus {
  outline: none;
  border-color: var(--wt-primary);
  box-shadow: 0 0 0 3px var(--wt-primary-tint);
}
.wt-field__input--area { resize: vertical; min-height: 96px; }
.wt-contact-form__submit { align-self: flex-start; margin-top: 2px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .wt-contact-form__row { grid-template-columns: 1fr; }
  .wt-coverage__map { min-height: 220px; }
}