/* ============================================================
   IQRAM AHMED PORTFOLIO — footer.css
   ============================================================ */

.site-footer {
  display: grid;
  grid-template-columns: var(--hero-side-width) 1fr var(--hero-side-width);
  border-top: var(--border-subtle);
  background: #070707;
}

.footer__side {
  border-right: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.footer__side--right {
  border-right: none;
  border-left: var(--border-subtle);
}

.footer__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--space-5);
  gap: var(--space-4);
}

.footer__logo {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-text-muted);   /* lifted from --color-text-ghost */
  font-weight: 300;
  white-space: nowrap;
}

.footer__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.footer__links a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color var(--transition-fast);
  /* Sliding underline — expands left to right on hover */
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition:
    color var(--transition-fast),
    background-size var(--transition-base);
}

.footer__links a:hover {
  color: var(--color-accent);
  background-size: 100% 1px;
}

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

  .footer__side {
    display: none;
  }

  .footer__main {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
  }

  .footer__links {
    gap: var(--space-2);
  }
}