/* ==========================================================================
   WSA Sales — industries stylesheet
   --------------------------------------------------------------------------
   Shared by industries/index.html (overview) and every industry detail page.
   Loads AFTER ../site.css, which already holds tokens, nav, footer and the
   section.block / .block.alt bands.
   Layout follows the Claude Design mockup (Testing Ground/WSA Industries.html),
   restyled to the site's tokens: --gold, 6px buttons, 10px cards, overlay bar.
   ========================================================================== */

.ind-wrap { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; }

/* ── BREADCRUMB BAR (detail pages, sits right under the fixed nav) ──────── */
.ind-crumb {
  position: sticky; top: 100px; z-index: 50;   /* stays under the fixed nav (nav is 100px, 80px on phones) */
  margin-top: 100px; padding: 1rem 0; background: var(--white); border-bottom: 1px solid #e3e7ec;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mid);
}
.ind-crumb a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.ind-crumb b { color: var(--navy-dark); font-weight: 600; }

/* ── HERO ─────────────────────────────────────────────────────────────────
   Photo is a real <img> behind a navy overlay (::before), so a missing or
   slow image just leaves the navy background. */
.ind-hero { position: relative; overflow: hidden; margin-top: 100px; padding: 5.5rem 0 5rem; background: var(--navy-dark); color: var(--white); }
.ind-crumb + .ind-hero { margin-top: 0; }
.ind-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ind-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(26,47,71,0.95) 0%, rgba(26,47,71,0.82) 55%, rgba(26,47,71,0.4) 100%);
}
.ind-hero.flat::before { background: rgba(26,47,71,0.86); }
.ind-hero .ind-wrap { position: relative; z-index: 2; }
/* Bottom of every hero fades into the section below (white on detail pages, off-white elsewhere).
   Extra bottom padding keeps the buttons clear of the fade. */
.ind-hero { padding-bottom: calc(5rem + var(--section-fade) / 2); }
.ind-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--section-fade); z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,47,71,0), var(--fade-to, var(--off-white)));
}
.ind-hero:has(+ .ind-section.white) { --fade-to: var(--white); }
/* Photo heroes: navy on the text half only; the photo sits clear on the right half and fades
   into the navy. Heroes without a photo keep the full navy look above.
   Add class "full" to keep the photo behind the text with the navy shading (SCADA, Instrumentation). */
.ind-hero:has(> .ind-hero-bg:not(.full))::before { display: none; }
.ind-hero > .ind-hero-bg:not(.full) { left: 50%; width: 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%); }
.ind-hero:has(> .ind-hero-bg:not(.full)) h1 { max-width: 560px; }
.ind-hero:has(> .ind-hero-bg:not(.full)) .sub { max-width: 500px; }
@media (min-width: 901px) {   /* two-photo heroes: short fade so the left photo stays clear */
  /* half-photo heroes: a ~660px text block sitting in the navy half, ending just before the photo fade */
  .ind-hero:has(> .ind-hero-bg:not(.full)) .ind-wrap { max-width: none; margin: 0; padding-left: max(2.5rem, calc(47vw - min(660px, 42vw))); }
  .ind-hero:has(> .ind-hero-bg:not(.full)) h1 { max-width: min(660px, 42vw); }
  .ind-hero:has(> .ind-hero-bg:not(.full)) .sub { max-width: min(600px, 40vw); }
  .ind-hero > .ind-hero-bg.full { object-fit: contain; }   /* drawn heroes: whole picture, navy fills any spare space */
  .ind-hero > .ind-hero-bg.short-fade { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%); mask-image: linear-gradient(90deg, transparent 0%, #000 15%); }
}
.ind-tag {
  display: inline-block; background: var(--gold); color: var(--navy-dark); border-radius: 6px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 0.35rem 1rem;
}
.ind-hero h1 {
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.6rem, 5.5vw, 4.6rem); font-weight: 800;
  line-height: 0.98; text-transform: uppercase; margin: 1.4rem 0; max-width: 820px;
}
.ind-hero h1 span { color: var(--gold); }
.ind-hero .sub { font-size: 1.06rem; line-height: 1.75; max-width: 600px; color: rgba(255,255,255,0.88); margin-bottom: 2rem; }
.ind-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.ind-stats { display: flex; gap: 3.5rem; flex-wrap: wrap; margin-top: 2.75rem; }
.ind-stat-num { font-family: 'Barlow Condensed', sans-serif; font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--gold); }
.ind-stat-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.3rem; }

/* ── BUTTONS ──────────────────────────────────────────────────────────── */
.btn-primary, .btn-outline {
  display: inline-block; padding: 0.95rem 2rem; border-radius: 6px; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.btn-primary { background: var(--gold); color: var(--navy-dark); }
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-outline { border: 2px solid rgba(255,255,255,0.8); color: var(--white); padding: calc(0.95rem - 2px) calc(2rem - 2px); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── SECTIONS & TYPE ──────────────────────────────────────────────────── */
.ind-section { padding: 5rem 0; }
.ind-section.white { background: var(--white); }
.ind-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.6rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-text);
}
.ind-why .ind-label { color: var(--gold); }   /* on navy: bright orange passes contrast */
.ind-section h2, .ind-why h2, .block h2 {
  font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 800;
  line-height: 1.05; text-transform: uppercase; color: var(--navy-dark); margin: 0.4rem 0 2.25rem;
}
.ind-card h3, .ind-why h3, .block h3 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.35rem; font-weight: 800;
  line-height: 1.1; text-transform: uppercase; color: var(--navy-dark); margin-bottom: 0.6rem;
}

/* Prose sections carried over from the original industry pages */
.block h2 { margin-bottom: 1.25rem; }
.block p, .block li { color: var(--text-mid); line-height: 1.75; font-size: 0.98rem; max-width: 820px; }
.block p { margin-bottom: 1rem; }
.block .lead { font-size: 1.08rem; color: var(--text); }
ul.ticks { list-style: none; margin-bottom: 1rem; }
ul.ticks li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55rem; }
ul.ticks li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--gold); border-radius: 2px; }

/* ── CARDS ────────────────────────────────────────────────────────────────
   Same mechanism as the rest of the site: orange bar is a ::before overlay
   (reserves no space), hover swaps it for a 4px ring and a small lift.
   Only <a> cards get the hover, so plain cards never look clickable. */
.ind-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ind-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.ind-card {
  position: relative; display: block; background: var(--white); border-radius: 10px; box-shadow: var(--shadow);
  padding: 1.75rem 1.6rem; color: inherit; text-decoration: none; transition: transform 0.2s;
}
.ind-card::before {
  content: ''; position: absolute; inset: 0; border-top: 4px solid var(--gold);
  border-radius: 10px; pointer-events: none; z-index: 2;
}
a.ind-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 4px var(--gold), 0 12px 40px rgba(27,47,71,0.18); }
a.ind-card:hover::before { opacity: 0; }
.ind-card p { font-size: 0.92rem; line-height: 1.65; color: var(--text-mid); margin: 0; }

/* Overview: photo cards */
.ind-market { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ind-market img { display: block; width: 100%; height: 220px; object-fit: cover; background: var(--navy-dark); }
.ind-market img.ind-product { height: 320px; object-fit: contain; background: var(--white); padding: 1rem 1rem 0; }
.ind-market-body { padding: 1.75rem 2rem 2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.ind-market h3 { font-size: 1.6rem; margin: 0; }
.ind-apps { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ind-apps span { font-size: 0.8rem; font-weight: 500; padding: 0.3rem 0.65rem; background: var(--off-white); border-radius: 4px; color: var(--navy-dark); }
.ind-more { font-family: 'Barlow Condensed', sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }

/* Link cards with a "Learn more" line pinned to the bottom (services list, contact) */
.ind-link-card { display: flex; flex-direction: column; gap: 0.6rem; }
.ind-link-card .ind-more { margin-top: auto; padding-top: 0.6rem; }
.ind-label-gap { margin-top: 3rem; }
.ind-more-link { margin-top: 2rem; }
.ind-more-link a { color: var(--navy); font-weight: 600; text-decoration: none; }
.ind-more-link a:hover { color: var(--gold-text); }
.ind-address { margin-top: 0.75rem; font-size: 1.05rem; line-height: 1.7; color: var(--text); }

/* Detail: other-markets link cards (no h2 above them, so the label needs its own gap) */
.ind-others { margin-top: 1.25rem; }
.ind-other { display: flex; align-items: center; gap: 0.75rem; padding: 1.4rem 1.5rem; }
.ind-other span { flex: 1; font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; color: var(--navy-dark); }
.ind-other b { color: var(--gold-text); }

/* ── WHY WSA (navy band) ──────────────────────────────────────────────── */
.ind-why { background: linear-gradient(180deg, var(--white) 0, var(--navy-dark) var(--section-fade)); padding: calc(var(--section-fade) + 4rem) 0 4rem; color: var(--white); }
/* ...and the section after the navy band fades back out of it */
.ind-why + .block { background: linear-gradient(180deg, var(--navy-dark) 0, var(--white) var(--section-fade)); }
.ind-why + .ind-section { background: linear-gradient(180deg, var(--navy-dark) 0, var(--off-white) var(--section-fade)); }
/* Start the content below the fade, so no text sits on the gradient */
.ind-why + .block, .ind-why + .ind-section { padding-top: calc(var(--section-fade) + 3rem); }
.ind-why .ind-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: center; }
.ind-why h2, .ind-why h3 { color: var(--white); }
.ind-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ind-chips span {
  background: rgba(255,255,255,0.08); border-top: 3px solid var(--gold); border-radius: 6px; padding: 0.6rem 1rem;
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 800; text-transform: uppercase; color: var(--gold);
}
.ind-challenge { padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,0.15); }
.ind-challenge p { font-size: 0.95rem; line-height: 1.65; color: rgba(255,255,255,0.8); }

/* ── CTA BAND ─────────────────────────────────────────────────────────── */
.ind-cta { background: var(--navy-dark); border-top: 4px solid var(--gold); padding: 3.5rem 0; }
.ind-cta .ind-wrap { display: flex; align-items: center; gap: 2.5rem; }
.ind-cta h2 {
  flex: 1; font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800;
  line-height: 1.05; text-transform: uppercase; color: var(--white);
}
.ind-cta h2 span { color: var(--gold); }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ind-grid-3, .ind-grid-2, .ind-why .ind-wrap { grid-template-columns: 1fr; }
  .ind-why .ind-wrap { gap: 2rem; }
  .ind-cta .ind-wrap { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  /* photo stacks above the text and fades down, like the homepage feature rows on mobile */
  .ind-hero:has(> .ind-hero-bg:not(.full)) { padding-top: 0; }
  .ind-hero > .ind-hero-bg:not(.full) { position: relative; display: block; left: auto; width: 100%; height: 260px; margin-bottom: 1.5rem;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
  .ind-hero:has(> .ind-hero-bg) h1, .ind-hero:has(> .ind-hero-bg) .sub { max-width: none; }
  .ind-stats { gap: 2rem; }
}
@media (max-width: 600px) {
  .ind-wrap { padding: 0 1.25rem; }
  .ind-crumb, .ind-hero { margin-top: 80px; }
  .ind-crumb { top: 80px; }
  .ind-hero { padding: 3.5rem 0 calc(3.5rem + var(--section-fade) / 2); }
  .ind-section { padding: 3.5rem 0; }
  .ind-why { padding: calc(var(--section-fade) + 2.5rem) 0 3rem; }
  .ind-market img { height: 160px; }
  .ind-market-body { padding: 1.25rem; }
  .ind-actions { flex-direction: column; }
  .ind-actions a { text-align: center; }
}