/* Local SEO page components (landing pages, blog). Deployed with every Local
   SEO publish and linked only from those pages, so a change here reaches live
   sites without re-rendering the core pages. Structure only — colour and type
   come from base.css tokens and the site's design.css. */

/* ── Side gutter ──────────────────────────────────────────────────────────────
   base.css zeroes .wrap padding inside a .section, and some design.css skins
   set .section { padding: x 0 }, which leaves landing sections touching the
   viewport edge. The inner column owns the gutter; the section never adds one,
   so it cannot double up on skins that do pad sections. */
.zt-page > .section { padding-inline: 0; }
.zt-page > .section > .wrap { padding-inline: var(--gutter, 1.25rem); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.zt-hero-inner {
  display: grid;
  gap: var(--s7, 2.5rem);
  align-items: center;
}
.zt-hero--media .zt-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

.zt-hero-copy h1 { margin: 0; }
.zt-hero-copy .zt-hero-sub {
  margin: var(--s3, 1rem) 0 0;
  max-width: 60ch;
  font-size: 1.125rem;
  line-height: 1.6;
}
.zt-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3, .75rem);
  margin-top: var(--s6, 1.75rem);
}

/* No image: one centred column. */
.zt-hero--plain .zt-hero-copy { max-width: 760px; margin-inline: auto; text-align: center; }
.zt-hero--plain .zt-hero-sub { margin-inline: auto; }
.zt-hero--plain .zt-hero-actions { justify-content: center; }

/* Any image size or shape lands in the same frame, so it never shifts the
   copy or the button. */
.zt-hero-media { margin: 0; }
.zt-hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius, 12px);
}

@media (max-width: 860px) {
  .zt-hero--media .zt-hero-inner { grid-template-columns: 1fr; gap: var(--s6, 1.75rem); }
  .zt-hero--media .zt-hero-copy { text-align: center; }
  .zt-hero--media .zt-hero-sub { margin-inline: auto; }
  .zt-hero--media .zt-hero-actions { justify-content: center; }
  .zt-hero-media img { aspect-ratio: 16 / 10; }
}

/* In-page anchor target sits clear of a sticky header. */
#lead-form { scroll-margin-top: 6rem; }

/* ── Breadcrumb bar — identical on blog posts and landing pages ───────────── */
.zt-breadcrumb-wrap { padding-block: var(--s6, 1.75rem) var(--s3, .75rem); }
.zt-breadcrumb-wrap .zt-breadcrumb { margin: 0; }
/* The first section follows the trail closely instead of opening with the
   skin's full section padding, which left a large empty band. */
.zt-breadcrumb-wrap + .zt-page > .section:first-child { padding-top: var(--s6, 2rem); }

/* ── Blog post — on the site's full page grid ────────────────────────────────
   base.css held the whole post (trail, title, image) in a centred 72ch column,
   so posts sat in the middle while landing pages and the header spanned the
   page. Now the article uses the full width and only the reading copy keeps a
   comfortable line length, left-aligned on the same edge. */
.zt-article { padding-block: var(--s5, 1.5rem) var(--s9, 5rem); }
.zt-article > .wrap { max-width: var(--maxw); }
.zt-article .zt-article-head { max-width: 960px; margin: 0 0 var(--s6, 2rem); }
.zt-article .zt-body-copy,
.zt-article .zt-back-link { max-width: 72ch; margin-left: 0; margin-right: 0; }
.zt-article .zt-body-copy p,
.zt-article .zt-body-copy li { line-height: 1.75; }

/* A featured image of any size fills the same frame. */
.zt-article .zt-article-image { margin: 0 0 var(--s7, 2.5rem); }
.zt-article .zt-article-image img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--radius, 12px);
}
@media (max-width: 860px) {
  .zt-article .zt-article-image img { aspect-ratio: 16 / 10; }
}

/* Header falls back to the agent's name when the logo is missing or broken. */
.zt-logo-text { font-weight: 700; font-size: 1.25rem; letter-spacing: .01em; line-height: 44px; color: inherit; white-space: nowrap; }

/* ── Landing page rhythm ─────────────────────────────────────────────────────
   Skins pad every .section heavily (6–8rem each side), which stacked into
   large empty bands between short landing sections. One consistent, tighter
   rhythm, still roomy on desktop. */
.zt-page > .section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.zt-page > .section .section-head { margin-bottom: var(--s6, 2rem); }

/* Text: one reading column — paragraphs, headings and lists the same width. */
.zt-rich-text .zt-body-copy { max-width: 72ch; }
.zt-rich-text .zt-body-copy h2:first-child { margin-top: 0; }
.zt-rich-text .zt-body-copy p,
.zt-rich-text .zt-body-copy li { line-height: 1.75; }
.zt-rich-text .zt-body-copy li::marker { color: var(--accent, currentColor); }

/* Image: any size lands in one frame, centred, caption beneath. */
.zt-image-section .zt-figure { max-width: 1040px; margin: 0 auto; }
.zt-image-section .zt-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius, 12px);
}
.zt-image-section figcaption { text-align: center; margin-top: var(--s3, .75rem); }

/* Gallery: even grid of same-shaped tiles, whatever the source sizes. */
.zt-gallery-section .zt-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s4, 1rem);
}
.zt-gallery-section .zt-gallery-item { margin: 0; }
.zt-gallery-section .zt-gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius, 12px);
  transition: transform .3s ease;
}
.zt-gallery-section .zt-gallery-item { overflow: hidden; border-radius: var(--radius, 12px); }
.zt-gallery-section .zt-gallery-item:hover img { transform: scale(1.03); }

/* FAQ: a contained list, not loose lines across the page. */
.zt-faq .wrap > .zt-faq-item,
.zt-faq .zt-faq-item { max-width: 820px; margin-inline: auto; }
.zt-faq .zt-faq-item {
  /* Tinted from the section's text colour, not --ground (ZEN-2609). */
  background: transparent;
  background: color-mix(in srgb, currentColor 4%, transparent);
  border: 1px solid var(--line, #e6e6e6);
  border-color: color-mix(in srgb, currentColor 15%, transparent);
  border-radius: var(--radius, 12px);
  padding: 0;
  margin-bottom: var(--s3, .75rem);
}
.zt-faq .zt-faq-question { padding: var(--s4, 1.1rem) var(--s5, 1.4rem); font-size: 1.05rem; }
.zt-faq .zt-faq-question::after { color: var(--accent, currentColor); font-size: 1.3rem; line-height: 1; }
.zt-faq .zt-faq-answer { padding: 0 var(--s5, 1.4rem) var(--s4, 1.1rem); }
.zt-faq .zt-faq-answer p { margin: 0; line-height: 1.7; }
.zt-faq .zt-faq-item[open] { border-color: var(--accent, #999); }

/* Lead form: the page's call to action, so it sits in its own tinted panel. */
.zt-lead-section > .wrap {
  max-width: 760px;
  background: var(--tint-warm, #f6f1ec);
  border-radius: var(--radius-lg, 20px);
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3rem);
}
.zt-lead-section .section-head p { margin: var(--s2, .5rem) auto 0; max-width: 52ch; }
.zt-lead-section .zt-lead-form { max-width: none; }
.zt-lead-section .zt-lead-form .btn { align-self: stretch; padding-block: .9rem; }
@media (min-width: 640px) {
  /* Name and email side by side, phone and message full width. */
  .zt-lead-section .zt-lead-form { display: grid; grid-template-columns: 1fr 1fr; }
  .zt-lead-section .zt-lead-form > .zt-field:nth-of-type(n+3),
  .zt-lead-section .zt-lead-form > .btn,
  .zt-lead-section .zt-lead-form > .zt-hp { grid-column: 1 / -1; }
}

/* Categories on a post — plain labels under the byline. */
.zt-post-categories { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; padding: 0; }
.zt-post-category { font-size: .8rem; line-height: 1; padding: .35rem .7rem; border: 1px solid currentColor; border-radius: 999px; opacity: .8; }

/* Trail and back links take the text colour, underlined: the site's accent
   (often a light gold) on white failed contrast at 2:1. */
.zt-breadcrumb { opacity: 1; }
.zt-breadcrumb a,
.zt-back-link a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.zt-breadcrumb-sep,
.zt-breadcrumb [aria-current="page"] { opacity: .75; }