/* ============================================
   Zebra Industries Grid — block-specific styles
   Loaded only on pages that contain a zebra/industries block.

   Source: migrated from patterns/css/legacy-sections.css (Industries section).
   Differences vs. original:
     - The legacy markup reused the .services-head class for the section
       header. To keep block isolation clean (no cross-block CSS dependency,
       per project-plan rule "separate Files pro Block, keine premature
       abstraction"), the header here uses its own .industries-head*
       selectors. The rules themselves are 1:1 copies of the services
       header so the visual result is identical. A future shared
       --c-section-head pattern can collapse this duplication after the
       last block (CTA) is extracted.
     - .industries-head--split / --centered toggles work just like the
       services counterpart.
   ============================================ */

.industries{
  padding:var(--section-pad) 0;
}

/* ---- Header ---------------------------------------------------------- */
.industries-head{
  margin-bottom:var(--xxl);
}
.industries-head--split{
  display:grid;
  grid-template-columns:3fr 2fr;
  gap:var(--xl);
  align-items:end;
}
.industries-head--centered{
  display:block;
  text-align:center;
  max-width:880px;
  margin-left:auto;
  margin-right:auto;
}
.industries-head__main .eyebrow{display:block;margin-bottom:var(--md)}
.industries-head--split .industries-head__main h2{max-width:20ch}
.industries-head--centered .industries-head__main h2{margin:0 auto var(--md)}
.industries-head .pitch{
  color:#222;
  font-size:var(--fs-body-lg);
  margin:0;
}

/* ---- Grid ------------------------------------------------------------ */
.industries-grid{
  display:grid;
  gap:1px;
  background:var(--c-line);
  border:1px solid var(--c-line);
}
.industries-grid--3{ grid-template-columns:repeat(3,1fr) }
.industries-grid--2{ grid-template-columns:repeat(2,1fr) }
.industries-grid--1{ grid-template-columns:1fr }
.industries-grid--next{ margin-top:1px }
.industries-cta{ text-align:center; margin-top:var(--xl) }

.industry{
  background:#fff;
  padding:var(--xl) var(--lg);
  display:flex;
  flex-direction:column;
  gap:var(--sm);
  transition:background .25s ease;
  cursor:pointer;
}
.industry:hover{ background:var(--c-primary) }
.industry:hover .norms{ color:#000 }

.industry .status{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--c-muted);
}
.industry h3{
  font-family:var(--ff-display);
  font-size:24px;
  font-weight:400;
  line-height:1.05;
  letter-spacing:.025em;
  text-transform:uppercase;
  margin:var(--sm) 0 var(--sm);
  color:#000;
}
.industry p{
  font-size:14px;
  color:#333;
  margin:0;
  line-height:1.6;
}
.industry .norms{
  margin-top:auto;
  padding-top:var(--md);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--c-primary);
}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 980px){
  .industries-head--split{
    grid-template-columns:1fr;
    gap:var(--xl);
  }
  .industries-grid--3,
  .industries-grid--2{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width: 640px){
  .industries-grid--3,
  .industries-grid--2,
  .industries-grid--1{ grid-template-columns:1fr }
}

/* ---- Background colour variants ------------------------------------- */

/* SOFT */
.industries--bg-soft .industry { background: #fff; }
.industries--bg-soft .industries-grid { background: var(--c-line); border-color: var(--c-line); }

/* BLACK */
.industries--bg-black { border: none; }
.industries--bg-black .industries-head__main h2 { color: #fff; }
.industries--bg-black .industries-head .pitch { color: #aaa; }
.industries--bg-black .industries-head__main .eyebrow { color: var(--c-primary); }
.industries--bg-black .industries-grid { background: #333; border-color: #333; }
.industries--bg-black .industry { background: #1a1a1a; }
.industries--bg-black .industry .status { color: var(--c-primary); }
.industries--bg-black .industry h3 { color: #fff; }
.industries--bg-black .industry p { color: #aaa; }
.industries--bg-black .industry .norms { color: var(--c-primary); }
.industries--bg-black .industry:hover { background: var(--c-primary); }
.industries--bg-black .industry:hover h3,
.industries--bg-black .industry:hover p,
.industries--bg-black .industry:hover .status,
.industries--bg-black .industry:hover .norms { color: #000; }

.industries--bg-yellow .industries-cta .btn-zebra,
.industries--bg-yellow .industries-cta .btn-zebra.inverse {
  background: #000;
  color: var(--c-primary);
  border-color: #000;
}
.industries--bg-yellow .industries-cta .btn-zebra:hover,
.industries--bg-yellow .industries-cta .btn-zebra.inverse:hover {
  background: #333;
  color: #fff;
  border-color: #333;
}

/* YELLOW */
.industries--bg-yellow .industry .norms { color: #000; }
.industries--bg-yellow .industries-head .pitch { color: #333; }
.industries--bg-yellow .industries-grid { background: rgba(0,0,0,.15); border-color: rgba(0,0,0,.15); }
.industries--bg-yellow .industry { background: #fff; }
.industries--bg-yellow .industry:hover { background: #000; }
.industries--bg-yellow .industry:hover h3,
.industries--bg-yellow .industry:hover p,
.industries--bg-yellow .industry:hover .norms { color: #fff; }
.industries--bg-yellow .industry:hover .status { color: var(--c-primary); }