/* Pricing Grid Component CSS
   Task 10: Responsive pricing grid layout
   Requirements: 4.2, 4.3, 4.4, 4.5, 7.1, 7.2, 7.3, 7.4
*/

.pricing-section {
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pricing-section__container {
  max-width: 100%;
  padding: 0 1rem;
}

/* Base Grid: Mobile-first with single column */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 2.5rem);
  margin-top: 2rem;
}

/* Hide pricing grid when hidden attribute is set */
.pricing-grid[hidden] {
  display: none !important;
}

/* Tablet Breakpoint: 2 columns (≥ 768px) */
@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.2rem, 2.5vw, 1.5rem);
  }
}

/* Desktop Breakpoint: 3 columns (≥ 1024px) */
@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2rem);
  }

  /* Professional tier (2nd card) scaling on desktop */
  .pricing-card:nth-child(2) {
    transform: scale(1.02);
    z-index: 1;
  }

  .pricing-card:nth-child(2):hover {
    transform: scale(1.03);
  }
}

/* Large Desktop: Maintain 3-column but with better spacing */
@media (min-width: 1440px) {
  .pricing-grid {
    gap: 2rem;
  }

  .pricing-section__container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ensure no horizontal scrolling */
@media (max-width: 560px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .pricing-section__container {
    padding: 0 0.75rem;
  }
}