/* "Expert <Service> Contractors" - the owner story, with the crew photo.
 *
 * Two columns: copy left, the crew shot right. On the 45 hub pages this lands
 * under the sub-services grid; on the 91 leaf pages there is no grid, so it
 * lands under the reviews band instead. Both come out of the same insertion
 * point, so there is no branching anywhere.
 *
 * Grey band with a bottom border. What sits above it differs by page type -
 * the white services grid on a hub, the white reviews band on a leaf - and the
 * promise band below is also #f5f5f5, so the border is what stops this running
 * into it. Same fix promise.css already uses against the breadcrumb bar.
 *
 * Loaded after services.css. Same reason as every light band before it:
 * sections.css paints `.sos-band h2` white for the dark bands, and source order
 * is what lets this restate the colour without !important.
 */

.sos-expert {
  background: #f5f5f5;
  border-bottom: 1px solid #e2e2e2;
  padding: 64px 0;
}

.sos-expert .sos-ex-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

/* ---- copy --------------------------------------------------------------- */

/* sections.css sets .sos-band h2 to #fff for the dark bands. Restated, not
   fought - this sheet loads later, so source order settles it. */
.sos-expert h2 {
  color: #1a1a1a;
  margin: 0;
  text-align: left;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.sos-expert .sos-ex-rule {
  width: 56px;
  height: 3px;
  background: #dd5c26;
  margin: 18px 0 22px;
}

.sos-expert .sos-ex-copy p {
  font-size: 1rem;
  line-height: 1.75;
  color: #3d3d3d;
  margin: 0 0 16px;
  padding: 0;
}

.sos-expert .sos-ex-copy p:last-child {
  margin-bottom: 0;
}

/* ---- the photo ---------------------------------------------------------
   A real Snead's crew shot, supplied by Trevor. Portrait, so it gets a fixed
   3:4 box and object-fit rather than being allowed to set the row height -
   otherwise a tall image drags the copy column's vertical centring around. */

.sos-expert .sos-ex-shot {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  background: #ececec;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

@supports not (aspect-ratio: 3 / 4) {
  .sos-expert .sos-ex-shot {
    height: 460px;
  }
}

/* ---- responsive --------------------------------------------------------
   Photo below the copy when stacked, not above. The copy is the point here and
   the picture supports it - the reverse would push the heading off the top of
   a phone screen behind a tall portrait image. */

@media all and (max-width: 980px) {
  .sos-expert {
    padding: 48px 0;
  }
  .sos-expert .sos-ex-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .sos-expert .sos-ex-shot {
    max-width: 420px;
    margin: 0 auto;
  }
}

@media all and (max-width: 620px) {
  .sos-expert .sos-ex-shot {
    max-width: 100%;
  }
}