/* =========================================================
   ARENA UI v17 — comp-pricing.css (Savepoint 20)
   Mobile-first.

   Required section variants (add ONE on the <section>):
     - <section class="pricing-section pricing-section--home">
     - <section class="pricing-section pricing-section--booking">

   Features:
   - Mobile cards full width
   - No tilt / no movement
   - No shadows / no blur
   - Crisp background image (card + booking panel + home desktop section)
   - Readability: subtle text-shadow + micro "ink plate" behind text only
   - HOME:
       * Mobile: 2 cards with internal bg, no section bg
       * Desktop: section bg, text-only blocks (no cards)
   - BOOKING:
       * Mobile: 2 cards with internal bg (a bit wider)
       * Desktop: single bordered panel with bg, 2 text columns
========================================================= */

/* ---------------------------
   BASE SECTION (neutral)
---------------------------- */
.pricing-section{
  position: relative;

  /* Mobile-first padding (keeps cards wide) */
  padding: 26px 16px;

  background: none !important;
  box-shadow: none !important;

  /* Background asset */
  --aa-pricing-bg-image: url("/static/media/home/adventure_arenavr_background_characters_all_catania_misterbianco.webp");
  --aa-pricing-gold: #facc15;

  border-radius: 0 !important;
  overflow: visible;

  /* kill any inherited blur */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

.pricing-section::before,
.pricing-section::after{
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* BOOKING mobile: a bit wider (less side padding) */
@media (max-width: 767px){
  .pricing-section--booking{
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ---------------------------
   GRID
   Mobile: no side padding; items stretch full width
---------------------------- */
.pricing-grid{
  display: grid;
  gap: 16px;
  padding: 0;
  justify-items: stretch;
}

/* ---------------------------
   CARD (mobile-first)
---------------------------- */
.pricing-gold{
  position: relative;
  width: 100%;
  justify-self: stretch;
  margin: 0;

  padding: 32px;
  border-radius: 28px;

  /* dark base but transparent so bg shows */
  background: rgba(2, 6, 23, 0.46);

  /* gold border only */
  border: 1.2px solid var(--aa-pricing-gold);

  /* no shadows */
  box-shadow: none !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  gap: 10px;

  overflow: hidden;

  /* no movement */
  transform: none !important;
  transition: border-color .18s ease;

  /* no blur */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* crisp internal background image */
.pricing-gold::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background-image: var(--aa-pricing-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.72;
  filter: none !important;
  transform: none !important;
}

/* light readability veil (NO blur) */
.pricing-gold::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(900px 520px at 50% 18%, rgba(56,189,248,0.06), transparent 70%),
    linear-gradient(to bottom, rgba(2,6,23,0.10), rgba(2,6,23,0.44));

  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.pricing-gold > *{
  position: relative;
  z-index: 1;
}

/* Hover desktop: border only (no translate, no glow) */
@media (hover:hover) and (pointer:fine){
  .pricing-gold:hover{
    border-color: rgba(250,204,21,0.95);
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Kill any global tilt from generic .card/.ar-card hovers */
@media (hover:hover) and (pointer:fine){
  .pricing-section .ar-card:hover,
  .pricing-section .card:hover,
  .pricing-section .pricing-gold:hover{
    transform: none !important;
  }
}

/* Ensure nothing inside adds dark slabs */
.pricing-section .pricing-content,
.pricing-section .pricing-content *{
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* ---------------------------
   TYPO + READABILITY
   Subtle "ink plate" only behind text content
---------------------------- */
.pricing-content{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 10px 12px;
  border-radius: 18px;
  background: linear-gradient(to bottom, rgba(2,6,23,0.18), rgba(2,6,23,0.06));
}

.pricing-gold .ar-title,
.pricing-gold .ar-subtitle,
.pricing-gold .price{
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 6px 18px rgba(0,0,0,0.35);
}

.pricing-gold .ar-title{ color:#fff; }
.pricing-gold .ar-subtitle{ color: rgba(226,232,240,.88); }

.pricing-gold .price{
  margin-top: 16px;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--aa-pricing-gold);
}

.pricing-cta-wrap{
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.pricing-cta-wrap .btn-cta{
  padding-left: 2.2rem;
  padding-right: 2.2rem;
}

/* =========================================================
   DESKTOP AND UP
========================================================= */
@media (min-width: 768px){

  .pricing-section{
    padding: 40px 32px;
  }

  .pricing-grid{
    grid-template-columns: repeat(2, minmax(0, 540px));
    justify-content: center;
    gap: 48px;
    padding: 0 8px;
  }

  .pricing-gold{
    max-width: 600px;
    margin: 0 auto;
  }
}

/* =========================================================
   HOME VARIANT (desktop)
   More height (requested): increase top/bottom padding
   Section has background, cards removed (text-only)
========================================================= */
@media (min-width: 768px){

  .pricing-section.pricing-section--home{
    /* ? even taller */
    padding: 180px 32px ;

    background-image:
      radial-gradient(1200px 700px at 18% 10%, rgba(56,189,248,0.14), transparent 62%),
      radial-gradient(1000px 640px at 82% 18%, rgba(139,92,246,0.12), transparent 60%),
      linear-gradient(to bottom, rgba(2,6,23,0.12), rgba(2,6,23,0.46)),
      var(--aa-pricing-bg-image) !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* remove cards on desktop home: text only */
  .pricing-section--home .pricing-gold{
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
    overflow: visible;
    max-width: none;
  }

  .pricing-section--home .pricing-gold::before,
  .pricing-section--home .pricing-gold::after{
    display: none;
  }

  /* remove ink plate when there's no card */
  .pricing-section--home .pricing-content{
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .pricing-section--home .pricing-grid{
    gap: 56px;
    padding: 0 8px;
  }
}

/* =========================================================
   BOOKING VARIANT (desktop)
   Single bordered panel with bg, 2 columns text
========================================================= */
@media (min-width: 768px){

  .pricing-section--booking .pricing-grid{
    position: relative;
    padding: 34px;
    border-radius: 24px;

    border: 1.2px solid var(--aa-pricing-gold);
    background: rgba(2, 6, 23, 0.20);

    box-shadow: none !important;
    overflow: hidden;
    gap: 0;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* background image inside booking panel */
  .pricing-section--booking .pricing-grid::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background-image: var(--aa-pricing-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0.72;
    filter: none !important;
  }

  /* very light veil */
  .pricing-section--booking .pricing-grid::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:
      radial-gradient(900px 520px at 50% 18%, rgba(56,189,248,0.05), transparent 70%),
      linear-gradient(to bottom, rgba(2,6,23,0.06), rgba(2,6,23,0.34));

    filter: none !important;
  }

  .pricing-section--booking .pricing-grid > *{
    position: relative;
    z-index: 1;
  }

  /* inner blocks become text-only */
  .pricing-section--booking .pricing-gold{
    padding: 10px 26px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
    overflow: visible;
    max-width: none;
  }

  .pricing-section--booking .pricing-gold::before,
  .pricing-section--booking .pricing-gold::after{
    display: none;
  }

  /* keep ink plate on booking desktop */
  .pricing-section--booking .pricing-content{
    padding: 10px 12px;
    border-radius: 18px;
    background: linear-gradient(to bottom, rgba(2,6,23,0.18), rgba(2,6,23,0.06));
  }

  .pricing-section--booking .pricing-gold + .pricing-gold{
    border-left: 1px solid rgba(250,204,21,0.26);
  }
}