/* Homepage bowling price card.
   It sits in the destination grid, directly under the four destination cards, and REUSES .dest-card / .dest-card__hit for its size, radius,
   thin red border, glow, gaps and entrance, so at every screen size it has exactly the width and height of the Events and Gallery cards
   (desktop: the full width of the four cards above; phone: the same single column and the same 228 px height).
   The price is real text. The video is decoration only: it lives in the right-hand part of the card and fades into the dark behind the text. */

.dest-card--price {
  --pc-bg: #0a0406;
  --pc-media: 66%;               /* share of the card taken by the video area (right side) */
  grid-column: 1 / -1;
}

/* last to enter, whatever its position in the grid (same specificity as the .dest-card:nth-child() delays, and loaded after them) */
.dest-card.dest-card--price {
  animation-delay: 0.28s;
}

/* not a link: no hover lift, no pointer */
.dest-card--price .dest-card__hit {
  pointer-events: none;
  background: var(--pc-bg);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* ---- video area ------------------------------------------------------------------------------------------------------------------ */
.price-card__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--pc-media);
  z-index: 0;
  overflow: hidden;
  background: var(--pc-bg) url("/assets/video/strike-wide.webp") 50% 50% / cover no-repeat;   /* poster: shown until the video plays, and always when motion is off */
}

@media (max-width: 480px) {
  .price-card__media {
    background-image: url("/assets/video/strike-narrow.webp");
  }
}

.price-card__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.price-card__video.is-playing {
  opacity: 1;
}

/* the video melts into the dark behind the text (own class: the site's .page-home .dest-card__shade rule would override this background) */
.price-card__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      var(--pc-bg) 0,
      var(--pc-bg) calc(100% - var(--pc-media)),
      rgba(10, 4, 6, 0.92) calc(100% - var(--pc-media) + 4%),
      rgba(10, 4, 6, 0.62) calc(100% - var(--pc-media) + 11%),
      rgba(10, 4, 6, 0.26) calc(100% - var(--pc-media) + 19%),
      rgba(10, 4, 6, 0) calc(100% - var(--pc-media) + 28%)
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.36));
}

/* ---- text ------------------------------------------------------------------------------------------------------------------------ */
.price-card__content {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 2.6vw, 44px);
  top: 50%;
  transform: translateY(-50%);
  max-width: 58%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-white);
}

.price-card__label,
.price-card__amount,
.price-card__currency {
  font-family: "Roboto Condensed", "Arial Narrow", "Segoe UI", Arial, sans-serif;
  font-style: italic;
  font-synthesis: none;
  text-transform: uppercase;
}

.price-card__label {
  margin: 0;
  color: var(--color-red-bright);
  font-size: clamp(1.7rem, 2.35vw, 2.45rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 14px rgba(255, 49, 64, 0.55), 0 6px 16px rgba(0, 0, 0, 0.7);
}

.price-card__price {
  margin: 0.04em 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  font-size: clamp(5.6rem, 7.1vw, 7.6rem);     /* the dominant element: "250" */
  line-height: 0.86;
  flex-wrap: wrap;
}

.price-card__amount {
  font-size: 1em;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--color-white);
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.16), 0 8px 20px rgba(0, 0, 0, 0.62);
}

.price-card__currency {
  font-size: 0.4em;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-white);
  text-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

.price-card__unit {
  margin: 0.55rem 0 0;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.05rem, 1.45vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: rgba(246, 246, 246, 0.94);
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.75);
}

/* ---- the strike: one short flare of the red border when the pins explode (set by price-card.js, only while the video plays) ---------- */
.dest-card--price .dest-card__hit.is-impact {
  border-color: rgba(255, 90, 100, 0.98);
  box-shadow:
    0 0 14px rgba(255, 25, 45, 0.7),
    0 0 34px rgba(220, 0, 25, 0.3),
    inset 0 0 18px rgba(255, 30, 45, 0.14);
}

/* ---- tablet ------------------------------------------------------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .dest-card--price {
    --pc-media: 62%;
  }

  .price-card__price {
    font-size: clamp(5.2rem, 10vw, 7rem);
  }

  .price-card__label {
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  }
}

/* ---- phone: same single column and the same card height as Events and Gallery; text left, video right ------------------------------ */
@media (max-width: 768px) {
  .dest-card--price {
    --pc-media: 72%;
  }

  .price-card__content {
    left: 18px;
    max-width: 62%;
  }

  /* the text reaches further into the video here, so the fade is longer and darker */
  .price-card__shade {
    background:
      linear-gradient(
        90deg,
        var(--pc-bg) 0,
        var(--pc-bg) calc(100% - var(--pc-media) + 4%),
        rgba(10, 4, 6, 0.94) calc(100% - var(--pc-media) + 12%),
        rgba(10, 4, 6, 0.74) calc(100% - var(--pc-media) + 22%),
        rgba(10, 4, 6, 0.36) calc(100% - var(--pc-media) + 32%),
        rgba(10, 4, 6, 0.1) calc(100% - var(--pc-media) + 40%),
        rgba(10, 4, 6, 0) calc(100% - var(--pc-media) + 46%)
      ),
      linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.36));
  }

  .price-card__label {
    font-size: clamp(1.25rem, 5.4vw, 1.7rem);
  }

  .price-card__price {
    font-size: clamp(3.6rem, 15vw, 5rem);
  }

  .price-card__currency {
    font-size: 0.4em;
  }

  .price-card__unit {
    margin-top: 0.4rem;
    font-size: clamp(0.8rem, 3.5vw, 1rem);
  }
}

/* ---- quiet modes: poster only, no flare ---------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .price-card__video {
    display: none;
  }

  .dest-card--price {
    animation: none;
  }

  .dest-card--price .dest-card__hit.is-impact {
    border-color: rgba(255, 32, 48, 0.82);
    box-shadow: 0 0 7px rgba(255, 20, 40, 0.36), 0 0 18px rgba(220, 0, 25, 0.12), inset 0 0 10px rgba(255, 30, 45, 0.05);
  }
}

/* ---- text the owner can change in Admin must never leave the card ------------------------------------------------------------------ */
.price-card__amount {
  white-space: nowrap;
}

.price-card__label,
.price-card__unit {
  overflow-wrap: anywhere;
}

/* an amount of four digits (for example 1250) is set a little smaller so it still fits beside the currency */
.price-card__price--long {
  font-size: clamp(4.6rem, 5.8vw, 6.2rem);
}

@media (max-width: 1100px) {
  .price-card__price--long {
    font-size: clamp(4.4rem, 8.4vw, 5.8rem);
  }
}

@media (max-width: 768px) {
  .price-card__price--long {
    font-size: clamp(3rem, 12.4vw, 4.2rem);
  }
}

/* ---- Upcoming events + inquiry row (desktop) ---------------------------------------------------------------------------------------
   The inquiry panel is as tall as the events panel beside it, but its photo and its form stopped 35-60 px above the bottom edge and left an
   empty dark strip. The inner grid now grows with the panel: the photo reaches the border and the form is centred in the full height. */
@media (min-width: 1101px) {
  .page-home .inquiry-panel__inner {
    flex: 1 1 auto;
  }
}

/* ---- Inquiry panel corners (all screen sizes) -----------------------------------------------------------------------------------------
   The form (and, when the panel is stacked on a phone, the photo) has square corners and sat on top of the panel's rounded red border, so the
   neon line looked cut off at the corners. The corners now follow the inner curve of the panel (panel radius minus its 1 px border). */
.page-home .inquiry-panel .inquiry-form {
  border-radius: 0 15px 15px 0;
}

@media (max-width: 768px) {
  .page-home .inquiry-panel .inquiry-form {
    border-radius: 0 0 13px 13px;
  }

  .page-home .inquiry-panel .inquiry-panel__promo {
    border-radius: 13px 13px 0 0;
  }
}

/* ---- Space under the price card -------------------------------------------------------------------------------------------------------
   Above the card the gap is the grid gap between cards (13 px desktop, 12 px tablet, 15 px phone). Below it was 44/44/36 px (the section's bottom
   padding plus the 8 px top padding of the events section). The padding is reduced so that the gap under the card equals the gap above it.
   The rule only applies while the price card is on the page; with the card switched off in Admin nothing changes. */
.page-home .destinations:has(.dest-card--price) {
  padding-bottom: 5px;
}

@media (max-width: 1100px) {
  .page-home .destinations:has(.dest-card--price) {
    padding-bottom: 4px;
  }
}

@media (max-width: 768px) {
  .page-home .destinations:has(.dest-card--price) {
    padding-bottom: 7px;
  }
}