/**
 * Spazio Spadoni — Lista Forum
 *
 * Layout accordion dei Forum suddivisi per Paese.
 *
 * La DATA è l'informazione principale di ogni evento.
 * Il titolo viene mantenuto con una gerarchia visiva
 * leggermente inferiore.
 */


/* ============================================================
   CONTENITORE PRINCIPALE
   ============================================================ */

.ss-forum-map,
.ss-forum-list {
  max-width: 780px;
  margin: 0 auto;
}

.ss-forum-list {
  display: grid;
  gap: 2px;
}


/* ============================================================
   SINGOLO PAESE
   ============================================================ */

.ss-forum-list__item {
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  border-radius: 4px;
}


/* ============================================================
   PULSANTE PAESE
   ============================================================ */

.ss-forum-list__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 8px;

  width: 100%;
  min-height: 44px;

  padding: 6px 10px;

  border: 0;

  background: #fff;
  color: #222;

  font: inherit;
  text-align: left;

  cursor: pointer;

  box-shadow: none;

  -webkit-tap-highlight-color: transparent;
}


/* Hover e Paese aperto. */
.ss-forum-list__toggle:hover,
.ss-forum-list__toggle[aria-expanded="true"] {
  background: rgba(0, 0, 0, .035);
  color: #222;
}


/* Focus accessibile. */
.ss-forum-list__toggle:focus,
.ss-forum-list__toggle:focus-visible {
  background: #fff;
  color: #222;

  outline: 0;

  box-shadow:
    inset 0 0 0 2px rgba(200, 16, 46, .28);
}


.ss-forum-list__toggle[aria-expanded="true"]:focus,
.ss-forum-list__toggle[aria-expanded="true"]:focus-visible {
  background: rgba(0, 0, 0, .035);
}


/* ============================================================
   PAESE + BANDIERA
   ============================================================ */

.ss-forum-list__country {
  display: flex;
  align-items: center;

  min-width: 0;

  gap: 6px;
}


.ss-forum-list__flag {
  width: 24px;
  height: 15px;

  object-fit: cover;

  border-radius: 3px;

  flex-shrink: 0;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .08);
}


.ss-forum-list__name {
  color: #222;

  overflow-wrap: anywhere;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}


/* ============================================================
   BADGE NUMERO FORUM
   ============================================================ */

.ss-forum-list__summary {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 6px;
}


.ss-forum-list__badge {
  display: inline-flex;
  align-items: center;

  min-height: 20px;

  padding: 2px 7px;

  border-radius: 999px;

  background: rgba(0, 0, 0, .06);
  color: #333;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;

  white-space: nowrap;
}


/* ============================================================
   FRECCIA ACCORDION
   ============================================================ */

.ss-forum-list__chevron {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  color: #222;
}


.ss-forum-list__chevron::before {
  content: "";

  display: block;

  width: 9px;
  height: 9px;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform:
    translateY(-2px)
    rotate(45deg);

  transition:
    transform .2s ease;
}


.ss-forum-list__toggle[aria-expanded="true"]
.ss-forum-list__chevron::before {
  transform:
    translateY(2px)
    rotate(-135deg);
}


/* ============================================================
   PANNELLO FORUM
   ============================================================ */

.ss-forum-list__panel {
  padding:
    4px
    10px
    10px
    40px;
}


/* ============================================================
   ELENCO EVENTI
   ============================================================ */

.ss-forum-list__events {
  display: grid;

  gap: 8px;

  margin: 0 0 6px;

  padding: 0;

  list-style: none;
}


/* ============================================================
   SINGOLO FORUM
   ============================================================ */

.ss-forum-list__event {
  padding:
    4px
    0
    5px
    10px;

  border-left:
    3px solid
    var(--accent-2, #c8102e);

  color: #111;

  font-size: 13px;
  line-height: 1.25;
}


/* ============================================================
   DATA — ELEMENTO PRINCIPALE
   ============================================================ */

.ss-forum-list__event-date {
  margin: 0 0 3px;

  color:
    var(--accent-2, #c8102e);

  font-family: inherit;

  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}


/* ============================================================
   TITOLO FORUM — ELEMENTO SECONDARIO
   ============================================================ */

.ss-forum-list__event-title {
  margin:
    0
    0
    5px;

  color: #333;

  font-family: inherit;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}


/* ============================================================
   DATI SECONDARI — LUOGO
   ============================================================ */

.ss-forum-list__event-row {
  display: grid;

  grid-template-columns:
    48px
    minmax(0, 1fr);

  gap: 4px;

  align-items: baseline;
}


.ss-forum-list__event-label {
  color: #666;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .04em;

  text-transform: uppercase;
}


.ss-forum-list__event-value {
  color: #333;

  font-size: 12px;
  line-height: 1.3;
}


/* ============================================================
   LINK ARTICOLI
   ============================================================ */

.ss-forum-list__link {
  display: inline-flex;
  align-items: center;

  min-height: 28px;

  padding: 2px 0;

  color:
    var(--accent-2, #c8102e);

  font-family: inherit;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;

  text-decoration: none;
}


.ss-forum-list__link:hover,
.ss-forum-list__link:focus-visible {
  text-decoration: underline;
}


/* ============================================================
   MOBILE / TABLET
   ============================================================ */

@media (max-width: 768px) {

  .ss-forum-list {
    gap: 2px;
  }


  .ss-forum-list__toggle {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      18px;

    gap: 6px;

    min-height: 42px;

    padding: 7px 8px;
  }


  .ss-forum-list__summary {
    grid-column: auto;

    flex-wrap: nowrap;

    justify-content: flex-end;

    padding-left: 0;
  }


  .ss-forum-list__name {
    overflow: hidden;

    font-size: 14px;

    text-overflow: ellipsis;

    white-space: nowrap;
  }


  .ss-forum-list__badge {
    min-height: 19px;

    padding: 2px 6px;

    font-size: 10px;
  }


  /*
   * Su mobile togliamo il rientro
   * legato alla bandiera del Paese.
   */
  .ss-forum-list__panel {
    padding:
      5px
      10px
      10px;
  }


  /*
   * La data rimane ben evidente
   * anche sugli schermi piccoli.
   */
  .ss-forum-list__event-date {
    font-size: 14px;
  }


  .ss-forum-list__event-title {
    font-size: 12px;
  }


  /*
   * Luogo su due righe:
   *
   * PLACE
   * Bangui - Central African Republic
   */
  .ss-forum-list__event-row {
    grid-template-columns: 1fr;

    gap: 1px;
  }

}