/* ============================================================
   Дом Фенікса — соцмережі.
   Два варіанти: компактний ряд і картки-секція.
   ============================================================ */

.df-socials{list-style:none;margin:0;padding:0}

/* ─── Варіант «ряд»: підвал, шапка ─────────────────── */
.df-socials--row{display:flex;flex-wrap:wrap;gap:10px}

.df-social{
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid rgba(201,169,97,.3);
  color:#C9A961;text-decoration:none;
  transition:color .22s, border-color .22s, background .22s, transform .22s;
}
.df-social svg{width:18px;height:18px}
.df-social:hover{
  color:#E9D19B;border-color:#C9A961;
  background:rgba(201,169,97,.1);
  transform:translateY(-2px);
}

/* ─── Варіант «картки»: секція сторінки ────────────── */
.df-socials-block{padding:88px 0}
.df-socials-title{
  font-family:var(--df-display,'Forum',serif);font-weight:400;
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;
  color:var(--df-gold-lit,#E9D19B);
  margin:14px 0 44px;
}

.df-socials--cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px;
  background:rgba(201,169,97,.22);
  border:1px solid rgba(201,169,97,.22);
}

.df-social-card{
  display:flex;align-items:center;gap:18px;
  padding:26px 24px;min-height:100%;
  background:#060A24;color:#F2ECDC;text-decoration:none;
  transition:background .25s;
}
.df-social-card:hover{background:#0F1440}

.df-social-ico{
  flex:0 0 auto;width:46px;height:46px;
  display:grid;place-items:center;
  border:1px solid rgba(201,169,97,.32);
  color:#C9A961;transition:color .25s, border-color .25s;
}
.df-social-ico svg{width:21px;height:21px}

.df-social-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.df-social-text b{
  font-family:var(--df-display,'Forum',serif);font-weight:400;
  font-size:1.16rem;letter-spacing:.04em;color:#E9D19B;
}
.df-social-handle{
  font-size:.78rem;letter-spacing:.06em;color:rgba(201,169,97,.8);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.df-social-note{
  font-size:.82rem;line-height:1.45;color:rgba(242,236,220,.6);margin-top:5px;
}

.df-social-arrow{
  margin-left:auto;flex:0 0 auto;
  color:#C9A961;font-size:1.15rem;opacity:0;
  transform:translateX(-6px);
  transition:opacity .25s, transform .25s;
}
.df-social-card:hover .df-social-arrow{opacity:1;transform:translateX(0)}

/* Фірмовий колір проступає лише при наведенні — інакше
   п'ять різних брендів розірвуть палітру сторінки. */
.df-social-card:hover .df-social-ico{border-color:currentColor}
.df-social--instagram:hover .df-social-ico{color:#E1418A}
.df-social--telegram:hover  .df-social-ico{color:#3FA2E0}
.df-social--youtube:hover   .df-social-ico{color:#F0392B}
.df-social--tiktok:hover    .df-social-ico{color:#25F4EE}
.df-social--facebook:hover  .df-social-ico{color:#4C7FE8}

.df-socials--row .df-social--instagram:hover{color:#E1418A;border-color:#E1418A}
.df-socials--row .df-social--telegram:hover {color:#3FA2E0;border-color:#3FA2E0}
.df-socials--row .df-social--youtube:hover  {color:#F0392B;border-color:#F0392B}
.df-socials--row .df-social--tiktok:hover   {color:#25F4EE;border-color:#25F4EE}
.df-socials--row .df-social--facebook:hover {color:#4C7FE8;border-color:#4C7FE8}

@media (max-width:600px){
  .df-socials-block{padding:60px 0}
  .df-social-card{padding:22px 20px;gap:15px}
  .df-social-ico{width:40px;height:40px}
  .df-social-ico svg{width:18px;height:18px}
}

@media (prefers-reduced-motion:reduce){
  .df-social,.df-social-card,.df-social-arrow,.df-social-ico{transition-duration:.01ms!important}
  .df-social:hover{transform:none}
}