/* ======================================================================
   Industries page (pages/industries.html). Loaded after style.css and only on this page.
   Same layout as the RTL Design page: reuses the ChipStack AI (cs-*) and Design for AI (dfa-*) parts;
   this file only adds what is specific to Industries. Colours follow the PulseWave theme.
   ====================================================================== */
[data-page="industries"] { --font-head: var(--font-nav); --font-body: var(--font-nav); }
[data-page="industries"] main { font-family: var(--font-nav); color: var(--nav-ink); background: #fff; }

/* ---------- hero: ChipStack hero with the existing board photo; same buttons and hovers as RTL Design ---------- */
.ind-hero .cs-hero__art { background-image: url("../img/photos/board.jpg"); }
.ind-hero .cs-hero__title { max-width: 900px; }
.ind-hero .cs-hero__btns { column-gap: 35px; }
.ind-hero .cs-hero__btns .btn { min-width: 220px; height: 46.64px; padding: 12px 30px 10px; border: 0.8px solid transparent; justify-content: center; }
.ind-hero .cs-hero__btns .cs-btn--white:hover { border-color: #fff; }

/* ---------- overview: chip illustration ~100px right of the text, centred on it (as on RTL Design) ---------- */
.ind-art { position: absolute; top: 96px; bottom: 64px; left: calc(50% + 407px); width: 240px; display: flex; align-items: center; pointer-events: none; }
.ind-art svg { display: block; width: 100%; height: auto; }

/* ---------- industries tabs: the service chips under each panel's text ---------- */
.ind-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ind-chips span { padding: 4px 12px; border: 0.8px solid #d7dde0; background: #f5f5f5; font: 400 12px/18px var(--font-nav); letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--nav-ink); }

/* ---------- offerings on the grey band: 96px top padding so it sits evenly in the band ---------- */
[data-page="industries"] #offerings { padding-top: 96px; }

/* ---------- get help: two columns like the RTL Design FAQ intro; outline button (dark fill on hover) ---------- */
.ind-help { padding: 96px 0 112px; }
.ind-help__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: start; }
.ind-help .cs-h2 { margin-top: 0; }
.ind-help__grid > div > p { margin: 0 0 32px; }
.cs-btn--line { min-width: 220px; height: 47px; padding: 12px 30px 10px; justify-content: center; border: 1.6px solid var(--nav-ink); background: #fff; color: var(--nav-ink);
  font: 500 14.4px/23.04px var(--font-nav); letter-spacing: 1.728px; text-transform: uppercase; transition: background-color .3s, color .3s; }
.cs-btn--line:hover, .cs-btn--line:focus-visible { background: var(--nav-ink); color: #fff; }

/* ---------- smaller screens ---------- */
@media (max-width: 1240px) { .ind-art { display: none; } }
@media (max-width: 1100px) { .ind-help__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; } }
@media (max-width: 760px) {
  .ind-help { padding: 56px 0; }
  .ind-hero .cs-hero__btns .btn { min-width: 0; }
}

/* Overview -> Industries gap = the 112px section gap of the RTL Design page (48 section padding + 16 text margin + 48 here) */
[data-page="industries"] #applications { padding-top: 48px; }