/* ================================================================
   Academy home — program cards (template-parts/academy/courses-section.php)
   Four programs as a learning path: Workshop → Crash Course Python / Power BI → Analytics
   Professional (the featured, dark card). Brand tokens from variables.css (colors.md).
   ================================================================ */

.pg-home .section-header { margin-bottom: clamp(32px, 5vw, 56px); }

.pg-path {
  --pg-line: rgba(16, 20, 27, .09);
  --pg-ink: #1d2327;
  --pg-muted: #5c6370;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
  text-align: left;
}

/* The path the cards sit on. */
.pg-path::before {
  content: "";
  position: absolute;
  left: 32px; right: 32px; top: 39px; /* runs along the first row (the three short programs) */
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-support) 55%, var(--color-primary));
  opacity: .28;
}

.pg-card {
  --tone: var(--color-secondary);
  --tone-10: var(--color-secondary-10, #e6f3f4);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--pg-line);
  box-shadow: 0 1px 2px rgba(16, 20, 28, .04), 0 12px 32px -12px rgba(16, 20, 28, .12);
  color: var(--pg-ink);
}
.pg-card.is-mc-python   { --tone: var(--color-support); --tone-10: var(--color-support-10); }
.pg-card.is-mc-power-bi { --tone: #a88900;             --tone-10: #fffbe3; }

.pg-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pg-card__step { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; color: var(--pg-muted); }
.pg-card__num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-size: .9375rem; font-weight: 800; color: #fff; background: var(--tone);
  box-shadow: 0 0 0 6px #fff;
}
.pg-card.is-mc-power-bi .pg-card__num { color: #323232; background: var(--color-highlight); }
.pg-card__flag {
  padding: 3px 10px; border-radius: 999px; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35);
}

.pg-card__icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-top: 4px; border-radius: 14px;
  color: var(--tone); background: var(--tone-10);
}
.pg-card__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pg-card__icon img { width: 30px; height: 30px; object-fit: contain; }

.pg-card__type { margin: 4px 0 0 !important; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tone); }
.pg-card.is-mc-power-bi .pg-card__type { color: #6b5f00; }
.pg-card__title { margin: 0 !important; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em; }
.pg-card__link { color: inherit; text-decoration: none; }
/* The whole card is the link (stretched), while the text stays selectable. */
.pg-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.pg-card__link:focus-visible { outline: none; }
.pg-card:has(.pg-card__link:focus-visible) { outline: 3px solid var(--color-primary-20, rgba(162, 45, 117, .35)); outline-offset: 3px; }
.pg-card__line { margin: 0 !important; font-size: .9375rem; line-height: 1.55; color: var(--pg-muted); }

.pg-card__facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.pg-card__facts li { padding: 4px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: var(--pg-ink); background: #f3f5f7; border: 1px solid var(--pg-line); }

.pg-card__foot { display: grid; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--pg-line); }
.pg-card__price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 !important; }
.pg-card__price-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pg-muted); }
.pg-card__price-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--pg-ink); font-variant-numeric: lining-nums tabular-nums; }
.pg-card__next { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-size: .875rem; color: var(--pg-muted); font-variant-numeric: lining-nums; }
.pg-card__dot { width: 8px; height: 8px; border-radius: 50%; background: #c3c8d0; flex-shrink: 0; }
.pg-card__dot.is-open { background: var(--color-free); box-shadow: 0 0 0 4px rgba(61, 205, 88, .18); }

.pg-card__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 6px; padding: 0 16px;
  border-radius: 12px; font-size: .9375rem; font-weight: 700; color: var(--tone); background: var(--tone-10);
}
.pg-card.is-mc-power-bi .pg-card__cta { color: #6b5f00; }
.pg-card__cta svg { flex-shrink: 0; }

/* Featured: Analytics Professional */
.pg-card.is-featured {
  --tone: #fff;
  --pg-line: rgba(255, 255, 255, .16);
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(38, 198, 218, .28), transparent 55%),
    linear-gradient(150deg, var(--color-primary) 0%, #6d2a7e 55%, var(--color-support) 100%);
  box-shadow: 0 24px 48px -20px rgba(162, 45, 117, .55);
}
.pg-card.is-featured .pg-card__step,
.pg-card.is-featured .pg-card__line,
.pg-card.is-featured .pg-card__price-label,
.pg-card.is-featured .pg-card__next { color: rgba(255, 255, 255, .82); }
.pg-card.is-featured .pg-card__num { color: var(--color-primary); background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .18); }
.pg-card.is-featured .pg-card__icon { color: #fff; background: rgba(255, 255, 255, .14); }
.pg-card.is-featured .pg-card__type { color: #bdf1f8; }
.pg-card.is-featured .pg-card__price-value { color: #fff; }
.pg-card.is-featured .pg-card__facts li { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); }
.pg-card.is-featured .pg-card__cta { color: var(--color-primary); background: #fff; }
.pg-card__free { padding: 12px 14px; border-radius: 14px; background: rgba(10, 12, 16, .18); border: 1px solid rgba(255, 255, 255, .14); }
.pg-card__free-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px !important; font-size: .8125rem; color: rgba(255, 255, 255, .85); }
.pg-card__free-tag { padding: 2px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #b9f2c4; background: rgba(61, 205, 88, .2); border: 1px solid rgba(61, 205, 88, .6); }
.pg-card__free ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pg-card__free li { display: flex; align-items: flex-start; gap: 8px; font-size: .875rem; line-height: 1.4; color: #fff; }
.pg-card__free li svg { flex-shrink: 0; margin-top: 2px; color: #b9f2c4; }

@media (prefers-reduced-motion: no-preference) {
  .pg-card { transition: transform .2s ease, box-shadow .2s ease; }
  .pg-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(16, 20, 28, .04), 0 24px 44px -18px rgba(16, 20, 28, .22); }
  .pg-card.is-featured:hover { box-shadow: 0 30px 56px -20px rgba(162, 45, 117, .65); }
  .pg-card__cta svg { transition: transform .2s ease; }
  .pg-card:hover .pg-card__cta svg { transform: translateX(3px); }
}

/* The flagship always takes the full row below the three short programs. On wide screens its
   content sits in two columns: the program on the left; free benefits, fee and CTA on the right. */
.pg-card.is-featured { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .pg-card.is-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "top   free"
      "icon  free"
      "type  free"
      "title free"
      "line  foot"
      "facts cta";
    grid-template-rows: auto auto auto auto 1fr auto;
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: 10px;
    padding: 28px 32px;
  }
  .pg-card.is-featured .pg-card__top   { grid-area: top; justify-content: flex-start; gap: 14px; }
  .pg-card.is-featured .pg-card__icon  { grid-area: icon; }
  .pg-card.is-featured .pg-card__type  { grid-area: type; }
  .pg-card.is-featured .pg-card__title { grid-area: title; font-size: clamp(1.625rem, 2.4vw, 2.125rem); }
  .pg-card.is-featured .pg-card__line  { grid-area: line; max-width: 46ch; font-size: 1rem; align-self: start; }
  .pg-card.is-featured .pg-card__facts { grid-area: facts; align-self: end; }
  .pg-card.is-featured .pg-card__free  { grid-area: free; align-self: start; padding: 16px 18px; }
  .pg-card.is-featured .pg-card__free li { font-size: .9375rem; }
  .pg-card.is-featured .pg-card__foot  { grid-area: foot; align-self: end; margin-top: 0; }
  .pg-card.is-featured .pg-card__cta   { grid-area: cta; align-self: end; margin-top: 0; }
}
@media (max-width: 1100px) { .pg-path::before { display: none; } }
/* Phone: one column. */
@media (max-width: 760px) {
  .pg-path { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pg-card { padding: 18px; }
}

/* The Academy home styles every h3 (.ax-home h3); the card titles keep their own colours. */
.ax-home .pg-card__title, .ax-home .pg-card__title a { color: var(--pg-ink); }
.ax-home .pg-card.is-featured .pg-card__title, .ax-home .pg-card.is-featured .pg-card__title a { color: #fff; }
.pg-card__price-value.is-text { font-size: 1rem; font-weight: 700; }