/* ## Jack Rabbit Block Styles
.cordovan-sitewide
.jack_rabbit_block = Automated ACF CSS class
.jack_rabbit_block.grid-layout
.jack_rabbit_block.stacked-layout
.swiper
--------------------------------------------- */
.cordovan-sitewide .jack_rabbit_block.jr-slider-frame .swiper-button-prev,
.cordovan-sitewide .jack_rabbit_block.jr-slider-frame .swiper-button-next {
  color: var(--global-palette1);
}
.jack_rabbit_block h6 {
  color: var(--global-palette5);
}
.jack_rabbit_block.grid-layout .course-header,
.jack_rabbit_block.stacked-layout .course-header,
.jack_rabbit_block.swiper .swiper-slide .course-header {
  background-color: #fff;
}
.jack_rabbit_block.grid-layout
  .jack_rabbit_block.course-header
  aside:nth-of-type(1),
.jack_rabbit_block.grid-layout
  .jack_rabbit_block.course-header
  section
  aside:nth-of-type(2) {
  width: 100%;
}
.jack_rabbit_block.grid-layout,
.jack_rabbit_block.stacked-layout .course-header {
  display: flex;
}
.jack_rabbit_block.swiper .swiper-slide {
  height: auto;
}
.jack_rabbit_block.grid-layout .course-header {
  width: 30.65%;
  box-sizing: border-box;
}
.jack_rabbit_block.grid-layout img,
.jack_rabbit_block.swiper img {
  width: 100%;
  aspect-ratio: 4 / 4;
  object-fit: cover;
  object-position: center;
}
.jack_rabbit_block .course-info {
  padding: var(--box-padding);
  text-align: center;
}

/* ## Swiper
--------------------------------------------- */
.jack_rabbit_block.swiper .swiper-wrapper {
  align-items: stretch;
  padding-bottom: 20px;
}

/* ## Slider geometry
   The frame runs the full width of its container. Each .swiper-slide is a
   full "pitch" (container width / visible count) and the visible card sits
   centered inside it, inset by --jr-gap. So the gap lives INSIDE the slide
   rather than coming from Swiper's `spaceBetween` — which is why that param
   is now 0 in the init. Nothing to keep in sync between CSS and JS.

   At the 4-up breakpoint the card holds at --jr-slide-width (252px) and the
   leftover container width is what feeds the gaps: widen the container and
   the cards stay 252 while the spacing between them grows.

   The frame holds the track, then the dots, then the CTA, all in flow. The
   TRACK is the positioning context for the arrows, so that adding dots or a
   CTA below it cannot drag the arrows off the cards' vertical centre.

   container-type: inline-size on the track makes 100cqw resolve to the
   track's CONTENT box — i.e. the card area, arrow gutters already excluded.

   --jr-slides       how many cards are visible
   --jr-gap          space between cards (half of it sits on each slide edge)
   --jr-arrow-gutter side inset the prev/next arrows sit in
   --jr-slide-width  the card's design width at 4-up
--------------------------------------------- */
.jack_rabbit_block.jr-slider-frame {
  --jr-slides: 1;
  --jr-gap: 24px;
  --jr-slide-width: 252px;
  /* Single-card widths: smaller arrows and a gutter wide enough to hold them,
     so they sit beside the card instead of on top of it. Swiper derives the
     button box from --swiper-navigation-size (width is size / 44 * 27), so
     34px here gives a ~21px-wide arrow inside a 30px gutter. */
  --jr-arrow-gutter: 30px;
  --swiper-navigation-size: 34px;
}
.jack_rabbit_block.jr-slider-frame .jr-slider-track {
  container-type: inline-size;
  position: relative;
  padding-inline: var(--jr-arrow-gutter);
  /* Swiper's own API for how far the arrows sit from the track edge. */
  --swiper-navigation-sides-offset: 0px;
}
@media screen and (min-width: 640px) {
  .jack_rabbit_block.jr-slider-frame {
    --jr-slides: 2;
    --jr-arrow-gutter: 44px;
    /* Back to Swiper's default arrow size once there is room for it. */
    --swiper-navigation-size: 44px;
  }
}
@media screen and (min-width: 900px) {
  .jack_rabbit_block.jr-slider-frame {
    --jr-slides: 3;
    --jr-arrow-gutter: 56px;
  }
}
@media screen and (min-width: 1100px) {
  .jack_rabbit_block.jr-slider-frame {
    --jr-slides: 4;
    --jr-arrow-gutter: 56px;
    /* Whatever the track has left over after four 252px cards becomes the
       gap. Drop --jr-slide-width and the cards widen instead. The max()
       floor keeps the cards from outgrowing their slide in a container too
       narrow for 4 x 252 (a sidebar, say) — there the cards shrink instead. */
    --jr-gap: max(
      24px,
      calc((100cqw / var(--jr-slides)) - var(--jr-slide-width))
    );
  }
}
.jack_rabbit_block.swiper .swiper-slide {
  /* One pitch: N of these exactly fill the track. */
  width: calc(100cqw / var(--jr-slides));
  /* Lets the card stretch to the tallest slide. */
  display: flex;
  flex-direction: column;
  background: none;
  box-shadow: none;
}

/* ## Slider card
   Trimmed card: image, title, date, time + price, button.
   Type and spacing are measured against the 252px slide.
--------------------------------------------- */
.jack_rabbit_block.swiper .course-info {
  padding: 16px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.jack_rabbit_block.swiper .course-title h3 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}
.jack_rabbit_block.swiper .jr-card-date {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin: 16px 0 0;
}
.jack_rabbit_block.swiper .jr-card-meta {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  margin: 3px 0 0;
}
.jack_rabbit_block.swiper .jr-card-meta .jr-sep {
  margin: 0 8px;
  opacity: 0.45;
}

/* Swap --jr-btn-bg for a palette var once you know which one this is. */
.jack_rabbit_block.swiper .wp-block-buttons {
  padding-top: 16px;
  margin-top: auto;
}
.jack_rabbit_block.swiper
  .wp-block-button.is-style-primary-button
  .wp-block-button__link {
  /* Top-to-bottom, matching the orange pair used elsewhere in the theme.
     Must be `background`, not `background-color` — the global
     --global-palette-btn-bg gradient is a background-IMAGE and would
     otherwise paint straight over a color. */
  --jr-btn-bg: linear-gradient(180deg, #d8531e 0%, #8e2400 100%);
  --jr-btn-bg-hover: linear-gradient(180deg, #c04817 0%, #7a1e00 100%);
  background: var(--jr-btn-bg);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 14px 30px;
  border: 0;
  border-radius: 6px;
}
.jack_rabbit_block.swiper
  .wp-block-button.is-style-primary-button
  .wp-block-button__link:hover,
.jack_rabbit_block.swiper
  .wp-block-button.is-style-primary-button
  .wp-block-button__link:focus {
  background: var(--jr-btn-bg-hover);
  color: #fff;
}

/* ## Slider dot navigation
   Hidden unless the block's "Display Slider Dots?" toggle is on, which adds
   .jr-show-dots to the frame. The dots stay in the markup either way so
   Swiper keeps managing them; this only controls visibility.

   Swiper ships them absolutely positioned over the track. They are put back
   into normal flow here so the CTA can stack underneath them — and so the
   CTA rises into exactly their position when the dots are switched off.
--------------------------------------------- */
.jack_rabbit_block.jr-slider-frame .swiper-pagination {
  display: none;
}
.jack_rabbit_block.jr-slider-frame.jr-show-dots .swiper-pagination {
  display: block;
  position: static;
  margin-top: 20px;
}

/* ## Block call to action
   Renders only when both the label and URL fields are filled in. Same shape
   as the card buttons, in the theme's maroon rather than the orange.
--------------------------------------------- */
.jack_rabbit_block.jr-slider-frame .jr-cta {
  /* Matches the dots' margin, so with the dots off this button lands exactly
     where they would have been. */
  margin-top: 20px;
  text-align: center;
  /* Same geometry as .jr-slider-track: the arrow gutters as padding, and a
     container so 100cqw inside --jr-gap resolves to the same card-area width.
     The button then insets by half a gap, landing on the outer card edges. */
  container-type: inline-size;
  padding-inline: var(--jr-arrow-gutter);
}
.jack_rabbit_block.jr-slider-frame .jr-cta__link {
  --jr-cta-bg: linear-gradient(180deg, #811e3b 0%, #5c0025 100%);
  --jr-cta-bg-hover: linear-gradient(180deg, #6d1932 0%, #4a001e 100%);
  display: block;
  box-sizing: border-box;
  margin-inline: calc(var(--jr-gap) / 2);
  padding: 1em 1.875em;
  border: 0;
  border-radius: 4px;
  background: var(--jr-cta-bg);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
.jack_rabbit_block.jr-slider-frame .jr-cta__link:hover,
.jack_rabbit_block.jr-slider-frame .jr-cta__link:focus {
  background: var(--jr-cta-bg-hover);
  color: #fff;
}
/* Optional mobile label: both spans only render when that field is filled. */
.jack_rabbit_block.jr-slider-frame .jr-cta__label--mobile {
  display: none;
}
@media screen and (max-width: 500px) {
  .jack_rabbit_block.jr-slider-frame .jr-cta__label--desktop {
    display: none;
  }
  .jack_rabbit_block.jr-slider-frame .jr-cta__label--mobile {
    display: inline;
  }
}

/* ## Course Header or Swiper Slide Box
--------------------------------------------- */
.jack_rabbit_block.grid-layout .jack_rabbit_block.course-header,
.jack_rabbit_block.stacked-layout .jack_rabbit_block.course-header,
.jack_rabbit_block.swiper .swiper-slide .course-header {
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* The card itself. The slide is a full pitch; this is the visible box
   inside it, inset by half of --jr-gap on each side. */
.jack_rabbit_block.swiper .swiper-slide .course-header {
  width: calc(100% - var(--jr-gap));
  flex: 1 0 auto;
  margin-inline: auto;
  box-sizing: border-box;
  /* Clips the image into the card's rounded top corners. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ## GRID
--------------------------------------------- */
.jack_rabbit_block.grid-layout {
  flex-wrap: wrap;
  /* row-gap first: a PERCENTAGE row-gap resolves against the container's own
     height, which is content-sized here, so `gap: 4%` computed to zero
     vertically. The column gap stays proportional (30.65% x 3 + 4% x 2). */
  gap: 40px 4%;
}
/* Clips the image into the card's rounded top corners. */
.jack_rabbit_block.grid-layout .jack_rabbit_block.course-header {
  overflow: hidden;
}

/* ## Month filter (stacked, opt-in)
   Outlined pill, right aligned above the cards, with a floating panel that
   drops directly beneath it. The panel is positioned against .jr-month-filter,
   so the pill's own box is the anchor.
--------------------------------------------- */
.jack_rabbit_block.stacked-layout .jr-month-filter {
  --jr-filter-color: var(--global-palette5);
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}
.jack_rabbit_block.stacked-layout .jr-month-filter__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 230px;
  padding: 16px 20px;
  border: 1px solid var(--jr-filter-color);
  border-radius: 6px;
  background: #fff;
  color: var(--jr-filter-color);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.jack_rabbit_block.stacked-layout .jr-month-filter__chevron {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.jack_rabbit_block.stacked-layout
  .jr-month-filter.is-open
  .jr-month-filter__chevron {
  transform: rotate(180deg);
}

.jack_rabbit_block.stacked-layout .jr-month-filter__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 230px;
  padding: 20px;
  border: 1px solid var(--jr-filter-color);
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--box-shadow);
  text-align: left;
}
.jack_rabbit_block.stacked-layout .jr-month-filter__heading {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--jr-filter-color);
}
.jack_rabbit_block.stacked-layout .jr-month-filter__all {
  font-weight: 400;
}
.jack_rabbit_block.stacked-layout .jr-month-filter__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.jack_rabbit_block.stacked-layout .jr-month-filter__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 16px;
  cursor: pointer;
}

/* The filter hides cards with the [hidden] attribute, which is display:none in
   the UA stylesheet — but .course-header sets display:flex, and a class
   selector outranks that, so the cards would stay put. Restore it explicitly. */
.jack_rabbit_block.stacked-layout .course-header[hidden],
.jack_rabbit_block.stacked-layout .jr-month-bucket[hidden] {
  display: none;
}

/* ## Month bucket heading (stacked, opt-in)
   Matches .week-date-heading from the camps module navigation block
   (camps-module-navigation/module.css). font-family is pinned to inherit
   because this is an <h2> where that block uses a <div>, and the theme's
   heading face would otherwise diverge from it.
--------------------------------------------- */
.jack_rabbit_block.stacked-layout .jr-month-bucket {
  font-family: inherit;
  /* 40% up from the camps module's 22px. */
  font-size: 31px;
  font-weight: 700;
  margin: 1.25rem 0 1rem;
  color: var(--global-palette4);
  width: 100%;
}

/* ## STACKED
   Measured off the 250px square image and the card's 28px padding (54px on
   the right). The card fills its container; the image is a fixed 250 square
   and the copy column takes the rest, with the meta line and the Register
   button pinned to the bottom of that column.
--------------------------------------------- */
.jack_rabbit_block.stacked-layout .course-header {
  gap: 34px;
  margin-bottom: 50px;
  padding: 28px 54px 28px 28px;
  box-sizing: border-box;
  align-items: stretch;
}
.jack_rabbit_block.stacked-layout .course-header:last-child {
  margin-bottom: 0;
}
.jack_rabbit_block.stacked-layout .course-header aside:nth-of-type(1) {
  flex: 0 0 250px;
}
.jack_rabbit_block.stacked-layout .course-header aside:nth-of-type(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: auto;
}
.jack_rabbit_block.stacked-layout img {
  display: block;
  width: 250px;
  height: 250px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
}
.jack_rabbit_block.stacked-layout .course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
}
.jack_rabbit_block.stacked-layout .course-title h3 {
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0;
}
/* Unwinds the global clamp on p.jr_card_description: stacked shows the
   description in full, so the -webkit-box/overflow machinery has to come off,
   not just the line count. */
.jack_rabbit_block.stacked-layout .jr_card_description {
  font-size: 17px;
  line-height: 1.55;
  margin: 18px 0 0;
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  text-overflow: clip;
}

/* margin-top:auto is what pins this row to the bottom of the copy column,
   so the card's height is set by the 250px image rather than by the text. */
.jack_rabbit_block.stacked-layout .jr-stacked-footer {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  /* Minimum separation between meta and button on one line, and the row gap
     once the button wraps onto its own. */
  gap: 32px;
}
.jack_rabbit_block.stacked-layout .jr-stacked-meta {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.jack_rabbit_block.stacked-layout .jr-sep {
  margin: 0 14px;
  color: var(--global-palette5);
}
/* margin-left:auto keeps the button hard right on whichever line it ends up
   on — space-between would drop it to the left once it wraps alone. */
.jack_rabbit_block.stacked-layout .wp-block-buttons {
  margin: 0 0 0 auto;
  flex: 0 0 auto;
}
.jack_rabbit_block.stacked-layout
  .wp-block-button.is-style-primary-button
  .wp-block-button__link {
  background: linear-gradient(180deg, #d8531e 0%, #8e2400 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  padding: 20px 40px;
  border: 0;
  border-radius: 6px;
}
.jack_rabbit_block.stacked-layout
  .wp-block-button.is-style-primary-button
  .wp-block-button__link:hover,
.jack_rabbit_block.stacked-layout
  .wp-block-button.is-style-primary-button
  .wp-block-button__link:focus {
  background: linear-gradient(180deg, #c04817 0%, #7a1e00 100%);
  color: #fff;
}

/* Each meta component onto its own line; the inline pipes are redundant once
   they stack, so they come out entirely. */
@media screen and (max-width: 600px) {
  .jack_rabbit_block.stacked-layout .jr-stacked-meta > span {
    display: block;
  }
  .jack_rabbit_block.stacked-layout .jr-stacked-meta > span + span {
    margin-top: 4px;
  }
  .jack_rabbit_block.stacked-layout .jr-stacked-meta .jr-sep {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .jack_rabbit_block.stacked-layout .course-header {
    padding: 24px;
    gap: 24px;
  }
  .jack_rabbit_block.stacked-layout .course-header aside:nth-of-type(1) {
    flex-basis: auto;
    width: 100%;
  }
  .jack_rabbit_block.stacked-layout img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
}
.jack_rabbit_block.swiper .course-image-wrapper {
  position: relative;
}

.jack_rabbit_block.swiper .share-link {
  position: absolute;
  right: 5%;
  bottom: 5%;
  width: 17.5%;
  aspect-ratio: 1;
  font-size: 0;
  cursor: pointer;
  background: url(./assets/share-icon.svg) no-repeat center/contain;
  opacity: 0.5;
  transition: opacity 0.16s linear;
}
.jack_rabbit_block.swiper .share-link:hover {
  opacity: 0.8;
}
.jack_rabbit_block.swiper .view-container {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s linear;
  cursor: pointer;
}
.jack_rabbit_block.swiper .view-container:hover {
  opacity: 1;
}
.jack_rabbit_block.swiper .learn-more-link {
  appearance: none;
  position: absolute;
  left: 5%;
  bottom: 5%;
  width: 17.5%;
  opacity: 0.5;
  transition: opacity 0.08s linear;
  color: var(--global-palette3);
  text-decoration: none;
  background-color: #fff;
  font: 900 14px/1 serif;
  margin: 0;
  font-family: var(--global-body-font-family);
  border-radius: 0.375em;
  display: block;
  padding: 0.6em 0.9em;
  width: fit-content;
  white-space: nowrap;
}
.jack_rabbit_block.swiper .learn-more-link:hover {
  opacity: 1;
}

/* ## Typography
--------------------------------------------- */
p.jr_card_description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.jack_rabbit_block h5 {
  font-size: 18px;
}
.jack_rabbit_block h6 {
  font-size: 16px;
  text-transform: uppercase;
  margin: 0;
}

/* ## Mobile Responsive
--------------------------------------------- */
/* Grid column count. Widths pair with the 4% column gap set on .grid-layout:
   3 up = 30.65% x 3 + 4% x 2, 2 up = 48% x 2 + 4%, then 1 up below 650. */
@media screen and (max-width: 899px) {
  .jack_rabbit_block.grid-layout .course-header {
    width: 48%;
  }
}
@media screen and (max-width: 768px) {
  .jack_rabbit_block.course-header {
    flex-wrap: wrap;
  }
  .jack_rabbit_block img {
    aspect-ratio: 3 / 2;
  }
}
@media screen and (max-width: 649px) {
  .jack_rabbit_block.grid-layout .course-header {
    width: 100%;
  }
}