/*
 * InspireSphere Theme — Programme Cards Section
 *
 * 2×2 grid of programme cards with left blue border, card image, title, and description.
 * Desktop: 2-column grid with gap 40px rows / 32px columns.
 * Mobile:  1-column, border alternates left/right, "Explore" button visible.
 */

/* ── Section wrapper ─────────────────────────────────────────────── */
.section--programme-cards {
  padding-block: 0;
}

/* ── Grid container ──────────────────────────────────────────────── */
.programme-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 32px;
}

/* ── Card ────────────────────────────────────────────────────────── */
.programme-cards__card {
  background-color: var(--color-light-grey);
  border-left: 4px solid var(--color-blue);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── Card image ──────────────────────────────────────────────────── */
.programme-cards__card-image {
  width: 100%;
  aspect-ratio: 7 / 3;
  object-fit: cover;
  display: block;
}

/* ── Card body ───────────────────────────────────────────────────── */
.programme-cards__card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.programme-cards__card-title {
  font-size: 36px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  line-height: 1.3;
}

.programme-cards__card-desc {
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-regular);
  color: var(--color-black);
  line-height: 1.6;
}

/* ── Explore button — hidden on desktop, shown on mobile ─────────── */
.programme-cards__card-btn {
  display: none;
}

/* ── Mobile (≤ 768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .programme-cards__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Even cards (2nd, 4th) switch to right border */
  .programme-cards__card:nth-child(even) {
    border-left: none;
    border-right: 4px solid var(--color-blue);
  }

  .programme-cards__card {
    gap: 32px;
  }

  .programme-cards__card-title {
    font-size: var(--font-size-h2-mobile);
    font-weight: var(--font-weight-bold);
  }

  .programme-cards__card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-blue);
    color: var(--color-white);
    height: 56px;
    padding: 16px 20px;
    border-radius: 6px;
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-regular);
    text-decoration: none;
    border: none;
    cursor: pointer;
  }
}