/*
 * Roca Professionals, events (wave 8.1b): the rows and the page of an event on the public site, the cards, the cover and the tabs
 * in the cabinet, and the ticket with the QR for the entrance. Only tokens; the status dot and the buttons are the common ones.
 * The date block is the same on the site and in the cabinet (.rp-event-date), a smaller one in the lists of the cabinet.
 * At the end (wave 8.3b): the check of a certificate on the site (.rp-verify) and the certificates in the cabinet (.rp-cert).
 */

/* ---- the date block ---- */

.rp-event-date {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--rp-sp-0-5);
  min-width: var(--rp-sp-16);
  padding: var(--rp-sp-3) var(--rp-sp-2);
  border: var(--rp-bw) solid var(--rp-line-strong);
  background: var(--rp-paper);
  color: var(--rp-text);
  text-align: center;
}

.rp-event-date__day {
  font-size: var(--rp-fs-h2);
  font-weight: var(--rp-fw-heading);
  letter-spacing: var(--rp-ls-heading);
  line-height: var(--rp-lh-tight);
}

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

.rp-event-date--sm {
  min-width: var(--rp-sp-12);
  padding: var(--rp-sp-2) var(--rp-sp-1);
}

.rp-event-date--sm .rp-event-date__day {
  font-size: var(--rp-fs-h4);
}

/* ---- public list on /events ---- */

.rp-event-list {
  display: grid;
  margin: var(--rp-sp-8) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--rp-bw) solid var(--rp-line-strong);
}

.rp-event-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--rp-sp-4) var(--rp-sp-6);
  align-items: start;
  padding: var(--rp-sp-6) 0;
  border-bottom: var(--rp-bw) solid var(--rp-line);
}

.rp-event-row__body {
  display: grid;
  gap: var(--rp-sp-1);
  min-width: 0;
}

.rp-event-row__meta,
.rp-event-row__place {
  margin: 0;
  color: var(--rp-text-tertiary);
  font-size: var(--rp-fs-small);
}

.rp-event-row__title {
  margin: 0;
  font-size: var(--rp-fs-h3);
  font-weight: var(--rp-fw-heading);
  letter-spacing: var(--rp-ls-heading);
  line-height: var(--rp-lh-snug);
}

.rp-event-row__title a {
  color: var(--rp-text);
  text-decoration: none;
}

.rp-event-row__title a:hover {
  text-decoration: underline;
}

.rp-event-row__cover {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--rp-stone);
}

@media (min-width: 900px) {
  .rp-event-row {
    grid-template-columns: var(--rp-sp-20) minmax(0, 1fr) 240px;
    align-items: center;
  }

  .rp-event-row__cover {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ---- the page of an event on the site ---- */

.rp-event__cover {
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 560px;
  background: var(--rp-stone);
}

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

.rp-event__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-event__title {
  margin: 0;
}

.rp-event__summary {
  margin: 0;
}

.rp-event__text {
  margin: 0;
  max-width: var(--rp-w-text);
  color: var(--rp-text-secondary);
}

.rp-event__action {
  display: grid;
  gap: var(--rp-sp-3);
  justify-items: start;
  margin-top: var(--rp-sp-4);
}

.rp-event__state {
  margin: 0;
}

.rp-event-facts {
  display: grid;
  margin: 0;
  border-top: var(--rp-bw) solid var(--rp-line-strong);
}

.rp-event-facts__row {
  display: grid;
  gap: var(--rp-sp-1);
  padding: var(--rp-sp-3) 0;
  border-bottom: var(--rp-bw) solid var(--rp-line);
}

.rp-event-facts__row dt {
  color: var(--rp-text-tertiary);
  font-size: var(--rp-fs-small);
}

.rp-event-facts__row dd {
  margin: 0;
}

.rp-event-facts__map {
  margin-left: var(--rp-sp-2);
}

@media (min-width: 600px) {
  .rp-event-facts__row {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--rp-sp-4);
  }
}

/* ---- the cabinet: cards, cover, actions ---- */

.rp-event-card .rp-event-date {
  flex: none;
}

.rp-event-card__state {
  flex: none;
}

.rp-event-hero {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--rp-stone);
}

.rp-event-hero--empty {
  display: none;
}

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

.rp-event-body p {
  margin: 0;
  color: var(--rp-text-secondary);
}

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

.rp-event-stream {
  display: block;
  text-align: center;
}

/* ---- the ticket: a white sheet over the screen ---- */

.rp-ticket {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: var(--rp-sp-4);
  padding: var(--rp-sp-4) var(--rp-gutter-m) var(--rp-sp-8);
  background: var(--rp-stone);
  overflow-y: auto;
}

.rp-ticket__bar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 420px;
}

.rp-ticket__sheet {
  display: grid;
  gap: var(--rp-sp-4);
  justify-items: center;
  width: 100%;
  max-width: 420px;
  padding: var(--rp-sp-6) var(--rp-sp-4);
  border: var(--rp-bw-strong) solid var(--rp-line-strong);
  background: var(--rp-paper);
  text-align: center;
}

.rp-ticket__qr {
  display: block;
  width: clamp(240px, 100%, 360px);
  height: auto;
  aspect-ratio: 1;
  background: var(--rp-paper);
}

.rp-ticket__code {
  margin: 0;
  font-size: var(--rp-fs-h2);
  font-weight: var(--rp-fw-heading);
  letter-spacing: var(--rp-ls-heading);
  overflow-wrap: anywhere;
}

.rp-ticket__title {
  margin: 0;
  font-size: var(--rp-fs-h3);
  font-weight: var(--rp-fw-heading);
  letter-spacing: var(--rp-ls-heading);
}

.rp-ticket__line {
  margin: 0;
  color: var(--rp-text-secondary);
}

.rp-ticket__holder {
  margin: 0;
  font-size: var(--rp-fs-h4);
}

.rp-ticket__caption {
  margin: 0;
  padding-top: var(--rp-sp-3);
  border-top: var(--rp-bw) solid var(--rp-line);
  width: 100%;
  color: var(--rp-text-tertiary);
  font-size: var(--rp-fs-small);
}

.rp-ticket__saved {
  margin: 0;
  max-width: 420px;
  color: var(--rp-text-secondary);
  font-size: var(--rp-fs-small);
  text-align: center;
}

/* ---- the check of a certificate on the site (/verify) ---- */

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

.rp-verify__form .rp-field {
  width: 100%;
}

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

.rp-verify__result h2 {
  margin: 0;
}

.rp-verify__state {
  margin: 0;
}

.rp-verify__badge {
  min-height: var(--rp-sp-12);
  padding: var(--rp-sp-2) var(--rp-sp-5);
  font-size: var(--rp-fs-h4);
}

/* ---- the certificates in the cabinet ---- */

.rp-cert-list {
  display: grid;
  gap: var(--rp-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rp-cert {
  display: grid;
  gap: var(--rp-sp-3);
  padding: var(--rp-sp-4) var(--rp-sp-5);
  border-radius: var(--rp-r-lg);
  background: var(--rp-surface);
  box-shadow: var(--rp-sh-1);
}

.rp-cert__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rp-sp-2) var(--rp-sp-3);
}

.rp-cert__number {
  margin: 0;
  font-size: var(--rp-fs-h4);
  font-weight: var(--rp-fw-heading);
  letter-spacing: var(--rp-ls-heading);
  overflow-wrap: anywhere;
}

.rp-cert__title {
  margin: 0;
  color: var(--rp-text-secondary);
  overflow-wrap: anywhere;
}

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

.rp-cert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rp-sp-2) var(--rp-sp-3);
}