/* ============================================================
   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
     .ishot      the optional hero photograph, where a sector has one

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

/* ---------- 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}}

/* ---------- hero photograph ----------
   Optional, and only where a sector page has a real photograph of the work
   (`hero` on the sector in industries.data.cjs). It closes the hero band under
   the .wl instrument strip, full measure, so the page reads: what this sector
   is, what the register holds, and then the place it is kept for. Treated the
   same way the landing page treats its technician shot -- deep navy ground,
   one soft shadow, no border chrome -- so the two photographs on the site are
   one treatment rather than two.

   The aspect ratio is a crop, not the file: at 16/9 the photograph is taller
   than the whole instrument strip above it and takes over the hero. A wide
   band keeps it a closing note, and steps back toward the native ratio as the
   viewport narrows and there is no width left to spend. */
.ishot{position:relative;margin:34px 0 0;border-radius:22px;overflow:hidden;
  background:var(--navy-deep);aspect-ratio:2.2/1;
  box-shadow:0 34px 70px -30px rgba(11,18,38,.55)}
.ishot img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;display:block}
/* Grounds the bottom edge against the white hero, and stops the pale sunset
   sky from making the top of the frame float. Pointer-events are irrelevant
   (there is nothing under it) but the scrim must never intercept a scroll. */
.ishot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,15,58,.10) 0%,rgba(2,15,58,0) 26%,rgba(2,15,58,0) 62%,rgba(2,15,58,.30) 100%)}

@media(max-width:900px){
  .ishot{aspect-ratio:16/9;margin-top:28px;border-radius:18px}
}
@media(max-width:620px){
  .ishot{aspect-ratio:4/3;border-radius:14px;margin-top:24px}
  .ishot img{object-position:44% 54%}
}