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

/*
 * The About route's two data sections (plan 07-14): partners-expanded and
 * credentials. This is the plan's own partial: it loads with the other
 * section partials 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 and no preset variable declared (D-13). Every selector sits under
 * .tibu-section--partners-expanded or .tibu-section--credentials. The cards
 * are the companion plugin's own markup (tibu/partners-grid and
 * tibu/credentials), styled only inside these sections; the plugin ships no
 * CSS (Phase 5 D-28).
 *
 * Logos keep their full aspect ratio: they size from their own intrinsic
 * dimensions inside a fixed-height tile, capped by max-width and max-height,
 * so they are never stretched, cropped or filtered, and object-fit: contain
 * backs that up. Text wraps everywhere and nothing is clamped or ellipsized.
 * The credential fallback icon is a CSS mask of the theme's
 * icons/building-2.svg on an empty, aria-hidden element.
 */

/* ---- Partners and collaborations: header ---- */

.tibu-section--partners-expanded .tibu-section__header {
  margin-block: 0;
}

/* The intro caps at 48rem while the header Group keeps the wide measure. */
.tibu-section--partners-expanded .tibu-section__header > * {
  max-width: 48rem;
}

.tibu-section--partners-expanded .is-style-eyebrow,
.tibu-section--partners-expanded .is-style-section-title {
  margin-block: 0;
}

.tibu-section--partners-expanded .is-style-eyebrow + .is-style-section-title {
  margin-block-start: var(--wp--preset--spacing--3);
}

/* ---- Partners and collaborations: tiers ---- */

.tibu-section--partners-expanded .tibu-tier {
  margin-block: var(--wp--preset--spacing--10) 0;
}

.tibu-section--partners-expanded .tibu-tier + .tibu-tier {
  margin-block-start: var(--wp--preset--spacing--8);
}

/* Tier labels: the Label role, ink-500 for Partner and brand-blue-dark for Site Collaboration. */
.tibu-section--partners-expanded .tibu-tier-label {
  margin-block: 0;
  color: var(--wp--preset--color--ink-500);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.tibu-section--partners-expanded .tibu-tier--collaboration .tibu-tier-label {
  color: var(--wp--preset--color--brand-blue-dark);
}

.tibu-section--partners-expanded .tibu-partners-grid {
  margin-block: var(--wp--preset--spacing--4) 0;
}

.tibu-section--partners-expanded .tibu-partners-grid .tibu-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Partners and collaborations: shared card parts ---- */

.tibu-section--partners-expanded .tibu-partners-grid .tibu-item {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  margin: 0;
  padding: var(--wp--preset--spacing--6);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-grey) 40%, transparent);
  border-radius: var(--wp--preset--border-radius--2-xl);
  background-color: var(--wp--preset--color--surface-0);
}

/* The logo cell: the image (or its link, or the monogram) centred in a 128px tile row. */
.tibu-section--partners-expanded .tibu-partners-grid .tibu-item > :first-child {
  align-self: center;
  justify-self: center;
  min-width: 0;
}

.tibu-section--partners-expanded .tibu-partners-grid .tibu-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.tibu-section--partners-expanded .tibu-partners-grid .tibu-media {
  display: block;
  width: auto;
  max-width: 80%;
  height: auto;
  max-height: 72px;
  object-fit: contain;
}

.tibu-section--partners-expanded .tibu-partners-grid .tibu-monogram {
  color: var(--wp--preset--color--brand-maroon);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 800;
  line-height: 1.333;
}

/*
 * The plugin prints each organisation name as p.tibu-item-title (D-27 final
 * markup); it is styled as the card title. Its element is a paragraph where
 * Astro has an h3, a Phase 9 parity item.
 */
.tibu-section--partners-expanded .tibu-partners-grid .tibu-item-title {
  margin: 1.25rem 0 0;
  color: var(--wp--preset--color--ink-900);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 800;
  line-height: 1.333;
}

.tibu-section--partners-expanded .tibu-partners-grid .tibu-detail {
  margin: var(--wp--preset--spacing--2) 0 0;
  color: color-mix(in srgb, var(--wp--preset--color--ink-900) 80%, transparent);
  line-height: 1.5;
}

/* ---- Partner cards: one column, two from 640px, four from 1024px ---- */

.tibu-section--partners-expanded .tibu-partners-partner .tibu-item {
  grid-template-rows: 128px;
  align-content: start;
  box-shadow: var(--wp--preset--shadow--card);
}

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

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

/*
 * ---- Site Collaboration: bordered rows with a brand-blue-dark leading edge ----
 * Stacked below 768px (logo tile, then name and summary 24px below); from
 * 768px the logo takes one part and the text two, the text centred against
 * the 128px tile.
 */

.tibu-section--partners-expanded .tibu-partners-collaboration .tibu-item {
  grid-template-rows: 128px;
  border-inline-start: 4px solid var(--wp--preset--color--brand-blue-dark);
}

.tibu-section--partners-expanded .tibu-partners-collaboration .tibu-item-title {
  margin-block-start: var(--wp--preset--spacing--6);
}

@media (min-width: 768px) {
  .tibu-section--partners-expanded .tibu-tier + .tibu-tier {
    margin-block-start: var(--wp--preset--spacing--12);
  }

  .tibu-section--partners-expanded .tibu-partners-collaboration .tibu-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    column-gap: var(--wp--preset--spacing--6);
    min-height: calc(128px + 2 * var(--wp--preset--spacing--6));
  }

  .tibu-section--partners-expanded .tibu-partners-collaboration .tibu-item > :first-child {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .tibu-section--partners-expanded .tibu-partners-collaboration .tibu-item-title {
    grid-column: 2;
    grid-row: 2;
    margin-block-start: 0;
  }

  .tibu-section--partners-expanded .tibu-partners-collaboration .tibu-detail {
    grid-column: 2;
    grid-row: 3;
  }
}

/* ---- Credentials ---- */

/* The #credentials anchor clears the sticky header by 96px when linked to. */
.tibu-section.tibu-section--credentials {
  scroll-margin-top: var(--wp--preset--spacing--24);
}

/*
 * The heading caps at 48rem on the section's wide measure, flush with the
 * cards' left edge (core's constrained layout would centre it).
 */
.tibu-section--credentials > .is-style-section-title {
  max-width: min(48rem, 100%);
  margin-block: 0;
  margin-inline-start: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
  margin-inline-end: auto !important;
}

/* Cards: one column, two from 768px, 24px apart, 40px under the heading. */
.tibu-section--credentials .tibu-credentials {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--6);
  margin-block: var(--wp--preset--spacing--10) 0;
}

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

.tibu-section--credentials .tibu-credential {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: var(--wp--preset--spacing--6);
  border: 1px solid var(--wp--preset--color--brand-grey);
  border-radius: var(--wp--preset--border-radius--2-xl);
  background-color: var(--wp--preset--color--surface-0);
}

/* The logo tile: 96px tall, xl radius, brand-grey 20% fill, 16px inside. */
.tibu-section--credentials .tibu-credential__media {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin-block: 0 var(--wp--preset--spacing--6);
  padding: var(--wp--preset--spacing--4);
  border-radius: var(--wp--preset--border-radius--xl);
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-grey) 20%, transparent);
}

.tibu-section--credentials .tibu-credential__logo {
  display: block;
  min-width: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* The fallback when a record has no logo: the building-2 glyph, 48px, in brand-blue-dark. */
.tibu-section--credentials .tibu-credential__icon {
  display: block;
  flex: none;
  width: 48px;
  height: 48px;
  background-color: var(--wp--preset--color--brand-blue-dark);
  -webkit-mask-image: url(../../icons/building-2.svg);
  mask-image: url(../../icons/building-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;
}

.tibu-section--credentials .tibu-credential__name {
  margin: 0;
  color: var(--wp--preset--color--brand-maroon);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 800;
  line-height: 1.333;
}

.tibu-section--credentials .tibu-credential__details {
  margin: 1.25rem 0 0;
}

.tibu-section--credentials .tibu-credential__row + .tibu-credential__row {
  margin-block-start: var(--wp--preset--spacing--3);
}

.tibu-section--credentials .tibu-credential__details dt {
  margin: 0;
  color: var(--wp--preset--color--ink-500);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
  line-height: 1.43;
}

.tibu-section--credentials .tibu-credential__details dd {
  margin: var(--wp--preset--spacing--1) 0 0;
  color: var(--wp--preset--color--ink-900);
  overflow-wrap: anywhere;
}

.tibu-section--credentials .tibu-credential__note {
  margin: 1.25rem 0 0;
  color: var(--wp--preset--color--ink-900);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.43;
}