/* Hand-written — NOT generated. build.js copies this to assets/css/mobile.css
   and links it last, so it wins over the design's inline styles.
 *
 * Every rule here corrects a defect that exists in the design canvas itself,
 * verified by measurement in a real browser. They live here rather than in the
 * .dc.html so they survive the next canvas re-export. Each one should
 * eventually be fixed in the canvas and deleted from this file.
 *
 * Breakpoints match the design's own media-query block (700px / 1060px). */


/* 1. Leadership grid collapses on narrow screens.
 *
 * The canvas sets `grid-template-columns:repeat(3,minmax(0,1fr))` inline on the
 * leadership <ul>, with no media query anywhere overriding it, so nine cards
 * stay in three fixed columns at every width. Measured at 390px: cards render
 * 107px wide while the portrait inside is 115px, so photographs overflow their
 * own card and names clip mid-word ("Bernel Ha...", "Melinda Colon Ca...").
 *
 * The previous revision used `repeat(auto-fit,minmax(260px,1fr))`, which
 * collapsed correctly; the 9-18-26 export replaced it. This restores a
 * responsive column count without touching the desktop layout, which is fine. */
@media (max-width: 699px) {
  ul:has(> [data-leader]) {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 700px) and (max-width: 1059px) {
  ul:has(> [data-leader]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* 2. Museum band caption collides with its disclosure control.
 *
 * The caption ("The Hip Hop Museum | South Bronx, NY") sits in a
 * `position:sticky` block whose containing column ends at exactly the same y as
 * the "Read the full Hip Hop Museum story" <summary> below it. Once the sticky
 * block reaches its bottom limit the two occupy the same line and the caption
 * is struck through by the control.
 *
 * At >=700px they sit in separate columns and never meet, so this only needs
 * unsticking on the single-column layout, where sticky buys nothing anyway. */
@media (max-width: 699px) {
  #museum div[data-reveal][data-mo-dir][style*="sticky"] {
    position: static !important;
  }
}


/* 3. Footer link tap targets.
 *
 * The twelve footer sitemap links render 22px tall, under the 24px WCAG 2.2
 * minimum (SC 2.5.8) and well under the 44px the handoff notes claim for
 * controls. The list already has a 12px row gap, so growing the links to 44px
 * costs vertical space but no overlap. The social icons are already 44x44 and
 * are not `li > a`, so they are untouched. */
@media (max-width: 699px) {
  footer li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}


/* 4. Audited Financial Highlights: house tiles are left-aligned.
 *
 * The four summary tiles are clipped to a symmetrical house silhouette
 * (`clip-path:polygon(50% 0%,...)`) whose roof peaks dead centre, but the canvas
 * sets no `text-align`, so the figure, label and FY-2024 delta all sit hard left
 * under a centred apex. Reported from the live site.
 *
 * Applies at every width, not just mobile: the tiles run 4 / 2 / 1 across the
 * design's 1060px and 700px breakpoints and read the same way at all three. */
[data-house-tile] {
  text-align: center;
}