/* =========================================================
   ForGrowth Academy — program.css
   ISOLATED. Every selector below is scoped to #program.
   No global element, typography or colour rule is declared here, and no
   existing selector is redefined. Tokens are read from styles.css.
   ========================================================= */


/* ---------------------------------------------------------
   HEADING —  [ AI Powered ] Digital Marketing
   The mark is an inline-block so it wraps as one unit and never
   splits across two lines.
   --------------------------------------------------------- */
#program .pg-heading {
  display: block;
  text-wrap: balance;
}

#program .pg-heading .pg-mark {
  display: inline-block;
  background: var(--accent, #D9400B);
  color: #fff;
  padding: 0.04em 0.22em 0.12em;
  margin-right: 0.12em;
  border-radius: 2px;
  /* Keeps the plate tight around the glyphs rather than the full line box. */
  line-height: 1.02;
  white-space: nowrap;
}


/* ---------------------------------------------------------
   2 x 2 INFORMATION GRID
   The 1px gap over a line-coloured background draws the hairline
   dividers, so no cell needs its own borders to line up.
   --------------------------------------------------------- */
#program .pg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line, #E2DED3);
  border: 1px solid var(--line, #E2DED3);
  border-radius: 4px;
  overflow: hidden;                 /* clips cell corners, prevents overflow */
}

#program .pg-cell {
  background: var(--white, #fff);
  padding: 34px 32px 32px;
  min-width: 0;                     /* lets long content shrink, no overflow */

  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--pg-i, 0) * 90ms);
}

/* The site's existing observer adds `in-view` to .reveal elements (js/main.js).
   The grid already carries .reveal, so the cells stagger in off that class —
   no new observer, no change to existing JS. */
#program .pg-grid.in-view .pg-cell {
  opacity: 1;
  transform: none;
}

#program .pg-label {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey, #6B6B6E);
  margin-bottom: 22px;
}

#program .pg-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 24px);
}

/* --- icon: outline glyph on a soft pale circular plate --- */
#program .pg-icon {
  flex: none;
  width: clamp(78px, 7.6vw, 108px);
  height: clamp(78px, 7.6vw, 108px);
  border-radius: 50%;
  background: rgba(217, 64, 11, 0.08);
  color: var(--accent, #D9400B);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: scale(0.86);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(160ms + var(--pg-i, 0) * 90ms);
}

#program .pg-grid.in-view .pg-icon {
  opacity: 1;
  transform: none;
}

#program .pg-icon svg {
  width: clamp(32px, 3.2vw, 44px);
  height: clamp(32px, 3.2vw, 44px);
  display: block;
}

#program .pg-text { min-width: 0; }

#program .pg-value {
  display: block;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--black, #121214);
  font-variant-numeric: tabular-nums;
}

/* "Flexible Timeing" is words, not a figure — it needs a smaller optical size. */
#program .pg-value-text {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

#program .pg-desc {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--grey, #6B6B6E);
}

#program .pg-desc-wide { margin-top: 18px; }


/* ---------------------------------------------------------
   SCHEDULE — five mode chips
   --------------------------------------------------------- */
#program .pg-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#program .pg-mode {
  display: inline-flex;
  flex-direction: column;      /* icon above label, as in the reference */
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: clamp(78px, 8vw, 96px);
  min-height: clamp(78px, 8vw, 96px);
  padding: 12px 8px;
  border: 1px solid var(--line, #E2DED3);
  border-radius: 8px;
  background: #fff;
  color: var(--grey, #6B6B6E);
  font-family: var(--font-body, sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;

  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    color 0.3s ease,
    background-color 0.3s ease;
  transition-delay: calc(220ms + var(--pg-j, 0) * 70ms), 0s, 0s, 0s, 0s;
}

#program .pg-grid.in-view .pg-mode {
  opacity: 1;
  transform: none;
}

#program .pg-mode svg {
  width: 24px;
  height: 24px;
  flex: none;
  display: block;
}

#program .pg-mode:hover {
  border-color: rgba(217, 64, 11, 0.45);
  color: var(--ink, #1C1C1E);
  background: #fff;
}

#program .pg-mode.is-active {
  border-color: var(--accent, #D9400B);
  color: var(--accent, #D9400B);
  background: rgba(217, 64, 11, 0.045);
}

#program .pg-mode:focus-visible {
  outline: 2px solid var(--accent, #D9400B);
  outline-offset: 2px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 900px) {
  #program .pg-cell { padding: 28px 24px 26px; }
  #program .pg-icon { width: 46px; height: 46px; }
  #program .pg-icon svg { width: 22px; height: 22px; }
  #program .pg-row { gap: 14px; }
}

@media (max-width: 620px) {
  /* Stack the four cells vertically. */
  #program .pg-grid { grid-template-columns: minmax(0, 1fr); }
  #program .pg-cell { padding: 26px 22px 24px; }
  #program .pg-label { margin-bottom: 18px; }
  #program .pg-mode { width: 72px; min-height: 72px; padding: 10px 6px; font-size: 12px; gap: 8px; }
  #program .pg-mode svg { width: 21px; height: 21px; }
}


/* ---------------------------------------------------------
   REDUCED MOTION — show everything, animate nothing
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #program .pg-cell,
  #program .pg-icon,
  #program .pg-mode {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Schedule cell caption — mirrors the Session cell's supporting line so both
   bottom cells read the same way. Sits under the mode chips inside the cell,
   rather than as a loose note beneath the whole grid. */
#program .pg-desc-modes {
  margin-top: 18px;
  max-width: 30ch;
}

@media (max-width: 620px) {
  #program .pg-desc-modes { margin-top: 14px; }
}