/* ======================================================
   PROGRAMS PAGE OVERRIDES
   Goal: NO card background, NO card shadow.
   Each program is a clean full-width section.
   Uses the same header/footer + style.css base theme.
====================================================== */

/* Fixed header already in your base style? Keep safe spacing */
.programs-page{
  padding-top: 92px; /* adjust only if your header height changes */
}

/* Single column layout (already in your HTML) */
.programs-page-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem; /* more breathing room between sections */
}

/* Program section wrapper: remove "card feel" completely */
.program-section{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Inner layout: looks like a clean editorial section */
.program-section-inner{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 1.8rem;
  align-items: center;

  /* subtle divider instead of card */
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Dark mode divider */
html[data-theme="dark"] .program-section-inner{
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* Image area: no background block */
.program-section-media{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Image styling: clean, modern, not in a card */
.program-section-img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 16px; /* keep modern look but not a card container */
  display: block;
}

/* Content typography */
.program-section-content h3{
  margin: 0 0 0.6rem;
  line-height: 1.2;
}

.program-section-content p{
  margin: 0 0 0.9rem;
  max-width: 70ch;
  line-height: 1.6;
}

/* List as clean bullets (not inside a boxed card) */
.program-section-list{
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.7;
}

.program-section-list li{
  margin: 0.25rem 0;
}

/* Optional: alternate layout (image left/right) for visual rhythm */
.program-section:nth-child(even) .program-section-inner{
  grid-template-columns: 1fr 420px;
}

.program-section:nth-child(even) .program-section-media{
  order: 2;
}

.program-section:nth-child(even) .program-section-content{
  order: 1;
}

/* Mobile responsive */
@media (max-width: 900px){
  .program-section-inner{
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .program-section:nth-child(even) .program-section-inner{
    grid-template-columns: 1fr;
  }

  .program-section:nth-child(even) .program-section-media,
  .program-section:nth-child(even) .program-section-content{
    order: unset;
  }

  .program-section-img{
    height: 220px;
  }
}

/* If your style.css makes all "section" look like a card,
   this forces the programs section container to stay clean */
#programs.section{
  background: transparent !important;
}