.goc {
  --goc-max-width: 1800px;
  --goc-gap: 16px;
  --goc-card-height: 560px;
  --goc-track-pad: 0px;
  --goc-slide-width: 82vw;
  --goc-visible-cards: 3;
  --goc-desktop-slide-width: calc((100% - (var(--goc-gap) * (var(--goc-visible-cards) - 1))) / var(--goc-visible-cards));
  --goc-radius: 18px;
  --goc-pad-top: 48px;
  --goc-pad-right: 48px;
  --goc-pad-bottom: 48px;
  --goc-pad-left: 48px;
  --goc-inactive-bg: #fff;
  --goc-inactive-text: #111;
  --goc-inactive-heading: #C6B04F;
  --goc-active-text: #fff;
  --goc-active-heading: #fff;
  --goc-overlay-color: #241910;
  --goc-overlay-opacity: .78;
  --goc-content-max: 580px;
  --goc-desc-button-gap: 32px;
  --goc-copy-icon-gap: 22px;
  --goc-arrow-bg: #F3EEDC;
  --goc-arrow-color: #111;
  --goc-arrow-active-bg: #fff;
  --goc-arrow-active-color: #111;
  --goc-arrow-size: 68px;
  --goc-arrow-icon-size: 18px;
  --goc-button-bg: #fff;
  --goc-button-text: #111;
  --goc-button-hover-bg: #C6B04F;
  --goc-button-icon-size: 10px;
  --goc-media-fit: cover;
  --goc-media-position: center center;
  --goc-media-scale-active: 1.04;
  --goc-hover-lift: 4px;
  width: 100%;
  max-width: var(--goc-max-width);
  margin-inline: auto;
  position: relative;
}

.goc--full-bleed {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.goc-track {
  width: 100%;
  overflow: visible;
  padding-inline: var(--goc-track-pad);
}

.goc-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--goc-gap);
  align-items: stretch;
}

/* When more than the intended desktop amount of cards is used, keep the desktop design
   but turn the row into a horizontal track. This prevents 4+ cards from shrinking
   into the old 3-column grid and keeps every card the same width/height. */
.goc--desktop-swiper .goc-track {
  overflow: visible;
}

.goc--desktop-swiper .goc-list {
  display: flex;
  gap: var(--goc-gap);
  align-items: stretch;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.goc--desktop-swiper .goc-list::-webkit-scrollbar {
  display: none;
}

.goc--desktop-swiper .goc-card {
  width: var(--goc-desktop-slide-width);
  flex: 0 0 var(--goc-desktop-slide-width);
  scroll-snap-align: start;
}


/* Desktop edge-bleed swiper mode: keep the first card aligned with the contained
   layout, but let the track expand to the right viewport edge. This matches the
   COMMIT/Gymful swiper pattern where the row visually grows out to the right
   instead of being clipped inside the Elementor container. */
.goc--desktop-swiper.goc--desktop-edge-bleed:not(.goc--full-bleed) .goc-track {
  width: calc(100vw - max(0px, ((100vw - var(--goc-max-width)) / 2)));
  max-width: none;
  overflow-x: hidden;
  overflow-y: visible;
}

.goc--desktop-swiper.goc--desktop-edge-bleed:not(.goc--full-bleed) .goc-card {
  width: calc((min(100vw, var(--goc-max-width)) - (var(--goc-gap) * (var(--goc-visible-cards) - 1))) / var(--goc-visible-cards));
  flex: 0 0 calc((min(100vw, var(--goc-max-width)) - (var(--goc-gap) * (var(--goc-visible-cards) - 1))) / var(--goc-visible-cards));
}

.goc--desktop-swiper.goc--desktop-edge-bleed:not(.goc--full-bleed) .goc-track.is-swiper .goc-card {
  width: calc((min(100vw, var(--goc-max-width)) - (var(--goc-gap) * (var(--goc-visible-cards) - 1))) / var(--goc-visible-cards));
  flex: 0 0 calc((min(100vw, var(--goc-max-width)) - (var(--goc-gap) * (var(--goc-visible-cards) - 1))) / var(--goc-visible-cards));
}

.goc-card {
  min-width: 0;
  height: var(--goc-card-height);
  position: relative;
  border-radius: var(--goc-radius);
  overflow: visible;
  transform: translateY(0);
  transition: transform .55s cubic-bezier(.19, 1, .22, 1), filter .55s cubic-bezier(.19, 1, .22, 1);
}

.goc-card:hover,
.goc-card:focus-within,
.goc-card.is-active {
  transform: translateY(calc(var(--goc-hover-lift) * -1));
}

.goc-card__shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: var(--goc-inactive-bg);
  isolation: isolate;
  display: block;
  color: inherit;
  text-decoration: none !important;
}

.goc-card__shell:hover,
.goc-card__shell:focus-visible {
  color: inherit;
  text-decoration: none !important;
}

.goc-card__media,
.goc-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.goc-card__media {
  z-index: 0;
  opacity: 0;
  transition: opacity .55s cubic-bezier(.19, 1, .22, 1);
  background: var(--goc-inactive-bg);
}

.goc-card__media img,
.goc-card__media video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: var(--goc-media-fit) !important;
  object-position: var(--goc-media-position) !important;
  transform: scale(1);
  transition: transform 1.2s cubic-bezier(.19, 1, .22, 1);
}

.goc-card__media video {
  position: absolute;
  inset: 0;
}

.goc-card__overlay {
  z-index: 1;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(36, 25, 16, 0) 0%, var(--goc-overlay-color) 92%),
    linear-gradient(0deg, rgba(0,0,0,.16), rgba(0,0,0,.16));
  transition: opacity .55s cubic-bezier(.19, 1, .22, 1);
}

.goc-card.is-active .goc-card__media,
.goc-card:hover .goc-card__media,
.goc-card:focus-within .goc-card__media {
  opacity: 1;
}

.goc-card.is-active .goc-card__media img,
.goc-card.is-active .goc-card__media video,
.goc-card:hover .goc-card__media img,
.goc-card:hover .goc-card__media video,
.goc-card:focus-within .goc-card__media img,
.goc-card:focus-within .goc-card__media video {
  transform: scale(var(--goc-media-scale-active));
}

.goc-card.is-active .goc-card__overlay,
.goc-card:hover .goc-card__overlay,
.goc-card:focus-within .goc-card__overlay {
  opacity: var(--goc-overlay-opacity);
}

.goc-card__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--goc-inactive-text);
  padding: var(--goc-pad-top) var(--goc-pad-right) var(--goc-pad-bottom) var(--goc-pad-left);
}

.goc-card__copy {
  max-width: var(--goc-content-max);
  padding-right: calc(var(--goc-arrow-size) + var(--goc-copy-icon-gap));
  transition: color .35s cubic-bezier(.19, 1, .22, 1);
}

.goc-card__label {
  font-style: italic;
  margin-bottom: .78em;
  line-height: 1.2;
}

.goc-card__heading {
  margin: 0 0 .66em;
  color: var(--goc-inactive-heading);
  transition: color .35s cubic-bezier(.19, 1, .22, 1);
}

.goc-card__description {
  margin: 0;
  line-height: 1.55;
  max-width: calc(var(--goc-content-max) - 20px);
}

.goc-card__actions {
  position: absolute;
  right: var(--goc-pad-right);
  bottom: var(--goc-pad-bottom);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 4;
}

.goc-card.is-active .goc-card__inner,
.goc-card:hover .goc-card__inner,
.goc-card:focus-within .goc-card__inner {
  color: var(--goc-active-text);
}

.goc-card.is-active .goc-card__heading,
.goc-card:hover .goc-card__heading,
.goc-card:focus-within .goc-card__heading {
  color: var(--goc-active-heading);
}

.goc-card.is-active .goc-card__copy,
.goc-card:hover .goc-card__copy,
.goc-card:focus-within .goc-card__copy {
  padding-right: calc(var(--goc-arrow-size) + var(--goc-copy-icon-gap));
  padding-bottom: 0;
}

.goc-arrow {
  width: var(--goc-arrow-size);
  height: var(--goc-arrow-size);
  min-width: var(--goc-arrow-size);
  min-height: var(--goc-arrow-size);
  border-radius: 999px;
  border: 0;
  background: var(--goc-arrow-bg) !important;
  color: var(--goc-arrow-color) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.19, 1, .22, 1), opacity .25s ease, background .25s ease;
  padding: 0;
  appearance: none;
}

.goc-card.is-active .goc-arrow,
.goc-card:hover .goc-arrow,
.goc-card:focus-within .goc-arrow {
  background: var(--goc-arrow-active-bg) !important;
  color: var(--goc-arrow-active-color) !important;
}

.goc-arrow:hover,
.goc-arrow:focus-visible {
  transform: translateY(-2px);
}

.goc-arrow__icon,
.goc-arrow__icon svg,
.goc-arrow__icon i {
  width: var(--goc-arrow-icon-size) !important;
  height: var(--goc-arrow-icon-size) !important;
  font-size: var(--goc-arrow-icon-size) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.goc-arrow__icon svg {
  fill: currentColor;
}

.goc-arrow__icon--active {
  display: none !important;
}

.goc-card.is-active .goc-arrow__icon--normal,
.goc-card:hover .goc-arrow__icon--normal,
.goc-card:focus-within .goc-arrow__icon--normal {
  display: none !important;
}

.goc-card.is-active .goc-arrow__icon--active,
.goc-card:hover .goc-arrow__icon--active,
.goc-card:focus-within .goc-arrow__icon--active {
  display: inline-flex !important;
}

.goc-track.is-swiper {
  overflow-x: hidden;
  overflow-y: visible;
}
.goc-track.is-swiper .goc-list {
  display: flex;
  gap: 0;
  overflow: visible;
  scroll-snap-type: none;
}
.goc-track.is-swiper .goc-card {
  width: var(--goc-desktop-slide-width);
  flex: 0 0 var(--goc-desktop-slide-width);
}

@media (max-width: 1024px) {
  .goc--desktop-swiper.goc--desktop-edge-bleed:not(.goc--full-bleed) .goc-track {
    width: 100%;
    max-width: 100%;
  }

  .goc-list {
    display: flex;
    gap: var(--goc-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .goc-list::-webkit-scrollbar { display: none; }
  .goc-card {
    width: var(--goc-slide-width);
    flex: 0 0 var(--goc-slide-width);
    scroll-snap-align: start;
  }
  .goc-track.is-swiper .goc-card,
  .goc--desktop-swiper.goc--desktop-edge-bleed:not(.goc--full-bleed) .goc-card,
  .goc--desktop-swiper.goc--desktop-edge-bleed:not(.goc--full-bleed) .goc-track.is-swiper .goc-card {
    width: var(--goc-slide-width);
    flex: 0 0 var(--goc-slide-width);
    flex-basis: var(--goc-slide-width);
  }
}

@media (max-width: 767px) {
  .goc-card__copy,
  .goc-card.is-active .goc-card__copy,
  .goc-card:hover .goc-card__copy,
  .goc-card:focus-within .goc-card__copy {
    padding-right: calc(var(--goc-arrow-size) + var(--goc-copy-icon-gap));
    padding-bottom: 0;
  }
}


/* Optional mode: show every card in its hover/active visual state by default.
   In this mode no single .is-active card is needed, so the lift stays hover/focus-only. */
.goc.goc--all-active .goc-card .goc-card__media {
  opacity: 1;
}

.goc.goc--all-active .goc-card .goc-card__media img,
.goc.goc--all-active .goc-card .goc-card__media video {
  transform: scale(var(--goc-media-scale-active));
}

.goc.goc--all-active .goc-card .goc-card__overlay {
  opacity: var(--goc-overlay-opacity);
}

.goc.goc--all-active .goc-card .goc-card__inner {
  color: var(--goc-active-text);
}

.goc.goc--all-active .goc-card .goc-card__heading {
  color: var(--goc-active-heading);
}

.goc.goc--all-active .goc-card .goc-arrow {
  background: var(--goc-arrow-active-bg) !important;
  color: var(--goc-arrow-active-color) !important;
}

.goc.goc--all-active .goc-card .goc-arrow__icon--normal {
  display: none !important;
}

.goc.goc--all-active .goc-card .goc-arrow__icon--active {
  display: inline-flex !important;
}

.goc.goc--all-active .goc-card.is-active:not(:hover):not(:focus-within) {
  transform: translateY(0);
}

/* Optional description reveal mode.
   Desktop reveals strictly on hover/focus. Touch layouts use the active card
   as the accessible equivalent of hover. */
.goc.goc--description-hover .goc-card__heading {
  transition:
    color .35s cubic-bezier(.19, 1, .22, 1),
    margin-bottom .45s cubic-bezier(.19, 1, .22, 1);
}

.goc.goc--description-hover .goc-card__description {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(.75em);
  pointer-events: none;
  transition:
    max-height .6s cubic-bezier(.19, 1, .22, 1),
    opacity .3s ease,
    transform .5s cubic-bezier(.19, 1, .22, 1);
}

.goc.goc--description-hover .goc-card__heading {
  margin-bottom: 0;
}

.goc.goc--description-hover .goc-card:hover .goc-card__heading,
.goc.goc--description-hover .goc-card:focus-within .goc-card__heading {
  margin-bottom: .66em;
}

.goc.goc--description-hover .goc-card:hover .goc-card__description,
.goc.goc--description-hover .goc-card:focus-within .goc-card__description {
  max-height: 30rem;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .goc.goc--description-hover .goc-card.is-active .goc-card__heading {
    margin-bottom: .66em;
  }

  .goc.goc--description-hover .goc-card.is-active .goc-card__description {
    max-height: 30rem;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .goc.goc--description-hover .goc-card__heading,
  .goc.goc--description-hover .goc-card__description {
    transition-duration: .01ms !important;
  }
}