/* ==========================================================================
   Footer — BarberSy
   Mobile-first: 1 coluna no mobile, grid 4 colunas no desktop.
   ========================================================================== */

/* ── Wrapper do footer ───────────────────────────────────────────────────── */
.site-footer {
  width: 100%;

  /* Grid mobile: 1 coluna */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);

  /* Padding vertical e horizontal responsivos equilibrados */
  padding-block: clamp(3.5rem, 6vw, 5rem);
  padding-inline: clamp(var(--space-6), 8vw, 6rem);
}

/* ── Coluna da marca (grid-one) ──────────────────────────────────────────── */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Logo no footer */
.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__logo-img {
  width: 1.875rem;   /* 30px */
  height: 1.875rem;
  flex-shrink: 0;
}

.footer__logo-name {
  font-size: var(--text-xl);
  font-weight: var(--font-regular);
  padding-bottom: 2px; /* alinhamento óptico */
}

/* Descrição e metadados da marca */
.footer__description,
.footer__meta,
.footer__copyright {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
}

/* Copyright separado visualmente (no original fica na parte de baixo) */
.footer__copyright {
  margin-top: auto; /* empurra para o final no desktop */
}

/* ── Colunas de navegação ────────────────────────────────────────────────── */
.footer__col {
  display: flex;
  flex-direction: column;
}

.footer__col-title {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-brand);
}

/* Lista de links da coluna */
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.footer__nav-link {
  font-size: var(--text-sm);
  color: var(--color-muted);
  transition: color var(--transition-base);
}

.footer__nav-link:hover {
  color: var(--color-brand);
}

/* ── Media query: desktop (≥ 768px) ─────────────────────────────────────── */
@media (min-width: 768px) {
  .site-footer {
    /* Desktop: 4 colunas, a primeira mais larga (igual ao original) */
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    align-items: start;
  }

  .footer__brand {
    /* Ocupa toda a altura da grid para o copyright ficar embaixo */
    height: 100%;
  }
}