/* JIIR — jaettu alatunniste (assets/footer.js piirtaa, tyyli asuu taalla).

   Tumma maketin mukaan, JA tumma myos vaalealla teemalla: varit tulevat
   --ink*-tokeneista (assets/jiir.css), eivat --surface/--text -pareista.
   Luokka on `.jftr`, ei pelkka `footer`: kataloog.css maarittelee
   `footer`-elementille ohuen yhden rivin tyylin, ja luokkavalitsin voittaa
   sen ilman !important-merkintaa. */

.jftr {
  background: var(--ink);
  color: var(--ink-text);
  border-top: 0;
  padding: 56px 0 0;
  font-size: 1rem;
}

.jftr__top {
  display: grid; gap: 40px 32px;
  grid-template-columns: minmax(300px, 1.35fr) repeat(3, minmax(140px, 1fr));
  padding-bottom: 44px;
}

.jftr__brand {
  display: inline-block;
  font-family: var(--display); font-weight: 800; font-size: 1.7rem;
  color: var(--primary); letter-spacing: -.045em; line-height: 1;
}
.jftr__me p { color: var(--ink-muted); font-size: .89rem; margin: 14px 0 0; max-width: 34ch; line-height: 1.6; }

/* Sahkoposti ja kauppanapit brandilohkossa. Varit tulevat --ink*-tokeneista
   kuten muukin alatunniste: lohko on tumma myos vaalealla teemalla. */
.jftr__mail {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: .89rem; font-weight: 700; color: var(--primary);
  text-decoration: none;
}
.jftr__mail svg { width: 17px; height: 17px; }
.jftr__mail:hover { color: var(--ink-text); }

.jftr__stores { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.jftr__store {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: var(--r-sm, 10px);
  border: 1px solid var(--ink-border); background: var(--ink-2);
  color: var(--ink-text); text-decoration: none;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.jftr__store:hover { border-color: var(--primary); transform: translateY(-2px); }
.jftr__store svg { width: 20px; height: 20px; }
.jftr__store small { display: block; font-size: .62rem; color: var(--ink-muted); line-height: 1.1; }
.jftr__store b { display: block; font-size: .85rem; font-family: var(--display); line-height: 1.2; }

.jftr__col h4 {
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  letter-spacing: 0; color: var(--ink-text); margin: 0 0 14px;
}
.jftr__col nav { display: grid; gap: 2px; }
.jftr__col nav a, .jftr__col nav span {
  color: var(--ink-muted); font-size: .875rem; padding: 5px 0; text-decoration: none;
  transition: color var(--t) var(--ease);
}
.jftr__col nav a:hover { color: var(--primary); }

.jftr__bot {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
  padding: 20px 0 24px; border-top: 1px solid var(--ink-border);
  color: var(--ink-muted); font-size: .82rem;
}
.jftr__bot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.jftr__bot nav a:hover { color: var(--primary); }

@media (max-width: 940px) {
  .jftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jftr__me { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .jftr__top { grid-template-columns: 1fr; gap: 28px; }
  .jftr__bot { flex-direction: column; align-items: flex-start; }
}