/* Per-page sponsor spots: a Premier Sponsors panel immediately after a page's
   opening and a Community Sponsors tile strip after all of its useful content.
   Both ship with the
   hidden attribute and are only revealed by /assets/js/sponsor-spots.js once
   active sponsors exist in Airtable for that page, so an empty page shows
   nothing at all. Tiles are equal-sized and letterbox any logo shape. */

/* The component sizes itself, whatever the page around it does. Pages without
   a global border-box reset were fitting only two tiles per row, because the
   tile's padding and border were being added to its 33.333% basis. */
.premier-band, .community-sponsors, .pb-inner, .pb-spots, .pb-spot, .csx-grid, .csx-spot { box-sizing: border-box; }

/* The shared Premier treatment follows the homepage: one quiet white panel,
   a small label, and two equal logo tiles. Individual editorial pages may tint
   the outer panel to match their own palette, but the logo geometry stays the
   same everywhere. */
.premier-band { margin-top: 1.25rem; background: #fff; border: 1px solid #d4dcdd; border-radius: 14px; padding: 1rem 1.1rem; }
.pb-inner { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 540px); justify-content: center; gap: 0.75rem; }
.pb-label { text-align: center; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #55635c; }
.pb-spots { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
/* Sized for a LANDSCAPE wordmark on a transparent background, which is what a
   premier sponsor's artwork actually is. A taller tile was tried for square
   badge logos and made the band 186px on desktop, with the mark carrying more
   weight than the page's own title; square artwork is handled at intake
   instead. Requiring transparency is what lets the tile stay this quiet. */
.pb-spot { min-width: 0; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e3e8e4; border-radius: 12px; height: 74px; padding: 12px 22px; }
.pb-spot:only-child { width: calc(50% - 0.5rem); grid-column: 1 / -1; justify-self: center; }
.pb-spot img { max-height: 100%; max-width: 240px; object-fit: contain; display: block; }

.community-sponsors { padding: 2.2rem 1.25rem 2.6rem; border-top: 1px solid #e3e8e4; background: #fbfcfb; }
.csx-head { text-align: center; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #55635c; margin: 0 0 1rem; }
.csx-grid { max-width: 1150px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.9rem; }
/* The grid owns the column count, so a wide logo cannot grow its tile or make
   the sponsor inventory wrap differently from page to page. */
.csx-spot { min-width: 0; display: flex; align-items: center; justify-content: center; background: #fbfcfb; border: 1px solid #e3e8e4; border-radius: 14px; height: 90px; padding: 12px 14px; }
.csx-spot img { max-width: 100%; max-height: 100%; object-fit: contain; }
.csx-join { display: block; text-align: center; margin-top: 1.2rem; font-size: 0.78rem; font-weight: 700; color: #356382; text-decoration: none; }
.csx-join:hover { text-decoration: underline; }

@media (max-width: 959px) {
  .csx-grid { max-width: 660px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .pb-inner { gap: 0.8rem; }
  .pb-spots { width: 100%; }
  .pb-spot { height: 60px; padding: 8px 10px; }
  .pb-spot img { max-width: 100%; }
  /* Six placements stay a deliberate 3 x 2 grid on phones. This preserves the
     contracted inventory without turning the bottom of the page into six tall
     ad rows. The fixed grid owns the width; logos are letterboxed inside it. */
  .csx-grid { max-width: 440px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
  .csx-spot { height: 76px; padding: 8px; }
}

/* The listing note under a page's Premier band (owner, 23 September 2026):
   one quiet line saying the businesses listed on the page are not endorsed by,
   and do not endorse, the Hub, and that sponsors are always labelled. Every
   listing page carries the same sentence; tests/listing-note.test.mjs holds it. */
.lfh-listing-note { box-sizing: border-box; max-width: 62ch; margin: 1rem 0 0; padding: 2px 0 2px 12px; border-left: 3px solid #cfdbe3; font-family: Inter, system-ui, sans-serif; font-size: 0.875rem; font-weight: 400; font-style: normal; line-height: 1.5; letter-spacing: 0; text-transform: none; color: #55635c; }