/* ===== Blog layout — pingtoolnet.com ===== */
:root{
  --bg:#0b0c10; --card:#13151a; --text:#e8eaed; --muted:#9aa3b2; --border:#232633; --accent:#4f46e5;
}

@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --card:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb; --accent:#4f46e5; }
}

html,body{background:var(--bg); color:var(--text);}

/* Container widths (Bootstrap already helps; we tighten spacing) */
.container{max-width:1100px}

/* Page title */
.blog-title{
  font-weight:800;
  font-size:clamp(1.6rem, 1.1rem + 2vw, 2.2rem);
  letter-spacing:.2px;
}

/* Grid: nicer gaps on all screens */
.row.g-4{--bs-gutter-x:1.2rem; --bs-gutter-y:1.2rem}
@media (min-width:992px){ .row.g-4{ --bs-gutter-x:1.4rem; --bs-gutter-y:1.4rem }}

/* Card styling */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  border-color:color-mix(in oklab, var(--border) 75%, var(--accent));
}

/* Image: keep aspect ratio, cover, rounded top corners */
.card-img-top{
  aspect-ratio:16/9;
  object-fit:cover;
  border-bottom:1px solid var(--border);
}

/* Card body spacing & typography */
.card-body{ padding:16px 16px 18px }
.card-title{
  font-weight:700;
  font-size:clamp(1.05rem, .98rem + .4vw, 1.2rem);
  margin-bottom:.35rem;
}
.card-text{
  color:var(--muted);
  font-size:.98rem;
  line-height:1.55;
  min-height:3.1em; /* 2 rreshta mesatar */
}

/* Button: neutral modern look over any theme */
.btn-primary{
  --bs-btn-bg:var(--accent);
  --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:color-mix(in oklab, var(--accent) 88%, black);
  --bs-btn-hover-border-color:var(--accent);
  --bs-btn-focus-shadow-rgb:79,70,229;
}

/* Better touch targets on phones */
@media (max-width:575.98px){
  .btn{ padding:.65rem 1rem; font-size:1rem }
  .card-body{ padding:14px 14px 16px }
}

/* Make two columns on tablets, three on wide desktops (overriding row-cols) */
@media (min-width:768px){
  .card-col{ flex:0 0 50%; max-width:50% }
}
@media (min-width:1200px){
  .card-col{ flex:0 0 33.3333%; max-width:33.3333% }
}

/* Smooth image loading hint */
img[loading="lazy"]{ filter:saturate(.98) contrast(1.02) }

/* Subtle divider for header/footer from page content if tė tuat janė tė bardha */
.section-divider{ border-top:1px solid var(--border); margin-top:1.2rem; padding-top:1.2rem }