/**
 * The two tile grids on /lines-of-business/.
 *
 * Every value here is read out of the Figma file (UB7FmaXxJY1PnhVnhHqlEJ,
 * page "Lines-of-business", frame `Lines-of-business 1` / 403:3) rather than
 * eyeballed. The design is drawn at 1920, so a 375px side margin is a 1170px
 * content column — the same column the practice-area pages use.
 *
 * Mobile-first: the base rules are the phone layout and every media query is
 * min-width, matching the theme's own 768/1280 breakpoints. The desktop numbers
 * land at 1280.
 *
 * Nothing here touches the hero. In the comp the header, hero and footer are
 * screenshots of the live page pasted in, so they are already built.
 */

:root {
  /* Frame 163/167: padding 0 375px in a 1920 frame. */
  --lob-wide: 1170px;
  /* The gap between two sections in the comp: the tile grid ends at 2262 and
     "HR support" starts at 2362; the HR cards end at 2949 and the footer
     starts at 3049. */
  --lob-rhythm: 100px;
  /* image 11: rectangleCornerRadii [0,0,0,100] — the bottom-left corner of the
     photo is rounded so the card colour curves up into the picture. */
  --lob-cut: 100px;
}

/* --------------------------------------------------------------- layout - */

.lob-w {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .lob-w { padding: 0 40px; }
}

@media (min-width: 1280px) {
  .lob-w { max-width: var(--lob-wide); padding: 0; }
}

/* Section rhythm. The comp has a flat 100px between sections, which is too
   much air on a phone, so it scales rather than being reproduced.
   These are per-side paddings and two of them meet between the two sections,
   so half the rhythm each side gives the design's 100px gap in the middle.

   The hero carries no bottom padding of its own, and neither does the footer
   have top padding, so the outer edges take the whole 100 rather than half. */
.lob-section {
  padding: 48px 0;
  background: var(--beige);
}

/* The hero is white and everything below it is beige, so without this the page
   carries a white band between the two — a seam the comp does not draw. The
   hero is not otherwise touched here; the class belongs to this template alone,
   so the rule reaches nothing else. */
.business-lines__hero { background: var(--beige); }

.lob-section--recruiting { padding-top: 48px; }
.lob-section--hr { padding-bottom: 48px; }

@media (min-width: 1280px) {
  .lob-section { padding: calc(var(--lob-rhythm) / 2) 0; }
  .lob-section--recruiting { padding-top: var(--lob-rhythm); }
  .lob-section--hr { padding-bottom: var(--lob-rhythm); }
}

/* Section title: Figma 50px / 600 / lh 55, centred, 50px above its grid.
   The clamp matches the practice-area pages' .pa-section__title so the two
   screens set their headings identically at every width.

   700, not the comp's 600, on Zack's instruction 2026-08-27. Objectiv ships
   four faces here — Lt 300, Rg 400, Md 500, Bd 700 — so there is no 600 to
   load and CSS matching already resolved 600 upward to Bd. The number is now
   honest about what was being drawn; nothing on screen moved. */
.lob-section__title {
  font-size: clamp(1.75rem, 1.05rem + 2.9vw, 3.125rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--main-blue);
  text-align: center;
  margin: 0 auto 32px;
}

@media (min-width: 1280px) {
  .lob-section__title { margin-bottom: 50px; }
}

/* ----------------------------------------------------------------- grid - */

/* minmax(0, …) throughout rather than a bare 1fr: a grid item's automatic
   minimum size is its content, so an unbreakable label — "Manufacturing" sets
   at 180px — can widen its own track and push the tile past the grid. */
.lob-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 560px) {
  .lob-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .lob-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lob-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Frame 163: the tiles are 370 wide on a 400 step, so 30 across; the rows are
   351 tall on a 401 step, so 50 down. */
@media (min-width: 1280px) {
  .lob-grid { column-gap: 30px; row-gap: 50px; }
}

/* ----------------------------------------------------------------- tile - */

.lob-tile {
  display: block;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  /* The photo's rounded corner is drawn by clipping the picture, so the card
     underneath has to stay a square-cornered block for the orange to show
     through it. */
  overflow: hidden;
}

.lob-tile:hover,
.lob-tile:focus { text-decoration: none; color: #fff; }

/* Frame 173: the navy card, and image 16's deeper cut —
   rectangleCornerRadii [0,0,0,250] on a 570-wide card against [0,0,0,100] on a
   370-wide one. 250 is most of a phone-width card's height, so the full depth
   only applies where the card is actually 570 wide. */
.lob-section--hr .lob-tile {
  background: var(--main-blue);
  --lob-cut: 120px;
}

@media (min-width: 1280px) {
  .lob-section--hr .lob-tile { --lob-cut: 250px; }
}

/* image 11 is 370x241 and image 16 is 570x373 — both 1.528:1, which is not the
   16:9 of the photographs behind them, so the box fixes the shape and the
   picture is cropped into it rather than setting its own height. */
.lob-tile__media {
  display: block;
  aspect-ratio: 370 / 241;
  overflow: hidden;
  border-bottom-left-radius: var(--lob-cut);
}

.lob-section--hr .lob-tile__media { aspect-ratio: 570 / 373; }

/* image 11 carries a second fill over the photograph — rgba(0,0,0,0.20) on the
   tiles and 0.10 on the wider HR cards. It is easy to read as a Figma artefact
   and it is not: it is what stops nine bright photographs side by side reading
   as nine competing pictures instead of one grid. Drawn as a pseudo-element so
   the <img> underneath stays an ordinary image, srcset and all. */
.lob-tile__media { position: relative; }

.lob-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.lob-section--hr .lob-tile__media::after { background: rgba(0, 0, 0, 0.1); }

.lob-tile__media .lob-tile__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The comp crops each photo slightly right of centre. Centre is within a few
     per cent of every one of them and does not need eleven hand-set values. */
  object-position: center;
}

/* Frame 163, the label row: 50 tall, 30 in from each side, sitting 31 below
   the photo with 29 beneath it. */
.lob-tile__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
}

@media (min-width: 1280px) {
  /* The gap is 10, not something rounder: Frame 163 gives the label a 272px
     box inside a 370px tile — 30 padding, 28 of arrow, 30 padding, and the 10
     that is left. At 16 the label loses a word to the next line one name
     sooner than the design does. */
  .lob-tile__body { padding: 31px 30px 29px; gap: 10px; }
}

/* 23px in the comp. Raised to 24 to match .pa-tile__label, which is the same
   label on the same orange on the practice-area pages and was set there with
   the client's sign-off on 2026-08-06. Two tile labels on one site should not
   set at different sizes.
 *
 * min-height is two lines: the design's label boxes are all 50px tall with the
 * text sitting on the bottom line, so "Energy" and "Advanced Manufacturing"
 * put their last line at the same height. align-items: flex-end on the body is
 * the other half of that. */
.lob-tile__label {
  font-size: 24px;
  /* 600, not the comp's 500, on Zack's instruction 2026-08-27. This one does
     move: with no 600 face it resolves up to Bd 700, so the labels go from
     Medium to Bold. Check the tile height after changing it — a heavier label
     is a wider label, and the tile is 351 tall only while the name still fits
     the two lines the design draws. */
  font-weight: 600;
  line-height: 25px;
  color: #fff;
  min-height: 50px;
  display: flex;
  align-items: flex-end;
  /* Takes the whole width the arrow leaves. Without it the label is a flex item
     sized by its content, so a short name — "Payroll & IC Compliance" — gives a
     285px box where the design draws 472, and the wrap point of a longer one
     lands somewhere the comp never puts it. min-width: 0 because a flex item's
     automatic minimum is its content, which is what lets an unbreakable word
     push past the tile. */
  flex: 1 1 auto;
  min-width: 0;
  /* Backstop only — nothing reaches it at the nine hub names. Kept so a longer
     name added later wraps visibly instead of being cut by overflow: hidden. */
  overflow-wrap: break-word;
}

/* Frame/Group 14: a 28x28 box holding a diagonal shaft and an L-shaped head —
   a ↘ arrow, not the bare chevron the practice-area tile draws for the same
   glyph. Sits 30px in from the tile's right edge, which the body padding gives.
   Built from two pseudo-elements rather than an SVG so it inherits the label
   colour and costs no request. */
.lob-tile__arrow {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  align-self: flex-end;
}

.lob-tile__arrow::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 7px;
  width: 24px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.lob-tile__arrow::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 11px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

/* The whole tile is one link, so the focus ring belongs on the tile and not on
   anything inside it. Matches the practice-area pages' ring. */
.lob-tile:focus-visible {
  outline: 3px solid var(--main-blue);
  outline-offset: 3px;
}

.lob-section--hr .lob-tile:focus-visible { outline-color: var(--orange); }

/* A quiet lift on hover, the only motion on the page. The photo is what moves;
   the cut corner stays put because the media box clips it. */
.lob-tile__media .lob-tile__image {
  transition: transform 0.35s ease;
}

.lob-tile:hover .lob-tile__image,
.lob-tile:focus-visible .lob-tile__image {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .lob-tile__media .lob-tile__image { transition: none; }
  .lob-tile:hover .lob-tile__image,
  .lob-tile:focus-visible .lob-tile__image { transform: none; }
}