/* Métier template (20 trade pages). Loaded after site.css.
   Page layout only: az-collage (three photos on a sand plane under the page
   head), az-services, az-family. Shared parts come from site.css: az-crumbs,
   az-pagehead, az-statement, az-projects, az-trades, az-faq, az-cta-band. */

/* ---------- Collage: three framed photos on a sand plane ----------
   Wide 3:2, tall 4:5 stepped down, small 3:4 at the top. Any three photos fit. */
.az-collage {
  display: grid;
  /* Same full-bleed columns as .az-hero: margin, 12 container columns, margin */
  grid-template-columns:
    minmax(calc(var(--gutter) - var(--gap)), 1fr)
    repeat(12, minmax(0, calc((var(--container) - 11 * var(--gap)) / 12)))
    minmax(calc(var(--gutter) - var(--gap)), 1fr);
  grid-template-rows: auto var(--s-5);
  column-gap: var(--gap);
}
.az-collage__plane {
  grid-column: 7 / -1;
  grid-row: 1 / 3;
  margin-top: var(--s-6);
  background: var(--c-terra);
}
.az-collage__photo {
  grid-row: 1;
  align-self: start;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--radius);
}
.az-collage__photo img { width: 100%; object-fit: cover; }
.az-collage__photo--wide { grid-column: 2 / 9; }
.az-collage__photo--wide img { aspect-ratio: 3 / 2; }
.az-collage__photo--tall { grid-column: 9 / 12; margin-top: var(--s-6); }
.az-collage__photo--tall img { aspect-ratio: 4 / 5; }
.az-collage__photo--small { grid-column: 12 / 14; margin-top: var(--s-3); }
.az-collage__photo--small img { aspect-ratio: 3 / 4; }
.az-collage__img--hands { object-position: 48% 50%; }

/* ---------- Services: a short list, name and one sentence ---------- */
.az-services { padding-block: var(--s-5) var(--s-6); }

.az-services__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-4) var(--gap);
  align-items: start;
}
.az-services__intro { grid-column: 1 / 5; }
.az-services__lead { margin-top: var(--s-2); color: var(--c-ink-soft); }
.az-services__photo { width: 72%; margin-top: var(--s-5); }
.az-services__photo img { aspect-ratio: 4 / 5; object-fit: cover; }

.az-services__list {
  grid-column: 6 / 13;
  border-top: 1px solid var(--c-line);
}
.az-service {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s-1) var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.az-service__name {
  font-size: var(--t-lg);
  line-height: 1.25;
}
.az-service__text { color: var(--c-ink-soft); }

/* ---------- Family: where the trade sits in a full renovation (terra) ---------- */
.az-family {
  background: var(--c-terra);
  padding-block: var(--s-6);
}
.az-family__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-5) var(--gap);
  align-items: start;
}
.az-family__text { grid-column: 1 / 7; }
.az-family__lead { margin-top: var(--s-3); }

.az-family__quote { margin-top: var(--s-5); }
.az-family__quote-text { margin: 0; }
.az-family__quote-text p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.3;
  text-wrap: pretty;
}
.az-family__quote-name {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  font-weight: 500;
}

.az-family__trades { grid-column: 8 / 13; padding-top: 0.5rem; }
.az-family__all { display: inline-block; margin-top: var(--s-3); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .az-services__intro,
  .az-services__list,
  .az-family__text,
  .az-family__trades { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .az-collage {
    padding-inline: var(--gutter);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: var(--s-2);
  }
  .az-collage__plane { display: none; }
  .az-collage__photo--wide { grid-column: 1 / -1; grid-row: 1; }
  .az-collage__photo--tall,
  .az-collage__photo--small { grid-row: 2; margin-top: 0; }
  .az-collage__photo--tall { grid-column: 1; }
  .az-collage__photo--small { grid-column: 2; }
  .az-collage__photo--small img { aspect-ratio: 4 / 5; }

  .az-service { grid-template-columns: 1fr; }
  .az-services { padding-bottom: var(--s-4); }
  .az-services__photo { display: none; }
}

/* ---------- Signature motion: the collage settles on load ---------- */
@media (prefers-reduced-motion: no-preference) {
  .az-collage__photo img { animation: az-settle 1200ms var(--ease-out) both; }
  .az-collage__photo--wide img { animation-delay: 80ms; }
  .az-collage__photo--tall img { animation-delay: 260ms; }
  .az-collage__photo--small img { animation-delay: 440ms; }
}

/* Trade projects: keep the three-column rhythm when only one or two projects qualify */
@media (min-width: 961px) {
  .az-projects__grid--trade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}