/* Bike-raffle popup modal styles. Event-card raffle styles live in events.css. */

.cs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.raffle-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.raffle-modal.is-open {
  display: flex;
}

body.raffle-open {
  overflow: hidden;
}

.raffle-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}

.raffle-modal__inner {
  z-index: 1;
  max-width: 60vw;
  /* Single source of truth for the close-button footprint. The strip
     width, strip padding, and the button itself all derive from this
     so they scale together as the viewport changes.
     Why this clamp:
       - Previous attempt used `clamp(28px, 4vw, 44px)` which pinned
         the value at 44px on any viewport wider than ~1100px — i.e.
         every typical desktop. That's why scaling looked broken.
       - 3.5vw with a wider 22px–64px window means visible scaling
         across phone (~22px), tablet (~27px), laptop (~45px), and
         large desktop (~64px) sizes. */
  --raffle-close-size: clamp(22px, 3.5vw, 64px);
  display: flex;
  flex-direction: row;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* On screens 1024px wide and smaller (tablets and small laptops), give
   the modal more breathing room so the raffle image isn't cramped.
   Larger desktops keep the tighter 60vw cap from the base rule above. */
@media (max-width: 1024px) {
  .raffle-modal__inner {
    max-width: 90vw;
  }
}

.raffle-modal__card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.raffle-modal__strip {
  /* Strip width = close-button size + 15% extra for the white gutter
     on the left. Multiplying (not adding a fixed value) means the
     strip scales at exactly the same rate as the button — if the
     button doubles, so does the strip. */
  flex: 0 0 var(--raffle-close-size);
  background: #ffffff;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  /* Left padding is the remaining 15% — derived from the same
     variable so the gutter shrinks/grows proportionally too. */
  padding: 0 0 0 calc(var(--raffle-close-size) * 0.15);
}

.raffle-modal__close {
  flex-shrink: 0;
  /* Pull width/height straight from the shared variable so the red
     button scales in lockstep with the white strip surrounding it. */
  width: var(--raffle-close-size);
  height: var(--raffle-close-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  /* Glyph size = ~60% of the box so the 'X' visually fills the button
     at every breakpoint without crowding the edges. */
  font-size: calc(var(--raffle-close-size) * 0.6);
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
  background: var(--primary);
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.raffle-modal__close:hover,
.raffle-modal__close:focus-visible {
  background: #c00806;
  outline: none;
}

.raffle-modal__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}

.raffle-modal__link {
  display: block;
  line-height: 0;
}

.raffle-modal__link img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes raffle-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes raffle-card-in {
    from {
      opacity: 0;
      transform: scale(0.92);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .raffle-modal.is-open .raffle-modal__backdrop {
    animation: raffle-fade-in 500ms ease-out 500ms both;
  }

  .raffle-modal.is-open .raffle-modal__inner {
    animation: raffle-card-in 500ms ease-out 500ms both;
  }
}