/* =============================================================
   FALMIS — FOOTER
   Requires falmis-tokens.css

   Four blocks: brand, two link columns, latest post.
   A thin legal bar underneath.
   ============================================================= */

.fm-footer{
  position:relative;
  margin-block-start:var(--fm-space-24);
  background:var(--fm-gradient-deep);
  border-block-start:1px solid var(--fm-border-subtle);
  color:var(--fm-text-body);
  overflow:hidden;
}

/* a hairline of brand colour along the top edge */
.fm-footer::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  height:1px;
  background:var(--fm-gradient-aurora);
  opacity:.55;
}

.fm-footer__inner{
  max-width:var(--fm-container-lg);
  margin-inline:auto;
  padding:var(--fm-space-16) var(--fm-gutter) var(--fm-space-12);
  display:grid;
  gap:var(--fm-space-10);
  grid-template-columns:1.6fr 1fr 1fr 1.5fr;
}

/* ---------- brand ---------- */

.fm-footer__brand{ max-width:36ch; }
.fm-footer__brand .fm-logo{ margin-bottom:var(--fm-space-4); }
.fm-footer__about{
  margin:0 0 var(--fm-space-5);
  font-size:var(--fm-text-sm);
  line-height:var(--fm-lh-sm);
  color:var(--fm-text-muted);
}
.fm-footer__social{ display:flex; gap:var(--fm-space-2); }
.fm-footer__social a{
  width:var(--fm-control-md);
  height:var(--fm-control-md);
  display:grid;
  place-content:center;
  border-radius:var(--fm-radius-md);
  border:1px solid var(--fm-border);
  background:rgba(255,255,255,.04);
  color:var(--fm-text-muted);
  transition:color var(--fm-dur-fast) var(--fm-ease-out),
             border-color var(--fm-dur-fast) var(--fm-ease-out),
             background var(--fm-dur-fast) var(--fm-ease-out);
}
.fm-footer__social a:hover{
  color:var(--fm-text-accent);
  border-color:var(--fm-border-accent);
  background:var(--fm-tint-violet);
}
.fm-footer__social a:focus-visible{ outline:2px solid var(--fm-focus-ring); outline-offset:2px; }

/* ---------- link columns ---------- */

.fm-footer__title{
  margin:0 0 var(--fm-space-4);
  font-size:var(--fm-text-2xs);
  letter-spacing:1.4px;
  font-weight:var(--fm-weight-bold);
  color:var(--fm-text-accent);
}

.fm-footer__list{ list-style:none; margin:0; padding:0; }
.fm-footer__list li{ margin-bottom:var(--fm-space-1); }
.fm-footer__list a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  font-size:var(--fm-text-sm);
  color:var(--fm-text-muted);
  text-decoration:none;
  transition:color var(--fm-dur-fast) var(--fm-ease-out),
             padding-inline-start var(--fm-dur-fast) var(--fm-ease-out);
}
.fm-footer__list a:hover{ color:var(--fm-text-primary); padding-inline-start:4px; }
.fm-footer__list a:focus-visible{ outline:2px solid var(--fm-focus-ring); outline-offset:3px; border-radius:var(--fm-radius-sm); }

/* ---------- latest post ---------- */

.fm-footer__post{
  display:flex;
  gap:var(--fm-space-3);
  padding:var(--fm-space-3);
  border-radius:var(--fm-radius-md);
  border:1px solid var(--fm-border);
  background:rgba(255,255,255,.04);
  text-decoration:none;
  transition:border-color var(--fm-dur-base) var(--fm-ease-out),
             background var(--fm-dur-base) var(--fm-ease-out),
             transform var(--fm-dur-base) var(--fm-ease-out);
}
.fm-footer__post:hover{
  border-color:var(--fm-border-accent);
  background:var(--fm-tint-violet);
  transform:translateY(var(--fm-lift,-3px));
}
.fm-footer__post:focus-visible{ outline:2px solid var(--fm-focus-ring); outline-offset:3px; }

.fm-footer__thumb{
  flex:none;
  width:76px;
  height:76px;
  border-radius:var(--fm-radius-sm);
  overflow:hidden;
  background:var(--fm-surface-3);
}
.fm-footer__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.fm-footer__postbody{ min-width:0; display:flex; flex-direction:column; justify-content:center; }
.fm-footer__postbody b{
  font-size:var(--fm-text-sm);
  font-weight:var(--fm-weight-medium);
  line-height:var(--fm-lh-sm);
  color:var(--fm-text-primary);
  margin-bottom:2px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.fm-footer__postbody time{
  font-size:var(--fm-text-2xs);
  color:var(--fm-text-muted);
  font-variant-numeric:tabular-nums;
}

/* ---------- legal bar ---------- */

.fm-footer__bottom{ border-block-start:1px solid var(--fm-border-subtle); }
.fm-footer__bottom-inner{
  max-width:var(--fm-container-lg);
  margin-inline:auto;
  padding:var(--fm-space-5) var(--fm-gutter);
  display:flex;
  flex-wrap:wrap;
  gap:var(--fm-space-4);
  align-items:center;
  justify-content:space-between;
  font-size:var(--fm-text-2xs);
  color:var(--fm-text-muted);
}
.fm-footer__legal{ display:flex; flex-wrap:wrap; gap:var(--fm-space-4); }
.fm-footer__legal a{ color:var(--fm-text-muted); text-decoration:none; }
.fm-footer__legal a:hover{ color:var(--fm-text-body); }

/* legacy alias — .fm-footer__bottominner had no separator */
.fm-footer__bottominner{ max-width:var(--fm-container-lg); margin-inline:auto;
  padding:var(--fm-space-5) var(--fm-gutter); display:flex; flex-wrap:wrap;
  gap:var(--fm-space-4); align-items:center; justify-content:space-between;
  font-size:var(--fm-text-2xs); color:var(--fm-text-muted); }

/* ---------- responsive ---------- */

@media (max-width:960px){
  .fm-footer__inner{
    grid-template-columns:1fr 1fr;
    gap:var(--fm-space-8);
    padding-block-start:var(--fm-space-12);
  }
  .fm-footer__brand{ grid-column:1 / -1; max-width:52ch; }
  .fm-footer__latest{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .fm-footer__inner{ grid-template-columns:1fr; }
  .fm-footer__bottom-inner{ justify-content:flex-start; }
}

/* =============================================================
   RULES
   · The footer wears the deep gradient, not a flat surface. It
     is the one place a long colour field can run without
     competing with content above it.
   · Link rows are 32px, not 44px. They are a dense list, not a
     primary control, and 44px each would make the footer
     enormous. Row spacing keeps the tap target workable.
   · One latest post, never three. A footer is a signpost, not a
     second homepage.
   · Dates use tabular numerals so a column of posts aligns.
   ============================================================= */