/* ============================================================
   Community Draws – RUGBY HERO
   Static hero image (podium-bg.webp) + optional carousel overlay
   ============================================================ */

/* ------------------------------------
   OUTER HERO WRAPPER
   ------------------------------------ */

.cd-rugby-hero {
  /* Full-bleed across viewport */
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);

  position: relative;
  overflow: hidden;

  background-color: #053631; /* fallback colour */

  /* Kill any theme padding/height */
  padding: 0 !important;
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
}

/* Inner container to cap max width to hero asset (2048px wide) */
.cd-rugby-hero-inner {
  position: relative;
  max-width: 2048px;
  margin: 0 auto;
}

/* ------------------------------------
   HERO BACKGROUND IMAGE
   (podium-bg.webp – contains chars + banners)
   ------------------------------------ */

.cd-rugby-hero-bg {
  display: block;
  width: 100%;
  height: auto;

  /* Remove any random gaps */
  margin: 0;
  padding: 0;
  border: 0;
}

/* ------------------------------------
   OPTIONAL CAROUSEL OVERLAY
   (if/when you bring the centre character back)
   ------------------------------------ */

.cd-rugby-carousel {
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;   /* slides are display-only */
  z-index: 5;
}

.cd-rugby-carousel .swiper-wrapper {
  align-items: center;
}

.cd-rugby-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-rugby-slide img {
  max-height: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
}

/* ------------------------------------
   OPTIONAL FLOATING RIBBON OVERLAY
   (if you ever re-enable rugby-ribbon.webp)
   ------------------------------------ */

.cd-rugby-ribbon {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);

  width: 70%;
  max-width: 900px;

  z-index: 10;
  pointer-events: none;
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */

/* Tablets / small laptops */
@media (max-width: 1024px) {

  .cd-rugby-hero {
    /* still full width, just ensure no surprise height */
    padding: 0 !important;
  }

  .cd-rugby-slide img {
    max-height: 60%;
  }

  .cd-rugby-ribbon {
    width: 80%;
  }
}

/* Mobiles */
@media (max-width: 768px) {

  .cd-rugby-hero {
    /* Height is driven purely by image aspect ratio.
       No extra green block underneath. */
    padding: 0 !important;
  }

  .cd-rugby-hero-bg {
    width: 100%;
    height: auto;
    display: block;
  }

  /* If carousel is enabled, keep it smaller on phones */
  .cd-rugby-carousel {
    inset: 5% 0 10% 0; /* a bit of breathing room top/bottom */
  }

  .cd-rugby-slide img {
    max-height: 55%;
  }

  .cd-rugby-ribbon {
    width: 85%;
    bottom: 6%;
  }
}

/* Very small phones */
@media (max-width: 480px) {

  .cd-rugby-carousel {
    inset: 8% 0 12% 0;
  }

  .cd-rugby-slide img {
    max-height: 50%;
  }

  .cd-rugby-ribbon {
    width: 90%;
    bottom: 8%;
  }
}