/* =========================================
   ARTICLES PAGE ONLY
   Uses global.css as foundation
========================================= */

/* MAIN LAYOUT */

.articles-page main {

  max-width: 1400px;

  margin: auto;

  padding:
    28px 20px 60px;

}

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

.home-hero {

  position: relative;

  margin-bottom: 34px;

}

/* EXTRA GLOW */

.home-hero::before {

  content: "";

  position: absolute;

  inset: -80px;

  background:
    radial-gradient(
      circle,
      rgba(59,130,246,0.16),
      transparent 60%
    );

  z-index: -1;

  filter: blur(90px);

}

/* =========================================
   SEARCH
========================================= */

.search-wrapper {

  max-width: 620px;

  margin:
    0 auto 24px;

}

/* =========================================
   ARTICLE COUNT
========================================= */

.articles-count {

  color: var(--text-muted);

  font-size: 15px;

  margin:
    0 0 22px 4px;

}

/* =========================================
   GRID
========================================= */

.tools-grid {

  margin-top: 10px;

}

/* =========================================
   CARDS
========================================= */

.tool-card {

  min-height: 170px;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;

}

.tool-card:hover {

  transform:
    translateY(-4px);

}

/* =========================================
   ARTICLE BADGE
========================================= */

.badge.Articles {

  background:
    linear-gradient(
      135deg,
      rgba(59,130,246,0.50),
      rgba(37,99,235,0.28)
    );

  border:
    1px solid rgba(96,165,250,0.35);

  box-shadow:
    0 0 12px rgba(59,130,246,0.18);

}

/* =========================================
   SEO BLOCK
========================================= */

#seo-block {

  max-width: 980px;

  margin:
    70px auto 0;

}

/* =========================================
   MOBILE
========================================= */

@media (max-width:768px){

  .search-wrapper {

    max-width: 100%;

  }

  .articles-count {

    text-align: center;

    margin-bottom: 18px;

  }

  .tool-card {

    min-height: auto;

  }

}