/* Services Tab — [services_tab] two-column service sections (content: WP Admin → Services). */

.svc-tab {
  --svc-divider : #8D8D8D;
  --svc-overlap : 2rem;   /* how far the heading dips into the main image (visual ~1rem — normal line-height leaves ~1rem of descender space below the text) */
}

.svc-tab__service { display: flex; }
/* Alternate every other service — image column flips to the right (desktop only) */
@media (min-width: 981px) {
  .svc-tab__service:nth-child(even) { flex-direction: row-reverse; }
}
.svc-tab__media,
.svc-tab__content { flex: 1 1 50%; min-width: 0; }

/* ── Column 1 — background image + heading overlapping the main image ── */
.svc-tab__media {
  padding: 7rem 10%;
  background-color: var(--dark-blue);   /* solid fallback under the bg image — white heading passes contrast checks */
  background-size: cover;
  background-position: center;
}
.svc-tab__heading {
  position: relative;
  z-index: 2;
  margin: 0 0 calc(-1 * var(--svc-overlap));   /* heading dips into the top of the main image */
  color: var(--white);
  text-align: center;
}
.svc-tab__image { position: relative; z-index: 1; }
.svc-tab__image img { display: block; width: 100%; height: auto; }

/* ── Column 2 — accordion ── */
.svc-tab__content {
  padding: 7rem 10%;
  background: var(--mist);
  display: flex;
  flex-direction: column;
  justify-content: center;   /* accordion sits vertically centered in the column */
}

/* Header row — heading left, plus toggle right-aligned on the same line */
.svc-acc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.svc-acc__toggle {
  flex: 1 1 auto;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--black);
}

/* Body — grid-rows collapse trick for a smooth open/close */
.svc-acc__body {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  color: var(--black);
  transition: grid-template-rows 0.35s ease, margin-top 0.35s ease;
}
.svc-acc__item.is-open .svc-acc__body { grid-template-rows: 1fr; margin-top: 1.75rem; }
.svc-acc__body-inner { overflow: hidden; min-height: 0; }
.svc-acc__body p { margin: 0 0 1em; }
.svc-acc__body p:last-child { margin-bottom: 0; }
.svc-acc__body a { text-decoration: underline; color: inherit; }

/* Divider — full-width 1px line below the item; flows down as the body opens */
.svc-acc__divider {
  height: 1px;
  background: var(--svc-divider);
  margin: 2.5rem 0;
}
.svc-acc__plus {
  flex: 0 0 auto;
  position: relative;
  width: 1rem;
  height: 1rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.svc-acc__plus::before,
.svc-acc__plus::after { content: ""; position: absolute; background: var(--svc-divider); }
.svc-acc__plus::before { left: 0; top: calc(50% - 0.5px); width: 100%; height: 1px; }
.svc-acc__plus::after  { top: 0; left: calc(50% - 0.5px); width: 1px; height: 100%; }
.svc-acc__item.is-open .svc-acc__plus { visibility: hidden; }   /* hidden but keeps the line length stable */

/* Single-item service — accordion renders open and stays open (no toggle, all breakpoints) */
.svc-acc__item--static .svc-acc__toggle { cursor: default; }

/* ── Tablet / mobile ── */
@media (max-width: 980px) {
  .svc-tab { --svc-overlap: 1.5rem; }   /* tighter overlap for the smaller heading */
  .svc-tab__service { flex-direction: column; }
  .svc-tab__media { padding: 3rem 10%; }                        /* keeps 10% sides */
  .svc-tab__content { width: 100%; padding: 3rem 0; }   /* bg spans the full column… */
  .svc-tab__content .svc-acc { width: 80%; margin: 0 auto; }   /* …content stays at 80% */
  .svc-acc__item.is-open .svc-acc__body { margin-top: 1.25rem; }
  .svc-acc__divider { margin: 1.75rem 0; }
}