/* =========================================================
   BENZINEHUB — industries.css
   Extra styles for industries.html only. Load it AFTER style.css.
   1 Setup   2 Dark hero + icon grid + tabs   3 Industry groups
   4 "Don't see yours" card   5 Call to action   6 Responsive
   ========================================================= */

/* 1. SETUP ------------------------------------------------ */
.brand img,
.site-footer .brand img { width: auto; height: 34px; }   /* wide wordmark logo */
[hidden] { display: none !important; }

/* 2. DARK HERO --------------------------------------------- */
.ind-hero { padding: 26px 0 0; background: var(--navy); color: #fff; }
.ind-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start; }
.crumbs { display: flex; gap: 12px; margin-bottom: 14px; font-size: 13px; font-weight: 500; color: #96a8cd; }
.crumbs a:hover { color: #fff; }
.ind-hero h1 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); }
.ind-lead { max-width: 540px; margin-top: 18px; font-size: 17px; line-height: 1.6; color: #b9c6e2; }
.ind-pill {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; padding: 8px 18px 8px 16px;
  border-radius: 999px; background: #1e3460; font-size: 13px; font-weight: 500;
}
.ind-pill i { width: 9px; height: 9px; border-radius: 50%; background: #7fb0ff; }

/* the nine icon tiles: delete the block marked ICON GRID in industries.html to remove them */
.ind-mosaic { display: grid; grid-template-columns: repeat(3, 92px); gap: 14px; padding-bottom: 40px; }
.ind-tile { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 22px; color: #fff; font-size: 30px; }
.ind-tile.t-blue   { background: #1d63f0; }
.ind-tile.t-purple { background: #7c4dff; }
.ind-tile.t-coral  { background: #f0553c; }
.ind-tile.t-green  { background: #10a36f; }
.ind-tile.t-orange { background: #f59e0b; }
.ind-tile.t-pink   { background: #d9469a; }
.ind-tile.t-teal   { background: #0e9f8e; }
.ind-tile.t-navy   { background: #1e3460; color: #7fb0ff; }

/* tabs (built by industries.js) */
.ind-tabs { display: flex; flex-wrap: wrap; gap: 0 38px; margin-top: 8px; border-bottom: 1px solid #2c4880; }
.ind-tabs button {
  position: relative; margin-bottom: -1px; padding: 16px 0 18px; border: 0; border-bottom: 3px solid transparent;
  background: none; font: 500 15px var(--font); color: #b9c6e2; cursor: pointer;
}
.ind-tabs button:hover { color: #fff; }
.ind-tabs button[aria-pressed="true"] { border-bottom-color: #7fb0ff; color: #fff; font-weight: 700; }

/* 3. INDUSTRY GROUPS --------------------------------------- */
.cat-block {
  /* colours: set data-color="blue | green | purple | orange | teal | pink | red | indigo | sky" */
  --c: #1d63f0; --c-soft: #eaf1ff; --c-text: #0f1b33;
  padding: 64px 0; background: #fff; scroll-margin-top: 78px;
}
@supports (color: color-mix(in srgb, red 10%, white)) {
  .cat-block {
    --c-soft: color-mix(in srgb, var(--c) 13%, #fff);
    --c-text: color-mix(in srgb, var(--c) 72%, #000);
  }
}
.cat-block[data-color="blue"]   { --c: #1d63f0; }
.cat-block[data-color="green"]  { --c: #10a36f; }
.cat-block[data-color="purple"] { --c: #7c4dff; }
.cat-block[data-color="orange"] { --c: #f59e0b; }
.cat-block[data-color="teal"]   { --c: #0e9f8e; }
.cat-block[data-color="pink"]   { --c: #d9469a; }
.cat-block[data-color="red"]    { --c: #e5484d; }
.cat-block[data-color="indigo"] { --c: #4f46e5; }
.cat-block[data-color="sky"]    { --c: #0284c7; }
.cat-block:nth-child(even) { background: var(--bg); }

.cat-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 64px; align-items: start; }
.cat-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 15px; background: var(--c); color: #fff; font-size: 24px; }
.cat-intro h2 { margin-top: 24px; font-size: clamp(1.6rem, 2.1vw, 1.9rem); }
.cat-intro p { max-width: 350px; margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.cat-intro .cat-count {
  display: inline-block; margin-top: 16px; padding: 4px 13px; border-radius: 14px;
  background: var(--c-soft); color: var(--c-text); font-size: 12.5px; font-weight: 700;
}
.cat-intro .more { display: flex; margin-top: 20px; font-size: 13.5px; }

.type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.type {
  display: flex; align-items: center; gap: 16px; min-height: 100px; padding: 16px 18px;
  border: 1.5px solid var(--line); border-radius: 14px; background: #fff; transition: border-color 0.15s;
}
.type:hover { border-color: var(--c); }
.type-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--c-soft); color: var(--c); font-size: 20px; }
.type-text { flex: 1; min-width: 0; }
.type-text strong { display: block; font-size: 15px; line-height: 1.3; }
.type-text span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.type > .ic { flex: none; font-size: 16px; color: #96a4be; transition: transform 0.15s, color 0.15s; }
.type:hover > .ic { color: var(--c); transform: translateX(3px); }

/* 4. "DON'T SEE YOURS" CARD ---------------------------------- */
.ind-more { padding: 40px 0; background: var(--bg); }
.ind-more-card {
  display: flex; align-items: center; gap: 28px; padding: 40px; border: 1.5px solid var(--line);
  border-radius: 20px; background: #fff;
}
.ind-more-ic { display: grid; place-items: center; flex: none; width: 68px; height: 68px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 26px; }
.ind-more-card h2 { font-size: 1.5rem; }
.ind-more-card p { max-width: 640px; margin-top: 8px; color: var(--muted); }
.ind-more-card .btn { margin-left: auto; flex: none; }

/* 5. CALL TO ACTION (same banner as the other pages, with a tidier heading) */
.cta-grid { grid-template-columns: 1.8fr 1fr 0.7fr; }
.cta h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); }

/* 6. RESPONSIVE --------------------------------------------- */
@media (max-width: 1180px) {
  .cta-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .ind-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ind-mosaic { display: none; }
  .ind-pill { margin-bottom: 30px; }
  .cat-block { padding: 48px 0; }
  .cat-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cat-intro p { max-width: 560px; }
  .ind-more-card { flex-wrap: wrap; }
  .ind-more-card .btn { margin-left: 0; }
}
@media (max-width: 680px) {
  .ind-tabs { flex-wrap: nowrap; gap: 0 26px; overflow-x: auto; white-space: nowrap; }
  .type-grid, .cta-grid { grid-template-columns: minmax(0, 1fr); }
  .ind-more-card { padding: 26px; }
}