/* ============================================================
   CONTACT + SOCIAL – Basic-Card Style Slider (4–3 pattern)
   File: css/talent-profile/profile-contact-social.css
   Namespace: tp-ctx-*
   ============================================================ */

/* ---------- Design tokens ---------- */
.tp-ctx-wrap{
  --bg: linear-gradient(180deg,#0b0b0b 0%,#141414 100%);
  --head: linear-gradient(180deg,#171717 0%,#101010 100%);
  --card: linear-gradient(180deg,#141414 0%,#1b1b1b 100%);
  --border: rgba(255,255,255,.06);
  --border-weak: rgba(255,255,255,.05);
  --text:#fff; --text-dim:#e6e6e6; --muted:#b8b8b8;
  --shadow: 0 0 16px rgba(0,0,0,.5);
  --shadow-hover: 0 0 22px rgba(0,0,0,.6);
  --red:#D90404;
}

/* -------- Card (BI stil) -------- */
.tp-ctx-card{
  background:var(--bg);
  border:1px solid var(--border-weak);
  border-radius:16px;
  color:var(--text);
  box-shadow:var(--shadow);
  overflow:hidden;
  margin:0 0 1rem 0;
  transition:box-shadow .3s, transform .3s;
}
.tp-ctx-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }

/* -------- Head -------- */
.tp-ctx-head{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--head);
  padding:1rem 1.2rem;
  border-bottom:1px solid var(--border);
}
.tp-ctx-titles{ display:flex; flex-direction:column; gap:.25rem; }
.tp-ctx-titles h3{
  margin:0; display:flex; align-items:center; gap:.5rem;
  font-size:1.125rem; font-weight:800; letter-spacing:.2px;
}
.tp-ctx-titles h3 i{ color:var(--red); }
.tp-ctx-titles p{
  margin:0; color:#d8d8d8; font-size:.95rem; line-height:1.35;
  max-width:60ch;
}

/* -------- Head Nav (arrows + counter) -------- */
.tp-ctx-nav{ display:flex; align-items:center; gap:.5rem; }
.tp-ctx-count{ color:#e4e4e4; font-size:.95rem; }
.tp-ctx-count b{ color:#fff; font-weight:800; }
.tp-ctx-arrow{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.28);
  color:#efefef; transition:all .2s ease;
}
.tp-ctx-arrow:hover{
  background:#fff; color:#111; border-color:transparent;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.tp-ctx-arrow i{ pointer-events:none; }

/* -------- Slider structure -------- */
.tp-ctx-mask{ position:relative; overflow:hidden; }
.tp-ctx-track{ display:flex; will-change:transform; }
.tp-ctx-slide{ flex:0 0 100%; padding:1.1rem 1.2rem; }

/* Grid: dynamic columns via .cols-N on slide (N=2..4) */
.tp-ctx-grid{ display:grid; gap:.9rem; }
.tp-ctx-slide.cols-4 .tp-ctx-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.tp-ctx-slide.cols-3 .tp-ctx-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.tp-ctx-slide.cols-2 .tp-ctx-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }

/* Responsive: tablet -> 2, mobile -> 1 */
@media (max-width: 992px){
  .tp-ctx-slide.cols-4 .tp-ctx-grid,
  .tp-ctx-slide.cols-3 .tp-ctx-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .tp-ctx-slide .tp-ctx-grid{ grid-template-columns:1fr !important; }
}

/* -------- Item (ikon + label + değer) -------- */
.tp-ctx-item{
  background:var(--card);
  border:1px solid var(--border-weak);
  border-radius:12px;
  padding:1rem;
  min-height:96px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
  transition:background .25s, border-color .25s, transform .2s;
}
.tp-ctx-item:hover{ background:#1a1a1a; border-color:var(--border); transform:translateY(-1px); }

.tp-ctx-item i{
  position:absolute; top:.9rem; left:.95rem;
  color:var(--red); font-size:1.15rem;
}
.tp-ctx-item h4{
  margin:0 0 .3rem 1.9rem;
  font-size:.95rem; font-weight:800; color:#fff;
}
.tp-ctx-val{
  margin:0 0 0 1.9rem;
  font-size:.94rem; font-weight:600; color:var(--text-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tp-ctx-val a{
  color:var(--text-dim); text-decoration:none; transition:color .2s;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; max-width:100%;
}
.tp-ctx-val a:hover{ color:var(--red); }

/* Empty card style */
.tp-ctx-item--empty{ align-items:flex-start; }
.tp-ctx-item--empty i{ top:1rem; }
.tp-ctx-item--empty h4{ color:#e6e6e6; font-weight:700; }
.tp-ctx-item--empty .tp-ctx-val{ color:var(--muted); }

/* -------- Focus states (a11y) -------- */
.tp-ctx-arrow:focus-visible,
.tp-ctx-val a:focus-visible{
  outline:2px solid var(--red); outline-offset:2px; border-color:transparent;
}

/* -------- Outer spacing harmony -------- */
.tp-ctx-wrap{ margin-top:.75rem; }