/*
 * pages/index.css
 * Styles for the main programs index page
*/

.programs-page-container {
  width: 100%;
  background: linear-gradient(160deg, var(--color-primary), var(--color-accent));
}

/* Hero Section */
.programs-hero {
  margin-top: var(--size-32);
  text-align: center;
  padding: var(--section-spacing-sm) var(--size-4);
  margin-bottom: var(--section-spacing-sm);
}

.programs-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--font-black);
  margin-bottom: 1rem;
  color: var(--color-text-reversed);
}

.programs-subtitle {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-text-reversed);
  max-width: 55ch;
  margin: 0 auto;
}

/* Programs Section */
.programs-section {
  padding: 0 1rem 6rem 1rem;
}

.program-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
}

.program-list-card {
  display: flex;
  flex-direction: column;
  flex: 0 1 360px; /* Let cards have a base width and wrap */
  background: var(--color-bg);
  border-radius: var(--rounded-xl);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.program-list-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  border-color: var(--color-primary);
}

.program-list-card__image {
  position: relative;
  height: 320px;
}

.program-list-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.program-list-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Makes this container take up all available space */
  padding: 1.75rem;
  text-align: center; /* Center align all text within this container */
}

.program-list-card__title {
  font-size: 1.75rem;
  font-weight: var(--font-bold);
  margin-bottom: 1rem;
  color: var(--color-text);
}

.program-list-card__description {
  color: var(--color-text-muted);
  flex-grow: 1; /* Pushes the button to the bottom */
  margin-bottom: 1.5rem;
}

.program-list-card .btn {
  width: 100%;
  text-align: center;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  background-color: var(--color-primary-light);
  border-radius: var(--rounded-md);
  border: 1px solid var(--color-border);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.program-list-card .btn[disabled] {
  background-color: rgba(0,0,0,0.2);
  border-color: var(--color-border);
  cursor: not-allowed;
}

.program-list-card .btn[disabled]:hover {
  transform: none;
  background-color: rgba(0,0,0,0.2);
  border-color: var(--color-border);
}

@media (min-width: 768px) {
    .programs-subtitle{
      font-size: clamp(1.6rem, 1rem, 2.5rem);
    }
} 

@media (min-width: 1024px) {
  .programs-title{
    font-size: clamp(2.5rem, 4vw, 3rem);

  }
  .programs-subtitle{
    font-size: clamp(1.8rem, 1rem, 2.5rem);
  }

  .program-list{
    gap: 4rem;
  }

  .program-list-card{
    flex: 0 1 420px;
  }

  .program-list-card__image{
    height: 380px;
  }

  @media (min-width: 1920px) {
    .programs-hero{
      margin-top: var(--size-40);
    }
    .programs-title{
      font-size: clamp(3rem, 4vw, 4rem);
    }
    .programs-subtitle{
      font-size: clamp(2.2rem, 1rem, 2.5rem);
    }
    .program-list-card__description{
      font-size: clamp(1.4rem, 1rem, 1.5rem);
    }
    .program-list-card .btn{}
    
  }
}