/* ad-hoc, not part of product: Bajala About page (about.html), redesign variant 1.
   The page reuses the .ab- rule lists and bands from policies.css; only the About-specific
   tweaks live here. Every value comes from the tokens in style.css. */

/* 02 values band: six statements share the room-facts band */
.ab-hero + .facts { margin-top: 0; }

/* 03 the name: second paragraph keeps the body rhythm */
.split__body + .split__body { margin-top: var(--space-3); }

/* 04 story: years and "Odette" sit in the index column, so give it room for a word */
#story .ab-item { grid-template-columns: 4rem minmax(0, 1fr); }

/* 05 three promises: one ruled row of three; air before the split that follows */
.ab-promises { padding-bottom: var(--section-large); }
.ab-list--three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.ab-list--three .ab-item__body { max-width: none; }

/* 03 the name: copy runs to the right content edge, like the policies house rules */
.ab-name .split__text { grid-column: 8 / -1; }

/* 06 people and place: copy starts on column 1 (the container edge, like the hero and the story
   band) and ends on column 5, leaving column 6 as the gutter before the photo */
.ab-place .split__text { grid-column: 1 / span 5; }
.ab-place .split__title { margin-bottom: var(--space-3); }
.ab-place .ab-list { margin-top: var(--space-6); }

/* 07 sign-off: last block before the footer */
.ab-sign { padding-bottom: var(--section-large); }

@media (max-width: 991px) {
  .ab-list--three { grid-template-columns: minmax(0, 1fr); }
  .ab-place .split__text { grid-column: 1 / -1; }
}

@media (max-width: 599px) {
  #story .ab-item { grid-template-columns: 3.25rem minmax(0, 1fr); }
}