/* ==========================
   Fortiz – Prices refresh ONLY
   Load after style.css
   Total tiles: 6
   ========================== */

/* ==========================
   Layout
   ========================== */
.section_pricelist{
  padding: 10rem 0;
}

.section_pricelist--list{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.6rem;

  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}

/* ==========================
   Tile base styling
   ========================== */
.section_pricelist--list > *{
  position: relative;
  overflow: hidden;
  box-sizing: border-box;

  padding: 8rem 8rem;
  border-radius: 22px;

  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  transform: translateZ(0);

  cursor: pointer;

  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, filter 220ms ease;
}

/* Unified gradient (desktop default) */
.section_pricelist--list > *{
  background: linear-gradient(
    135deg,
    #050b16 0%,
    #0e1a33 35%,
    #1b2f55 70%,
    #0a1224 100%
  ) !important;

  border: 1px solid rgba(255,255,255,0.08);
}

/* Subtle highlight sheen */
.section_pricelist--list > *::before{
  content:"";
  position: absolute;
  inset: -40% -30%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 45%);
  pointer-events: none;
  opacity: .9;
  mix-blend-mode: normal;
}

/* Hover lift */
.section_pricelist--list > *:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(0,0,0,.30);
  filter: brightness(1.03);
}

/* ==========================
   Typography
   ========================== */

/* Title above price – spacing controlled here */
.section_pricelist--list .h5{
  font-family: 'Bebas Neue', cursive;
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 1px;
  opacity: .92;
  margin-bottom: 3rem; /* 👈 THIS is the spacing knob */
}

/* Price */
.section_pricelist--list .h2{
  line-height: 1;
  text-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* ==========================
   Ribbon (tile 6 only)
   ========================== */
.section_pricelist--list > *:nth-child(6)::after{
  content: "Discount";
  position: absolute;
  top: 18px;
  right: -52px;
  transform: rotate(45deg);

  display: block;
  padding: .7rem 6rem;
  line-height: 1;
  text-align: center;

  font-family: 'Bebas Neue', cursive;
  font-size: 1.8rem;
  letter-spacing: 1px;

  color: #1f1600;
  background: linear-gradient(135deg, #b8891e 0%, #f2d06b 45%, #a97a13 100%);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);

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

/* ==========================
   Price hover swap (anchored to .h2)
   Tiles: 1–5 swap on hover
   ========================== */
.section_pricelist--list > *:nth-child(-n+5) .h2{
  position: relative;
  display: inline-block;
}

/* Hide original number but keep its space */
.section_pricelist--list > *:nth-child(-n+5):hover .h2{
  color: transparent;
}

/* Shared overlay styles */
.section_pricelist--list > *:nth-child(-n+5) .h2::before{
  content: var(--hover-price, "");
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;

  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.section_pricelist--list > *:nth-child(-n+5) .h2::after{
  content: var(--hover-label, "");
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: .6rem;

  font-family: 'Roboto', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;

  color: rgba(255,255,255,.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* Activate on hover */
.section_pricelist--list > *:nth-child(-n+5):hover .h2::before,
.section_pricelist--list > *:nth-child(-n+5):hover .h2::after{
  opacity: 1;
}

/* Set per-tile values (edit here only) */
.section_pricelist--list > *:nth-child(1){ --hover-price: "50€"; --hover-label: "CASH"; }
.section_pricelist--list > *:nth-child(2){ --hover-price: "35€"; --hover-label: "CASH"; }
.section_pricelist--list > *:nth-child(3){ --hover-price: "21€"; --hover-label: "CASH"; }
.section_pricelist--list > *:nth-child(4){ --hover-price: "7€";  --hover-label: "CASH"; }
.section_pricelist--list > *:nth-child(5){ --hover-price: "25€"; --hover-label: "CASH"; }

/* Smoother feel for CASH */
.section_pricelist--list .h2,
.section_pricelist--list .h2::before,
.section_pricelist--list .h2::after{
  transition:
    opacity 0.35s cubic-bezier(.4,0,.2,1),
    transform 0.35s cubic-bezier(.4,0,.2,1);
}

.section_pricelist--list .h2::after{
  transform: translateX(-50%) translateY(4px);
}

.section_pricelist--list > *:hover .h2::after{
  transform: translateX(-50%) translateY(0);
}

/* ==========================
   Responsive
   ========================== */
@media only screen and (max-width: 56.25em){
  .section_pricelist{
    padding: 5rem 0 3rem;
  }

  .section_pricelist--list{
    padding: 0 1.2rem;
    gap: 1.2rem;
  }

  .section_pricelist--list > *{
    padding: 2.6rem 1.8rem;
    border-radius: 18px;

    /* 2 per row */
    flex: 0 0 calc(50% - 0.6rem) !important;
    max-width: calc(50% - 0.6rem) !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* MOBILE: lock same gradient here too (prevents “different colors” bug) */
  .section_pricelist--list > *{
    background: none !important;
    background-image: linear-gradient(
      135deg,
      #050b16 0%,
      #0e1a33 35%,
      #1b2f55 70%,
      #0a1224 100%
    ) !important;
  }

  .section_pricelist--list .h2{
    font-size: 3.8rem;
  }

  /* Title: slightly smaller + keep Bebas on mobile */
  .section_pricelist--list .h5{
    font-family: 'Bebas Neue', cursive !important;
    font-size: 1.05em;
    margin-bottom: -0.3rem;
  }

  /* Mobile safeguard (no hover UX) */
  .section_pricelist--list > *:nth-child(-n+5) .h2::before,
  .section_pricelist--list > *:nth-child(-n+5) .h2::after{
    display: none;
  }
}

@media only screen and (max-width: 37.5em){
  .section_pricelist--list .h2{
    font-size: 3.4rem;
  }
}

/* ==========================
   Extra-strong override for tiles 5 & 6
   (kept because it fixed brightness mismatch)
   ========================== */
.section_pricelist .section_pricelist--list > *:nth-child(5),
.section_pricelist .section_pricelist--list > *:nth-child(6){
  background: none !important;
  background-image: linear-gradient(
    135deg,
    #050b16 0%,
    #0e1a33 35%,
    #1b2f55 70%,
    #0a1224 100%
  ) !important;

  filter: none !important;
  opacity: 1 !important;
}