/* HH Cinar GmbH — Zusatz-CSS nur fuer die Projekt-Einzelseite (CPT "projekt").
   style.css bleibt unveraendert; diese Datei ueberschreibt gezielt zwei Regeln,
   damit Foto-Frames und Meta-Block der Referenzseite
   https://www.barrbuild.co.uk/projects/the-chapel entsprechen. */

/* Foto-Grid: feste Seitenverhaeltnisse statt freier Hoehe nach Bildgroesse.
   Hochformat-Duo-Zeilen 2:3, Querformat-Vollbreite-Zeilen 3:2. Zusaetzlich absolute
   Hoehe per max-height gedeckelt (statt volle Spaltenbreite auszufuellen) — Breite
   skaliert ueber das Seitenverhaeltnis automatisch mit, Bild bleibt in seiner
   Gitterspalte zentriert. Angelehnt an
   https://www.barrbuild.co.uk/projects/the-chapel (Seitenverhaeltnis) und
   https://www.barrbuild.co.uk/projects/wallingford-farmhouse (kompaktere, per
   Padding/Gap abgesetzte Kacheln). */
.project-photos--duo img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.project-photos:not(.project-photos--duo) img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Vertikaler Abstand zwischen aufeinanderfolgenden Foto-Zeilen (vorher 0). */
.project-photos:not(:first-child) {
  margin-top: clamp(24px, 5vw, 56px);
}

/* Meta-Block: gestapelte Zeilen statt 3-spaltiger Box, wie auf der Referenzseite. */
.project-meta {
  display: block;
  border: none;
  background: none;
  max-width: 75%;
}
.project-meta li {
  background: none;
  padding: 0;
  display: block;
  margin-bottom: 28px;
}
.project-meta li:last-child {
  margin-bottom: 0;
}
.project-meta .k {
  display: block;
  font-size: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--ink);
}
.project-meta .v {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
}

/* Beschreibungstext: gleiche Groesse wie die Meta-Werte (.project-meta .v = 15px,
   style.css Zeile 975), statt der groesseren clamp()-Schrift aus style.css Zeile 976.
   Breiter (75% statt 62ch), damit der Block nicht schon bei ~50% Breite umbricht. */
.project-lead {
  font-size: 15px;
  line-height: 1.7;
  max-width: 75%;
}

@media (max-width: 700px) {
  .project-meta,
  .project-lead {
    max-width: 100%;
  }
}