/* ==========================================================================
   footer.css — Odyssey of AION
   Compatible with footer.php current structure
   ========================================================================== */

.xs-footer{
  position:relative;
  margin-top:clamp(56px, 8vw, 110px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.92) 100%);
  border-top:1px solid rgba(31,42,50,.10);
  color:var(--xs-deep);
}

.xs-footerInner{
  max-width:var(--xs-max);
  margin:0 auto;
  padding:clamp(28px, 4vw, 48px) var(--xs-pad) 22px;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(170px, .8fr));
  gap:clamp(24px, 3vw, 40px);
  align-items:start;
}

.xs-footerBrand{
  min-width:0;
}

.xs-footerEyebrow{
  margin:0 0 10px;
  font-size:.76rem;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(31,42,50,.56);
}

.xs-footerTitle{
  margin:0 0 14px;
  font-size:clamp(1.15rem, 1rem + .7vw, 1.55rem);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--xs-ink);
}

.xs-footerText{
  margin:0;
  font-size:.98rem;
  line-height:1.72;
  color:rgba(31,42,50,.78);
  max-width:62ch;
}

.xs-footerNav{
  display:grid;
  gap:10px;
  align-content:start;
  min-width:0;
}

.xs-footerNavTitle{
  margin:0 0 6px;
  font-size:.76rem;
  line-height:1.2;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:900;
  color:rgba(31,42,50,.56);
}

.xs-footerNav--accent .xs-footerNavTitle{
  color:rgba(31,42,50,.72);
}

.xs-footerLink{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  font-size:.95rem;
  line-height:1.45;
  font-weight:700;
  color:rgba(31,42,50,.88);
  text-decoration:none;
  position:relative;
  transition:color .18s ease, transform .18s ease;
}

.xs-footerLink::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:1px;
  background:rgba(255,90,60,.42);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .18s ease, background .18s ease;
}

.xs-footerLink:hover,
.xs-footerLink:focus-visible{
  color:var(--xs-accent);
  transform:translateX(1px);
}

.xs-footerLink:hover::after,
.xs-footerLink:focus-visible::after{
  transform:scaleX(1);
  background:rgba(255,90,60,.78);
}

.xs-footerMeta{
  grid-column:1 / -1;
  margin-top:4px;
  padding-top:16px;
  border-top:1px solid rgba(31,42,50,.10);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px 18px;
  color:rgba(31,42,50,.62);
  font-size:.88rem;
  line-height:1.55;
}

.xs-footerMetaLine{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.xs-footerMeta a{
  color:rgba(31,42,50,.78);
  text-decoration:none;
  border-bottom:1px solid rgba(255,90,60,.35);
  transition:color .18s ease, border-color .18s ease;
}

.xs-footerMeta a:hover,
.xs-footerMeta a:focus-visible{
  color:var(--xs-accent);
  border-bottom-color:rgba(255,90,60,.72);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1080px){
  .xs-footerInner{
    grid-template-columns:1fr 1fr;
  }

  .xs-footerBrand{
    grid-column:1 / -1;
  }
}

@media (max-width:720px){
  .xs-footer{
    margin-top:44px;
  }

  .xs-footerInner{
    grid-template-columns:1fr;
    gap:22px;
    padding:28px var(--xs-pad) 18px;
  }

  .xs-footerText{
    max-width:none;
    font-size:.95rem;
    line-height:1.66;
  }

  .xs-footerMeta{
    padding-top:14px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:8px;
  }

  .xs-footerMetaLine{
    gap:7px;
  }
}

@media (prefers-reduced-motion:reduce){
  .xs-footerLink,
  .xs-footerLink::after,
  .xs-footerMeta a{
    transition:none;
  }
}