/* Artizy, direction F "Atelier": project archive (projets.html) and single
   project (projet.html). Loaded after site.css. Page layout only: az-archive,
   az-others, az-projhead, az-lead, az-story, az-gallery. Shared parts come from
   site.css: az-pagehead, az-filter, az-project (--small, --end), az-projects,
   az-meta, az-tbc, az-linklist, az-contact. */

/* ---------- Archive: one photo entry (az-project, 4:3) in three columns ----------
   The stagger lives on the items, not on columns, so a Loop Grid with any
   number of posts keeps it: the 2nd and 3rd item of each row sit lower.
   Each column moves as a block, so rows never collide. */
.az-archive { padding-block: var(--s-4) var(--s-6); }

.az-archive__grid {
  --stagger: var(--s-5);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  align-items: start;
  padding-bottom: calc(2 * var(--stagger));
}
.az-archive__grid > :nth-child(3n+2) { translate: 0 var(--stagger); }
.az-archive__grid > :nth-child(3n+3) { translate: 0 calc(2 * var(--stagger)); }

/* ---------- Projects without a usable photo: a hairline list (az-linklist) ---------- */
.az-others { padding-bottom: var(--s-7); }
.az-others__title {
  margin-bottom: var(--s-3);
  font-size: var(--t-xl);
  line-height: 1.2;
}
.az-others__link { gap: var(--s-3); padding-block: 0.6rem; }
.az-others__name { line-height: 1.3; }
.az-others__place {
  margin-left: auto;
  font-family: var(--f-sans);
  font-size: var(--t-small);
  color: var(--c-ink-soft);
  text-align: right;
}
.az-others__link:hover .az-others__name {
  text-decoration: underline;
  text-decoration-color: var(--c-clay);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* ---------- Single project: head ---------- */
.az-projhead { padding-block: var(--s-5) var(--s-5); }

.az-projhead__back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--t-small);
}

.az-projhead__title {
  margin-top: var(--s-4);
  font-size: var(--t-3xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* ---------- az-lead: large lead photo framed on a sand plane ---------- */
.az-lead {
  display: grid;
  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: var(--s-5) auto var(--s-5);
  column-gap: var(--gap);
}

.az-lead__plane {
  grid-column: 8 / 15;
  grid-row: 1 / 3;
  background: var(--c-terra);
}

.az-lead__photo {
  grid-column: 2 / 13;
  grid-row: 2 / 4;
  position: relative;
}
.az-lead__photo img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 38%;
}

/* ---------- az-story: the need, the work, the result ---------- */
.az-story { padding-block: var(--s-7) var(--s-5); }

.az-story__part {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-2) var(--gap);
}
.az-story__part + .az-story__part { margin-top: var(--s-5); }

.az-story__title {
  grid-column: 1 / 5;
  font-size: var(--t-xl);
  line-height: 1.2;
  padding-top: 0.15rem;
}

.az-story__body {
  grid-column: 5 / 12;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.az-story__body p:first-child {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  line-height: 1.45;
}

/* ---------- az-gallery: project photos in uneven frames ---------- */
.az-gallery { padding-block: var(--s-5) var(--s-6); }

.az-gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-4) var(--gap);
}

.az-gallery__item { display: flex; flex-direction: column; gap: var(--s-2); }
.az-gallery__item img { object-fit: cover; }
.az-gallery__item--band { grid-column: 1 / 13; }
.az-gallery__item--band img { aspect-ratio: 21 / 8; object-position: 50% 4%; }
.az-gallery__item--tall { grid-column: 7 / 12; }
.az-gallery__item--tall img { aspect-ratio: 4 / 5; }

.az-gallery__note {
  grid-column: 7 / 12;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.3;
  color: var(--c-ink);
}

.az-gallery__caption {
  font-size: var(--t-small);
  color: var(--c-ink-soft);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .az-story__title,
  .az-story__body { grid-column: 1 / -1; }

  .az-gallery__item--tall { grid-column: 5 / 13; }
  .az-gallery__note { grid-column: 5 / 13; }
}

@media (max-width: 767px) {
  .az-archive { padding-top: var(--s-3); padding-bottom: var(--s-5); }
  .az-archive__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-bottom: 0; }
  .az-archive__grid > :nth-child(n) { translate: none; }
  .az-others { padding-bottom: var(--s-6); }
  .az-others__link { flex-wrap: wrap; row-gap: 0; }
  .az-others__name { flex: 1 1 100%; }
  .az-others__place { margin-left: 0; text-align: left; flex: 1; }

  .az-projhead { padding-block: var(--s-4) var(--s-4); }
  .az-projhead__title { margin-top: var(--s-3); font-size: 2.25rem; }

  .az-lead {
    display: block;
    padding-inline: var(--gutter);
  }
  .az-lead__plane { display: none; }
  .az-lead__photo img { aspect-ratio: 4 / 3; }

  .az-story { padding-block: var(--s-6) var(--s-4); }
  .az-story__part + .az-story__part { margin-top: var(--s-4); }

  .az-gallery { padding-block: var(--s-4) var(--s-5); }
  .az-gallery__grid { row-gap: var(--s-4); }
  .az-gallery__item--band img { aspect-ratio: 2 / 1; object-position: 50% 0; }
  .az-gallery__item--tall,
  .az-gallery__note { grid-column: 1 / -1; }
  .az-gallery__note { font-size: var(--t-lg); }
}