/*
   BBaya.net — FINAL PANEL CARDS v4

   Critical layout rule:
   - The picture is ABSOLUTE behind the card.
   - The copy is ABSOLUTE inside the bottom of the card.
   - No content is placed after a 100%-height image.
   - Existing pathway/card dimensions are not changed here.
*/

.bbaya-final-card {
  --mouse-x: 50%;
  --mouse-y: 35%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;

  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  transform-style: preserve-3d;

  transition:
    transform 420ms cubic-bezier(.2,.76,.2,1),
    border-color 420ms ease,
    box-shadow 420ms ease;
}


/* ================================================================
   FULL CARD PICTURE
   ================================================================ */

.bbaya-final-card > .bbaya-final-card__image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  transform: scale(1.015);
  transform-origin: center;

  filter:
    brightness(.91)
    saturate(.96)
    contrast(1.04);

  transition:
    transform 700ms cubic-bezier(.2,.76,.2,1),
    filter 420ms ease;
}


/* ================================================================
   DARK LOWER GRADIENT — MAKES ALL COPY READABLE
   ================================================================ */

.bbaya-final-card__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.00) 0%,
      rgba(0,0,0,.02) 35%,
      rgba(0,0,0,.32) 58%,
      rgba(0,0,0,.83) 76%,
      rgba(0,0,0,.98) 100%
    );

  box-shadow:
    inset 0 0 0 1px rgba(var(--card-rgb), .24),
    inset 0 0 58px rgba(0,0,0,.20);
}


/* ================================================================
   MOUSE SPOTLIGHT
   ================================================================ */

.bbaya-final-card__light {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  opacity: .25;

  background:
    radial-gradient(
      circle 250px at var(--mouse-x) var(--mouse-y),
      rgba(var(--card-rgb), .30),
      rgba(var(--card-rgb), .08) 42%,
      transparent 74%
    );

  mix-blend-mode: screen;
  transition: opacity 320ms ease;
}


/* ================================================================
   TITLE + DESCRIPTION + BUTTON
   This is the fix for the cut labels and missing buttons.
   ================================================================ */

.bbaya-final-card > .bbaya-final-card__copy,
.bbaya-final-card > .pathway-copy {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  z-index: 10 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  width: 100% !important;
  margin: 0 !important;
  padding:
    clamp(88px, 9vw, 145px)
    clamp(18px, 2vw, 28px)
    clamp(18px, 2vw, 26px) !important;

  text-align: center !important;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(2,4,8,.15) 18%,
      rgba(2,4,8,.72) 50%,
      rgba(2,4,8,.96) 100%
    );
}


.bbaya-final-card__copy h2 {
  position: relative !important;
  z-index: 11 !important;

  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 !important;

  color: rgb(var(--card-rgb)) !important;
  font-size: clamp(25px, 2.15vw, 36px) !important;
  font-weight: 900 !important;
  line-height: 1.06 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  text-transform: uppercase !important;

  text-shadow:
    0 3px 12px rgba(0,0,0,.95),
    0 0 18px rgba(var(--card-rgb), .17);
}


.bbaya-final-card__copy p {
  position: relative !important;
  z-index: 11 !important;

  width: min(100%, 44ch) !important;
  min-height: 2.9em !important;
  margin: 0 auto 15px !important;
  padding: 0 !important;

  color: rgba(255,255,255,.88) !important;
  font-size: clamp(13px, .98vw, 16px) !important;
  font-weight: 450 !important;
  line-height: 1.45 !important;
  text-align: center !important;

  text-shadow: 0 2px 8px rgba(0,0,0,.95);
}


/* ================================================================
   BUTTON — ALWAYS INSIDE THE PANEL
   ================================================================ */

.bbaya-final-card__copy .bbaya-final-card__button,
.bbaya-final-card__copy a {
  position: relative !important;
  z-index: 12 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 13px !important;

  width: 100% !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 13px 18px !important;

  color: #fff !important;
  background:
    linear-gradient(
      100deg,
      rgba(var(--card-rgb), .76),
      rgb(var(--card-rgb))
    ) !important;

  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 6px !important;

  box-shadow:
    0 11px 25px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.14);

  font-size: clamp(13px, 1vw, 16px) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;

  pointer-events: auto !important;
  overflow: hidden !important;

  transition:
    transform 300ms ease,
    filter 300ms ease,
    box-shadow 300ms ease;
}


.bbaya-final-card__button::before {
  content: "";
  position: absolute;
  inset: 0;

  transform: translateX(-120%) skewX(-18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.22),
      transparent
    );

  transition: transform 650ms ease;
}


.bbaya-final-card__button span {
  display: inline-block;
  transition: transform 300ms ease;
}


/* ================================================================
   REMOVE EVERY LEGACY DUPLICATE
   ================================================================ */

.bbaya-final-card .pathway-icon,
.bbaya-final-card .rdm-logo,
.bbaya-final-card .cinematic-scene,
.bbaya-final-card .bbaya-panel-art,
.bbaya-final-card .final-panel-light,
.bbaya-final-card .pathway-overlay {
  display: none !important;
}


/* ================================================================
   HOVER
   ================================================================ */

@media (hover:hover) and (pointer:fine) {

  .bbaya-final-card:hover {
    z-index: 8;

    transform:
      perspective(1150px)
      translateY(-5px)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));

    border-color: rgba(var(--card-rgb), .78) !important;

    box-shadow:
      0 25px 55px rgba(0,0,0,.52),
      0 0 0 1px rgba(var(--card-rgb), .34),
      0 0 30px rgba(var(--card-rgb), .15);
  }


  .bbaya-final-card:hover > .bbaya-final-card__image {
    transform: scale(1.065);

    filter:
      brightness(1.00)
      saturate(1.05)
      contrast(1.05);
  }


  .bbaya-final-card:hover .bbaya-final-card__light {
    opacity: .78;
  }


  .bbaya-final-card:hover .bbaya-final-card__button {
    transform: translateY(-2px);
    filter: brightness(1.08);

    box-shadow:
      0 15px 28px rgba(0,0,0,.34),
      0 0 20px rgba(var(--card-rgb), .17);
  }


  .bbaya-final-card:hover .bbaya-final-card__button::before {
    transform: translateX(120%) skewX(-18deg);
  }


  .bbaya-final-card:hover .bbaya-final-card__button span {
    transform: translateX(5px);
  }
}


/* ================================================================
   SMALL SCREENS
   ================================================================ */

@media (max-width:760px) {

  .bbaya-final-card > .bbaya-final-card__copy,
  .bbaya-final-card > .pathway-copy {
    padding:
      82px
      17px
      17px !important;
  }


  .bbaya-final-card__copy p {
    min-height: auto !important;
    margin-bottom: 13px !important;
  }


  .bbaya-final-card__copy .bbaya-final-card__button,
  .bbaya-final-card__copy a {
    min-height: 50px !important;
  }
}


@media (prefers-reduced-motion:reduce) {

  .bbaya-final-card,
  .bbaya-final-card * {
    transition-duration: .01ms !important;
  }


  .bbaya-final-card:hover {
    transform: none !important;
  }
}