/* ==========================================================================
   equipments.css — Styles for equipments.html (fleet listing page) only
   Horizon Access Solutions
   ========================================================================== */

/* ── Filter tabs ── */
.filter-tab {
  font: 700 14px Barlow;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 11px 24px;
  border-radius: 4px;
  border: 2px solid #E6EAF1;
  background: #fff;
  color: #52617A;
  cursor: pointer;
  transition: all .18s ease;
}
.filter-tab:hover { border-color: #02214F; color: #02214F; }
.filter-tab.active { background: #02214F; border-color: #02214F; color: #fff; }

/* ── Search input ── */
.search-input {
  font: 500 15px Barlow;
  border: 1.5px solid #E1E6EE;
  border-radius: 6px;
  padding: 12px 18px;
  outline: none;
  transition: border-color .18s ease;
  width: 280px;
  color: #1C2B45;
}
.search-input:focus { border-color: #02214F; }
.search-input::placeholder { color: #9AA7BC; }

/* ── Product grid ── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Product card (fleet listing variant) ── */
.eq-card {
  border: 1px solid #E6EAF1;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.eq-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(2,33,79,.13);
  border-color: #D2DAE6;
}

/* ── Responsive ── */
@media (max-width: 1060px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .eq-hero-h1 { font-size: 52px !important; }
}

@media (max-width: 768px) {
  .eq-hero-section { padding: 44px 0 36px !important; }
  .eq-main-section { padding: 36px 0 60px !important; }
  .eq-hero-h1 { font-size: 40px !important; }
  .eq-cta-inner { flex-direction: column; align-items: flex-start !important; }
  .eq-cta-inner h2 { font-size: 30px !important; }
  .eq-cta-inner p  { max-width: 100% !important; }
}

@media (max-width: 680px) {
  .prod-grid { grid-template-columns: 1fr; }
  .filter-row { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
  .search-input { width: 100%; }
  #filter-tabs { gap: 8px !important; }
  .filter-tab { font-size: 12px; padding: 9px 16px; }
}

@media (max-width: 480px) {
  .prod-grid { gap: 16px; }
  .filter-tab { padding: 8px 13px; font-size: 11.5px; }
  .eq-hero-h1 { font-size: 32px !important; }
  .eq-hero-section { padding: 32px 0 28px !important; }
  .eq-cta-inner h2 { font-size: 26px !important; }
}