/* tibu-afrika sections/service-single.css */

/*
 * Plan 07-13's partial: the single-service route (templates/single-service.html).
 * Loaded right after theme.css on the front end and in the editor
 * (includes/assets.php), under the same rules: presets and color-mix() only,
 * no hex, no preset variable declared (D-13). Every selector is scoped under
 * .tibu-route--service, the template's main.
 *
 * The page follows the Astro single service (07-UI-SPEC Single service):
 * - a breadcrumb band (brand-grey 10% fill, 30% bottom border, 16px padding,
 *   14px ink-500) whose chevron separators are masks on empty pseudo-elements,
 *   replacing core's text separator, so no separator reaches assistive
 *   technology;
 * - a photo hero (80px, then 112px from 768px) under the brand-maroon 80%
 *   overlay, or on brand-gradient with no photo and no overlay when the
 *   service has no featured image (tibu-service-hero--no-image), holding the
 *   white 15% Service pill, the h1 (36px, then 60px) and the lead;
 * - a content band (64px, then 96px) in two columns 2:1 with a 48px gap from
 *   1024px, stacked below: the service body in the large prose style with
 *   check markers on its Offerings list, the enquiry panel, and the Other
 *   services aside, sticky 96px from the top from 1024px only.
 * Each band keeps the root gutters (16px, 24px from 640px, 32px from 1024px)
 * and caps its content at the wide size, as the Astro container does. Core
 * kebab-cases preset slugs for their variables, splitting digits from
 * letters, so the 2xl radius preset prints as --2-xl.
 */

/* ---- Frame ---- */

/* The bands sit flush: no flow gap between them. */
.tibu-route--service > * {
  margin-block: 0;
}

/* ---- Breadcrumb band ---- */

.tibu-route--service .tibu-breadcrumb-band {
  box-sizing: border-box;
  padding: var(--wp--preset--spacing--4) var(--wp--style--root--padding-right) var(--wp--preset--spacing--4) var(--wp--style--root--padding-left);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-grey) 30%, transparent);
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-grey) 10%, transparent);
}

.tibu-route--service .tibu-breadcrumb {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  color: var(--wp--preset--color--ink-500);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.43;
}

.tibu-route--service .tibu-breadcrumb ol {
  gap: var(--wp--preset--spacing--2);
}

.tibu-route--service .tibu-breadcrumb li {
  gap: var(--wp--preset--spacing--2);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The chevron is drawn, not written: an empty ::after carries no text. */
.tibu-route--service .tibu-breadcrumb li:not(:last-child)::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: 1;
  background-color: currentColor;
  -webkit-mask-image: url(../../icons/chevron-right.svg);
  mask-image: url(../../icons/chevron-right.svg);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.tibu-route--service .tibu-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms;
}

.tibu-route--service .tibu-breadcrumb a:hover {
  color: var(--wp--preset--color--brand-maroon);
}

.tibu-route--service .tibu-breadcrumb [aria-current="page"] {
  color: var(--wp--preset--color--ink-900);
  font-weight: 500;
}

/* ---- Hero ---- */

.tibu-route--service .tibu-service-hero {
  box-sizing: border-box;
  min-height: 0;
  padding: var(--wp--preset--spacing--20) 0;
  color: var(--wp--preset--color--surface-0);
}

/* No featured image: the gradient band, with no photograph and no overlay. */
.tibu-route--service .tibu-service-hero--no-image {
  background-image: var(--wp--preset--gradient--brand-gradient);
}

.tibu-route--service .tibu-service-hero--no-image > .wp-block-cover__background {
  display: none;
}

/* The copy starts at the wide container's left edge, inside the root gutters. */
.tibu-route--service .tibu-service-hero .wp-block-cover__inner-container {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
  color: var(--wp--preset--color--surface-0);
}

.tibu-route--service .tibu-service-hero .wp-block-cover__inner-container > * {
  max-width: var(--wp--style--global--wide-size);
  margin-block: 0;
  margin-inline: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) auto;
}

/* The pill: white 15%, full radius, the 16px service icon and the label Service. */
.tibu-route--service .tibu-service-pill {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2);
  width: fit-content;
  padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--4);
  border-radius: var(--wp--preset--border-radius--full);
  background-color: color-mix(in srgb, var(--wp--preset--color--surface-0) 15%, transparent);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.43;
}

.tibu-route--service .tibu-service-pill > * {
  margin: 0;
}

.tibu-route--service .tibu-service-pill__icon {
  display: inline-flex;
  flex: none;
}

.tibu-route--service .tibu-service-pill__icon svg {
  width: 16px;
  height: 16px;
}

/* Inner-page hero h1: 36px, then 60px from 768px (the literal 60px step, never a preset). */
.tibu-route--service .tibu-service-hero h1 {
  max-width: 48rem;
  color: inherit;
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.tibu-route--service .tibu-service-hero .wp-block-cover__inner-container > * + h1 {
  margin-block-start: var(--wp--preset--spacing--4);
}

.tibu-route--service .tibu-service-hero .wp-block-post-excerpt {
  max-width: 42rem;
  color: color-mix(in srgb, var(--wp--preset--color--surface-0) 90%, transparent);
  line-height: 1.556;
}

.tibu-route--service .tibu-service-hero .wp-block-cover__inner-container > * + .wp-block-post-excerpt {
  margin-block-start: var(--wp--preset--spacing--4);
}

.tibu-route--service .tibu-service-hero .wp-block-post-excerpt__excerpt {
  margin: 0;
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  .tibu-route--service .tibu-service-hero {
    padding-block: var(--wp--preset--spacing--28);
  }

  .tibu-route--service .tibu-service-hero h1 {
    font-size: 60px;
  }
}

/* ---- Content band: two columns 2:1 from 1024px ---- */

.tibu-route--service .tibu-service-content {
  box-sizing: border-box;
  padding: var(--wp--preset--spacing--16) var(--wp--style--root--padding-right) var(--wp--preset--spacing--16) var(--wp--style--root--padding-left);
  background-color: var(--wp--preset--color--surface-0);
}

.tibu-route--service .tibu-service-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--12);
  align-items: stretch;
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
}

.tibu-route--service .tibu-service-columns > .wp-block-column {
  min-width: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .tibu-route--service .tibu-service-content {
    padding-block: var(--wp--preset--spacing--24);
  }
}

@media (min-width: 1024px) {
  .tibu-route--service .tibu-service-columns {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* ---- Service body: the large prose style ---- */

.tibu-route--service .tibu-service-main .wp-block-post-content {
  padding-inline: 0;
}

.tibu-route--service .tibu-service-main .wp-block-post-content > * {
  max-width: none;
  margin-inline: 0;
}

.tibu-route--service .tibu-service-main .wp-block-post-content :where(p, ul, ol, li) {
  color: var(--wp--preset--color--ink-900);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.778;
}

.tibu-route--service .tibu-service-main .wp-block-post-content > :where(p, ul, ol) {
  margin-block: var(--wp--preset--spacing--6);
}

.tibu-route--service .tibu-service-main .wp-block-post-content :where(h2, h3) {
  color: var(--wp--preset--color--brand-maroon);
  font-family: var(--wp--preset--font-family--heading);
  letter-spacing: normal;
}

.tibu-route--service .tibu-service-main .wp-block-post-content h2 {
  margin-block: var(--wp--preset--spacing--12) var(--wp--preset--spacing--6);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
}

.tibu-route--service .tibu-service-main .wp-block-post-content h3 {
  margin-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--3);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 700;
  line-height: 1.333;
}

.tibu-route--service .tibu-service-main .wp-block-post-content > :first-child {
  margin-block-start: 0;
}

.tibu-route--service .tibu-service-main .wp-block-post-content > :last-child {
  margin-block-end: 0;
}

.tibu-route--service .tibu-service-main .wp-block-post-content :where(ul, ol) {
  padding-inline-start: var(--wp--preset--spacing--6);
}

.tibu-route--service .tibu-service-main .wp-block-post-content :where(p, li) a {
  color: var(--wp--preset--color--brand-blue);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 150ms;
}

.tibu-route--service .tibu-service-main .wp-block-post-content :where(p, li) a:hover {
  color: var(--wp--preset--color--brand-blue-dark);
}

/*
 * The Offerings list is the plugin's locked list, the body's first list
 * (Phase 5 D-25): one item per line, 12px apart, each after a 24px
 * brand-blue check-circle-2 marker.
 */
.tibu-route--service .tibu-service-main .wp-block-post-content > ul.wp-block-list:first-of-type {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--3);
  padding: 0;
  list-style: none;
}

.tibu-route--service .tibu-service-main .wp-block-post-content > ul.wp-block-list:first-of-type > li {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--3);
  min-width: 0;
  margin: 0;
  overflow-wrap: break-word;
}

.tibu-route--service .tibu-service-main .wp-block-post-content > ul.wp-block-list:first-of-type > li::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  background-color: var(--wp--preset--color--brand-blue);
  -webkit-mask-image: url(../../icons/check-circle-2.svg);
  mask-image: url(../../icons/check-circle-2.svg);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ---- Enquiry panel ---- */

.tibu-route--service .tibu-enquiry {
  box-sizing: border-box;
  margin-block: var(--wp--preset--spacing--12) 0;
  padding: var(--wp--preset--spacing--6);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-blue) 20%, transparent);
  border-radius: var(--wp--preset--border-radius--2-xl);
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-blue) 5%, transparent);
}

.tibu-route--service .tibu-enquiry > * {
  margin-block: 0;
}

.tibu-route--service .tibu-enquiry h3 {
  color: var(--wp--preset--color--brand-maroon);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
}

.tibu-route--service .tibu-enquiry > p {
  margin-block-start: var(--wp--preset--spacing--2);
  color: color-mix(in srgb, var(--wp--preset--color--ink-900) 80%, transparent);
}

.tibu-route--service .tibu-enquiry > .wp-block-buttons {
  margin-block-start: var(--wp--preset--spacing--4);
}

/* The theme.css section-button arrow, extended to the enquiry panel's button. */
.tibu-route--service .tibu-enquiry .wp-block-button > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--2);
}

.tibu-route--service .tibu-enquiry .wp-block-button > .wp-block-button__link::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url(../../icons/arrow-right.svg);
  mask-image: url(../../icons/arrow-right.svg);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ---- Other services ---- */

.tibu-route--service .tibu-other-services > * {
  margin-block: 0;
}

.tibu-route--service .tibu-other-services h2 {
  color: var(--wp--preset--color--brand-maroon);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 700;
  line-height: 1.556;
  letter-spacing: normal;
}

.tibu-route--service .tibu-other-services .wp-block-query {
  margin-block-start: var(--wp--preset--spacing--4);
}

.tibu-route--service .tibu-other-services .wp-block-post-template {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tibu-route--service .tibu-other-services .wp-block-post-template > li {
  margin: 0;
}

.tibu-route--service .tibu-other-services .wp-block-post-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.5;
}

/* A bordered row link with a trailing brand-blue arrow drawn by a mask. */
.tibu-route--service .tibu-other-services .wp-block-post-title a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--3);
  width: 100%;
  padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-grey) 40%, transparent);
  border-radius: var(--wp--preset--border-radius--xl);
  color: var(--wp--preset--color--ink-900);
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color 150ms, background-color 150ms, color 150ms;
}

.tibu-route--service .tibu-other-services .wp-block-post-title a::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: var(--wp--preset--color--brand-blue);
  -webkit-mask-image: url(../../icons/arrow-right.svg);
  mask-image: url(../../icons/arrow-right.svg);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.tibu-route--service .tibu-other-services .wp-block-post-title a:hover {
  border-color: var(--wp--preset--color--brand-blue);
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-blue) 5%, transparent);
  color: var(--wp--preset--color--brand-maroon);
}

/* Sticky beside the body from 1024px only; below, it follows the content. */
@media (min-width: 1024px) {
  .tibu-route--service .tibu-other-services {
    position: sticky;
    top: 96px;
  }
}