/* ============================================================
   industry-cards.css
   Styles the three industry overview cards at the bottom of
   the Home page (Mining, Logistics, Food & Hospitality).
   ============================================================ */

/* --- Section wrapper --- */
.industries-section {
  padding: 0 48px 64px;
  max-width: 1300px;
  margin: 0 auto;
}

/* --- Three-column card grid --- */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* --- Individual card --- */
.industry-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
  background: var(--white);
}
.industry-card:hover { border-color: #B0BAD0; }
.industry-card img {
  width: 100%;
  height: 155px;
  object-fit: cover;
  display: block;
}

/* --- Card body --- */
.industry-card__body { padding: 15px 18px; }

/* --- Vertical label pill --- */
.industry-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.industry-card__label--mining     { color: var(--res); }
.industry-card__label--logistics  { color: var(--log); }
.industry-card__label--hospitality { color: var(--hos); }

/* --- Card title --- */
.industry-card__body h4 {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}