/* homepage additions for mnkitchenofkindness.com.
 *
 * additive only — the umbrella theme is shared by every branch and is not ours to
 * edit. everything here overrides it by specificity, loaded after it.
 */

/* ---- the corporate booking tile ------------------------------------------ */

/* the span goes on the co:item wrapper, not the card: the editor's wrappers are the
 * grid items, so grid-column on .action-card is inert and the tile silently stays one
 * column wide. */
.stats-section .actions-grid .coitem:has(.corporate-book) {
  grid-column: 1 / -1;
}

/* icon-left, matching the stat rows beside it — the page's pattern for a horizontal
 * item. the icon is taken out of flow rather than given a column of its own: laid out
 * in the grid it has to span both text rows, and being taller than the text it grows
 * whichever row has slack, which pulls the title off centre. out of flow, the card's
 * height is the text's alone and both centre independently.
 *
 * the left padding is the icon's 68px plus a 20px gutter. min-height clears the
 * theme's 276px floor, which is the square tiles' shape, and keeps the box taller
 * than the icon when the copy is short. */
.stats-section .actions-grid .corporate-book {
  align-items: flex-start;
  min-height: 110px;
  padding: 22px 30px 22px 118px;
  text-align: left;
}

/* the theme sets width:100% and height:100% on card images */
.stats-section .actions-grid .corporate-book > img {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 68px;
  height: auto;
}

/* margin, not margin-top: the theme's h3 carries `margin: 16px 0 5px` */
.stats-section .actions-grid .corporate-book h3 {
  margin: 0;
  text-wrap: balance;
}

/* matched on > div: the editor generates its own class on a content div (.hIfK here),
 * so one written by hand may not survive a later edit in the builder. .hIfK caps at
 * 190px, which is the square tiles' measure. */
.stats-section .actions-grid .corporate-book > div {
  max-width: 420px;
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 20px;
}

/* ---- keeping the two columns level --------------------------------------- */

/* .stats-layout is a flex row with align-items:stretch and the columns match at
 * exactly 596px, so a third grid row breaks the match. .stats-list is display:block
 * with the stats spaced by margins, so it stretches without redistributing and pools
 * the difference as dead space under 18,000. above 992px only — below that the theme
 * stacks .stats-layout to a column. */
@media screen and (min-width: 992px) {
  .stats-section .stats-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}