/*
* ============================================================================
* Pricing Page Layout
* ============================================================================
*/

.pricing-page-container {
  display: flex;
  width: 100%;
  min-height: 85vh;
}

.pricing-intro {
  flex-basis: 40%;
  background-color: var(--color-background-dark);
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0) 95%
  );
  color: var(--color-background);
  padding: var(--space-xxl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pricing-intro h1 {
  color: var(--color-background);
  font-size: 2.5rem;
  margin-bottom: var(--space-lg);
}

.pricing-intro p {
  color: #a0a0a0;
  font-size: 1.1rem;
  max-width: 65ch;
}

.pricing-cards-area {
  flex-basis: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-xl);
  background-color: var(--color-background);
}

.credit-info-note {
  font-family: var(--font-serif-text);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: calc(var(--space-sm) * -1);
}

/*
* ============================================================================
* Pricing Grid & Cards
* ============================================================================
*/

.pricing-cards {
  display: flex;
  gap: var(--space-lg);
  width: 100%;
  max-width: 800px;
  justify-content: center;
  align-items: stretch;
}

.credit-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  gap: var(--space-sm);
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
}

.credit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.credit-card h3 {
  margin: 0;
  font-family: var(--font-serif-display);
  font-size: 1.25rem;
  color: var(--color-text-primary);
  text-align: center;
}

.credit-card .price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
  text-align: center;
}

.credit-card .description {
  font-family: var(--font-serif-text);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin-bottom: var(--space-lg);
  text-align: center;
  flex-grow: 1;
}

.credit-card .btn {
  width: 100%;
}

/*
* ============================================================================
* Pricing Page Image Showcase
* ============================================================================
*/

.pricing-image-showcase {
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  align-items: center;
}

.showcase-image {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  position: relative;
  transition: transform 0.3s ease;
}

.showcase-image--left {
  grid-row: 1 / 3; /* Span two rows */
  grid-column: 1 / 2;
  z-index: 1;
}

.showcase-image--right-top {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  z-index: 3;
  transform: translateY(calc(var(--space-md) * -1))
    translateX(calc(var(--space-xxl) * -1));
}

.showcase-image--right-bottom {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  z-index: 2;
  transform: translateY(calc(var(--space-lg) * -1))
    translateX(calc(var(--space-xxl) * -0.5));
}

/* This rule applies to any of the images when hovered */
.showcase-image:hover {
  z-index: 4;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

/* Re-apply the original transform PLUS the new scale for each image */
.showcase-image--left:hover {
  transform: scale(1.1);
}

.showcase-image--right-top:hover {
  /* transform: translateX(calc(var(--space-xxl) * -1)) scale(1.05); */
  transform: translateY(calc(var(--space-md) * -1))
    translateX(calc(var(--space-xxl) * -1)) scale(1.1);
}

.showcase-image--right-bottom:hover {
  /* transform: translateX(calc(var(--space-xxl) * -1)) */
  /*   translateY(calc(var(--space-lg) * -1)) scale(1.05); */
  transform: translateY(calc(var(--space-lg) * -1))
    translateX(calc(var(--space-xxl) * -0.5)) scale(1.1);
}

/*
* ============================================================================
* Responsive adjustments for the image showcase *
* ============================================================================
*/
@media (max-width: 992px) {
  /* When the layout stacks, center the showcase content */
  .pricing-image-showcase {
    justify-items: center;
  }
}

@media (max-width: 480px) {
  /* On very small screens, stack the images into a single column */
  .pricing-image-showcase {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .showcase-image--left,
  .showcase-image--right-top,
  .showcase-image--right-bottom {
    grid-row: auto;
    grid-column: auto;
    transform: none; /* Reset the offset */
    max-width: 80%; /* Don't let them take full width */
  }

  /* Disable the hover effect on small screens to avoid issues on touch devices */
  .showcase-image:hover {
    transform: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  }
}