/* ============================================================
   PANTOR — footer.css
   12 Footer · responsive สำหรับ footer · focus สำหรับ footer
   (แยกออกจาก style.css — ต้องโหลดหลัง style.css)
   ============================================================ */

/* ── 12 FOOTER ─────────────────────────────────────────── */
.ft{background:var(--ink);color:rgba(255,255,255,.66);padding-top:clamp(56px,7vw,96px)}
.ft__top{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(40px,5vw,80px);padding-bottom:clamp(40px,5vw,72px);
}
.ft__mark{font-size:1.25rem;font-weight:700;letter-spacing:.2em;color:#fff}
.ft__desc{
  margin-top:14px;font-size:var(--fs-small);line-height:1.8;
  color:rgba(255,255,255,.6);
}
.ft__loc{
  margin-top:16px;font-size:var(--fs-label);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);
}
.ft__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.ft__col-lbl{
  padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:var(--fs-label);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}
.ft__nav li + li{margin-top:12px}
.ft__nav a{
  font-size:var(--fs-small);color:rgba(255,255,255,.75);
  transition:color .25s var(--ease);
}
.ft__nav a:hover{color:#fff}
.ft__glyph{
  font-family:var(--font-th);font-size:clamp(4rem,15vw,11rem);font-weight:600;
  line-height:.9;letter-spacing:-.03em;color:rgba(255,255,255,.1);
  white-space:nowrap;user-select:none;
}
.ft__btm{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin-top:clamp(28px,3vw,44px);padding:24px 0 32px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.42);
}

/* ── RESPONSIVE (footer) ───────────────────────────────── */
@media (max-width:1024px){
  .ft__top{grid-template-columns:minmax(0,1fr)}
  .ft__nav{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:600px){
  .ft__nav{grid-template-columns:1fr;gap:24px}
}

@media (max-width:480px){
  .ft__btm{flex-direction:column;gap:8px}
}

/* ── FOCUS (footer) ────────────────────────────────────── */
.ft :focus-visible{outline-color:#fff}