/* Gymful Single Row Marquee v1.0.1
   Single-row fork of the Facilities Rows marquee/card/button system. */

.gymful-single-row-marquee {
  --single-marquee-item-width: 310px;
  --single-marquee-item-height: 235px;
  --single-marquee-item-gap: 12px;
  --single-marquee-speed: 34s;
  --single-marquee-hover-scale: 1.035;
  --single-marquee-hover-button-text: #111;
  --single-marquee-hover-button-hover-text: #111;
  --single-marquee-hover-button-fill: #C6B04F;
  --single-marquee-hover-button-bg: #fff;
  --single-marquee-hover-button-border: #C6B04F;
  --single-marquee-hover-button-hover-border: #C6B04F;
  --single-marquee-cursor-offset-x: 0px;
  --single-marquee-cursor-offset-y: 0px;
  width: 100%;
}

.gymful-single-row-marquee * {
  box-sizing: border-box;
}

.single-marquee-layout {
  width: 100%;
  margin-inline: auto;
}

.single-marquee-viewport {
  width: 100%;
  overflow: hidden;
  padding-top: 8px;
  padding-bottom: 8px;
}

.gymful-single-row-marquee.is-viewport-bleed .single-marquee-viewport {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.single-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.single-marquee-group {
  display: flex;
  align-items: stretch;
  gap: var(--single-marquee-item-gap);
  flex: 0 0 auto;
  padding-right: var(--single-marquee-item-gap);
}

.single-marquee-group--clone {
  display: flex;
}

.single-marquee-card {
  position: relative;
  display: block;
  flex: 0 0 var(--single-marquee-item-width);
  width: var(--single-marquee-item-width);
  height: var(--single-marquee-item-height);
  overflow: visible;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  background: #f3f0e8;
  transform: translateZ(0);
}

.single-marquee-card:hover,
.single-marquee-card:focus-visible {
  z-index: 10;
}

.single-marquee-card__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background: #f3f0e8;
}

.single-marquee-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.19, 1, .22, 1);
}

.single-marquee-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.19, 1, .22, 1), filter .65s cubic-bezier(.19, 1, .22, 1);
}

.single-marquee-card:hover .single-marquee-card__image,
.single-marquee-card:focus-visible .single-marquee-card__image {
  transform: scale(var(--single-marquee-hover-scale));
}

/* Facilities radial-fill button system, scoped for the single-row widget. */
.gymful-single-row-marquee .single-marquee-fill-button {
  --_button-text: #111;
  --_button-hover-text: #111;
  --_button-fill: #C6B04F;
  --_button-bg: #fff;
  --_button-border: #C6B04F;
  --_button-hover-border: #C6B04F;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--_button-bg);
  border: 1px solid var(--_button-border);
  color: var(--_button-text);
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
  padding: 15px 25px;
  transition: color .35s cubic-bezier(.19, 1, .22, 1), border-color .35s cubic-bezier(.19, 1, .22, 1), opacity .35s cubic-bezier(.19, 1, .22, 1), transform .35s cubic-bezier(.19, 1, .22, 1);
}

.gymful-single-row-marquee .single-marquee-fill-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--_button-fill);
  border-radius: inherit;
  clip-path: circle(0% at 0% 100%);
  pointer-events: none;
  will-change: clip-path;
  transition: clip-path .82s cubic-bezier(.19, 1, .22, 1);
}

.gymful-single-row-marquee .single-marquee-fill-button:hover,
.gymful-single-row-marquee .single-marquee-fill-button:focus-visible,
.single-marquee-card:hover .single-marquee-hover-button,
.single-marquee-card:focus-visible .single-marquee-hover-button {
  color: var(--_button-hover-text);
  border-color: var(--_button-hover-border);
}

.gymful-single-row-marquee .single-marquee-fill-button:hover::before,
.gymful-single-row-marquee .single-marquee-fill-button:focus-visible::before,
.single-marquee-card:hover .single-marquee-hover-button::before,
.single-marquee-card:focus-visible .single-marquee-hover-button::before {
  clip-path: circle(155% at 0% 100%);
}

.single-marquee-button-content {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.single-marquee-button-text,
.single-marquee-button-icon {
  position: relative;
  z-index: 3;
}

.single-marquee-button-icon {
  font-size: 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: transform .35s cubic-bezier(.19, 1, .22, 1);
}

.single-marquee-button-icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

.gymful-single-row-marquee .single-marquee-fill-button:hover .single-marquee-button-icon,
.gymful-single-row-marquee .single-marquee-fill-button:focus-visible .single-marquee-button-icon,
.single-marquee-card:hover .single-marquee-button-icon,
.single-marquee-card:focus-visible .single-marquee-button-icon {
  transform: translateX(3px);
}

.single-marquee-hover-button {
  --_button-text: var(--single-marquee-hover-button-text);
  --_button-hover-text: var(--single-marquee-hover-button-hover-text);
  --_button-fill: var(--single-marquee-hover-button-fill);
  --_button-bg: var(--single-marquee-hover-button-bg);
  --_button-border: var(--single-marquee-hover-button-border);
  --_button-hover-border: var(--single-marquee-hover-button-hover-border);
  position: absolute;
  left: var(--single-marquee-x, 50%);
  top: var(--single-marquee-y, 50%);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--single-marquee-cursor-offset-x), var(--single-marquee-cursor-offset-y)) scale(.98);
  will-change: left, top, transform, opacity;
}

.single-marquee-card:hover .single-marquee-hover-button,
.single-marquee-card:focus-visible .single-marquee-hover-button {
  opacity: 1;
  transform: translate(-50%, -50%) translate(var(--single-marquee-cursor-offset-x), var(--single-marquee-cursor-offset-y)) scale(1);
}

@keyframes gymfulSingleMarqueeLeft {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--single-marquee-shift, 50%)), 0, 0); }
}

@keyframes gymfulSingleMarqueeRight {
  from { transform: translate3d(calc(-1 * var(--single-marquee-shift, 50%)), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.gymful-single-row-marquee.is-marquee-enabled.direction-left .single-marquee-track {
  animation: gymfulSingleMarqueeLeft var(--single-marquee-speed) linear infinite;
}

.gymful-single-row-marquee.is-marquee-enabled.direction-right .single-marquee-track {
  animation: gymfulSingleMarqueeRight var(--single-marquee-speed) linear infinite;
}

.gymful-single-row-marquee.is-pause-on-hover .single-marquee-viewport:hover .single-marquee-track {
  animation-play-state: paused;
}

.gymful-single-row-marquee:not(.is-marquee-enabled) .single-marquee-group--clone {
  display: none;
}

@media (hover: none) {
  .single-marquee-hover-button {
    left: 50%;
    top: 50%;
    opacity: 0;
  }

  .single-marquee-card:active .single-marquee-hover-button,
  .single-marquee-card:focus-visible .single-marquee-hover-button {
    opacity: 1;
  }
}