/* Sekcja "Obserwuj nas" + ikony w stopce (2026-09-27).
   Hover: kolor marki rozlewa się kołem od ikony, ikona "podskakuje",
   TikTok dostaje efekt glitch (cyjan/róż), Instagram — gradient marki. */
.follow { padding: clamp(56px, 8vw, 100px) 0; border-top: 1px solid var(--line); }
.follow-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.follow-head h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 4vw, 56px); line-height: 1.02; letter-spacing: -.02em; margin: 12px 0 0; max-width: 18ch; }
.follow-head p { color: var(--paper-dim); max-width: 40ch; margin: 0; }
[data-theme="light"] .follow-head h2 { font-weight: 600; letter-spacing: -.045em; }

/* Trzy w rzedzie, nie piec: szesc kanalow uklada sie wtedy w dwa rowne
   rzedy, zamiast zostawiac sierote w drugim. */
.follow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.soc {
  --brand: #111; --brand-fg: #fff;
  position: relative; isolation: isolate; overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column; gap: 22px; padding: 22px 20px 20px; min-height: 196px;
  border: 1px solid var(--line-2); border-radius: 16px; background: var(--ink-2);
  transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease);
}
.soc::before { /* rozlanie koloru marki od ikony */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand);
  clip-path: circle(0 at 44px 44px); transition: clip-path .7s var(--ease);
}
.soc:hover, .soc:focus-visible { transform: translateY(-6px); border-color: transparent; box-shadow: 0 28px 50px -24px var(--shadow, rgba(0,0,0,.5)); }
.soc:hover::before, .soc:focus-visible::before { clip-path: circle(150% at 44px 44px); }
.soc-ico {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--ink-3); color: var(--paper); transition: background .4s, color .4s;
}
.soc .si { width: 24px; height: 24px; }
.soc:hover .soc-ico { background: rgba(255,255,255,.16); color: var(--brand-fg); animation: socPop .6s var(--ease); }
.soc-txt b { display: block; font-size: 18px; font-weight: 600; color: var(--paper); transition: color .3s; }
.soc-txt small { display: block; font-size: 13.5px; color: var(--paper-dim); margin-top: 4px; transition: color .3s; }
.soc-go { margin-top: auto; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-mute); transition: color .3s; }
.soc-go .arr { display: inline-block; transition: transform .4s var(--ease); }
.soc:hover .soc-txt b, .soc:hover .soc-go { color: var(--brand-fg); }
.soc:hover .soc-txt small { color: var(--brand-fg); opacity: .8; }
.soc:hover .soc-go .arr { transform: translateX(6px); }
@keyframes socPop { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.18) rotate(-8deg); } 65% { transform: scale(.94) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }

.soc-tiktok    { --brand: #0b0b0f; --shadow: rgba(254,44,85,.35); }
.soc-instagram { --brand: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); --shadow: rgba(214,36,159,.4); }
.soc-instagram::before { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.soc-facebook  { --brand: #1877f2; --shadow: rgba(24,119,242,.45); }
.soc-whatsapp  { --brand: #25d366; --brand-fg: #062b16; --shadow: rgba(37,211,102,.45); }
.soc-telegram  { --brand: #229ed9; --shadow: rgba(34,158,217,.45); }
.soc-tiktok:hover .si { filter: drop-shadow(-2px -1px 0 #25f4ee) drop-shadow(2px 1px 0 #fe2c55); animation: tkGlitch 1.2s steps(2) infinite; }
@keyframes tkGlitch { 0%, 100% { transform: translate(0); } 25% { transform: translate(-1px, 1px); } 50% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 0); } }
.soc-whatsapp:hover .soc-ico { background: rgba(6,43,22,.12); }

/* Ikony w stopce */
.foot-soc { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.fs {
  --brand: #111; position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--paper-dim); isolation: isolate; text-decoration: none;
  transition: color .3s, border-color .3s, transform .4s var(--ease);
}
.fs::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--brand); transform: scale(0); transition: transform .45s cubic-bezier(.3,1.6,.5,1); border-radius: 50%; }
.fs .si { width: 19px; height: 19px; transition: transform .45s var(--ease); }
.fs:hover { color: #fff; border-color: transparent; transform: translateY(-3px); }
.fs:hover::before { transform: none; }
.fs:hover .si { transform: translateY(-1px) scale(1.12) rotate(-6deg); }
.fs::after { /* podpis nad ikoną */
  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; white-space: nowrap; padding: 5px 8px; border-radius: 6px;
  background: var(--paper); color: var(--ink); opacity: 0; pointer-events: none; transition: all .3s var(--ease);
}
.foot-soc { padding-top: 32px; margin-top: -8px; } /* miejsce na podpis */
.fs:hover::after { opacity: 1; transform: translate(-50%, 0); }
.fs-tiktok { --brand: #0b0b0f; } .fs-instagram { --brand: linear-gradient(45deg, #fd5949, #d6249f, #285aeb); }
.fs-instagram::before { background: linear-gradient(45deg, #fd5949, #d6249f, #285aeb); }
.fs-facebook { --brand: #1877f2; } .fs-whatsapp { --brand: #25d366; } .fs-telegram { --brand: #229ed9; }
.fs-tiktok:hover .si { filter: drop-shadow(-1.5px -1px 0 #25f4ee) drop-shadow(1.5px 1px 0 #fe2c55); }

@media (max-width: 680px) {
  .follow-grid { grid-template-columns: 1fr 1fr; }
  .soc { min-height: 160px; padding: 18px 16px 16px; }
  /* Ostatni kafel rozciaga sie tylko wtedy, gdy kanalow jest nieparzyscie
     i zostalby sam w rzedzie. Wczesniej bylo to przypisane na sztywno
     Telegramowi i przy szostym kanale rozwalalo siatke. */
  .soc:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) { .soc:hover .soc-ico, .soc-tiktok:hover .si { animation: none; } }

.foot-grid a.fs { display: grid; padding: 0; }
.foot-grid a.fs:hover { color: #fff; }
.foot-grid a.fs-whatsapp:hover { color: #062b16; }