/* ============================================================
   BASIC INFO SLIDER – 4/3 pattern (overflow-safe, equal-height)
   Namespace: tp-basic-slider-*
============================================================ */
.tp-basic-slider-wrap{
  --red:#D90404; --text:#fff; --dim:rgba(255,255,255,.78);
  --line:rgba(255,255,255,.10); --card:#111; --card2:#171717;
  background:linear-gradient(180deg,#0b0b0b 0%,#141414 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; color:var(--text);
  box-shadow:0 0 16px rgba(0,0,0,.45);
  overflow:hidden;

  /* equal height support */
  height:100%;
  display:flex; flex-direction:column;
}

/* Head */
.tp-basic-slider-head{
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.tp-basic-slider-title{ font-weight:700; font-size:1.25rem; display:flex; align-items:center; gap:.5rem; margin:0; }
.tp-basic-slider-title i{ color:var(--red); }
.tp-basic-slider-sub{ color:var(--dim); font-size:.95rem; margin:3px 0 0 1.9rem; }
.tp-basic-slider-titles{ display:flex; flex-direction:column; }
.tp-basic-slider-nav{ display:flex; align-items:center; gap:8px; }
.tp-basic-slider-arrow{
  width:34px; height:34px; border-radius:9px;
  background:#1a1a1a; border:1px solid var(--line);
  display:grid; place-items:center; color:#fff; transition:.2s;
}
.tp-basic-slider-arrow:hover{ background:#222; }
.tp-basic-slider-count{ color:var(--dim); }

/* Viewport & Track */
.tp-basic-slider-mask{ overflow:hidden; }
.tp-basic-slider-track{ display:flex; }

/* Slides & grid */
.tp-basic-slider-slide{ padding:16px; }
.tp-basic-slider-grid{
  display:grid; gap:14px;
  /* equal height for grid children */
  grid-auto-rows: 1fr;
}
.tp-basic-slider-slide.cols-4 .tp-basic-slider-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.tp-basic-slider-slide.cols-3 .tp-basic-slider-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }

/* Cards (equal height, centered) */
.tp-basic-slider-card{
  background:linear-gradient(180deg,var(--card) 0%, var(--card2) 100%);
  border:1px solid var(--line); border-radius:12px;
  padding:14px 12px;
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; transition:background .25s ease;
}
.tp-basic-slider-card:hover{ background:#191919; }

/* Icon */
.tp-basic-slider-card i{ color:var(--red); font-size:1.6rem; line-height:1; }

/* Heading (max 2 lines) */
.tp-basic-slider-card h4{
  margin:0;
  font-weight:700;
  font-size:clamp(.95rem, 1.1vw, 1rem);
  line-height:1.15;
  max-width:95%;
  overflow:hidden; text-overflow:ellipsis;
  word-break:break-word; hyphens:auto;
}

/* Value (smart wrap, up to 2 lines) */
.tp-basic-slider-card .tp-basic-val{
  margin:0;
  color:var(--dim);
  font-weight:500;
  font-size:clamp(.9rem, 1vw, .95rem);
  line-height:1.2;
  max-width:95%;
  overflow:hidden; text-overflow:ellipsis;
  word-break:break-word; hyphens:auto; text-wrap:balance;
}

/* Flag under value */
.tp-basic-flag{ display:inline-block; margin-top:6px; transform:scale(1.05); }

/* Dots */
.tp-basic-slider-dots{ display:flex; justify-content:center; gap:8px; padding:10px 0 16px; }
.tp-basic-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.25); border:0; cursor:pointer; }
.tp-basic-dot.is-active{ background:var(--red); }

/* Responsive */
@media (max-width:1200px){
  .tp-basic-slider-slide.cols-4 .tp-basic-slider-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:992px){
  .tp-basic-slider-slide.cols-4 .tp-basic-slider-grid,
  .tp-basic-slider-slide.cols-3 .tp-basic-slider-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .tp-basic-slider-slide.cols-4 .tp-basic-slider-grid,
  .tp-basic-slider-slide.cols-3 .tp-basic-slider-grid{ grid-template-columns:1fr; }
  .tp-basic-slider-sub{ margin-left:1.2rem; }
}

/* Desktop equal-height helper (use .tp-equal-row on the .row) */
@media (min-width:992px){
  .tp-equal-row{ display:flex; align-items:stretch; gap:20px; }
  .tp-equal-row > [class*="col-lg-6"]{ display:flex; }
}