/**
 * CBP Custom Animations — Layout Styles v2.2.1
 * Slideshow positioning, wipe overlays, FOUC prevention.
 * GSAP handles all animations, this handles positioning only.
 */

/* ── Slideshow Container ── */
.cbp-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  clip-path: polygon(
    40px 0%,
    100% 0%,
    100% calc(100% - 40px),
    calc(100% - 40px) 100%,
    0% 100%,
    0% 40px
  );
}

/* ── Slide Panels (Elementor containers) ── */
.cbp-slideshow > .e-con {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: auto !important;
  padding: 0 !important;
  opacity: 0;
  visibility: hidden;

  /* Override Elementor transitions — GSAP handles everything */
  -webkit-transition: none !important;
  transition: none !important;
  will-change: opacity;
}

.cbp-slideshow > .e-con:first-child {
  opacity: 1;
  visibility: visible;
}

/* ── Large Image ── */
.cbp-slideshow .cbp-slide-main {
  width: 100%;
  height: 100%;
}

.cbp-slideshow .cbp-slide-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Small Overlay Image (bottom-right) ── */
.cbp-slideshow .cbp-slide-thumb {
  position: absolute !important;
  bottom: 20px;
  right: 20px;
  width: 260px;
  overflow: visible;
  border: none !important;
  border-radius: 0 !important;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - 30px),
    calc(100% - 30px) 100%,
    0% 100%
  );
  z-index: 10;
  opacity: 0;

  /* Override Elementor's default transitions that cause stagger */
  -webkit-transition: none !important;
  transition: none !important;
  will-change: transform, opacity;
}

/* Glow wrapper — injected by JS around the thumb */
.cbp-thumb-glow {
  position: absolute !important;
  bottom: 20px;
  right: 20px;
  width: 260px;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
  transition: filter 0.4s ease;
}

.cbp-thumb-glow .cbp-slide-thumb {
  position: relative !important;
  bottom: auto;
  right: auto;
  width: 100%;
  opacity: 1;
  pointer-events: auto;
}

/* Top accent bar on the thumb */
.cbp-thumb-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 11;
  pointer-events: none;
}

.cbp-slideshow .cbp-slide-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Wipe Overlay (injected by JS) ── */
.cbp-wipe {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}

.cbp-wipe-line,
.cbp-wipe-color,
.cbp-wipe-stripe {
  position: absolute;
  top: -30%;
  left: -80%;
  width: 0%;
  height: 180%;
  transform: skewX(-45deg);
  transform-origin: top left;
  will-change: width, left;
}

.cbp-wipe-line {
  display: none;
}

.cbp-wipe-color {
  background: #c8291a;
  z-index: 2;
}

.cbp-wipe-stripe {
  opacity: 1;
  z-index: 1;
}

/* ── Dot Navigation (bottom-left) ── */
.cbp-dots {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 8px;
  z-index: 40;
}

.cbp-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  /* Visual size: inner dot via box-shadow */
  box-shadow: inset 0 0 0 5px transparent;
}

.cbp-dot:hover {
  border-color: #fff;
}

.cbp-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.cbp-dot.active {
  box-shadow: inset 0 0 0 5px currentColor;
}

/* ── Pause/Play Button ── */
.cbp-pause {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 40;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cbp-pause:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: #fff;
}

.cbp-pause:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.cbp-pause svg {
  width: 12px;
  height: 12px;
  fill: #fff;
}

/* ── Progress Bar ── */
.cbp-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: #c8291a;
  z-index: 20;
}

/* ── Gallery hover/focus: dim the rest while one is hovered or focused ──
 * Uses :has() so the parent gallery responds to a child :hover or :focus-within.
 * Scoped to .cbp-slideshow so it only affects the hero galleries.
 * SC 2.4.7 — the :focus-within branch ensures keyboard users get the same
 * isolating visual feedback as mouse users.
 */
.cbp-slideshow .elementor-widget-image-gallery .gallery .gallery-item {
  transition: opacity 0.3s ease;
}
.cbp-slideshow .elementor-widget-image-gallery .gallery:has(.gallery-item:hover) .gallery-item,
.cbp-slideshow .elementor-widget-image-gallery .gallery:has(.gallery-item:focus-within) .gallery-item {
  opacity: 0.4;
}
.cbp-slideshow .elementor-widget-image-gallery .gallery:has(.gallery-item:hover) .gallery-item:hover,
.cbp-slideshow .elementor-widget-image-gallery .gallery:has(.gallery-item:focus-within) .gallery-item:focus-within {
  opacity: 1;
}

/* SC 2.4.7 — Visible focus ring on gallery item links (keyboard users).
 * Dual-colour ring (white outline + dark navy box-shadow) so it's identifiable
 * against any slide background gradient. */
.cbp-slideshow .elementor-image-gallery .gallery-item a:focus,
.cbp-slideshow .elementor-image-gallery .gallery-item a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 0;
  box-shadow: 0 0 0 5px #101828;
  border-radius: 2px;
  position: relative;
  z-index: 4;
}
.cbp-slideshow .elementor-image-gallery .gallery-item a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Visually-hidden helper for the slideshow's screen-reader live region. */
.cbp-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Hero gallery: fitted CSS grid ──
 * WordPress core gallery flow lets each row grow to the tallest item, so a
 * single portrait jersey in a row of landscape jerseys pushes the row 2-3x
 * taller and the bottom of the gallery overflows the square slideshow's
 * `overflow: hidden`. Lock the gallery to a 2-column × 3-row CSS grid that
 * fills the slideshow exactly, with object-fit: contain so no jersey is
 * cropped — mixed-aspect images just sit centered in their cell with empty
 * space around the narrower dimension. Scoped to .cbp-slideshow so regular
 * galleries elsewhere on the site (Our Work page, etc.) keep their default
 * flow layout.
 */
.cbp-slideshow .elementor-widget-image-gallery {
  height: 100%;
  display: flex;
  align-items: stretch;
}
.cbp-slideshow .elementor-image-gallery {
  width: 100%;
  display: flex;
  align-items: stretch;
}
.cbp-slideshow .elementor-image-gallery .gallery {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}
.cbp-slideshow .elementor-image-gallery .gallery .gallery-item {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;   /* prevent intrinsic image size from blowing out the grid */
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cbp-slideshow .elementor-image-gallery .gallery .gallery-item .gallery-icon {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  display: flex;
}
.cbp-slideshow .elementor-image-gallery .gallery .gallery-item .gallery-icon a {
  display: block;
  width: 100%;
  height: 100%;
}
.cbp-slideshow .elementor-image-gallery .gallery .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
}

/* Belt-and-suspenders: explicitly hold 2 columns at sub-480 in case anything
 * displaces the grid rule (Elementor itself collapses to 1 column at <480). */
@media (max-width: 479px) {
  .cbp-slideshow .elementor-image-gallery .gallery.gallery-columns-2 .gallery-item,
  .cbp-slideshow .elementor-image-gallery .gallery.gallery-columns-3 .gallery-item,
  .cbp-slideshow .elementor-image-gallery .gallery.gallery-columns-4 .gallery-item {
    max-width: 50%;
  }
}

/* ── Gradient overlay for depth ── */
.cbp-slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.35) 100%
  );
  z-index: 5;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .cbp-slideshow {
    clip-path: polygon(
      30px 0%,
      100% 0%,
      100% calc(100% - 30px),
      calc(100% - 30px) 100%,
      0% 100%,
      0% 30px
    );
  }

  .cbp-slideshow .cbp-slide-thumb {
    width: 200px;
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% calc(100% - 24px),
      calc(100% - 24px) 100%,
      0% 100%
    );
  }

  .cbp-thumb-glow {
    width: 200px;
  }

}

@media (max-width: 767px) {
  .cbp-slideshow {
    clip-path: polygon(
      24px 0%,
      100% 0%,
      100% calc(100% - 24px),
      calc(100% - 24px) 100%,
      0% 100%,
      0% 24px
    );
  }

  .cbp-slideshow .cbp-slide-thumb {
    width: 150px;
    bottom: 16px;
    right: 16px;
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% calc(100% - 18px),
      calc(100% - 18px) 100%,
      0% 100%
    );
  }

  .cbp-thumb-glow {
    width: 150px;
    bottom: 16px;
    right: 16px;
  }

  .cbp-dots {
    bottom: 16px;
    left: 16px;
  }

  .cbp-pause {
    bottom: 16px;
    right: 16px;
  }
}

/* ── FOUC Prevention ──
 * Match exactly what gsap.set() does, but via CSS so
 * elements are hidden from first paint. GSAP overrides
 * these with inline styles when it animates.
 */
.text-color .elementor-heading-title,
.text-outline .elementor-heading-title,
.text-outline-dark .elementor-heading-title {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}

.cbp-step-cards > * {
  clip-path: inset(0 0 100% 0);
}

.cbp-fade-in {
  opacity: 0;
}

/* Diagonal-wipe images: hidden from first paint, GSAP reveals on scroll */
.cut-edges-img,
.cut-edge-img,
.cbp-gallery-reveal .elementor-widget-image {
  clip-path: polygon(0% 0%, 0% 0%, -30% 100%, 0% 100%);
}

/* Hero cover — placed as an HTML widget inside the hero section.
 * Sits over the background image; GSAP fades it out on load. */
.cbp-hero-cover {
  position: absolute;
  inset: 0;
  background: #0A0D0F;
  z-index: 1;
  pointer-events: none;
}

/* ── Reduced Motion ──
 * When the user prefers reduced motion, disable FOUC hiding
 * so content is visible immediately (JS will skip animations).
 */
@media (prefers-reduced-motion: reduce) {
  .text-color .elementor-heading-title,
  .text-outline .elementor-heading-title,
  .text-outline-dark .elementor-heading-title {
    opacity: 1;
    clip-path: none;
  }

  .cbp-step-cards > * {
    clip-path: none;
  }

  .cbp-fade-in {
    opacity: 1;
  }

  .cut-edges-img,
  .cut-edge-img,
  .cbp-gallery-reveal .elementor-widget-image {
    clip-path: none;
  }

  .cbp-hero-cover {
    display: none;
  }

  .cbp-slideshow > .e-con {
    will-change: auto;
  }

  .cbp-progress {
    display: none;
  }
}

/* ── WooCommerce Layout Fixes ─────────────────────────────── */
/* WordPress core block-layout generates .alignwide { margin-inline: -80px }
   from theme.json contentSize/wideSize.  Override on cart/checkout to
   prevent it from breaking the WooCommerce layout.                       */
.woocommerce-cart .alignwide,
.woocommerce-checkout .alignwide {
  margin-inline: 0;
}

/* Proceed to Checkout & Place Order — gold pill button */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: linear-gradient(135deg, #9B7A20 0%, #C6A530 15%, #F0E098 35%, #FAF0C8 50%, #F0E098 65%, #C6A530 85%, #9B7A20 100%) !important;
  color: #101828 !important;
  border: 2px solid #BDA854 !important;
  border-radius: 100px !important;
  font-family: 'Teko', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 20px 40px 16px !important;
  transition: filter 0.25s ease, box-shadow 0.25s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  color: #101828 !important;
}

/* Checkout inputs — match JOS form styling */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea,
.wc-block-checkout .wc-block-components-combobox .components-combobox-control input,
.wc-block-checkout select {
  background: #f9fafb !important;
  border: 1px solid #c0c4c9 !important;
  border-bottom: 2px solid #c0c4c9 !important;
  border-radius: 0.25rem !important;
  font-family: "Inter", sans-serif !important;
  color: #101828 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-text-input textarea:focus,
.wc-block-checkout .wc-block-components-combobox .components-combobox-control input:focus,
.wc-block-checkout select:focus {
  outline: 2px solid #003572 !important;
  outline-offset: 2px !important;
  border-color: #003572 !important;
  box-shadow: 0 0 0 2px rgba(0,53,114,0.15) !important;
}

/* Cart product title — Teko heading style */
.wc-block-components-product-name {
  font-family: 'Teko', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  color: #101828 !important;
  letter-spacing: 0.5px;
}
.wc-block-components-product-name:hover {
  color: #101828 !important;
  text-decoration: underline !important;
}

/* Cart product meta — Team & Players on separate lines, larger text */
.wc-block-components-product-details__team,
.wc-block-components-product-details__players {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.wc-block-components-product-details__name {
  font-weight: 600 !important;
}
/* Hide the " / " separator between team and players */
.wc-block-components-product-details span[aria-hidden="true"] {
  display: none !important;
}

/* Cart thumbnails — 2x wider on desktop, scales down gracefully */
.wc-block-cart-item__image {
  width: 128px !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}
.wc-block-cart-item__image img {
  width: 100%;
  height: auto;
  max-width: 100%;
}
@media (max-width: 768px) {
  .wc-block-cart-item__image {
    width: 80px !important;
  }
}