/*
  Calendar page (/calendar) as it is today: 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: just below the cards, centered (instead of top right).
   Only the arrows move; the block's hidden title stays where Squarespace puts it.
   The space above the arrows sits on the arrows themselves, so a carousel that
   fits without arrows (Squarespace hides them) gets no extra gap.
   --------------------------------------------------------------- */
.summary-block-wrapper.sqs-gallery-design-carousel .summary-item-list-container {
  display: flex;
  flex-direction: column;
}

.summary-block-wrapper.sqs-gallery-design-carousel .summary-block-header {
  display: contents;
}

.summary-block-wrapper.sqs-gallery-design-carousel .summary-carousel-pager {
  order: 2;
  float: none;
  align-self: center;
  justify-content: center;
  height: auto;
  margin: 0;
  padding: 0;
}

.summary-block-wrapper.sqs-gallery-design-carousel .summary-carousel-pager-prev,
.summary-block-wrapper.sqs-gallery-design-carousel .summary-carousel-pager-next {
  /* -10px top: the card list already ends 26px below the last line of text, so the arrows sit 16px under it.
     32px bottom: clear space before the next heading, so the arrows read as part of the carousel.
     5px each side + Squarespace's 12px gap = the original 22px spacing, centered. */
  margin: -10px 5px 32px;
}

/* ---------------------------------------------------------------
   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;
  }
}