/* image-stack — the media column of a two-column interior page.
 *
 * NOT FROM THE HANDOFF. Sits as one grid child of the `.mtext--inner` row,
 * opposite the prose, so it inherits that row's 34/66 split rather than
 * defining a second column system.
 */

.istack {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}

/* 3+ images go two-up inside the column. Stacked, eleven photographs (which
 * mechanical-training genuinely has) would run several screens taller than
 * the prose beside them. */
.istack--dense {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.istack__item { margin: 0; }

.istack__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--card-radius);
  /* The photographs are shot on a plain studio ground; a hairline keeps them
   * from bleeding into the page's own off-white. */
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.istack--dense .istack__item img { border-radius: calc(var(--card-radius) - 8px); }

/* A logo is artwork on its own ground — the frame that flatters a product
 * photograph just draws a box around it. */
.istack__item--logo img {
  border: 0;
  border-radius: 0;
  background: none;
}

@media (max-width: 992px) {
  /* Below the row's own breakpoint the column becomes full width, so a
   * stacked set would be enormous — go multi-up regardless of count. */
  .istack { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
}


/* -- Supporting copy beneath the images ---------------------------------
 * The old site's left column carries more than photographs: a "Skills
 * Identified" heading with a bulleted list on the assessment and training
 * pages, and a bold paragraph plus a CTA on others.
 *
 * Type matches the interior prose exactly — same h3 treatment, same wine
 * heading rule, same bullets — so the two columns read as one page rather
 * than as a main column and a widget area.
 */
.icol { display: grid; gap: var(--space-md); align-content: start; }

/* Rob 2026-08-22: the whole column reads at --step--1. It is supporting copy
 * beside the main prose, not a second article. */
.icol__text { font-size: var(--step--1); }

.icol__text > * + * { margin-top: var(--space-xs); }
.icol__text > :first-child { margin-top: 0; }

.icol__text h2 {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2xs);
}
/* One step above the body of the column, so there is still a hierarchy at the
 * smaller size rather than a flat block of text. */
.icol__text h3,
.icol__text h4 {
  color: var(--color-charcoal);
  font-weight: var(--fw-bold);
  font-size: var(--step-0);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2xs);
}

.icol__text p { line-height: var(--leading-body); }
.icol__text strong { font-weight: var(--fw-bold); color: var(--color-text); }

/* The design's reset strips list markers; the old theme supplied its own. */
.icol__text ul { padding-left: 1.15em; list-style: disc; }
.icol__text ol { padding-left: 1.35em; list-style: decimal; }
.icol__text li + li { margin-top: var(--space-3xs); }
.icol__text li { line-height: var(--leading-snug); }

.icol__text a:not(.btn) {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.icol__text a:not(.btn):hover { color: var(--color-primary); }

/* Buttons carried over from the old theme, re-classed on import. Restated
 * here at (0,2,1) for the same reason the prose ones were: `.icol__text a`
 * is more specific than `.btn--primary` and would win on colour. */
.icol__text .row-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}
.icol__text a.btn { text-decoration: none; }
.icol__text a.btn--primary { color: var(--color-text-inv); }
.icol__text a.btn--primary:hover { color: var(--color-primary); }

/* Registered/trademark marks come across as <sub>, which drops the baseline
 * far enough to break the line rhythm. */
.icol__text sub,
.pblock__body sub { vertical-align: baseline; font-size: 0.75em; }