/* ===========================
   FOOTER
   =========================== */

.footer {
  width: 100%;
  background-color: var(--color-black);
  color: var(--color-white);
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(75, 85, 99, 0.15);
  margin-top: clamp(3rem, 6vw, 6rem);
}

@media (min-width: 1024px) and (max-width: 1366px) {
  .footer {
    padding: clamp(2.5rem, 5vw, 3rem) 0 clamp(1.25rem, 2.5vw, 2rem);
    margin-top: clamp(2rem, 4vw, 3rem);
  }

  .footer-grid {
    gap: clamp(1.5rem, 3.5vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
  }

  .footer-title {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
  }

  .footer-text {
    font-size: clamp(0.9375rem, 1.8vw, 1rem);
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(75, 85, 99, 0.15);
}

@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  }
}

.footer-column {
  display: flex;
  flex-direction: column;
}

.footer-title {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  font-weight: var(--font-bold);
  margin-bottom: var(--spacing-md);
  color: var(--color-white);
  letter-spacing: -0.01em;
}

.footer-text {
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--spacing-sm);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  transition: color var(--transition-base);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--color-secondary);
  transform: translateX(3px);
}

.footer-bottom {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-sm);
}

/* ===========================
   RESPONSIVE FOOTER
   =========================== */

@media (max-width: 1024px) {
  .footer {
    padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(1rem, 2vw, 1.5rem);
  }

  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-column {
    text-align: center;
  }
}