/* =====================================================================
   /funkcje — sekcja „Funkcje systemu": siatka kafelków z ikonami (prefix fx-)
   Zastępuje stary układ .fgrid/.fcard. Ładowany TYLKO na /funkcje
   (patrz: <link> w pages/funkcje.php).
   ===================================================================== */
.fx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.fx-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:22px 22px 20px;background:#fff;border:1px solid #E7EBF1;border-radius:18px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.fx-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--a1) 35%,#E7EBF1);box-shadow:0 18px 36px -22px color-mix(in srgb,var(--a2) 55%,transparent)}
.fx-b{--a1:#3B82F6;--a2:#1D4ED8}
.fx-v{--a1:#8B5CF6;--a2:#6D28D9}
.fx-t{--a1:#14B8A6;--a2:#0F766E}
.fx-a{--a1:#F59E0B;--a2:#D97706}
.fx-s{--a1:#64748B;--a2:#334155}
.fx-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;color:#fff;margin-bottom:16px;background:linear-gradient(135deg,var(--a1),var(--a2));box-shadow:0 10px 20px -10px var(--a2),inset 0 1px 0 rgba(255,255,255,.35)}
.fx-ic svg{width:24px;height:24px}
.fx-card h3{margin:0 0 6px;font-size:16.5px;line-height:1.35;color:#0F172A}
.fx-card p{margin:0;font-size:14px;line-height:1.55;color:#64748B}
.fx-card p a{color:inherit;text-decoration:underline;text-decoration-color:#CBD5E1;text-underline-offset:2px}
.fx-card p a:hover{color:var(--a2);text-decoration-color:currentColor}
.fx-more{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:600;color:var(--a2);text-decoration:none}
.fx-more:hover{text-decoration:underline}
/* kafelek „Brakuje funkcji?" */
.fx-cta{--a2:#2563EB;border:1.5px dashed #CBD5E1;background:#F8FAFC;text-decoration:none;color:#0F172A}
.fx-cta:hover{transform:none;border-color:#93C5FD;background:#F8FBFF;box-shadow:none}
.fx-cta .fx-ic{background:none;box-shadow:none;border:1.5px dashed #94A3B8;color:#64748B}
.fx-cta .fx-ic svg{width:22px;height:22px}
.fx-cta strong{font-size:16.5px;margin-bottom:6px}
.fx-cta-txt{font-size:14px;line-height:1.55;color:#64748B}
/* pasek „Wolisz zobaczyć?" (zamiast sekcji z filmami) */
.fx-films{box-sizing:border-box;display:flex;align-items:center;gap:18px;margin-top:28px;padding:18px 22px;border-radius:18px;background:#EFF6FF;border:1px solid #BFDBFE;color:#0F172A;scroll-margin-top:100px}
.fx-films-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;background:linear-gradient(135deg,#3B82F6,#1D4ED8);box-shadow:0 10px 20px -10px #1D4ED8}
.fx-films-ic svg{width:20px;height:20px;margin-left:2px}
.fx-films-txt{display:flex;flex-direction:column;gap:2px}
.fx-films-txt strong{font-size:16.5px}
.fx-films-txt span{font-size:14px;color:#475569}
.fx-films-btn{margin-left:auto;flex:none;padding:11px 18px;border-radius:12px;background:#2563EB;color:#fff;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.fx-films-btn:hover{background:#1D4ED8}
@media (max-width:900px){.fx-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .fx-grid{grid-template-columns:1fr;gap:10px}
  .fx-card{display:grid;grid-template-columns:42px 1fr;column-gap:14px;padding:16px}
  .fx-ic{width:42px;height:42px;border-radius:12px;margin:0;grid-row:span 3}
  .fx-ic svg{width:22px;height:22px}
  .fx-card>*:not(.fx-ic){grid-column:2}
  .fx-films{flex-wrap:wrap}
  .fx-films-btn{margin-left:0;width:100%;box-sizing:border-box;text-align:center}
}
@media (prefers-reduced-motion: reduce){.fx-card{transition:none}.fx-card:hover{transform:none}}