/* ============================================================
   Solmex: Industry pages · Quiet Waves 1.0 marketing kit

   Loaded AFTER /features/features.css, which every industry page
   also links. Everything shared with a feature page (nav, stamp,
   ruler, diamond, .wl instrument strip, .panel, .caps, .fdeep,
   pager, footer, the whole responsive ladder) comes from there
   unchanged, so an industry page and a feature page cannot drift
   apart on spacing. This file adds only what an industry page has
   and a feature page does not:

     .ichips     the asset vocabulary of one sector, under the hero
     .sgrid      the sector index (hub page, and the strip that
                 closes every industry page)
     .ihero      one hero tweak: sector pages carry a shorter h1

   ============================================================ */

/* ---------- hero: the sector's own vocabulary ---------- */
.ichips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.ichips span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line);background:#fff;border-radius:100px;padding:6px 13px}

/* The sector h1 is a shorter line than a feature h1: it names one room
   rather than one capability, so it is given a tighter measure. */
.fhero h1.ihero{max-width:12em}

/* ---------- sector index ----------
   Used twice: on /industries as the page body, and at the foot of every
   sector page as the cross-link strip. Same card either way; only the
   surrounding section padding differs. */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.scard{display:block;border:1px solid var(--line);border-radius:12px;padding:16px 16px 15px;background:#fff;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.scard:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(11,18,38,.4)}
.scard .sc-top{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.scard .sc-top i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3)}
.scard b{display:block;font-size:14.5px;letter-spacing:-.015em;line-height:1.25}
.scard small{display:block;margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}

/* the closing strip on a sector page */
.iindex{padding:78px 0 96px;background:var(--mist);border-top:1px solid var(--line)}
.iindex .sgrid{margin-top:34px}
.iindex .scard{background:#fff}

/* the hub page's own body */
.ihub{padding:20px 0 104px}

/* ---------- stamps ----------
   The hero stamp reads "Sector · <name>", which is a good deal longer than a
   feature page's "Depth -10 m · Surface". .stamp is a non-wrapping flex row, so
   on a phone the sector name ran past the edge and was clipped. Let it wrap;
   the ruler keeps its role as the separator on whichever line it lands. */
@media(max-width:620px){
  .stamp{flex-wrap:wrap;gap:7px 10px}
  .stamp .ruler{min-width:22px}
}

/* ---------- panel header ----------
   .panel-h is <b> + a flexible ruler + a nowrap caption, and on a 390px
   viewport the caption has nowhere left to go: it is pushed past the panel
   edge and clipped. Wrapping it onto its own line keeps both labels readable.
   Scoped here rather than in features.css because that file is shared with
   the feature pages, which have the same latent behaviour and are not part
   of this change. */
@media(max-width:620px){
  .panel-h{flex-wrap:wrap;row-gap:4px}
  .panel-h .ruler{min-width:20px}
  .panel-h span{white-space:normal}
}

/* ---------- panel rows ----------
   .prow is id + flexible title + a 96px meter + a nowrap tag, all on one line.
   That fits in a 690px column and does not fit in a 390px one: the title
   column is squeezed to about 60px, so the nowrap+ellipsis <b> renders as
   "Sta..." and the caption below it wraps to one word per line. Below 620px
   the row becomes two: identity and state on top, the words underneath. The
   meter goes, because it is a decorative proportion with no value printed
   beside it and it is the only part costing real width. */
@media(max-width:620px){
  .prow{flex-wrap:wrap;gap:7px 10px;padding:12px 16px}
  .prow .id{order:1}
  .prow .tag{order:1;margin-left:auto}
  .prow .meter{display:none}
  .prow .grow{order:2;flex:1 0 100%}
  .prow .grow b{white-space:normal}
  .panel-f{flex-wrap:wrap;row-gap:3px}
  .panel-f .ruler{display:none}
  .panel-f span{flex:1 0 100%}
}

/* ---------- pager ----------
   .pager is a single non-wrapping flex row, which fits on a feature page
   because "Inspections" and "Tools" are short. A sector name is not:
   "Warehousing and Distribution" beside "Education and Campuses" runs past a
   390px viewport and is then clipped by the body's overflow-x:hidden, so the
   next link silently loses its last word. Below 620px the two links stack. */
@media(max-width:620px){
  .pager{flex-wrap:wrap;gap:4px}
  .pager a{flex:1 0 100%;justify-content:flex-start}
  .pager .ruler{display:none}
}

@media(max-width:1000px){.sgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.sgrid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:460px){.sgrid{grid-template-columns:1fr}}