/**
 × projects_working_groups v1.13 × updated 2026-09-02 ×
 × created 2026-08-11 × raimundo p. solar ×
 **/


/* --------------------------------------------------
   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 {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(12rem, 1fr)
    );

  gap:
    var(--breche-s);

  width: 100%;
}


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

  min-width: 0;

  overflow: hidden;

  opacity:
    0.9;

  transition:
    opacity
    300ms
    ease-out;
}


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

  display: block;

  width: 100%;
}


.pwg-single__canids
.canid-item img {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio:
    16 / 9;

  object-fit: cover;
}


.pwg-single__canids
.canid-item:hover,
.pwg-single__canids
.canid-item:focus-within {
  z-index: 2;

  opacity: 1;
}


.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);

  text-align: left;

  opacity: 0;

  transform:
    translateY(50px);

  pointer-events: none;

  transition:
    opacity
      300ms
      ease-out,
    transform
      300ms
      ease-out;
}


.pwg-single__canids
.canid-item:hover
.canid-tooltip,

.pwg-single__canids
.canid-link:focus-visible
.canid-tooltip {
  opacity: 1;

  transform:
    translateY(0);
}


/* --------------------------------------------------
   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 {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(9rem, 1fr)
      );

    gap:
      var(--breche-s);
  }


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