/* tibu-afrika sections/services-index.css */

/*
 * The Services route's own section partial (plan 07-10): the alternating
 * service articles of the "Services list" section
 * (patterns/services-index.php). 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-section--services-index or the companion
 * plugin's .tibu-services-index wrapper, whose markup ships no CSS (Phase 5
 * D-28).
 *
 * Layout (07-UI-SPEC tibu/services-index): articles stack 64px apart, 96px
 * from 768px. Each article is one column below 1024px (image first, then
 * text) and two columns 48px apart from 1024px, where every even article
 * moves its image to the right; the alternation is CSS nth-child only, so the
 * DOM and reading order never change. The summary and offerings wrap and are
 * never clamped. Core kebab-cases preset slugs for their variables, splitting
 * digits from letters, so the 3xl radius preset prints as --3-xl.
 */

/* ---- Article stack ---- */

.tibu-section--services-index .tibu-services-index {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--16);
}

@media (min-width: 768px) {
  .tibu-section--services-index .tibu-services-index {
    gap: var(--wp--preset--spacing--24);
  }
}

/* ---- One article ---- */

.tibu-services-index .tibu-service-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--8);
  align-items: center;
  margin: 0;
}

.tibu-services-index .tibu-service-article__body {
  min-width: 0;
}

@media (min-width: 1024px) {
  .tibu-services-index .tibu-service-article {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--12);
  }

  .tibu-services-index .tibu-service-article:nth-child(even) > .tibu-service-article__media {
    order: 2;
  }
}

/* ---- Media: the 4:3 image, or the service icon on a tinted tile ---- */

.tibu-services-index .tibu-service-article__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--wp--preset--border-radius--3-xl);
  box-shadow: var(--wp--preset--shadow--card);
}

.tibu-services-index .tibu-service-article__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tibu-services-index .tibu-service-article__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-blue) 10%, transparent);
  color: var(--wp--preset--color--brand-blue-dark);
}

.tibu-services-index .tibu-service-article__icon svg {
  width: 25%;
  height: auto;
}

/* ---- Badge: icon and two-digit display position ---- */

.tibu-services-index .tibu-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2);
  margin: 0 0 var(--wp--preset--spacing--3);
  padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
  border-radius: var(--wp--preset--border-radius--full);
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-blue) 10%, transparent);
  color: var(--wp--preset--color--brand-blue-dark);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.43;
}

.tibu-services-index .tibu-badge__icon {
  display: inline-flex;
  flex: none;
}

.tibu-services-index .tibu-badge__icon svg {
  width: 16px;
  height: 16px;
}

/* ---- Title and summary ---- */

/* The .section-title treatment: the stepped section-title preset, 800, maroon. */
.tibu-services-index .tibu-service-article__title {
  margin: 0;
  color: var(--wp--preset--color--brand-maroon);
  font-size: var(--wp--preset--font-size--section-title);
  font-weight: 800;
  line-height: 1.1;
}

/* Lead at ink-900 80%; wraps in full, with no line clamp or ellipsis. */
.tibu-services-index .tibu-summary {
  margin: var(--wp--preset--spacing--4) 0 0;
  color: color-mix(in srgb, var(--wp--preset--color--ink-900) 80%, transparent);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.556;
  overflow-wrap: break-word;
}

/* ---- Offerings: brand-blue check markers ---- */

.tibu-services-index .tibu-offerings {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--2);
  margin: var(--wp--preset--spacing--6) 0 0;
  padding: 0;
  list-style: none;
}

.tibu-services-index .tibu-offering {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--2);
  min-width: 0;
  color: var(--wp--preset--color--ink-900);
  overflow-wrap: break-word;
}

.tibu-services-index .tibu-offering::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  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;
}

/* ---- Read more: the primary button with the trailing arrow ---- */

/*
 * The link carries core's wp-element-button class, so theme.json's button
 * element gives it the primary treatment and hover. The arrow is an empty
 * ::after painted currentColor through the theme's arrow mask, as on section
 * buttons, so it is not part of the accessible name.
 */
.tibu-services-index .tibu-read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--2);
  margin-top: var(--wp--preset--spacing--8);
  text-decoration: none;
}

.tibu-services-index .tibu-read-more::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;
}