/**
 * Menu overlay grid sizing.
 *
 * app.css ships `lg:grid-cols-9` (and no other lg column count), which fitted the
 * original seven-card overlay exactly. The overlay now renders nine cards — the
 * primary menu (About, Owner's Portal, OC Order Portal, Our Services, OC
 * Transition, Our Portfolio, Resources, News & Knowledge) plus the CONTACT card —
 * so nine tracks overflow into implicit, content-sized tracks and the cards stop
 * lining up with each other.
 *
 * Eleven tracks hold every card on one rhythm: four ordinary cards (2 columns each)
 * stack two-up on the left, the "Our Portfolio" feature card takes 3 columns across
 * both rows in the middle, and the remaining four cards stack two-up on the right —
 * 2+2 | 3 | 2+2. Measured: 11 uniform tracks, no implicit tracks, no empty cells.
 *
 * Card spans stay in the markup (lg:col-span-2 / lg:col-span-3); this file only
 * sets the track count. Below 1024px the existing grid-cols-1 / sm:grid-cols-2
 * rules still apply untouched.
 */
@media (min-width: 1024px) {
  .menu-grid {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
}


/**
 * Menu card titles.
 *
 * The title is a flex item in a column flex container, so its default
 * `min-width: auto` let a long single word ("TRANSITION", "RESOURCES") widen the box
 * past the card's padding and across the border instead of wrapping. Measured before:
 * 6 of 9 titles spilled at 1440px, the worst by 66px.
 *
 * `min-width: 0` makes the title respect the card's content box, and the size/tracking
 * below let the longest words fit inside it at every breakpoint — measured 130-199px
 * of content box across 960-1920px, against 196px of text at the original 24px/4px.
 * `overflow-wrap` is the hard backstop: text can never cross the border.
 *
 * The cards also keep the 24px padding at every breakpoint. At >=1440px they used 40px,
 * which left a 130px content box — 16px narrower than at 1280px on a card only 10px
 * wider — so the widest breakpoint was the worst case.
 */
.menu-grid .menu-card-title {
  min-width: 0;
  overflow-wrap: break-word;
  font-size: clamp(14px, 1.45vw, 19px);
  letter-spacing: clamp(0.5px, 0.11vw, 1.5px);
}