/* ============================================================
   SOFTWARE360 — TOOLS HUB STYLES
   ============================================================ */

.s360-tools-page {
  padding-top: var(--nav-height);
  /* NOTE: Do NOT set min-height:100vh here. On pages like About/Contact
     where this wrapper only contains the hero, a viewport-height minimum
     creates a huge empty block between the hero and the rest of the page. */
}

.s360-tools-page__hero {
  background: var(--s360-gradient-hero);
  padding: var(--sp-16) 0 var(--sp-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.s360-tools-page__hero .s360-glow {
  opacity: 0.5;
}

/* Search bar */
.s360-tools-search {
  max-width: 500px;
  margin: var(--sp-8) auto 0;
  position: relative;
}

.s360-tools-search input {
  width: 100%;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-12);
  font-size: 1rem;
  background: var(--s360-white);
  border: 1.5px solid var(--s360-mist);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transition: all var(--dur-fast) var(--ease-out);
}

.s360-tools-search input:focus {
  border-color: var(--s360-azure);
  box-shadow: var(--shadow-lg), 0 0 0 3px rgba(77, 163, 255, 0.1);
}

.s360-tools-search svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--s360-mist);
  pointer-events: none;
}

/* Tools grid */
.s360-tools-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
  padding: var(--sp-12) 0 var(--sp-24);
}

@media (max-width: 1024px) {
  .s360-tools-page__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .s360-tools-page__grid { grid-template-columns: 1fr; }
}