/* ==========================================================================
   Industries — "Wherever you do business" (homepage) / "What we photograph"
   Figma "Home Page" y 6684→7788 (@1920) / "Mobile Home" y 5181→6040 (@402).
   Two-column header (eyebrow + heading | lede), then the industry list.
   Default (homepage): one full-width column of text rows with 2px rules —
   no photo and no hover (client change request #46 removed the Figma's
   577×866 hover photo). --columns + --thumbs (Photography, client change
   request #44): the homepage services list's layout and hover — two columns,
   each row's photo sliding in as a thumbnail (css/blocks/services-list.css).
   ========================================================================== */

.section--industries {
  padding-top: 82px;     /* (6684 − 6521 video-testimonials bottom) / 2 */
  padding-bottom: 134px; /* (8056 partners top − 7788) / 2 */
}

/* ---- Header: eyebrow + heading | lede ------------------------------------- */
.section--industries .industries__grid > * { min-width: 0; }
.section--industries .industries__title {
  max-width: 792px;   /* wraps to "WHEREVER YOU DO / BUSINESS" */
  margin-top: 32px;   /* eyebrow bottom 6709 → heading 6741 */
}
.section--industries .industries__lede {
  max-width: 849px;
  margin-top: 62px;   /* row starts at the eyebrow: 24.8 eyebrow + 32 gap + 5 → paragraph (6746) sits 5px below the heading top (6741) */
}

/* ---- List: 54px rows, 2px rules, 103px pitch ------------------------------ */
.section--industries .industries__list {
  margin-top: 31px; /* heading bottom 6893 → row-1 top 6924 (text at 6949) */
}
.section--industries .industries__item {
  position: relative;                 /* a link row's stretched ::after covers the row */
  padding: 19px 0 30.7px;             /* rule → text 20px; line box is 51.3px (54 × 0.95), so 30.7 makes the rule-to-rule pitch exactly 103px */
  border-bottom: 2px solid var(--fg);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);            /* 54px */
  line-height: var(--lh-display);
  text-transform: capitalize;
}
.section--industries .industries__item:first-child { padding: 25px 0 24.7px; } /* Figma: text 6949, rule centre 7026 */
/* Figma nudges two rows: "Healthcare & Dental" (7159) and "Hospitality" (7571) sit 30px below their
   rule instead of 20px. Row 3's rule stays on the 103px grid (7232), so its bottom padding shrinks;
   row 7's rule moves down with the text (7654 → a 113px pitch), so only its top padding grows. */
.section--industries .industries__item:nth-child(3) { padding: 29px 0 20.7px; }
.section--industries .industries__item:nth-child(7) { padding-top: 29px; }

/* ---- Link rows (a record with a url): the whole row is the hit area ------- */
.section--industries .industries__name { transition: color .3s ease-in-out; }
.section--industries .industries__link::after { content: ""; position: absolute; inset: 0; }
.section--industries .industries__link:focus-visible { outline: 0; }
.section--industries .industries__item:has(.industries__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Hover thumbnail (hover_images) ----------------------------------------
   The services list's thumb (css/blocks/services-list.css), same values: a
   117×71 frame that slides in from the left (width 0 → 117, 0.3s ease-in-out)
   while the name turns green. object-fit: cover crops each photo to the frame.
   The image sits inside the text line via negative block margins, so the row
   height never changes, and is shifted 4.75px to centre it between the rules. */
.section--industries--thumbs .industries__item { display: flex; align-items: center; }
.section--industries .industries__thumb {
  flex: 0 0 0px;
  width: 0;
  height: 71px;
  margin: -11.75px 0;
  border-radius: 12px;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;               /* fully hidden until hovered */
  transform: translate(-24px, 4.75px);
  transition: width .3s ease-in-out, flex-basis .3s ease-in-out, margin .3s ease-in-out, opacity .3s ease-in-out, transform .3s ease-in-out, visibility 0s linear .3s;
  will-change: width, opacity, transform;
}
@media (hover: none) {
  .section--industries .industries__link:active .industries__name { color: var(--accent); }
}
@media (hover: hover) and (pointer: fine) {
  .section--industries .industries__item:has(.industries__link),
  .section--industries--thumbs .industries__item { cursor: pointer; }
  .section--industries--thumbs .industries__item:hover .industries__thumb,
  .section--industries--thumbs .industries__item:focus-within .industries__thumb {
    flex-basis: 117px;
    width: 117px;
    margin: -11.75px clamp(20px, 2.0313vw, 39px) -11.75px 0;   /* flush left; 39px gap to the name at 1920 */
    opacity: 1;
    visibility: visible;
    transform: translate(0, 4.75px);
    transition-delay: 0s;
  }
  .section--industries .industries__item:has(.industries__link):hover .industries__name,
  .section--industries .industries__item:focus-within .industries__name,
  .section--industries--thumbs .industries__item:hover .industries__name { color: var(--accent); }
}

/* ---- Two columns (two_columns — Photography "What we photograph") ----------
   The services list's grid: left rules 102→939 | right 971→1820, 50px type at
   1920 scaling with the viewport, 22px rule → text, 103px pitch, the first
   half of the items down the left column. Rows = ceil(items / 2) (up to 14). */
.section--industries--columns .industries__list {
  display: grid;
  grid-template-columns: 837fr 849fr;
  grid-template-rows: repeat(4, auto);   /* 7–8 items */
  grid-auto-flow: column;
  column-gap: 32px;
  margin-top: 60px;                      /* as the services list: heading bottom → row-1 top */
  margin-left: 2px;                      /* rules start at x=102, not 100 */
}
.section--industries--columns .industries__list:not(:has(> :nth-child(7))) { grid-template-rows: repeat(3, auto); }
.section--industries--columns .industries__list:not(:has(> :nth-child(5))) { grid-template-rows: repeat(2, auto); }
.section--industries--columns .industries__list:not(:has(> :nth-child(3))) { grid-template-rows: auto; }
.section--industries--columns .industries__list:has(> :nth-child(9))  { grid-template-rows: repeat(5, auto); }
.section--industries--columns .industries__list:has(> :nth-child(11)) { grid-template-rows: repeat(6, auto); }
.section--industries--columns .industries__list:has(> :nth-child(13)) { grid-template-rows: repeat(7, auto); }
.section--industries--columns .industries__item,
.section--industries--columns .industries__item:nth-child(n) {   /* :nth-child(n) also undoes the homepage's row nudges */
  display: flex;
  align-items: center;
  padding: 22px 0 31.5px;             /* rule → text 22px; text → next rule 31.5px; 103px row pitch */
  font-size: clamp(32px, 2.6042vw, 50px); /* 50px at 1920; scales with the 2-col grid so no row wraps */
}

/* ---- Variant: no intro ------------------------------------------------------
   The heading spans the full width and runs on one line in a 1191px box. */
.section--industries--no-intro .industries__intro { grid-column: 1 / -1; }
.section--industries--no-intro .industries__title { max-width: 1191px; }
.section--industries--no-intro .industries__list { margin-top: 37px; }   /* heading bottom 4084 → list 4121 (text 4146) */
.section--industries--no-intro.section--industries--columns .industries__list { margin-top: 60px; }

/* ---- Laptop / tablet: two columns become one (as the services list) ------- */
@media (max-width: 1280px) {
  .section--industries--columns .industries__list { display: block; margin-left: 0; }
  .section--industries--columns .industries__item,
  .section--industries--columns .industries__item:nth-child(n) { font-size: var(--fs-h4); } /* 40px, then 36px at <=1024 */
  .section--industries--columns .industries__item:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ---- Tablet: single-column header, no thumbnails (touch layouts) ----------- */
@media (max-width: 1024px) {
  .section--industries .industries__grid { row-gap: 0; }
  .section--industries .industries__lede { margin-top: 30px; }
  .section--industries .industries__list { margin-top: 40px; }
  .section--industries .industries__thumb { display: none; }
}

/* ---- Mobile (Figma "Mobile Home", 402 wide, 20px gutters) ----------------- */
@media (max-width: 640px) {
  .section--industries {
    padding-top: 38px;    /* (5181 − 5105 video-testimonials bottom) / 2 */
    padding-bottom: 43px; /* (6127 partners top − 6040) / 2 */
  }
  .section--industries .industries__item { overflow-wrap: anywhere; }
  .section--industries .eyebrow { gap: 16px; }                                    /* dot x=20, text x=42 */
  /* 48px at the Figma's 402; narrower, the heading scales with the column so a 10-letter word
     ("PHOTOGRAPH", 7.3em) never runs past the viewport (it was 351px wide in a 320px column at 360) */
  .section--industries .industries__title {
    max-width: 362px;
    margin-top: 15px;             /* eyebrow bottom 5201 → 5216 */
    font-size: min(var(--fs-h1), calc((100vw - 2 * var(--gutter)) / 7.4));
  }
  .section--industries .industries__lede  { max-width: 362px; margin-top: 24px; } /* heading bottom 5353 → 5377 */
  .section--industries .industries__list  { margin-top: 14px; }                   /* lede bottom 5451 → row-1 top 5465 */
  .section--industries .industries__item,
  .section--industries .industries__item:first-child,
  .section--industries .industries__item:nth-child(3),
  .section--industries .industries__item:nth-child(7),
  .section--industries--columns .industries__item:nth-child(n) {
    padding: 21px 0 23.9px;       /* 71.6px pitch: rules 5539 → 6040 over 7 gaps (Figma's own gaps wander 69–73); text = rule + 22 */
    font-size: var(--fs-item);    /* 26px */
  }
  .section--industries .industries__item:first-child { padding-bottom: 27.3px; } /* Figma row 1 is ~4px taller: text 5486, rule centre 5539 */
  .section--industries--columns .industries__item:last-child { padding-bottom: 0; }
}

/* ---- hover_follow (homepage, client call 30 Sep; reference sneaky.digital) ---------------------------------
   Hovering a row shows that industry's photo in ONE FIXED SPOT on the screen — large, on the right, centred
   vertically in the viewport — wherever the page is scrolled. Photos swap with a straight cut (no fade) and
   are opaque, above the row lines, so no line ever shows through a photo. */
.industries__follow {                                                         /* sneaky.digital: the right half of the screen, photo centred in it */
  position: fixed; z-index: 5; pointer-events: none;
  left: 50vw; top: 0; width: 50vw; height: 100vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  visibility: hidden;
}
.industries__follow.is-on { visibility: visible; }
.industries__follow-img { display: none; width: 75%; max-width: 35rem; height: auto; flex: none; }   /* natural proportions — landscape stays landscape (sneaky: 75%, max 35rem) */
.industries__follow-img--wide { width: 90%; max-width: 45rem; }   /* landscape: a bit wider than the portrait box (Pete, 1 Oct) */
.industries__follow-img.is-active { display: block; }
.section--industries--follow .industries__item { cursor: default; }
.section--industries--follow .industries__name { transition: none; }   /* the green changes with the photo — a straight cut, like the image */
.section--industries--follow .industries__item.is-hover .industries__name { color: var(--accent); }   /* Figma 4148:144: the hovered industry in green */
@media (hover: none), (max-width: 1024px) { .industries__follow { display: none; } }