/*
 * Service page sections.
 *
 * These blocks are this project's own components — see ServiceSections.tsx —
 * so they get their own class names and their own stylesheet rather than
 * borrowing the ported landing-page classes. That is deliberate: the imported
 * pages come from four different hand-built templates whose class names agree
 * on nothing, and styling our own markup is far less work than winning an
 * argument with `style.css` on every rule.
 *
 * Loaded by both themes. This file is the Classic rendering; Aurora refines it
 * in theme-aurora.css, which loads after.
 */

/* --- The section shell ------------------------------------------------- */

.pp-sec {
  padding: 60px 0;
}

.pp-sec.is-tinted {
  background: #f7f9fc;
}

.pp-sec__head {
  max-width: 46rem;
  margin: 0 auto 34px;
  text-align: center;
}

.pp-sec__head h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: #0067d3;
}

.pp-sec__lead {
  margin: 10px 0 0;
  color: #5b6b83;
}

.pp-sec__body {
  max-width: 62rem;
  margin: 0 auto;
}

.pp-sec__body img {
  max-width: 100%;
  height: auto;
}

/* --- Image beside copy -------------------------------------------------- */

.pp-media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 34px;
}

/* Which side the picture sits on. The copy takes the rest of the row. */
.pp-media.is-right {
  flex-direction: row-reverse;
}

.pp-media__figure {
  flex: 1 1 300px;
  min-width: 0;
}

.pp-media__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.pp-media__copy {
  flex: 1 1 380px;
  min-width: 0;
}

/*
 * A section with no picture — the record has one but the file is missing, or
 * the import found copy and no image — must still fill the row rather than
 * sitting in half of it.
 */
.pp-media__copy:only-child {
  flex-basis: 100%;
}

@media (max-width: 767px) {
  .pp-media,
  .pp-media.is-right {
    flex-direction: column;
    gap: 22px;
  }
}

/* --- Boxes -------------------------------------------------------------- */

.pp-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 20px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.pp-box {
  padding: 22px 24px;
  border: 1px solid #e4eaf3;
  border-radius: 10px;
  background: #fff;
}

.pp-box h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.pp-box p {
  margin: 0;
  font-size: 15px;
  color: #5b6b83;
}

/* --- Client logos ------------------------------------------------------- */

.pp-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(50%, 9rem), 1fr));
  align-items: center;
  gap: 26px 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-logos img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 54px;
  margin: 0 auto;
  object-fit: contain;
}

/* --- Service areas ------------------------------------------------------ */

.pp-areas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-areas a {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid #e4eaf3;
  border-radius: 999px;
  background: #fff;
  color: #0067d3;
  font-size: 15px;
  font-weight: 500;
}

.pp-areas a:hover {
  border-color: #0067d3;
  background: #eef4fe;
}

/* --- FAQs --------------------------------------------------------------- */

.pp-faq {
  max-width: 52rem;
  margin: 0 auto;
}

.pp-faq__item {
  border-bottom: 1px solid #e4eaf3;
}

.pp-faq__item summary {
  position: relative;
  padding: 18px 44px 18px 0;
  color: #0f1b2d;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  /* The default triangle is replaced by the drawn one below. */
  list-style: none;
}

.pp-faq__item summary::-webkit-details-marker {
  display: none;
}

/* A plus that becomes a minus, drawn rather than imaged. */
.pp-faq__item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 6px;
  background: #eef4fe;
  color: #0067d3;
  font-size: 19px;
  font-weight: 400;
  line-height: 25px;
  text-align: center;
}

.pp-faq__item[open] summary::after {
  content: "–";
}

.pp-faq__answer {
  padding: 0 44px 20px 0;
  color: #5b6b83;
}

.pp-faq__answer > *:first-child {
  margin-top: 0;
}

.pp-faq__answer > *:last-child {
  margin-bottom: 0;
}