/*
 * Roca Professionals, the pages of the jury (wave 9.4b, /jury, /jury/p/<id>): a narrow column, tiles of the projects, the pictures of one
 * project, its lines of products, the form of the comment and "previous" and "next". Only tokens; the status dot, the lists, the facts,
 * the field with its counter and the buttons are the common ones. The full-screen view is rp-viewer.css.
 */

/* ---- the column and the head ---- */

.rp-jury {
  display: grid;
  gap: var(--rp-sp-4);
  max-width: calc(var(--rp-w-text) + 2 * var(--rp-site-gutter));
  min-width: 0;
}

.rp-jury > * {
  min-width: 0;
  margin-block: 0;
}

.rp-jury__title {
  font-size: var(--rp-fs-h2);
  overflow-wrap: anywhere;
}

.rp-jury__phase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rp-sp-2) var(--rp-sp-4);
  margin: 0;
}

.rp-jury__you {
  margin: 0;
  font-weight: var(--rp-fw-medium);
  overflow-wrap: anywhere;
}

.rp-jury__closed {
  padding: var(--rp-sp-3) var(--rp-sp-4);
  background: var(--rp-surface-sunken);
}

.rp-jury__empty {
  margin: var(--rp-sp-6) 0 0;
}

.rp-jury__back {
  margin-top: var(--rp-sp-4);
}

.rp-jury__project {
  overflow-wrap: anywhere;
}

/* ---- the list of the projects ---- */

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

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

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

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

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

.rp-jury-tile__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rp-jury-tile__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--rp-fs-h4);
  line-height: var(--rp-lh-snug);
  overflow-wrap: anywhere;
}

.rp-jury-tile__meta {
  color: var(--rp-text-tertiary);
  font-size: var(--rp-fs-small);
}

.rp-jury-tile__mark {
  justify-self: start;
}

/* ---- one project ---- */

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

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

.rp-jury-photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--rp-stone);
}

.rp-jury-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.rp-jury-photo__kind {
  position: absolute;
  inset: auto auto 0 0;
  padding: var(--rp-sp-1) var(--rp-sp-2);
  background: var(--rp-surface-inverse);
  color: var(--rp-text-inverse);
  font-size: var(--rp-fs-micro);
  line-height: var(--rp-lh-snug);
}

.rp-jury__text {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.rp-jury__block {
  display: grid;
  gap: var(--rp-sp-2);
}

.rp-jury__block > h3 {
  margin: 0;
}

.rp-jury__name {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- the comment ---- */

.rp-jury-form {
  display: grid;
  gap: var(--rp-sp-3);
  margin-top: var(--rp-sp-4);
}

.rp-jury-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rp-sp-3) var(--rp-sp-4);
}

.rp-jury-form .rp-btn {
  width: 100%;
}

/* ---- previous and next ---- */

.rp-jury-nav {
  display: grid;
  gap: var(--rp-sp-3);
  margin-top: var(--rp-sp-4);
}

.rp-jury-nav .rp-btn {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--rp-sp-0-5);
  text-align: left;
}

.rp-jury-nav__label {
  color: var(--rp-text-tertiary);
  font-size: var(--rp-fs-small);
}

.rp-jury-nav__title {
  overflow-wrap: anywhere;
}

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

@media (min-width: 768px) {
  .rp-jury-form .rp-btn {
    width: auto;
  }

  .rp-jury-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rp-jury-nav .rp-btn:only-child {
    grid-column: 1 / -1;
  }
}