/* ============================================================
   PEU DE PÀGINA (overlay a amplada completa)
   ============================================================ */

.footer {
  margin-top: auto;
  background: var(--surface-footer);
}
.footer-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.footer-top:not(:has(.footer-social)) {
  justify-content: flex-start;
}
.footer-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}
.footer-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.footer-brand-title {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: var(--font-2xl);
  letter-spacing: 0.2px;
}
.footer-brand-title--line2 {
  margin-top: 1px;
  color: var(--text-strong);
}
.footer-social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.footer-social-btn {
  width: var(--ctrl-min-height);
  height: var(--ctrl-min-height);
  border-radius: var(--radius-md);
  border: 1px solid var(--actionable-line);
  background: var(--actionable-wash);
  display: grid;
  place-items: center;
}
.footer-social-btn:hover {
  border-color: var(--actionable-border);
}
.footer-social-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
  opacity: 0.88;
}

/* Graella principal: explota l'amplada del bottom sheet */
.footer-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 1.35fr)
    minmax(0, 0.72fr)
    minmax(0, 1.25fr);
  gap: var(--space-3);
  align-items: stretch;
}
.footer-grid--no-stats {
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 0.85fr)
    minmax(0, 1.5fr);
}

/* Panell per grup: títol únic + cos (una o diverses columnes internes) */
.footer-group {
  min-width: 0;
  padding: 0;
  background: var(--surface-footer-panel);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.footer-group__title {
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: var(--font-sm);
  color: var(--footer-group-title);
  text-transform: uppercase;
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-2);
  flex: 0 0 auto;
}
.footer-group__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2);
  background: var(--surface-footer-panel-content);
}
.footer-group__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
}
.footer-group__col:not(:first-child) {
  border-inline-start: 1px solid var(--border-footer-panel);
  padding-inline-start: var(--space-3);
}
.footer-link {
  display: block;
  padding: 6px 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: var(--font-base);
  border-radius: var(--radius-md);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.footer-link:hover,
.footer-link:focus-visible {
  background: var(--megamenu-link-hover-bg);
  color: var(--color-primary-strong);
  outline: none;
}

.footer-group--legal .footer-note {
  margin-top: var(--space-2);
}
.footer-note {
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1.35;
}
/* Les zones es repleguen com a ítems flex (a nivell de zona).
   Si una sola zona és massa ampla per al contenidor, el text es parteix internament
   als límits de paraula (el partit intern evita el desbordament del contenidor).
   El separador és ::after a cada zona: sempre va al final de la seva línia,
   mai inicia la següent. Els NBSP al voltant de · eviten línies només amb el separador. */
.footer-note {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0;
}
.footer-note .fnp {
  min-width: 0;
  overflow-wrap: break-word;
}
.footer-note .fnp:not(:last-child)::after {
  content: '\00a0·\00a0';
  white-space: nowrap;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 700;
  font-size: var(--font-base);
}
.footer-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.footer-meta-link {
  color: var(--muted);
  font-weight: 800;
}
.footer-meta-link:hover {
  color: var(--text-strong);
}
.footer-sep {
  opacity: 0.7;
}

/* ── shared control tokens ── */
.footer-social-btn {
  box-shadow: none;
}
.footer-social-btn:active {
  box-shadow: none;
  transform: none;
}
.footer-social-btn {
  transition: var(--ctrl-transition);
}

@media (hover: hover) and (pointer: fine) {
  .footer-social-btn:hover {
    background-color: var(--filter-option-hover-bg);
    box-shadow: none;
    transform: none;
  }
}

/* ── responsiu ── */
@media (max-width: 1100px) {
  .footer-grid,
  .footer-grid--no-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Últim grup impar (p. ex. Legal amb 3 seccions): fila sencera si queda sol */
  .footer-group:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .footer-social-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .footer-inner {
    padding: var(--space-2);
    gap: var(--space-2);
  }
  .footer-grid,
  .footer-grid--no-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .footer-group__cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-group__col:not(:first-child) {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-top: 1px solid var(--border-footer-panel);
    margin-top: var(--space-1);
    padding-top: var(--space-1);
  }
  .footer-group__title {
    padding: var(--space-2) var(--space-2) var(--space-1);
  }
  .footer-group__body {
    padding: var(--space-1) var(--space-2) var(--space-2);
  }
  .footer-link {
    padding: 5px 6px;
  }
}

@media (max-width: 520px) {
  .footer {
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  }
  .footer-inner {
    padding-inline: var(--space-2);
  }
}