/*
  Blog page (/blog, its category and tag views, and every blog post): native Squarespace sections, plus these rules.
  Loaded from the page's own header code (Blog page settings > Advanced > Page Header Code Injection).
  The site-wide carousel rules (arrows, excerpt length, fitting the row to the cards on screen) are in
  src/site/custom.css and src/site/carousel-fit.js; these only fix this page's section spacing.

  Some rules target Squarespace section and block IDs on this page. If a section or block is deleted
  and re-added, its ID changes: update the ID here. IDs were read from the live page on October 27, 2026.
*/

/* ---------------------------------------------------------------
   Carousel sections: size their grid rows to their content.
   Squarespace gives every row a fixed height, sized for the old, taller carousels. Now that a carousel
   is only as tall as the cards on screen, those rows left empty space under the arrows. Letting rows
   size to their content keeps the same space under every carousel.
   The editor keeps Squarespace's own rows, so staff edit the sections as usual.
   --------------------------------------------------------------- */
body:not(.sqs-edit-mode-active) .fluid-engine:has(.summary-block-setting-design-carousel) {
  grid-template-rows: none;
  grid-auto-rows: minmax(0, auto);
}

/* "Bike Coalition In the News" has no bottom padding (custom section height 0), so its arrows sat
   tight against the next section. Give it the same bottom padding as the other carousel sections
   (Squarespace's small section height: 3.3vw, never under 29.7px). */
section[data-section-id="69bdbd4dcadc056ef1811ca4"] .content-wrapper {
  padding-bottom: max(29.7px, 3.3vw) !important;
}

/* "Letters of Support" on phones: the mobile layout put the heading under its carousel.
   Put the heading first, like every other section. */
@media (max-width: 767px) {
  body:not(.sqs-edit-mode-active) .fe-block-51a58aa05a2047e28448 { grid-area: 1 / 2 / 2 / 10; }
  body:not(.sqs-edit-mode-active) .fe-block-38fcd6114a19a4c7f6ce { grid-area: 2 / 2 / 3 / 10; }
}

/* ---------------------------------------------------------------
   Blog posts (every post page also loads this file through the Blog page's header code).
   Added October 29, 2026.
   --------------------------------------------------------------- */

/* Comment box: rounded corners, like the site's cards. */
.blog-item-comments .new-comment-area {
  border-radius: 16px;
  overflow: hidden;
}
.blog-item-comments .comment-input {
  border-radius: 16px;
}

/* Next and previous post links: the titles inherited the post headline size and wrapped
   across the page. Keep them in the headline font, a little over half the size. */
.item-pagination-title {
  font-size: clamp(1rem, 1.5vw, 1.35rem) !important;
  line-height: 1.25 !important;
}

/* Tags: Spring Green pills with Teal Green text instead of small dot-separated text.
   Each pill is at least 44px tall so it is easy to tap. */
.blog-meta-item--tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blog-item-tag-wrapper::after {
  content: none !important;
}
.blog-item-tag {
  display: inline-flex;
  align-items: center;
  min-height: var(--bc-button-height-compact, 44px);
  padding: 0 18px;
  border-radius: var(--bc-radius-pill, 999px);
  background: var(--bc-spring-green, #C7EC7A);
  color: var(--bc-teal-green, #226550) !important;
  font-family: var(--bc-font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--bc-text-small, 16px);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
}
.blog-item-tag:hover,
.blog-item-tag:focus-visible {
  background: var(--bc-teal-green, #226550);
  color: var(--bc-spring-green, #C7EC7A) !important;
}