/* ==========================================================================
   Study-area pathway rows  (.px-list)
   ==========================================================================

   Replaces the eight one-word "LEARN. / LEAD. / MANAGE." statements and their
   decorative CSS scenes. Those scenes were four empty <i> elements marked
   aria-hidden — decoration by their own declaration, carrying nothing, and the
   band restated the eight study areas the grid below already listed.

   Here the rollover IS the information: hovering or keyboard-focusing a row
   reveals a photograph of that field and opens the qualification list. Nothing
   in this component is present only to move.

   Every fact rendered — count, AQF span, price range, duration, codes, titles —
   is read out of courses.html by the generator. No figure is written by hand.
   ========================================================================== */

.px-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line, #d9dde4);
}

.px-row {
  border-bottom: 1px solid var(--line, #d9dde4);
}

/* The whole row is one link target, so the hit area matches what looks clickable. */
.px-hit {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  color: inherit;
  text-decoration: none;
}

@media (min-width: 56rem) {
  .px-hit {
    grid-template-columns: 15rem minmax(0, 1fr) auto;
    gap: 2rem;
    padding: 1.35rem 0;
  }
}

/* ------------------------------------------------------------ photograph */

/* Collapsed to a thin sliver at rest so the row stays a scannable list, then
   opened on hover/focus. `height` is animated rather than `display`, so the
   image is always in the DOM, always announced, and always printable. */
.px-shot {
  display: none;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line, #e8ebf0);
}

@media (min-width: 56rem) {
  .px-shot {
    display: block;
    height: 4.5rem;
    transition: height .34s cubic-bezier(.2, .7, .3, 1);
  }
  .px-row:hover .px-shot,
  .px-row:focus-within .px-shot { height: 9.5rem; }
}

.px-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desaturated at rest so eight photographs in a column do not shout over the
     text; full colour on the row you are actually reading. */
  filter: saturate(.35) contrast(1.02);
  transform: scale(1.02);
  transition: filter .34s ease, transform .34s ease;
}
.px-row:hover .px-shot img,
.px-row:focus-within .px-shot img {
  filter: none;
  transform: scale(1);
}

/* ------------------------------------------------------------------ mobile

   A phone has no hover. Everything the rollover reveals on desktop must
   therefore be OPEN here by default — the first build collapsed the
   qualification list at every width, which made all 31 codes unreachable on a
   phone. The list is the reason the section exists. */
@media (max-width: 55.99rem) {
  .px-shot {
    display: block;
    height: 9rem;
    margin-bottom: .25rem;
  }
  /* !important because the desaturate-at-rest rule and the :hover rule that
     undoes it both sit outside this query and one of them keeps winning the
     cascade on touch devices, where neither state is meaningful. */
  .px-shot img { filter: none !important; transform: none !important; }

  .px-quals {
    max-height: none;
    overflow: visible;
    padding-bottom: 1.2rem;
  }
  .px-go { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- copy */

.px-copy { display: grid; gap: .3rem; min-width: 0; }

.px-area {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink, #14213d);
}

.px-stand {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text-mute, #5a6274);
}

.px-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem;
  margin-top: .2rem;
  font-size: .87rem;
  color: var(--text-mute, #5a6274);
}
.px-facts b { color: var(--ink, #14213d); font-weight: 700; }
.px-facts i { font-style: normal; opacity: .45; }

.px-go {
  justify-self: start;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--em, #c9a227);
  opacity: 0;
  transform: translateX(-.35rem);
  transition: opacity .24s ease, transform .24s ease;
}
@media (max-width: 55.99rem) { .px-go { opacity: 1; transform: none; } }
.px-row:hover .px-go,
.px-row:focus-within .px-go { opacity: 1; transform: none; }

/* -------------------------------------------------- qualification list

   The actual reason the row exists. Closed at rest, opened by the same
   hover/focus that reveals the photograph — so the rollover delivers the
   qualification codes, not an animation. */

.px-quals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .34s cubic-bezier(.2, .7, .3, 1), padding .34s ease;
}
.px-row:hover .px-quals,
.px-row:focus-within .px-quals {
  max-height: 30rem;
  padding-bottom: 1.4rem;
}

@media (min-width: 56rem) {
  .px-quals { padding-left: 17rem; }          /* aligns under the copy column */
  .px-row:hover .px-quals,
  .px-row:focus-within .px-quals { padding-left: 17rem; }
}

.px-quals a {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .38rem 0;
  font-size: .9rem;
  color: var(--text, #1b2430);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.px-quals a:hover,
.px-quals a:focus-visible {
  border-bottom-color: var(--em, #c9a227);
}
.px-quals b {
  min-width: 5.5rem;
  font-variant-numeric: tabular-nums;   /* codes line up in a column */
  color: var(--em, #c9a227);
  font-weight: 700;
}

/* Keyboard users must be able to reach the qualification links, which means the
   row cannot rely on hover alone — :focus-within above handles it, and the
   focus ring must stay visible against both grounds. */
.px-hit:focus-visible,
.px-quals a:focus-visible {
  outline: 2px solid var(--em, #c9a227);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- motion

   With reduced motion the rows simply open: no height animation, no scale, no
   desaturation trick. The information is identical either way. */
@media (prefers-reduced-motion: reduce) {
  .px-shot,
  .px-shot img,
  .px-quals,
  .px-go { transition: none !important; }
  .px-shot { height: 9rem !important; }
  .px-shot img { filter: none !important; transform: none !important; }
}

/* ----------------------------------------------------------------- print */
@media print {
  .px-quals { max-height: none; overflow: visible; }
  .px-shot { display: none; }
}