/* ==========================================================================
   plate_projects — Projekt-Detailseite (Backend-Layout `project_detail`).

   Gescoped auf `.plp-detail` (das Partial rendert innerhalb des Page-Templates,
   nicht innerhalb eines CE-Frames). Wie im Block-CSS gilt:
     - KEINE Container-Breite / kein Seiten-Padding (das liefert das Page-Layout),
     - KEINE Heading-Typo (font-family/font-size an h1–h6),
     - Farben ausschliesslich über `--bs-*`.
   ========================================================================== */

.plp-detail {
  --plp-detail-muted: rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.68);
  --plp-detail-border: 1px solid rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.14);
  container-type: inline-size;
}

/* Vertikaler Rhythmus der Detailseite. Bewusst NUR padding-block: die
   Inhaltsbreite kommt ausschliesslich vom generischen `.frame-container` des
   Page-Templates (siehe Kommentar in Page/ProjectDetail.html). Ein max-width
   oder Seiten-Padding an dieser Stelle wuerde eine zweite Breitenquelle
   aufmachen und die Seite gegenueber den CEs verspringen lassen. */
.plp-detail-frame > .frame-container > .frame-inner {
  padding-block: clamp(2rem, 5vw, 4rem);
}

/* ---------- Kopf: FALLBACK, nicht Regelfall ----------------------------------
   Rendert ausschliesslich, wenn der Aufrufer `showHead=1` uebergibt — also auf
   Installationen OHNE eigenen Theme-Seitenkopf. Wo ein Theme seinen Kopf selbst
   liefert (`showHead=0`), existiert dieses Markup gar nicht; die Regeln hier
   duerfen deshalb NIE gegen einen Theme-Kopf arbeiten.
   Er ist bewusst KEIN randabfallender Medien-Hero — dafuer gibt es den
   generischen Vertrag `pl-pagehero` (EXT:plate_partials/.../Organisms/PageHero) —,
   sondern ein Kopf INNERHALB der Inhaltsbreite:
     - KEINE eigene Inhaltsbreite / kein Seiten-Padding (zweite Breitenquelle);
       die Box liefert das Wurzel-Element als Nachbildung des .frame-container,
     - KEINE Heading-Typo (font-family/-size an h*) — die gehoert dem Theme bzw.
       den plate_bootstrap-Settings-Slots (h1-font-size …).
   ---------------------------------------------------------------------------- */
.plp-detail__head {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 1.75rem;
}
@container (min-width: 52rem) {
  .plp-detail__head { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}

.plp-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.6rem;
}
.plp-detail__chip {
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1.4;
  border: var(--plp-detail-border);
  border-radius: 999px;
}
.plp-detail__meta {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--plp-detail-muted);
}
/* Bewusst OHNE font-size/font-family. */
.plp-detail__title { margin: 0 0 0.5rem; }
.plp-detail__subtitle {
  margin: 0 0 0.75rem;
  max-width: 60ch;
  color: var(--plp-detail-muted);
}
.plp-detail__client {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin: 0;
  font-size: 0.92rem;
}
.plp-detail__client-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--plp-detail-muted);
}

.plp-detail__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

.plp-detail__teaser {
  max-width: 66ch;
  font-size: 1.05rem;
}
.plp-detail__description {
  max-width: 72ch;
}
.plp-detail__description > :last-child { margin-bottom: 0; }

.plp-detail__gallery {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.plp-detail__gallery-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 0.375rem;
}

.plp-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.75rem 0 0;
  padding-block-start: 1rem;
  border-block-start: var(--plp-detail-border);
}