/**
 × projects_working_groups_css v2.17 × updated 2026-10-07 ×
 × created 2026-08-11 × raimundo p. solar ×
 × Projects and Working Groups: archives and singles ×
 **/

/* --------------------------------------------------
   SHARED ARCHIVE
-------------------------------------------------- */

.pwg-index {
  padding-top: 0;
}


/* --------------------------------------------------
   SHARED SINGLE LAYOUT
-------------------------------------------------- */

.pwg-single__identity,
.pwg-single__content,
.pwg-single__visual {
  min-width: 0;
}


/* --------------------------------------------------
   LOGO
-------------------------------------------------- */

.pwg-single__media {
  width: 100%;

  margin:
    var(--breche-m)
    0
    0;

  aspect-ratio:
    16 / 9;

  overflow: hidden;

  background:
    #e2e2e2;
}


.pwg-single__media img,
.pwg-single__media-placeholder {
  display: block;

  width: 100%;
  height: 100%;
}


.pwg-single__media img {
  object-fit: cover;
}


.pwg-single__media.is-logo img {
  padding:
    var(--breche-s);

  object-fit: contain;
}


.pwg-single__media-placeholder {
  background:
    #e2e2e2;
}


/* --------------------------------------------------
   CANID PROFILES

   Same visual language as archive-canid:
   - responsive image grid
   - 16 / 9 cards
   - slightly muted at rest
   - name revealed over the image on hover / focus
-------------------------------------------------- */

.pwg-single__canids {
  /*
   * Grid of 16:9 tiles in the width of one card:
   * 1 canid = full card, 2–4 = 2 per row, 5–9 = 3 per
   * row. Same column gap as every 50-50 layout of the
   * site (.grid: --breche-l), rows as the Canids grid.
   */
  display: grid;

  grid-template-columns: minmax(0, 1fr);

  gap: var(--breche-m) var(--breche-l);

  width: 100%;
}

.pwg-single__canids:has(> :nth-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pwg-single__canids:has(> :nth-child(5)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


.pwg-single__canids
.canid-item {
  position: relative;

  min-width: 0;

  overflow: hidden;
}


.pwg-single__canids
.canid-link {
  position: relative;

  display: block;

  width: 100%;
}


.pwg-single__canids
.canid-item img:not(.missing-picture__art) {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 16 / 9;

  object-fit: cover;
}


/*
 * Full colour with the name always shown: the page is
 * about these canids, no need to hover to know which.
 * Clickable, no hover effect.
 */
.pwg-single__canids
.canid-tooltip {
  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  z-index: 2;

  padding:
    0
    12px
    2.5px;

  background:
    rgb(0 0 0 / 70%);

  color:
    var(--color-white);

  /* Canid names in the serif, as everywhere else. */
  font-family: var(--font-serif);

  text-align: left;

  pointer-events: none;
}

/* Wolf and text above the name band. */
.pwg-single__canids
.canid-link > .missing-picture {
  padding-bottom: 1.45rem;
}


/* --------------------------------------------------
   INTRODUCTION DETAILS
-------------------------------------------------- */

.pwg-single__coordinators {
  margin-bottom:
    0.2rem;
}


.pwg-single__website {
  margin-bottom: 0;
}


/* --------------------------------------------------
   PRESENTATION METADATA
-------------------------------------------------- */

.pwg-single__meta {
  margin-top:
    var(--breche-m);
}


.pwg-single__meta-row {
  display: grid;

  grid-template-columns:
    minmax(7rem, 0.32fr)
    minmax(0, 1fr);

  gap:
    var(--breche-s);

  padding:
    0.2rem
    0;

  border-top:
    0.9px
    solid
    var(--color-black);
}


.pwg-single__meta-row:last-child {
  border-bottom:
    0.9px
    solid
    var(--color-black);
}


.pwg-single__meta dt,
.pwg-single__meta dd {
  margin: 0;
}


/* --------------------------------------------------
   OBJECTIVES
-------------------------------------------------- */

.pwg-single__objectives-list li {
  padding:
    0
    0
    0.5rem;
}


.pwg-single__objectives-list li:last-child {
  padding-bottom: 0;
}


/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */

@media (max-width: 639px) {

  .pwg-single__media {
    margin-top:
      var(--breche-s);
  }


  .pwg-single__content {
    margin-top:
      var(--breche-m);
  }


  .pwg-single__canids {
    gap: 0.25rem;
  }


  .pwg-single__meta-row {
    grid-template-columns:
      1fr;
  }
}