/* Page styles for /new-jersey/. Loaded after service.css. */

/* The hero band carries no link style of its own, and the global rule is
   a{color:inherit;text-decoration:none} — without this the phone number reads
   as plain text. Underlined, like the breadcrumb directly above it. */
.nj-hero-call{text-decoration:underline;text-underline-offset:3px}

/* This page has five service cards with longer headings than the three-card
   grids elsewhere, so three columns go cramped early. Drop to two between the
   desktop and phone breakpoints, matching .approach-services in approach.css.
   The range has to be closed at the bottom: .service-grid goes single-column at
   760px in style.css, and this selector is more specific, so an open-ended
   max-width would keep two columns on a phone. */
@media(min-width:761px) and (max-width:1000px){
  .nj-services .service-grid{grid-template-columns:1fr 1fr;gap:26px}
}

/* Ten town names in one market-grid column runs long beside a list of eight.
   Flow each list into two short columns, but only once the column is wide
   enough for "Pequannock Township" — at the market-grid's own 760px
   breakpoint the grid is still two-up and the halves are too narrow. */
@media(min-width:1001px){
  .nj-areas .market-grid ul{columns:2;column-gap:30px}
  .nj-areas .market-grid li{break-inside:avoid}
}

/* The line breaks in this page's headings are placed for the desktop measure.
   At phone width they strand single words on a line, so let the headings wrap
   on their own. Each <br> in the markup has a space before it, which is what
   keeps the words apart once the break itself is hidden. Scoped by this
   stylesheet loading on this page only. */
@media(max-width:760px){
  main h1 br,main h2 br{display:none}
}

/* "A note from Ryan": the portrait sits beside the note. The source file is
   300x300, so it keeps the circular portrait treatment TeamGrid already gives
   it rather than becoming a wide feature image it would have to upscale into.
   There is no global img rule, hence the explicit box here. */
.nj-note{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start}
.nj-note-photo{width:170px;height:170px;border-radius:50%;object-fit:cover;display:block}
.nj-note .market-intro{margin-bottom:0}
@media(max-width:760px){
  .nj-note{grid-template-columns:1fr;gap:24px}
  .nj-note-photo{width:120px;height:120px}
}