/**
 * @file
 * Cronologia del brigadista (js/cronologia.js).
 */
.sb-crono {
  --c-batalles: #A237B5;
  --c-brigada: #2F7D8C;
  --c-esdev: #D9822B;
  --c-stay: rgba(254, 214, 26, .28);
  --c-stay-line: #E0B400;
  --label-w: 128px;
  --track-h: 16px;
  --track-gap: 5px;
  margin: 8px 0 48px;
  color: var(--sb-ink);
  white-space: normal;
}

/* La regió antiga era arrossegable i sense salts de línia. */
.sb-crono-ready .layout--cronologia .layout__region {
  overflow: visible;
  white-space: normal;
  cursor: auto;
}

.sb-crono-ready .layout--cronologia .block-views-blockcronologia-block-1,
.sb-crono-ready .layout--cronologia .block-views-blockcronologia-block-2,
.sb-crono-ready .llegenda-wrapper,
.sb-crono-ready .numero-anys {
  display: none !important;
}

.sb-crono *,
.sb-crono *::before,
.sb-crono *::after {
  box-sizing: border-box;
}

/* Capçalera ----------------------------------------------------------- */
.sb-crono__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 16px;
}

#block-frontend-sidbrint-content .sb-crono__title,
.sb-crono__title {
  margin: 0;
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 700;
  line-height: 1.1;
  color: var(--sb-ink);
  text-transform: none;
}

.sb-crono__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 10px 0 0;
  font-size: 17px;
  color: var(--sb-soft);
}

.sb-crono__summary strong {
  color: var(--sb-ink);
  font-weight: 700;
}

.sb-crono__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sb-line-strong);
}

.sb-crono__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sb-crono__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--sb-line-strong);
  border-radius: 999px;
  background: var(--sb-surface);
  color: var(--sb-ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s;
}

.sb-crono__chip:hover {
  border-color: var(--sb-brand);
}

.sb-crono__chip[aria-pressed="false"] {
  background: var(--sb-bg);
  color: var(--sb-soft);
  text-decoration: line-through;
  text-decoration-color: rgba(110, 102, 117, .5);
}

.sb-crono__chip[aria-pressed="false"] .sb-crono__swatch {
  opacity: .35;
}

.sb-crono__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sb-bg);
  border: 1px solid var(--sb-line);
  color: var(--sb-soft);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.sb-crono__swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px #fff;
}

.sb-crono__swatch--batalles { background: var(--c-batalles); }
.sb-crono__swatch--brigada { background: var(--c-brigada); }
.sb-crono__swatch--esdev { background: var(--c-esdev); }

/* Targeta del gràfic -------------------------------------------------- */
.sb-crono__card {
  border: 1px solid var(--sb-line);
  border-radius: 18px;
  background: var(--sb-surface);
  box-shadow: var(--sb-shadow-sm);
  overflow: hidden;
}

.sb-crono__scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.sb-crono__scroller:focus-visible {
  box-shadow: inset var(--sb-focus);
  border-radius: 18px 18px 0 0;
}

.sb-crono__chart {
  min-width: 860px;
  padding: 18px 22px 10px 0;
}

.sb-crono__axis,
.sb-crono__lane {
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
}

.sb-crono__axis-plot,
.sb-crono__lane-plot,
.sb-crono__overlay-plot {
  position: relative;
}

.sb-crono__axis-spacer,
.sb-crono__lane-label {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--sb-surface);
}

/* Anys i mesos. */
.sb-crono__years,
.sb-crono__months {
  position: relative;
}

.sb-crono__years {
  height: 26px;
}

.sb-crono__years span {
  position: absolute;
  top: 0;
  height: 100%;
  padding-left: 8px;
  border-left: 2px solid var(--sb-ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 22px;
  color: var(--sb-ink);
}

.sb-crono__months {
  height: 22px;
  border-bottom: 1px solid var(--sb-line);
}

.sb-crono__months span {
  position: absolute;
  top: 0;
  height: 100%;
  border-left: 1px solid var(--sb-line);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  text-transform: uppercase;
  color: var(--sb-soft);
}

.sb-crono__months span.is-jan {
  border-left-color: var(--sb-ink);
}

/* Cos: carrils + franja de l'estada superposada. */
.sb-crono__body {
  position: relative;
  padding: 30px 0 40px;
}

.sb-crono__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  pointer-events: none;
}

.sb-crono__overlay::before {
  content: "";
}

.sb-crono__stay {
  position: absolute;
  top: -36px;
  bottom: 0;
  min-width: 4px;
  background: var(--c-stay);
  border-left: 2px solid var(--c-stay-line);
  border-right: 2px solid var(--c-stay-line);
}

.sb-crono__stay-label {
  position: absolute;
  top: 40px;
  left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c-stay-line);
  color: #2B2530;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sb-crono__war {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--sb-soft);
}

.sb-crono__war span {
  position: absolute;
  bottom: 4px;
  left: 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sb-soft);
  white-space: nowrap;
}

.sb-crono__war--end span {
  left: auto;
  right: 6px;
  text-align: right;
}

.sb-crono__lane {
  position: relative;
  padding: 8px 0;
  border-top: 1px dashed var(--sb-line);
}

.sb-crono__lane:first-of-type {
  border-top: 0;
}

.sb-crono__lane.is-hidden {
  display: none;
}

.sb-crono__lane-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 12px 0 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sb-soft);
}

.sb-crono__lane-label .sb-crono__swatch {
  margin-top: 3px;
}

.sb-crono__lane-plot {
  height: calc(var(--tracks) * (var(--track-h) + var(--track-gap)) + 2px);
}

/* Marques. */
.sb-crono__mark {
  --col: var(--c-batalles);
  position: absolute;
  top: calc(var(--track) * (var(--track-h) + var(--track-gap)));
  height: var(--track-h);
  min-width: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--col);
  cursor: pointer;
  opacity: .9;
  transition: transform .15s var(--sb-ease), opacity .15s, box-shadow .15s;
}

.sb-crono__mark--brigada { --col: var(--c-brigada); }
.sb-crono__mark--esdev { --col: var(--c-esdev); }

.sb-crono__mark.is-point {
  width: var(--track-h);
  margin-left: calc(var(--track-h) / -2);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--col);
}

.sb-crono__mark.is-out {
  opacity: .28;
}

.sb-crono__mark.is-in-stay {
  opacity: 1;
}

.sb-crono__mark.is-participated {
  opacity: 1;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sb-ink);
  z-index: 2;
}

.sb-crono__mark:hover,
.sb-crono__mark.is-hover,
.sb-crono__mark:focus-visible {
  opacity: 1;
  transform: scaleY(1.25);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--col);
  z-index: 3;
}

.sb-crono__mark.is-point:hover,
.sb-crono__mark.is-point.is-hover,
.sb-crono__mark.is-point:focus-visible {
  transform: scale(1.3);
}

.sb-crono__mark.is-selected {
  opacity: 1;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--sb-ink), var(--sb-shadow);
  z-index: 4;
}

/* Peu: llegenda i ajuda. */
.sb-crono__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 12px 22px;
  border-top: 1px solid var(--sb-line);
  background: var(--sb-bg);
}

.sb-crono__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.sb-crono__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sb-soft);
}

.sb-crono__legend-stay {
  width: 22px;
  height: 14px;
  border-radius: 3px;
  background: var(--c-stay);
  border-left: 2px solid var(--c-stay-line);
  border-right: 2px solid var(--c-stay-line);
}

.sb-crono__legend-part {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-batalles);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sb-ink);
  margin: 0 3px;
}

.sb-crono__hint {
  margin: 0;
  font-size: 14px;
  color: var(--sb-soft);
}

/* Detall. */
.sb-crono__detail {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-top: 1px solid var(--sb-line);
  background: linear-gradient(0deg, var(--sb-surface), var(--sb-brand-50));
  animation: sb-crono-in .2s var(--sb-ease);
}

.sb-crono__detail[hidden] {
  display: none;
}

@keyframes sb-crono-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.sb-crono__detail-title {
  margin: 8px 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--sb-ink);
}

.sb-crono__detail-meta {
  margin: 0;
  font-size: 15px;
  color: var(--sb-soft);
}

.sb-crono__detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.sb-crono__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--sb-ink);
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color .15s;
}

.sb-crono__btn:hover {
  background: var(--sb-brand-700);
}

.sb-crono__close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--sb-line-strong);
  border-radius: 50%;
  background: var(--sb-surface);
  color: var(--sb-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.sb-crono__close:hover {
  border-color: var(--sb-ink);
  color: var(--sb-ink);
}

/* Etiquetes. */
.sb-crono__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
}

.sb-crono__badge--batalles { background: #F3E3F7; color: #7E2390; }
.sb-crono__badge--brigada { background: #DDEFF2; color: #1F5A66; }
.sb-crono__badge--esdev { background: #FBEBDA; color: #8A4A0E; }

.sb-crono__part {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--sb-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.sb-crono__part::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-stay-line);
}

/* Llista ------------------------------------------------------------- */
.sb-crono__listwrap {
  margin-top: 22px;
}

.sb-crono__listhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.sb-crono__listtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--sb-ink);
  text-transform: none;
}

.sb-crono__scope {
  padding: 6px 14px;
  border: 1px solid var(--sb-line-strong);
  border-radius: 999px;
  background: var(--sb-surface);
  color: var(--sb-brand-700);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.sb-crono__scope:hover {
  border-color: var(--sb-brand);
  background: var(--sb-brand-50);
}

.sb-crono__list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2 420px;
  column-gap: 32px;
}

.sb-crono__year {
  break-after: avoid;
  margin: 14px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sb-line);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--sb-brand);
}

.sb-crono__year:first-child {
  margin-top: 0;
}

.sb-crono__item {
  display: grid;
  grid-template-columns: 150px auto 1fr;
  align-items: baseline;
  gap: 4px 10px;
  break-inside: avoid;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: var(--sb-radius-sm);
  transition: background-color .15s;
}

.sb-crono__item:hover,
.sb-crono__item.is-selected {
  background: var(--sb-brand-50);
}

.sb-crono__item.is-out {
  opacity: .6;
}

.sb-crono__item-date {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--sb-soft);
}

.sb-crono__item-name {
  color: var(--sb-ink) !important;
  font-weight: 600;
  text-decoration: none !important;
}

.sb-crono__item-name:hover {
  color: var(--sb-brand-700) !important;
  text-decoration: underline !important;
}

.sb-crono__item .sb-crono__part {
  grid-column: 3;
  justify-self: start;
  margin-left: 0;
}

.sb-crono__empty {
  color: var(--sb-soft);
}

@media (max-width: 768px) {
  .sb-crono {
    --label-w: 96px;
  }

  .sb-crono__lane-label {
    padding-left: 14px;
    font-size: 11.5px;
  }

  .sb-crono__chart {
    min-width: 760px;
  }

  .sb-crono__detail {
    flex-direction: column;
  }

  .sb-crono__item {
    grid-template-columns: auto 1fr;
  }

  .sb-crono__item-date {
    grid-column: 1 / -1;
  }

  .sb-crono__item .sb-crono__part {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-crono__mark,
  .sb-crono__detail {
    transition: none;
    animation: none;
  }
}

@media print {
  .sb-crono__chips,
  .sb-crono__scope,
  .sb-crono__hint,
  .sb-crono__detail {
    display: none !important;
  }

  .sb-crono__chart {
    min-width: 0;
  }
}

/* Fronts i operacions de llarga durada: més fins, perquè no tapin la resta. */
.sb-crono__mark.is-long {
  height: 8px;
  margin-top: 4px;
  opacity: .35;
}

.sb-crono__mark.is-long.is-in-stay,
.sb-crono__mark.is-long.is-participated {
  opacity: .85;
}

/* Tooltip de les marques. */
.sb-crono__card {
  position: relative;
}

.sb-crono__tip {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid var(--sb-line);
  border-radius: 12px;
  background: var(--sb-surface);
  box-shadow: var(--sb-shadow-lg);
  pointer-events: none;
  animation: sb-crono-in .12s var(--sb-ease);
}

.sb-crono__tip[hidden] {
  display: none;
}

.sb-crono__tip::after {
  content: "";
  position: absolute;
  left: calc(var(--arrow, 50%) - 6px);
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--sb-line);
  border-bottom: 1px solid var(--sb-line);
  background: var(--sb-surface);
  transform: rotate(45deg);
}

.sb-crono__tip.is-below::after {
  top: -6px;
  bottom: auto;
  transform: rotate(225deg);
}

.sb-crono__tip .sb-crono__part {
  margin-left: 0;
}

.sb-crono__tip-title {
  flex-basis: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sb-ink);
}

.sb-crono__tip-date {
  flex-basis: 100%;
  font-size: 14px;
  color: var(--sb-soft);
}

.sb-crono__item-name {
  font-size: 17px;
}

/* Esdeveniments on consta que va participar: fons groc clar i vora negra,
 * com les marques del fris cronològic (sense etiqueta). */
.sb-crono__item.is-participated {
  margin: 4px -10px;
  border: 2px solid var(--sb-ink);
  background: #FFF6C7;
  opacity: 1;
}

.sb-crono__item.is-participated:hover,
.sb-crono__item.is-participated.is-selected {
  background: #FFEE99;
}

.sb-crono__legend-part {
  border-radius: 4px;
  width: 22px;
  background: #FFF6C7;
  box-shadow: 0 0 0 2px var(--sb-ink);
}