/* Page blocks (views/blocks/). Loaded only on pages built from blocks that
   need it (usesBlockStyles in src/blocks/render.js), so no other page pays
   for it.

   Mobile first. Settings choose between the named variants below and never
   carry CSS of their own: the only inline style a block emits is a photo's
   focal point, which comes from the photo, not the block.

   Every block is a flow-root: on the service pages the body wraps around a
   floated sidebar, and a block that starts its own formatting context sits
   beside the float at the width that is left, instead of sliding under it. */

.blk {
  display: flow-root;
  margin: 0 0 var(--space-10);
}

.blk__heading {
  margin: 0 0 var(--space-5);
}

/* ── Banner ─────────────────────────────────────────────────────────────── */

.blk-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--neutral-wood);
  color: var(--white, #fff);
  min-height: 260px;
}
.blk-hero--short { min-height: 200px; }
.blk-hero--tall { min-height: 360px; }

/* The photo fills the frame whatever its shape; the frame's height comes from
   the chosen height and the text, never from the photo. */
.blk-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blk-hero__body {
  position: relative;
  padding: var(--space-8) var(--space-6);
}
.blk-hero--dark .blk-hero__body {
  background: linear-gradient(to top, rgba(26, 30, 82, 0.88), rgba(26, 30, 82, 0.35) 70%, rgba(26, 30, 82, 0));
}
.blk-hero--light { color: var(--neutral-wood); background: var(--neutral-paper); }
.blk-hero--light .blk-hero__body {
  background: linear-gradient(to top, rgba(248, 250, 254, 0.94), rgba(248, 250, 254, 0.5) 70%, rgba(248, 250, 254, 0));
}
.blk-hero--none .blk-hero__body { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.blk-hero--no-image { color: var(--white, #fff); }
.blk-hero--no-image.blk-hero--light { color: var(--neutral-wood); }

.blk-hero__heading {
  margin: 0 0 var(--space-3);
  color: inherit;
}
.blk-hero__sub p {
  margin: 0 0 var(--space-4);
  max-width: 34em;
}

@media (min-width: 640px) {
  .blk-hero { min-height: 320px; }
  .blk-hero--short { min-height: 240px; }
  .blk-hero--tall { min-height: 460px; }
  .blk-hero__body { padding: var(--space-10); }
}

/* ── Text with photo ────────────────────────────────────────────────────── */

.blk-text-image {
  display: grid;
  gap: var(--space-6);
}
.blk-text-image__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.blk-text-image__text > :first-child { margin-top: 0; }

@media (min-width: 640px) {
  .blk-text-image { align-items: start; gap: var(--space-8); }
  .blk-text-image--narrow { grid-template-columns: 1fr 2fr; }
  .blk-text-image--wide { grid-template-columns: 1fr 1fr; }
  .blk-text-image--right.blk-text-image--narrow { grid-template-columns: 2fr 1fr; }
  .blk-text-image--right .blk-text-image__media { order: 2; }
  .blk-text-image--no-image { grid-template-columns: 1fr; }
}

/* ── Gallery ────────────────────────────────────────────────────────────── */

.blk-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.blk-gallery__item { margin: 0; }
.blk-gallery__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.blk-gallery__link { display: block; }
.blk-gallery__item figcaption {
  font-size: 0.875rem;
  opacity: 0.75;
  margin-top: var(--space-2);
}

@media (min-width: 640px) {
  .blk-gallery--cols-3 .blk-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blk-gallery--cols-4 .blk-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .blk-gallery__grid { gap: var(--space-4); }
}

/* ── Before and after (the pair itself uses .before-after) ──────────────── */

.blk-before-after__figure { margin: 0; }
.blk-before-after__caption {
  margin-top: var(--space-3);
  font-size: 0.9375rem;
}
.blk-before-after__caption a { color: var(--primary); }

/* ── Call to action ─────────────────────────────────────────────────────── */

.blk-cta {
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  text-align: center;
}
.blk-cta--primary { background: var(--primary); color: var(--white, #fff); }
.blk-cta--primary .blk-cta__heading { color: inherit; }
.blk-cta--light { background: var(--neutral-paper); border: 1px solid var(--border); }
.blk-cta__heading { margin: 0 0 var(--space-3); }
.blk-cta__text p { margin: 0 auto var(--space-5); max-width: 36em; }
.blk-cta--primary .blk-cta__text { opacity: 0.85; }

/* ── Questions and answers: the site's own .faq-list styling ─────────────── */

/* ── Steps ──────────────────────────────────────────────────────────────── */

.blk-steps__list {
  list-style: none;
  counter-reset: blk-step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
.blk-steps__item {
  counter-increment: blk-step;
  position: relative;
  padding-left: 3.25rem;
}
.blk-steps__item::before {
  content: counter(blk-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white, #fff);
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blk-steps__title { margin: 0.2rem 0 var(--space-2); }
.blk-steps__item p { margin: 0 0 var(--space-2); }

/* ── Testimonial ────────────────────────────────────────────────────────── */

.blk-testimonial__figure {
  margin: 0;
  padding: var(--space-6);
  border-left: 4px solid var(--secondary);
  background: var(--neutral-paper);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.blk-testimonial__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--space-4);
}
.blk-testimonial__quote { margin: 0; font-size: 1.0625rem; }
.blk-testimonial__quote p { margin: 0 0 var(--space-3); }
.blk-testimonial__who { font-weight: 600; font-size: 0.9375rem; }

/* ── Service grid ───────────────────────────────────────────────────────── */

.blk-services__grid {
  display: grid;
  gap: var(--space-5);
}
.blk-services__item {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.blk-services__icon { color: var(--primary); margin-bottom: var(--space-3); }
.blk-services__title { margin: 0 0 var(--space-2); }
.blk-services__title a { color: inherit; text-decoration: none; }
.blk-services__title a:hover { text-decoration: underline; }
.blk-services__item p { margin: 0; font-size: 0.9375rem; }

@media (min-width: 640px) {
  .blk-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Trust and credentials ──────────────────────────────────────────────── */

.blk-trust__list {
  list-style: none;
  margin: 0;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-5);
  background: var(--neutral-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.blk-trust__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.blk-trust__icon { flex: none; color: var(--primary); }
.blk-trust__title { margin: 0 0 var(--space-1); font-weight: 600; }
.blk-trust__title a { color: inherit; text-decoration: none; }
.blk-trust__title a:hover { text-decoration: underline; }
.blk-trust__text { margin: 0; font-size: 0.9375rem; opacity: 0.8; }

@media (min-width: 640px) {
  .blk-trust__list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* ── Key facts strip ────────────────────────────────────────────────────── */

.blk-facts {
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  text-align: center;
}
.blk-facts--light { background: var(--neutral-paper); border: 1px solid var(--border); }
.blk-facts--primary { background: var(--primary); color: var(--white, #fff); }
.blk-facts--primary .blk__heading { color: inherit; }
.blk-facts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
.blk-facts__figure {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--primary);
}
.blk-facts--primary .blk-facts__figure { color: inherit; }
.blk-facts__label { display: block; margin-top: var(--space-1); font-size: 0.9375rem; opacity: 0.85; }

@media (min-width: 640px) {
  .blk-facts__list { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}

/* ── Quick quote form: the site's own form fields (components.css) in a card ── */

.blk-quote {
  padding: var(--space-6) var(--space-5);
  background: var(--neutral-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.blk-quote__text p { margin: 0 0 var(--space-5); max-width: 40em; }
.blk-quote__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.blk-quote__row { display: grid; column-gap: var(--space-4); }
.blk-quote__note { margin: var(--space-3) 0 0; font-size: 0.875rem; opacity: 0.8; }

@media (min-width: 640px) {
  .blk-quote { padding: var(--space-8); }
  .blk-quote__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Recent jobs and recent posts ───────────────────────────────────────── */

.blk-feed__grid {
  display: grid;
  gap: var(--space-5);
}
.blk-feed__card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white, #fff);
}
.blk-feed__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.blk-feed__title {
  font-size: 1.0625rem;
  margin: var(--space-4) var(--space-4) var(--space-1);
}
.blk-feed__title a { color: inherit; text-decoration: none; }
.blk-feed__title a:hover { text-decoration: underline; }
.blk-feed__meta {
  margin: 0 var(--space-4) var(--space-4);
  font-size: 0.875rem;
  opacity: 0.75;
}
.blk-feed__list { margin: 0; padding-left: 1.2em; }
.blk-feed__list li { margin-bottom: var(--space-2); }

@media (min-width: 640px) {
  .blk-feed__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Nearby areas ───────────────────────────────────────────────────────── */

.blk-nearby__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--space-2) var(--space-5);
}
.blk-nearby__list a {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  color: var(--primary);
  text-decoration: none;
}
.blk-nearby__list a:hover { text-decoration: underline; }

/* ── Price guide ────────────────────────────────────────────────────────── */

.blk-prices__wrap { overflow-x: auto; }
.blk-prices__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.blk-prices__table th,
.blk-prices__table td {
  text-align: left;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.blk-prices__table thead th {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  font-weight: 600;
}
.blk-prices__table tbody th { font-weight: 600; }
.blk-prices__price { white-space: nowrap; font-weight: 600; color: var(--primary); }
.blk-prices__disclaimer { margin: var(--space-3) 0 0; font-size: 0.875rem; opacity: 0.75; }

/* ── On town pages: blocks added between the template's own sections sit in
   the site's section and container, like everything else on the page. ─── */

.blk-section .blk:last-child { margin-bottom: 0; }
/* The section before already leaves room below itself; a full top padding as
   well would open a gap twice the site's rhythm between two sections. */
.blk-section { padding-top: var(--space-4); }

/* ── Space ──────────────────────────────────────────────────────────────── */

.blk-spacer { margin: 0; height: var(--space-8); }
.blk-spacer--small { height: var(--space-4); }
.blk-spacer--large { height: var(--space-16); }

/* ── Preview only: the editor's click-to-select outlines. The live site never
   has .blk-preview elements, so none of this ever applies there. ─────────── */

.blk-preview {
  position: relative;
  outline: 2px solid transparent;
  outline-offset: 4px;
  border-radius: 2px;
  cursor: pointer;
  transition: outline-color 0.1s;
}
.blk-preview:empty {
  min-height: 2.5rem;
  background: repeating-linear-gradient(45deg, rgba(45, 49, 124, 0.04) 0 8px, transparent 8px 16px);
}
.blk-preview--hidden { min-height: 2rem; opacity: 0.6; }
.blk-preview:hover { outline-color: rgba(45, 49, 124, 0.35); }
.blk-preview.is-selected { outline-color: var(--primary); }
.blk-preview:hover::before,
.blk-preview.is-selected::before {
  content: attr(data-block-label);
  position: absolute;
  top: -1.6rem;
  left: 0;
  z-index: 5;
  font: 600 0.75rem/1 var(--font-body);
  padding: 0.3rem 0.5rem;
  border-radius: 3px;
  background: var(--primary);
  color: #fff;
  pointer-events: none;
}