/* Sub-service cards - a hub page linking down to its own child pages.
 *
 * Only on the 45 pages that actually have children. A leaf page has nothing to
 * link down to, so it gets nothing; that rule comes from the directory tree, not
 * from a list someone has to maintain.
 *
 * This replaces the "Similar Services We Offer" accordion, which was collapsed
 * by default, stuck inside Divi's narrow column, and - the real problem - did
 * not list every child. It disagreed with the filesystem on 15 of the 45 hubs.
 *
 * White band. The reviews band above is white too, but the promise band below is
 * #f5f5f5, and the head's own rule gives the top edge its separation.
 *
 * Loaded after gallery.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-services {
  background: #fff;
  padding: 64px 0;
}

/* ---- head --------------------------------------------------------------
   Left-aligned, unlike the other bands' centred heads - it matches the
   reference, and a heading that sits over the left edge of the first card
   reads as a label for the grid rather than as another section title. */

.sos-services .sos-sv-head {
  margin-bottom: 34px;
}

.sos-services .sos-sv-eyebrow {
  display: block;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #898989;
  margin-bottom: 10px;
}

/* 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-services h2 {
  color: #1a1a1a;
  margin: 0;
  text-align: left;
}

.sos-services .sos-sv-rule {
  width: 56px;
  height: 3px;
  background: #dd5c26;
  margin: 18px 0 0;
}

/* ---- the grid ----------------------------------------------------------
   Three across at most, because no hub has more than three children.

   The count modifiers matter more than they look. 13 hubs have exactly one
   child and 19 have two; without a cap a lone card stretches the full 1180px
   and reads as a banner rather than a card. Capping and centring keeps a card
   the same size whether there are one, two or three of them. */

.sos-services .sos-sv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sos-services .sos-sv-grid.is-1 {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}

.sos-services .sos-sv-grid.is-2 {
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: center;
}

/* ---- a card ------------------------------------------------------------
   The whole card is the link. One <a> around everything beats a linked title
   plus a linked "read more": the tap target is the card, and nesting an <a>
   inside an <a> for the title would be invalid markup. */

.sos-services .sos-sv-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.sos-services .sos-sv-card:hover {
  border-color: #dd5c26;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* The child pages' hero photos are all different shapes, so the ratio is fixed
   here and the image cropped to it - otherwise a portrait shot makes one card
   taller than its neighbours. */
.sos-services .sos-sv-shot {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #ececec;
  border-bottom: 1px solid #e2e2e2;
}

@supports not (aspect-ratio: 3 / 2) {
  .sos-services .sos-sv-shot {
    height: 200px;
  }
}

.sos-services .sos-sv-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
  text-align: center;
}

.sos-services .sos-sv-title {
  font-family: 'Poppins', 'Archivo', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.3;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 8px;
  padding: 0;
}

.sos-services .sos-sv-card:hover .sos-sv-title {
  color: #dd5c26;
}

/* Three lines, hard. These blurbs are the child pages' own opening sentences
   and they vary in length; without a clamp one card runs two lines longer than
   the others and the row stops looking like a set. */
.sos-services .sos-sv-blurb {
  font-size: 0.93rem;
  line-height: 1.6;
  color: #3d3d3d;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- responsive --------------------------------------------------------- */

@media all and (max-width: 980px) {
  .sos-services {
    padding: 48px 0;
  }
  .sos-services .sos-sv-head {
    margin-bottom: 26px;
  }
  .sos-services .sos-sv-grid,
  .sos-services .sos-sv-grid.is-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sos-services .sos-sv-grid.is-1 {
    grid-template-columns: minmax(0, 420px);
  }
}

@media all and (max-width: 620px) {
  .sos-services .sos-sv-grid,
  .sos-services .sos-sv-grid.is-1,
  .sos-services .sos-sv-grid.is-2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}