/* tibu-afrika sections/about.css */

/*
 * The About route's prose sections: photo-hero, text-and-image, values-cards,
 * mission-vision-about, goal-commitment and ceo-statement (plan 07-08). 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
 * one of those six section classes. The photo-hero rules also serve the Team
 * route (07-11), which composes the same pattern, and text-and-image serves
 * any page that inserts it.
 *
 * Text wraps everywhere and nothing is clamped or ellipsized: cards and bands
 * grow with their copy, and images keep their aspect ratio (4:3 section
 * image, 3:4 portrait). Two-column sections stack below 1024px, the Astro lg
 * step, rather than at core's 782px columns breakpoint, so the stacking rules
 * carry !important to outrank core's own !important columns rules. Icons are
 * CSS masks of the theme's assets/icons files on empty pseudo-elements: they
 * are not blocks an Editor can edit and they never reach the accessibility
 * tree.
 */

/* ---- Two-column sections ---- */

.tibu-section--text-and-image > .wp-block-columns,
.tibu-section--mission-vision-about > .wp-block-columns,
.tibu-section--ceo-statement > .wp-block-columns {
  gap: var(--wp--preset--spacing--10);
  margin-block: 0;
}

.tibu-section--mission-vision-about > .wp-block-columns {
  gap: var(--wp--preset--spacing--12);
}

@media (max-width: 1023.98px) {
  .tibu-section--text-and-image > .wp-block-columns,
  .tibu-section--mission-vision-about > .wp-block-columns,
  .tibu-section--ceo-statement > .wp-block-columns {
    flex-wrap: wrap !important;
  }

  .tibu-section--text-and-image > .wp-block-columns > .wp-block-column,
  .tibu-section--mission-vision-about > .wp-block-columns > .wp-block-column,
  .tibu-section--ceo-statement > .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    flex-grow: 0;
  }
}

@media (min-width: 1024px) {
  .tibu-section--text-and-image > .wp-block-columns,
  .tibu-section--mission-vision-about > .wp-block-columns {
    align-items: center !important;
  }

  .tibu-section--ceo-statement > .wp-block-columns {
    align-items: flex-start !important;
  }

  .tibu-section--text-and-image > .wp-block-columns > .wp-block-column,
  .tibu-section--mission-vision-about > .wp-block-columns > .wp-block-column {
    flex: 1 1 0;
    min-width: 0;
  }

  /* CEO statement: portrait one part, statement two parts. */
  .tibu-section--ceo-statement > .wp-block-columns > .tibu-portrait-column {
    flex: 1 1 0;
    min-width: 0;
  }

  .tibu-section--ceo-statement > .wp-block-columns > .tibu-statement-column {
    flex: 2 1 0;
    min-width: 0;
  }
}

/* ---- Section intros: eyebrow, then the section title 12px below ---- */

.tibu-section--text-and-image .is-style-eyebrow,
.tibu-section--values-cards .is-style-eyebrow,
.tibu-section--ceo-statement .is-style-eyebrow {
  margin-block: 0;
}

.tibu-section--text-and-image .is-style-eyebrow + .is-style-section-title,
.tibu-section--values-cards .is-style-eyebrow + .is-style-section-title,
.tibu-section--ceo-statement .is-style-eyebrow + .is-style-section-title {
  margin-block-start: var(--wp--preset--spacing--3);
}

.tibu-section--text-and-image .is-style-section-title,
.tibu-section--values-cards .is-style-section-title,
.tibu-section--mission-vision-about .is-style-section-title,
.tibu-section--ceo-statement .is-style-section-title {
  margin-block-end: 0;
}

/* ---- Photo hero ---- */

/*
 * The cover fills the whole band and carries the hero rhythm itself: 80px,
 * then 112px from 768px. Its own background is brand-maroon, so the band
 * stays a solid maroon field with white text when the Editor removes the
 * photograph; with a photograph, the maroon overlay sits at 75% (core can only
 * class the stored 75 as its 80 step, so the opacity is set here).
 */
.tibu-section.tibu-section--photo-hero {
  padding-block: 0;
}

.tibu-section--photo-hero > .wp-block-cover {
  box-sizing: border-box;
  min-height: 0;
  margin-block: 0;
  padding: var(--wp--preset--spacing--20) 0;
  background-color: var(--wp--preset--color--brand-maroon);
  color: var(--wp--preset--color--surface-0);
}

.tibu-section.tibu-section--photo-hero .wp-block-cover > .wp-block-cover__background.has-background-dim {
  opacity: 0.75;
}

/*
 * Core zeroes the padding of a global-padding container nested in another
 * (the section root), so the cover's inner container takes the root gutters
 * back itself: 16px, 24px from 640px, 32px from 1024px.
 */
.tibu-section--photo-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);
}

/*
 * The copy starts at the wide container's left edge (the Astro container),
 * not centred: each line's start margin is half of what the wide size leaves.
 */
.tibu-section--photo-hero .wp-block-cover__inner-container > * {
  max-width: var(--wp--style--global--wide-size);
  margin-inline-start: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
  margin-inline-end: auto !important;
  margin-block: 0;
}

.tibu-section--photo-hero .is-style-eyebrow {
  color: color-mix(in srgb, var(--wp--preset--color--surface-0) 75%, transparent);
}

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

.tibu-section--photo-hero .wp-block-cover__inner-container > * + h1 {
  margin-block-start: var(--wp--preset--spacing--3);
}

.tibu-section--photo-hero .has-lead-font-size {
  max-width: 42rem;
  color: color-mix(in srgb, var(--wp--preset--color--surface-0) 90%, transparent);
  line-height: 1.556;
}

.tibu-section--photo-hero .wp-block-cover__inner-container > * + .has-lead-font-size {
  margin-block-start: var(--wp--preset--spacing--4);
}

@media (min-width: 768px) {
  .tibu-section--photo-hero > .wp-block-cover {
    padding-block: var(--wp--preset--spacing--28);
  }

  .tibu-section--photo-hero h1 {
    font-size: 60px;
  }
}

/* ---- Text and image ---- */

.tibu-section--text-and-image .tibu-text-column .has-lead-font-size {
  margin-block: var(--wp--preset--spacing--6) 0;
  color: color-mix(in srgb, var(--wp--preset--color--ink-900) 80%, transparent);
  line-height: 1.556;
}

.tibu-section--text-and-image .wp-block-image,
.tibu-section--ceo-statement .wp-block-image {
  overflow: hidden;
  margin: 0;
  box-shadow: var(--wp--preset--shadow--card);
  border-radius: var(--wp--preset--border-radius--3-xl);
  background-color: var(--wp--preset--color--brand-grey);
}

.tibu-section--text-and-image .wp-block-image img,
.tibu-section--ceo-statement .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.tibu-section--text-and-image .wp-block-image img {
  aspect-ratio: 4 / 3;
}

/* ---- Values cards ---- */

.tibu-section--values-cards {
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-grey) 20%, transparent);
}

.tibu-section--values-cards .tibu-section__header > * {
  max-width: 42rem;
}

/* One column, two from 640px, four from 1024px, 24px apart, 48px under the intro. */
.tibu-section--values-cards .tibu-values {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--6);
  margin-block-start: var(--wp--preset--spacing--12);
}

@media (min-width: 640px) {
  .tibu-section--values-cards .tibu-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .tibu-section--values-cards .tibu-values {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tibu-section--values-cards .tibu-value {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: var(--wp--preset--spacing--6);
  box-shadow: var(--wp--preset--shadow--card);
  border-radius: var(--wp--preset--border-radius--2-xl);
  background-color: var(--wp--preset--color--surface-0);
}

/*
 * The icon: ::before is the 48px glyph box, painted brand-blue-dark through
 * the card's fixed icon mask (24px, centred); ::after is the brand-blue 10%
 * tile with the xl radius, drawn behind it at the same place.
 */
.tibu-section--values-cards .tibu-value::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin-block-end: var(--wp--preset--spacing--4);
  background-color: var(--wp--preset--color--brand-blue-dark);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.tibu-section--values-cards .tibu-value::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--wp--preset--spacing--6);
  left: var(--wp--preset--spacing--6);
  width: 48px;
  height: 48px;
  border-radius: var(--wp--preset--border-radius--xl);
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-blue) 10%, transparent);
}

.tibu-section--values-cards .tibu-value--award::before {
  -webkit-mask-image: url(../../icons/award.svg);
  mask-image: url(../../icons/award.svg);
}

.tibu-section--values-cards .tibu-value--target::before {
  -webkit-mask-image: url(../../icons/target.svg);
  mask-image: url(../../icons/target.svg);
}

.tibu-section--values-cards .tibu-value--heart::before {
  -webkit-mask-image: url(../../icons/heart.svg);
  mask-image: url(../../icons/heart.svg);
}

.tibu-section--values-cards .tibu-value--shield::before {
  -webkit-mask-image: url(../../icons/shield.svg);
  mask-image: url(../../icons/shield.svg);
}

.tibu-section--values-cards .tibu-value > h3 {
  margin-block: 0;
  color: var(--wp--preset--color--brand-maroon);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.333;
}

.tibu-section--values-cards .tibu-value > p {
  margin-block: var(--wp--preset--spacing--2) 0;
  color: var(--wp--preset--color--ink-500);
}

/* ---- Mission and vision (pyramid) ---- */

/* The pills: maroon 10% (mission) and blue 10% (vision), full radius, a 16px icon. */
.tibu-section--mission-vision-about .tibu-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2);
  max-width: 100%;
  box-sizing: border-box;
  margin-block: 0 var(--wp--preset--spacing--4);
  padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--4);
  border-radius: var(--wp--preset--border-radius--full);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.43;
}

.tibu-section--mission-vision-about .tibu-pill::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.tibu-section--mission-vision-about .tibu-pill--mission {
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-maroon) 10%, transparent);
  color: var(--wp--preset--color--brand-maroon);
}

.tibu-section--mission-vision-about .tibu-pill--mission::before {
  -webkit-mask-image: url(../../icons/target.svg);
  mask-image: url(../../icons/target.svg);
}

.tibu-section--mission-vision-about .tibu-pill--vision {
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-blue) 10%, transparent);
  color: var(--wp--preset--color--brand-blue-dark);
}

.tibu-section--mission-vision-about .tibu-pill--vision::before {
  -webkit-mask-image: url(../../icons/eye.svg);
  mask-image: url(../../icons/eye.svg);
}

/* The vision pill sits 40px under the mission heading. */
.tibu-section--mission-vision-about * + .tibu-pill--vision {
  margin-block-start: var(--wp--preset--spacing--10);
}

.tibu-section--mission-vision-about .tibu-pill + h2,
.tibu-section--mission-vision-about .tibu-pill + h3 {
  margin-block-start: 0;
}

/* About vision h3: 30px, then the xx-large 36px from 768px, 800, 1.2, maroon. */
.tibu-section--mission-vision-about .tibu-vision {
  margin-block: 0;
  color: var(--wp--preset--color--brand-maroon);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
}

/*
 * The pyramid: the theme's four-polygon silhouette as a mask, painted top to
 * bottom with the UI-SPEC tiers (brand-blue mixed 30% and 65% with surface-0,
 * brand-blue, brand-blue-dark) by hard stops at the polygon gaps of the
 * 400 by 340 viewBox. Decoration only, from 1024px beside the copy.
 */
.tibu-section--mission-vision-about .tibu-pyramid-column,
.tibu-section--mission-vision-about .tibu-pyramid {
  display: none;
}

@media (min-width: 768px) {
  .tibu-section--mission-vision-about .tibu-vision {
    font-size: var(--wp--preset--font-size--xx-large);
  }
}

@media (min-width: 1024px) {
  .tibu-section--mission-vision-about .tibu-pyramid-column {
    display: block;
  }

  .tibu-section--mission-vision-about .tibu-pyramid {
    display: block;
    width: 100%;
    max-width: 28rem;
    aspect-ratio: 400 / 340;
    margin-inline: auto;
    background-image: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--wp--preset--color--brand-blue) 30%, var(--wp--preset--color--surface-0)) 0 30.15%,
      color-mix(in srgb, var(--wp--preset--color--brand-blue) 65%, var(--wp--preset--color--surface-0)) 30.15% 53.68%,
      var(--wp--preset--color--brand-blue) 53.68% 77.21%,
      var(--wp--preset--color--brand-blue-dark) 77.21% 100%
    );
    -webkit-mask-image: url(../../icons/pyramid.svg);
    mask-image: url(../../icons/pyramid.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

/* ---- Goal and commitment ---- */

/* One column, two from 768px, 32px apart; cards white 10%, 2xl radius, 32px padding. */
.tibu-section--goal-commitment .tibu-cards {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--8);
}

@media (min-width: 768px) {
  .tibu-section--goal-commitment .tibu-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tibu-section--goal-commitment .tibu-card {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: var(--wp--preset--spacing--8);
  border-radius: var(--wp--preset--border-radius--2-xl);
  background-color: color-mix(in srgb, var(--wp--preset--color--surface-0) 10%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.tibu-section--goal-commitment .tibu-card > h3 {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2);
  margin-block: 0 var(--wp--preset--spacing--4);
  color: inherit;
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.333;
}

.tibu-section--goal-commitment .tibu-card > h3::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.tibu-section--goal-commitment .tibu-card--goal > h3::before {
  -webkit-mask-image: url(../../icons/target.svg);
  mask-image: url(../../icons/target.svg);
}

.tibu-section--goal-commitment .tibu-card--commitment > h3::before {
  -webkit-mask-image: url(../../icons/users.svg);
  mask-image: url(../../icons/users.svg);
}

.tibu-section--goal-commitment .tibu-card > p {
  margin-block: 0;
  color: color-mix(in srgb, var(--wp--preset--color--surface-0) 90%, transparent);
}

/* ---- CEO statement ---- */

.tibu-section--ceo-statement .wp-block-image img {
  aspect-ratio: 3 / 4;
}

.tibu-section--ceo-statement .tibu-statement {
  margin-block: var(--wp--preset--spacing--4) 0;
  color: color-mix(in srgb, var(--wp--preset--color--ink-900) 80%, transparent);
  line-height: 1.556;
}

.tibu-section--ceo-statement .is-style-section-title + .tibu-statement {
  margin-block-start: var(--wp--preset--spacing--6);
}

/* The signed name: Caveat, xx-large 36px, maroon, 32px under the statement. */
.tibu-section--ceo-statement .tibu-signature {
  margin-block: var(--wp--preset--spacing--8) 0;
  color: var(--wp--preset--color--brand-maroon);
  font-family: var(--wp--preset--font-family--signature);
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 400;
  line-height: 1.25;
}

.tibu-section--ceo-statement .tibu-signature-title {
  margin-block: 0;
  color: var(--wp--preset--color--ink-500);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
}