/* ==========================================================================
   INDUSTRIES.CSS — page-specific styles only.
   Mobile-first; breakpoints layered up through tablet, laptop, desktop.
   ========================================================================== */

/* ===================== BASE / MOBILE ===================== */
.industries-hero{ padding:150px 0 20px; width:100%; margin-inline:auto; text-align:center; }
.industries-hero h1{ margin:20px auto 22px; max-width:30ch; text-wrap:initial; }
.industries-hero .lead{ max-width:720px; margin-inline:auto; text-align:center; text-wrap:balance; }

.industry-grid{ display:grid; gap:24px; margin-top:20px; }
.industry-card{
  background:var(--paper); padding:36px 32px; display:flex; flex-direction:column; gap:12px;
  border-radius:12px; border:1px solid var(--paper-line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.industry-card:hover{
  background:var(--white);
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,0.04);
  border-color:var(--green-deep);
  z-index:2;
}
.industry-card__icon{ width:38px; height:38px; color:var(--green-deep); margin-bottom:8px; }
.industry-card h3{ font-size:1.25rem; font-weight:600; color:var(--ink); margin:0; }
.industry-card p{ color:var(--graphite); font-size:0.96rem; line-height:1.65; flex-grow:1; margin:0; }
.industry-card__link{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-label); font-size:0.8rem;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--green-deep); margin-top:12px;
}

/* This page runs under the dark/video theme, but .industry-card is a
   page-specific class Anti-Gravity's shared .site--dark rules never
   covered (unlike .pillar/.why-item/.service-chip/.stat-card, which all
   got a matching dark treatment in components.css). Same translucent-card
   pattern applied here for consistency, not a new design. */
.site--dark .industry-card{
  background:rgba(15,15,10,0.45) !important; -webkit-backdrop-filter:blur(14px) !important; backdrop-filter:blur(14px) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
}
.site--dark .industry-card:hover{ background:rgba(15,15,10,0.7) !important; border-color:var(--green) !important; }
.site--dark .industry-card__icon{ color:#a3ff47 !important; }
.site--dark .industry-card h3{ color:var(--paper) !important; }
.site--dark .industry-card p{ color:rgba(247,246,241,0.72) !important; }
.site--dark .industry-card__link{ color:#a3ff47 !important; }
.industry-card__link svg{ transition:transform .3s var(--ease); }
.industry-card:hover .industry-card__link svg{ transform:translateX(4px); }

/* ===================== TABLET (640px+) ===================== */
@media (min-width:640px){
  .industry-grid{ grid-template-columns:repeat(2,1fr); gap:28px; }
}

/* ===================== LAPTOP (980px+) ===================== */
@media (min-width:980px){
  .industries-hero{ padding:190px 0 30px; }
  .industry-grid{ grid-template-columns:repeat(3,1fr); gap:36px; }
}

/* ===================== DESKTOP (1300px+) ===================== */
@media (min-width:1300px){
  .industry-card{ padding:42px 40px; }
  .industry-grid{ grid-template-columns:repeat(4,1fr); gap:40px; }
}