/*
 * Roca Professionals, the gallery of projects (wave 9.5b): the grid of /projects, the page of one project, and the block "Publication" in the
 * card of a sent project of the cabinet. Only tokens; the buttons, the facts, the lists and the status dot are the common ones.
 * The photo of a member carries no sign of Roca and no layer over it: the picture is shown as it is.
 */

/* ---- the grid: equal tiles 4:3, one column on a phone, two from 768, three from 1280 ---- */

.rp-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rp-sp-8) var(--rp-sp-6);
  margin: var(--rp-sp-8) 0 0;
  padding: 0;
  list-style: none;
}

.rp-gallery > li {
  min-width: 0;
}

.rp-gallery__tile {
  display: grid;
  align-content: start;
  gap: var(--rp-sp-1);
  color: var(--rp-text);
  text-decoration: none;
}

.rp-gallery__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--rp-sp-2);
  object-fit: cover;
  background: var(--rp-stone);
}

.rp-gallery__tile:hover .rp-gallery__title {
  text-decoration: underline;
}

.rp-gallery__tile:focus-visible {
  outline: none;
  box-shadow: var(--rp-focus);
}

/* The title takes two lines at most; a longer one is cut with an ellipsis. */
.rp-gallery__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--rp-fs-h4);
  font-weight: var(--rp-fw-regular);
  line-height: var(--rp-lh-snug);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rp-gallery__meta {
  color: var(--rp-text-tertiary);
  font-size: var(--rp-fs-small);
  line-height: var(--rp-lh-snug);
  overflow-wrap: anywhere;
}

.rp-gallery__author {
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-medium);
  line-height: var(--rp-lh-snug);
  overflow-wrap: anywhere;
}

.rp-gallery-pages {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--rp-sp-4);
  margin-top: var(--rp-sp-10);
}

.rp-gallery-pages__next {
  justify-self: end;
}

@media (min-width: 768px) {
  .rp-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .rp-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- the page of a project ---- */

.rp-project__wrap {
  display: grid;
  gap: var(--rp-sp-4);
  max-width: var(--rp-w-text);
  padding-block: var(--rp-sp-8) var(--rp-site-section);
}

.rp-project__cover,
.rp-project__photo {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--rp-stone);
}

.rp-project__cover img,
.rp-project__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rp-project__cover:focus-visible,
.rp-project__photo:focus-visible {
  outline: none;
  box-shadow: var(--rp-focus);
}

.rp-project__author {
  margin: 0;
  font-size: var(--rp-fs-body);
  font-weight: var(--rp-fw-medium);
}

.rp-project__block {
  display: grid;
  gap: var(--rp-sp-3);
}

.rp-project__block h2 {
  margin: 0;
}

.rp-project__list {
  display: grid;
  gap: var(--rp-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}

.rp-project__brand {
  margin-left: var(--rp-sp-1);
  color: var(--rp-text-tertiary);
  font-size: var(--rp-fs-small);
}

.rp-project__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rp-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rp-project__photos > li {
  min-width: 0;
}

.rp-project .rp-event__action h2 {
  margin: 0;
}

@media (min-width: 768px) {
  .rp-project__photos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- the cabinet: the block "Publication" in the card of a sent project ---- */

.rp-publish {
  display: grid;
  gap: var(--rp-sp-3);
  justify-items: start;
}

.rp-publish__state {
  margin: 0;
}

.rp-publish__hint {
  margin: 0;
  color: var(--rp-text-secondary);
  font-size: var(--rp-fs-small);
}