/*
  Calendar page (/calendar) as it is today, and every event page: native Squarespace blocks, plus these rules.
  Loaded from the page's own header code (Calendar page settings > Advanced > Page Header Code Injection).
  src/pages/calendar.css is the separate, future redesign; this file is not that.

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

/* ---------------------------------------------------------------
   Class rows: title and level pill on one line, description below both.
   On narrow phones the pill wraps under the title. Each rule also matches the editor's
   markup (.ProseMirror), so the Squarespace editor shows and sizes the block the same way.
   --------------------------------------------------------------- */
#block-06dca50ed02d1a682df3 .sqs-html-content:has(> h2),
#block-7c6a3226872dd98b16ad .sqs-html-content:has(> h2),
#block-06dca50ed02d1a682df3 .ProseMirror,
#block-7c6a3226872dd98b16ad .ProseMirror {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
  row-gap: 14px;
  --bc-cal-title-size: clamp(32px, 2.3vw + 12px, 46px); /* a step up from the site's h2: 45px at 1440, 36px at 1024, 32px on phones */
}

#block-06dca50ed02d1a682df3 .sqs-html-content > h2,
#block-7c6a3226872dd98b16ad .sqs-html-content > h2,
#block-06dca50ed02d1a682df3 .ProseMirror > h2,
#block-7c6a3226872dd98b16ad .ProseMirror > h2 {
  margin: 0;
  font-size: var(--bc-cal-title-size);
}

#block-06dca50ed02d1a682df3 .sqs-html-content > p:not(:first-of-type),
#block-7c6a3226872dd98b16ad .sqs-html-content > p:not(:first-of-type),
#block-06dca50ed02d1a682df3 .ProseMirror > p:not(:first-of-type),
#block-7c6a3226872dd98b16ad .ProseMirror > p:not(:first-of-type) {
  flex: 1 0 100%;
  margin: 0;
}

/* ---------------------------------------------------------------
   Class level pills, matching the Classes page ("Find your class").
   The first paragraph under each class heading becomes the pill:
   City Cycling: Spring Green and Sky Blue dots. Smart Cycling: Sky Blue and black dots.
   --------------------------------------------------------------- */
#block-06dca50ed02d1a682df3 .sqs-html-content > p:first-of-type,
#block-7c6a3226872dd98b16ad .sqs-html-content > p:first-of-type,
#block-06dca50ed02d1a682df3 .ProseMirror > p:first-of-type,
#block-7c6a3226872dd98b16ad .ProseMirror > p:first-of-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bc-white, #FFFFFF);
  border: 2px solid var(--bc-teal-green, #226550);
  color: var(--bc-teal-green, #226550);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  /* Center on the title's capital letters, not its line box: in Obviously the caps sit 0.1em
     below the middle of the line. Moves the pill only; nothing around it shifts. */
  position: relative;
  top: calc(var(--bc-cal-title-size) * 0.1);
}

#block-06dca50ed02d1a682df3 .sqs-html-content > p:first-of-type::before,
#block-06dca50ed02d1a682df3 .sqs-html-content > p:first-of-type::after,
#block-7c6a3226872dd98b16ad .sqs-html-content > p:first-of-type::before,
#block-7c6a3226872dd98b16ad .sqs-html-content > p:first-of-type::after,
#block-06dca50ed02d1a682df3 .ProseMirror > p:first-of-type::before,
#block-06dca50ed02d1a682df3 .ProseMirror > p:first-of-type::after,
#block-7c6a3226872dd98b16ad .ProseMirror > p:first-of-type::before,
#block-7c6a3226872dd98b16ad .ProseMirror > p:first-of-type::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--bc-teal-green, #226550);
  box-sizing: border-box;
}

/* Both dots sit before the words; 4px apart, like the Classes page */
#block-06dca50ed02d1a682df3 .sqs-html-content > p:first-of-type::before,
#block-7c6a3226872dd98b16ad .sqs-html-content > p:first-of-type::before,
#block-06dca50ed02d1a682df3 .ProseMirror > p:first-of-type::before,
#block-7c6a3226872dd98b16ad .ProseMirror > p:first-of-type::before { order: -2; }
#block-06dca50ed02d1a682df3 .sqs-html-content > p:first-of-type::after,
#block-7c6a3226872dd98b16ad .sqs-html-content > p:first-of-type::after,
#block-06dca50ed02d1a682df3 .ProseMirror > p:first-of-type::after,
#block-7c6a3226872dd98b16ad .ProseMirror > p:first-of-type::after { order: -1; margin-left: -4px; }

#block-06dca50ed02d1a682df3 .sqs-html-content > p:first-of-type::before,
#block-06dca50ed02d1a682df3 .ProseMirror > p:first-of-type::before { background: var(--bc-spring-green, #C7EC7A); }
#block-06dca50ed02d1a682df3 .sqs-html-content > p:first-of-type::after,
#block-06dca50ed02d1a682df3 .ProseMirror > p:first-of-type::after { background: var(--bc-sky-blue, #7BD1F3); }
#block-7c6a3226872dd98b16ad .sqs-html-content > p:first-of-type::before,
#block-7c6a3226872dd98b16ad .ProseMirror > p:first-of-type::before { background: var(--bc-sky-blue, #7BD1F3); }
#block-7c6a3226872dd98b16ad .sqs-html-content > p:first-of-type::after,
#block-7c6a3226872dd98b16ad .ProseMirror > p:first-of-type::after { background: #161614; }

/* ---------------------------------------------------------------
   No upcoming group rides: hide the Group Rides section and its jump button.
   When the Summary block (Calendar, category Rides) has nothing to show, Squarespace puts its
   "This block has no content yet" box (.sqs-blockStatus) in it; it is not there when rides exist.
   As soon as a ride is published, everything comes back on its own. If Squarespace ever renames
   that box, nothing gets hidden (the page just shows the empty section again).
   Not applied in the Squarespace editor, so staff can still see and edit the section.
   --------------------------------------------------------------- */
body:not(.sqs-edit-mode-active) section[data-section-id="69d028e32b29ce400af4ca7b"]:has(#block-6a14a8a5e56c91f49e6c .sqs-blockStatus) {
  display: none;
}

body:not(.sqs-edit-mode-active):has(#block-6a14a8a5e56c91f49e6c .sqs-blockStatus) .fe-block-yui_3_17_2_1_1736972150639_63693 {
  display: none;
}

/* Close the gap the hidden jump button leaves: on desktop the other two sit centered as a pair,
   on phones they stack with no hole. These positions match the button layout of October 25, 2026
   (three buttons: Calendar View, Group Rides, Bike Classes). Change them if the buttons move. */
@media (min-width: 768px) {
  body:not(.sqs-edit-mode-active):has(#block-6a14a8a5e56c91f49e6c .sqs-blockStatus) .fe-block-e9a0687bf1244af1aea1 { grid-area: 2 / 7 / 4 / 13; }
  body:not(.sqs-edit-mode-active):has(#block-6a14a8a5e56c91f49e6c .sqs-blockStatus) .fe-block-39d61feebf827d475859 { grid-area: 2 / 15 / 4 / 21; }
}
@media (max-width: 767px) {
  body:not(.sqs-edit-mode-active):has(#block-6a14a8a5e56c91f49e6c .sqs-blockStatus) .fe-block-39d61feebf827d475859 { grid-area: 4 / 4 / 6 / 8; }
  /* Two buttons need 6 of the 8 rows; drop the 2 empty rows at the bottom */
  body:not(.sqs-edit-mode-active):has(#block-6a14a8a5e56c91f49e6c .sqs-blockStatus) section[data-section-id="67897d2e5e083f378981fd29"] .fluid-engine { grid-template-rows: repeat(6, minmax(24px, auto)); }
}

/* Carousel arrows below the cards: moved to the site stylesheet (src/site/custom.css) in v0.8.0,
   so every carousel on the site gets them. */

/* ---------------------------------------------------------------
   Classes section: size its grid rows to their content.
   Squarespace gives every row a minimum height, and these text blocks were sized for the old
   stacked heading layout, which left empty rows above each class title. Letting rows size to
   their content removes that space without depending on how many rows the section has.
   The editor keeps Squarespace's own rows, so staff edit the section as usual.
   --------------------------------------------------------------- */
body:not(.sqs-edit-mode-active) section[data-section-id="69b0b56f01a68c38666a8d7b"] .fluid-engine {
  grid-template-rows: none;
  grid-auto-rows: minmax(0, auto);
  padding-top: 24px; /* the empty top rows used to provide this space */
}

@media (min-width: 768px) {
  body:not(.sqs-edit-mode-active) section[data-section-id="69b0b56f01a68c38666a8d7b"] .fluid-engine {
    padding-top: 40px;
  }
}

/* ---------------------------------------------------------------
   Event pages (every event also loads this file through the Calendar page's header code).
   Squarespace makes the event at least one screen tall and then adds its top and bottom padding,
   which left up to 400px of empty green under the previous and next event links on a short event.
   End the page at those links, like a blog post. !important: Squarespace's own rule wins otherwise.
   --------------------------------------------------------------- */
.events-item-wrapper {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}