.site-footer {
  padding: var(--footer-padding);
  background-color: var(--footer-bg);
  background-image: var(--footer-bg);
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: var(--footer-gap);
}

.footer-row {
  display: flex;
  align-items: center;
  gap: var(--footer-gap);
}

.footer-col {
  flex: 1;
  /* min-width:0 → il flex item può scendere sotto la dimensione del contenuto
     e rispettare la ripartizione (33.33% con 3 colonne) invece di allargarsi */
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;

  /* Tutte le colonne alte quanto la più alta (override dell'align-items:center
     della row), col contenuto comunque centrato verticalmente come prima.
     Serve anche da contenitore per lo pseudo-separatore. */
  align-self: stretch;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.is-desktop .footer-col { flex: var(--flex-desktop); }
.is-tablet  .footer-col { flex: var(--flex-tablet); }
.is-mobile  .footer-col { flex: var(--flex-mobile); }

.is-mobile .footer-row,
.is-tablet .footer-row {
  flex-direction: column;
  text-align: center;
}

/* In colonna (mobile/tablet) la colonna non deve sforare la larghezza disponibile */
.is-mobile .footer-col,
.is-tablet .footer-col {
  width: 100%;
  max-width: 100%;
}

/* Separatore tra colonne — pseudo-elemento centrato nel gap, alto quanto
   la colonna (che ora è alta quanto la più alta). width:0 quando il flag
   è off (vedi css-vars). La prima colonna non ha separatore (selettore +). */
.footer-col + .footer-col::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* centro del gap: metà gap a sinistra del bordo colonna, poi -50% di sé */
  left: calc(var(--footer-gap) / -2);
  transform: translateX(-50%);
  width: var(--footer-separator-width, 0px);
  background: var(--footer-separator-color, currentColor);
  pointer-events: none;
}

/* Quando le colonne si impilano la linea diventa orizzontale,
   centrata nel gap verticale e larga quanto la colonna */
.is-mobile .footer-col + .footer-col::before,
.is-tablet  .footer-col + .footer-col::before {
  left: 0;
  right: 0;
  top: calc(var(--footer-gap) / -2);
  bottom: auto;
  transform: translateY(-50%);
  width: auto;
  height: var(--footer-separator-width, 0px);
}

/* Media long-form (immagini, iframe, embed) confinati alla colonna */
.footer-col img,
.footer-col iframe,
.footer-col video,
.footer-col table {
  max-width: 100%;
  height: auto;
}