/* ============================================================================
   Eyas — 08 Footer (dark, premium, calm; bilingual; steel signature only)
   All custom classes prefixed `footer-`. Reuses .container-wide, .hairline,
   .eyebrow, .muted as-is.
   ========================================================================== */

.footer {
  position: relative;
  padding-block-start: var(--sp-9);
  padding-block-end: var(--sp-7);
  background: linear-gradient(180deg, transparent 0%, rgba(5,7,13,0.55) 100%);
}
.footer > .hairline { margin-block-end: var(--sp-9); }

/* ── Upper grid: brand + columns ───────────────────────────────────────────── */
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: clamp(var(--sp-7), 6vw, var(--sp-10));
  align-items: start;
}

/* ── Brand block ───────────────────────────────────────────────────────────── */
.footer-brand { max-width: 38ch; }
.footer-brand__lockup {
  width: clamp(200px, 22vw, 260px);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(175,200,228,0.18));
}
.footer-brand__tagline {
  margin-block-start: var(--sp-5);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-snug);
  color: var(--text-hi);
}
.footer-brand__reassure {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-lo);
}

/* ── Link columns ──────────────────────────────────────────────────────────── */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 4vw, var(--sp-8));
}
.footer-col__head { margin-block-end: var(--sp-5); }
.footer-col__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: var(--fs-sm);
  color: var(--text-lo);
  transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.footer-link:hover,
.footer-link:focus-visible { color: var(--text-hi); transform: translateX(3px); }

/* ── Bottom bar ────────────────────────────────────────────────────────────── */
.footer-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-block-start: var(--sp-9);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--glass-border);
}
.footer-bottom__copy { font-size: var(--fs-xs); }
.footer-bottom__note {
  margin-inline-start: auto;
  font-size: var(--fs-xs);
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 0 var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-lo);
  transition: color var(--dur-base) var(--ease);
}
.footer-social:hover { color: var(--accent); }
.footer-social__icon { transition: filter var(--dur-base) var(--ease); }
.footer-social:hover .footer-social__icon { filter: drop-shadow(0 0 8px var(--glow-steel)); }

/* ── Desktop polish (>=1024px) ───────────────────────────────────────────────
   Clean, organised multi-column footer aligned to the same content width as the
   rest of the page. Brand lockup anchors the left; three link groups sit in an
   even right grid; the baseline row reads as a balanced three-part bar. */
@media (min-width: 1024px) {
  .footer {
    padding-block-start: var(--sp-10);
    padding-block-end: var(--sp-8);
  }
  .footer > .hairline { margin-block-end: var(--sp-10); }

  /* Give the link grid a touch more room and align its baseline to the brand. */
  .footer-inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
    gap: clamp(var(--sp-8), 7vw, var(--sp-10));
    column-gap: clamp(var(--sp-9), 9vw, 9rem);
  }

  /* Even, generous column gutters so the three groups never feel cramped. */
  .footer-cols { gap: clamp(var(--sp-7), 5vw, var(--sp-9)); }

  /* Roomier link rhythm for comfortable mouse targets on wide screens. */
  .footer-col__list { gap: var(--sp-2); }

  /* Baseline bar: copyright left, handle centred, credo right. The auto margins
     push the note to the far right; the social handle sits in the middle. */
  .footer-bottom {
    margin-block-start: var(--sp-10);
    gap: var(--sp-4) var(--sp-7);
  }
  .footer-social { margin-inline: auto; padding-inline: 0; }
  .footer-bottom__note { margin-inline-start: 0; }
}

/* Ultra-wide (>=1440px): hold the brand measure and let the columns spread. */
@media (min-width: 1440px) {
  .footer-inner { column-gap: 10rem; }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-cols { gap: var(--sp-7) var(--sp-5); }
}
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom__note { margin-inline-start: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-link:hover,
  .footer-link:focus-visible { transform: none; }
}