/* Home industries served (TODO 00001.5.13). FINAL design/home/inspiration/sections/industries/r3/v1.png.
   The spec sheet list (section 7): 2px navy rule on top, 1px line hairlines between rows, one 1px line column
   divider, navy names, text only. Beside it the field photograph as a rounded inset; the column top aligns to the photo. */
.p-home-industries {
  box-sizing: border-box; background: var(--wp--preset--color--white);
  padding: var(--wp--custom--section--desktop) var(--wp--custom--gutter--desktop);
}
.p-home-industries *, .p-home-industries *::before, .p-home-industries *::after { box-sizing: border-box; }
.p-home-industries__inner {
  max-width: var(--wp--custom--layout--wide); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--wp--preset--spacing--100);
  align-items: start;
}
.p-home-industries__eyebrow {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--50); margin: 0;
  color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--label);
  font-weight: var(--wp--custom--font-weight--label); letter-spacing: var(--wp--custom--letter-spacing--label);
  line-height: 1.3; text-transform: uppercase;
}
.p-home-industries__eyebrow::before { content: ""; flex: none; width: 32px; height: 3px; background: var(--wp--preset--color--orange); }
.p-home-industries .p-home-industries__title {
  margin: var(--wp--preset--spacing--40) 0 0; color: var(--wp--preset--color--navy);
  font-size: var(--wp--preset--font-size--h-1); font-weight: var(--wp--custom--font-weight--h-1);
  letter-spacing: var(--wp--custom--letter-spacing--h-1); line-height: 1.1;
}
.p-home-industries__lead {
  margin: var(--wp--preset--spacing--50) 0 0; color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--body-l); line-height: 1.6;
}
.p-home-industries__list {
  list-style: none; margin: var(--wp--preset--spacing--90) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--wp--preset--color--navy);
}
.p-home-industries__list li {
  margin: 0; padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
  border-bottom: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--body); font-weight: 600; line-height: 1.4;
}
.p-home-industries__list li:nth-child(odd) { border-right: 1px solid var(--wp--preset--color--line); padding-left: 0; }
.p-home-industries__photo { margin: 0; height: 100%; align-self: stretch; }
.p-home-industries__photo img {
  display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover;
  border-radius: var(--wp--custom--radius--default);
}
@media (max-width: 991.98px) {
  .p-home-industries { padding: var(--wp--custom--section--tablet) var(--wp--custom--gutter--tablet); }
  .p-home-industries__inner { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--90); }
  .p-home-industries__copy { max-width: 720px; }
  .p-home-industries__photo { height: auto; }
  .p-home-industries__photo img { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
}
@media (max-width: 599.98px) {
  .p-home-industries { padding: var(--wp--custom--section--phone) var(--wp--custom--gutter--phone); }
  .p-home-industries__inner { gap: var(--wp--preset--spacing--70); }
  .p-home-industries__list { margin-top: var(--wp--preset--spacing--70); grid-template-columns: minmax(0, 1fr); }
  .p-home-industries__list li:nth-child(odd) { border-right: 0; }
  .p-home-industries__list li { padding-left: 0; }
  .p-home-industries__photo img { aspect-ratio: 4 / 3; }
}
/* Motion (stage 10, 00001.5.22.4; design/FINDINGS.md "Motion inventory: industries"). inc/motion.php sets data-mo on the
   eyebrow (hook), title and lead (rise 150/300), the list (hook, 450 ms) and the photo figure (hook). These are the hook
   start states, all under html.mo and only until .mo-in, so JS off, reduced motion and print show the approved look.
   Story move: the list's 2 px navy rule (its border-top) draws across, then the six rows rise in a cascade under it. */
.mo .p-home-industries__eyebrow[data-mo]::before { transform-origin: 0 50%; transition: transform var(--mo-dur) var(--mo-ease) var(--mo-delay, 0ms); }
.mo .p-home-industries__eyebrow[data-mo]:not(.mo-in)::before { transform: scaleX(0); }
/* The rule draw is a mask wipe: a white cover sits exactly over the real border and scales away from the right, so the
   approved border is painted the whole time. The cover and the ul's position live only until the kit's .mo-done (the
   cover's own transitionend, about 1.85 s, when it is already scaleX(0)); nothing positioned stays at rest (GO-041).
   GO-045 (00001.5.22.13.b): the cover is 4 px taller than the rule on both sides (white ground above, the first row's white top
   padding below) and 1 px past its right end, so a cover rasterised at a small scale cannot let the rule's edge rows show. */
.mo .p-home-industries__list[data-mo]:not(.mo-done) { position: relative; }
.mo .p-home-industries__list[data-mo]:not(.mo-done)::before {
  content: ""; position: absolute; top: -6px; left: 0; right: -1px; height: 10px; pointer-events: none;
  background: var(--wp--preset--color--white); transform-origin: 100% 50%;
  transition: transform 1.4s var(--mo-ease) var(--mo-delay, 0ms);
}
.mo .p-home-industries__list[data-mo].mo-in::before { transform: scaleX(0); }
/* Rows hang on the rule: they rise 120 ms apart once it is about three quarters drawn. The li carry no class (core
   list-item markup), so they are reached here, and inherit the list's --mo-delay so a late entry keeps them in step. */
.mo .p-home-industries__list[data-mo] li {
  transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease);
  transition-delay: calc(var(--mo-delay, 0ms) + 450ms + var(--nv-row, 0) * var(--mo-stagger));
}
.mo .p-home-industries__list[data-mo] li:nth-child(2) { --nv-row: 1; }
.mo .p-home-industries__list[data-mo] li:nth-child(3) { --nv-row: 2; }
.mo .p-home-industries__list[data-mo] li:nth-child(4) { --nv-row: 3; }
.mo .p-home-industries__list[data-mo] li:nth-child(5) { --nv-row: 4; }
.mo .p-home-industries__list[data-mo] li:nth-child(6) { --nv-row: 5; }
.mo .p-home-industries__list[data-mo]:not(.mo-in) li { opacity: 0; transform: translate3d(0, var(--mo-rise), 0); }
/* Before the reveal the rows wait 16 px low at opacity 0, below the list's own box; the list clips them (2 px clip margin so
   the cover over the border-top stays painted) until .mo-in, when every row is still opacity 0 for at least 450 ms, so
   dropping the clip changes no pixel (C11 contain-check measures this start state). */
.mo .p-home-industries__list[data-mo]:not(.mo-in) { overflow: clip; overflow-clip-margin: 2px; }
/* Photo: zoom only, never an opacity start. The figure clips the scaled img inside the rounded inset until .mo-done
   (2.5 s timer, the zoom ends at 1.6 s), when the img is back at rest and the clip goes. */
.mo .p-home-industries__photo[data-mo]:not(.mo-done) { overflow: hidden; border-radius: var(--wp--custom--radius--default); }
.mo .p-home-industries__photo[data-mo] img { transition: transform 1.6s var(--mo-ease) var(--mo-delay, 0ms); }
.mo .p-home-industries__photo[data-mo]:not(.mo-in) img { transform: scale(1.05); }
/* Industry names link to their pages (fix-00001.6-A F7): same navy text at rest; underline on hover; the white-ground
   navy focus ring the Home sections use. No transition, so the row cascade above is unchanged. */
.p-home-industries__list a { color: inherit; text-decoration: none; }
.p-home-industries__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-home-industries__list a:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: var(--wp--custom--focus--offset);
}