/* ================= RESPONSIVE SYSTEM ================= */

/* ---------- GLOBAL FIX (VERY IMPORTANT) ---------- */
html, body {
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

/* ---------- TABLET (≤ 1024px) ---------- */
@media (max-width: 1024px) {

  .container {
    padding: 0 20px;
  }

  .hero-pro h1 {
    font-size: 42px;
  }

}


/* ---------- SMALL TABLET (≤ 900px) ---------- */
@media (max-width: 900px) {

  .blogs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* ================= HEADER FIX (FINAL) ================= */

@media (max-width: 768px) {

  /* Hide desktop elements */
  .navlinks,
  .search-form,
  .desktop-only {
    display: none;
  }

  /* Show menu button */
  .menu-btn {
    display: block;
    font-size: 24px;
  }

  /* Header size fix */
  .nav {
    padding: 0 12px;
    height: 60px;
    min-height: 60px;
  }

  /* Prevent overflow */
  .nav {
    overflow: hidden;
  }

}

  /* ================= HERO ================= */

  .hero-pro {
    padding: 50px 0;
  }

  .hero-pro h1 {
    font-size: 32px;
    line-height: 1.3;
  }

  .hero-pro p {
    font-size: 14px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .hero-buttons a {
    width: 100%;
    text-align: center;
  }

  /* ================= TOOLS (NO SCROLL) ================= */

  .tools-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .tool-card-mini {
    padding: 12px;
  }

  .tool-card-mini h3 {
    font-size: 12px;
  }

  .tool-icon-box {
    font-size: 20px;
  }

  /* ================= SECTION HEAD ================= */

  .tools-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .tools-subrow {
    width: 100%;
    justify-content: space-between;
  }

}


/* ---------- SMALL MOBILE (≤ 600px) ---------- */
@media (max-width: 600px) {

  .blogs-grid {
    grid-template-columns: 1fr;
  }

  .hero-pro h1 {
    font-size: 28px;
  }

  .breadcrumb {
    font-size: 12px;
  }

}


/* ---------- EXTRA SMALL (≤ 400px) ---------- */
@media (max-width: 400px) {

  .tool-card-mini h3 {
    font-size: 11px;
  }

  .hero-pro h1 {
    font-size: 24px;
  }

}

/* ================= MOBILE BLOG FIX ================= */
@media (max-width: 768px) {

  .blogs-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .blog-card {
    display: flex;
    gap: 12px;
    padding: 10px;
    align-items: flex-start;
  }

  .blog-card img {
    width: 110px !important;
    height: 70px !important;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;   /* 🔥 MOST IMPORTANT */
    display: block;
  }

  .blog-card-content {
    display: block;
    width: 100%;
  }

}

/* 🔥 RELATED POSTS (IMPORTANT ADDITION) */

@media (max-width: 768px) {

  .related-posts .related-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .related-posts .related-card {
    display: flex;
    gap: 12px;
    padding: 10px;
    align-items: flex-start;   /* 🔥 KEY FIX */
  }

  .related-posts .related-card img {
    width: 90px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .related-posts .related-content {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .related-posts .related-card h3 {
    font-size: 14px;
    margin: 0;
    line-height: 1.3;
  }

  .related-posts .related-desc {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
  }

}