/* cms.css — styles for CMS-driven public surfaces.
   Loaded by detail-page shells (news-post / insight / job) and may also be
   linked from index.html for the homepage news + tradeshow sections.
   All selectors are cms-* / render-blocks cms-* so nothing collides with the
   existing site. Uses the site's design tokens from style.css. */

/* ------------------------------------------------------------------ */
/* Empty / message states                                             */
/* ------------------------------------------------------------------ */
.cms-empty {
  color: var(--c-ink-2);
  font-size: var(--t-body);
  text-align: center;
  padding-block: var(--sp-4);
}
.section--dark .cms-empty { color: var(--c-on-dark-2); }

/* ------------------------------------------------------------------ */
/* Dark hero band — CMS index pages (/careers, /news, /insights)       */
/* Compact version of the marketing .hero, sized to clear the fixed    */
/* nav. Eyebrow + title + intro on the dark brand gradient.            */
/* ------------------------------------------------------------------ */
.cms-hero {
  background: linear-gradient(180deg, var(--c-bg-dark) 0%, var(--c-bg-dark-2) 100%);
  color: var(--c-on-dark);
  padding-block: calc(var(--nav-h) + var(--sp-6)) var(--sp-6);
}
.cms-hero .eyebrow {
  color: var(--c-accent);
  display: block;
  margin-bottom: var(--sp-3);
}
.cms-hero__title {
  font-size: var(--t-h1);
  line-height: 1.05;
  color: var(--c-on-dark);
  margin: 0;
}
.cms-hero__intro {
  color: var(--c-on-dark-2);
  font-size: var(--t-lead);
  margin: var(--sp-3) 0 0;
  max-width: 56ch;
}

/* ------------------------------------------------------------------ */
/* Archive index pages (/news, /insights, /careers)                   */
/* ------------------------------------------------------------------ */
.cms-archive { padding-block: var(--section-pad); }
.cms-archive__more {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-5);
}
.cms-loadmore[hidden] { display: none; }
.cms-loadmore[disabled] { opacity: 0.6; cursor: progress; }

/* ------------------------------------------------------------------ */
/* News / insight cards (homepage feed)                               */
/* ------------------------------------------------------------------ */
.cms-card { padding: 0; overflow: hidden; }
.cms-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.cms-card__media {
  margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-alt);
}
.cms-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-card__kicker { display: block; }
/* `.cms-card` qualifier raises specificity above the base `.card h3` rule
   (style.css) which would otherwise force these titles back to --t-h3. */
.cms-card .cms-card__title { font-size: var(--t-lead); line-height: 1.2; }
.cms-card__excerpt { margin: 0; color: var(--c-ink-2); font-size: 1rem; }
.cms-card:hover .cms-card__more { color: var(--c-accent-hover); }

/* Featured lead card — the newest item on an archive's first page. Spans the
   full grid; on wider viewports the cover sits beside a larger title block. */
.cms-card--featured { grid-column: 1 / -1; }
.cms-card--featured .cms-card__title { font-size: var(--t-h3); line-height: 1.15; }
.cms-card--featured .cms-card__excerpt { font-size: var(--t-lead); }
@media (min-width: 768px) {
  .cms-card--featured .cms-card__link {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--sp-5);
    align-items: stretch;
  }
  .cms-card--featured .cms-card__media {
    margin: calc(-1 * var(--sp-4)) 0 calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4));
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
  }
  .cms-card--featured .cms-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    justify-content: center;
  }
}

/* ------------------------------------------------------------------ */
/* Trade shows — single graphic                                       */
/* ------------------------------------------------------------------ */
.cms-tradeshow-single { max-width: var(--w-max); margin-inline: auto; }
.cms-tradeshow__link { display: block; border-radius: var(--r-lg); overflow: hidden; }
.cms-tradeshow__img { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------------ */
/* Trade shows — slideshow (step-scroller markup contract)            */
/* The section is (steps + 1) x 100svh tall; the stage stays pinned   */
/* via position:sticky while the spacer track scrolls past.           */
/* ------------------------------------------------------------------ */
.cms-slideshow { position: relative; }
.cms-slideshow__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.cms-slideshow__slides {
  position: relative;
  width: min(92vw, var(--w-max));
  aspect-ratio: 16 / 9;
}
.cms-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 480ms ease;
  pointer-events: none;
}
.cms-slideshow__slide.is-current { opacity: 1; pointer-events: auto; }
.cms-slideshow__slide .cms-tradeshow__link,
.cms-slideshow__slide .cms-tradeshow__img {
  width: 100%;
  height: 100%;
}
.cms-slideshow__slide .cms-tradeshow__img { object-fit: contain; }

/* The spacer track gives the engine its scroll height (one 100svh block/step). */
.cms-slideshow__track { position: relative; }
.cms-slideshow__spacer { height: 100svh; }

/* Dots */
.cms-slideshow__dots {
  position: absolute;
  bottom: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-1);
  z-index: 2;
}
.cms-slideshow__dot {
  width: 10px; height: 10px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--c-line);
  cursor: pointer;
  padding: 0;
}
.cms-slideshow__dot.is-active { background: var(--c-accent); }

/* Static fallback: reduced-motion / no-JS — unpin and stack every slide. */
.cms-slideshow--static .cms-slideshow__stage { position: static; height: auto; }
.cms-slideshow--static .cms-slideshow__track { display: none; }
.cms-slideshow--static .cms-slideshow__dots { display: none; }
.cms-slideshow--static .cms-slideshow__slides {
  position: static;
  display: grid;
  gap: var(--sp-3);
  aspect-ratio: auto;
}
.cms-slideshow--static .cms-slideshow__slide {
  position: static;
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .cms-slideshow__stage { position: static; height: auto; }
  .cms-slideshow__track { display: none; }
}

/* ------------------------------------------------------------------ */
/* Job board cards                                                    */
/* ------------------------------------------------------------------ */
.cms-job-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.cms-job-card__title { font-size: var(--t-h3); }
.cms-job-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.cms-job-card__tag,
.cms-job-detail__tag {
  font-size: var(--t-eyebrow);
  color: var(--c-ink-2);
  background: var(--c-bg-alt);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.75rem;
}
.section--alt .cms-job-card__tag { background: var(--c-bg); }
.cms-job-card:hover .cms-job-card__more { color: var(--c-accent-hover); }
.cms-job-card__summary { margin: 0; color: var(--c-ink-2); font-size: 1rem; }

/* Careers board — two sections (Full-Time & Part-Time / Contract). Compact
   heading with a short underline that hugs the text. */
.cms-jobs__heading {
  display: inline-block;
  font-size: var(--t-h3);
  line-height: 1.2;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-1);
  border-bottom: 2px solid var(--c-accent);
}
/* Both sections sit on white; a hairline divides Contract from the roles above.
   Tighten the gap around the line to two-thirds of the usual section padding
   on each side (the section above it, and the divided section's own top). */
.cms-archive--divided {
  border-top: 1px solid var(--c-line);
  padding-top: calc(var(--section-pad) * 2 / 3);
}
.cms-archive:has(+ .cms-archive--divided) {
  padding-bottom: calc(var(--section-pad) * 2 / 3);
}

/* Job board layout: thin full-width rows stacked one per line (not a grid).
   Title + summary on the left, the "View role" arrow pinned right. */
.cms-jobboard { display: flex; flex-direction: column; gap: calc(var(--sp-2) / 2); }
.cms-jobboard .cms-job-card {
  border-radius: var(--r-sm);     /* crisp, small corners */
  border: 1px solid #000;          /* 1px black outline */
}
.cms-jobboard .cms-job-card__link {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  /* Thinner rows: vertical padding trimmed to a third of the original, sides unchanged. */
  padding: calc(var(--sp-3) / 3) var(--sp-4);
}
.cms-jobboard .cms-job-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;            /* let long summaries wrap instead of overflowing */
}
.cms-jobboard .cms-job-card__title { font-size: 1.2rem; margin: 0; }
.cms-jobboard .cms-job-card__more { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 560px) {
  .cms-jobboard .cms-job-card__link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
}

/* ------------------------------------------------------------------ */
/* Detail pages (article + job)                                       */
/* ------------------------------------------------------------------ */
.cms-detail { padding-block: var(--section-pad); }
.cms-article__head { margin-bottom: var(--sp-5); }
.cms-article__back { display: inline-block; margin-bottom: var(--sp-3); }
/* Title stays a semantic <h1>, but is sized down to H2 — big hero-scale title
   was too much for a post/job page. (Visual size only; document outline intact.) */
.cms-article__title { font-size: var(--t-h2); line-height: 1.1; }
.cms-article__byline { color: var(--c-ink-2); margin-top: var(--sp-2); }
.cms-article__cover {
  margin: var(--sp-4) 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cms-article__cover img { width: 100%; height: auto; display: block; }

/* --- Hero header: cover present → the back-link/eyebrow stays above the image
   (blue), and the title + byline overlay the lower-left of the cover with a dark
   gradient and white text. The image keeps its OWN aspect ratio (no crop).
   No cover → the plain black-on-white header above is used. --- */
.cms-article__head--has-hero { margin-bottom: var(--sp-5); }
.cms-article__head--hero {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;             /* contain stacking */
}
.cms-article__head--hero .cms-article__cover { margin: 0; border-radius: 0; }
.cms-article__head--hero .cms-article__cover img {
  width: 100%;
  height: auto;                   /* the picture decides the aspect ratio */
  display: block;
}
.cms-article__head--hero::after {           /* dark gradient for legibility */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(0, 0, 0, 0.45) 32%,
    rgba(0, 0, 0, 0) 62%);
}
.cms-article__hero {                        /* overlay pinned to the lower-left */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--sp-4);
}
.cms-article__head--hero .cms-article__title { color: #fff; }
.cms-article__head--hero .cms-article__byline { color: rgba(255, 255, 255, 0.85); }

/* Mobile: stack the cover, headline, and byline vertically — the dark-gradient
   overlay is unreadable on small screens (especially Android). The image keeps
   its rounded corners and natural aspect ratio; title + date sit on the page
   background below it, in normal ink colors. Desktop layout unchanged. */
@media (max-width: 768px) {
  .cms-article__head--hero {
    border-radius: 0;
    overflow: visible;
    isolation: auto;
  }
  .cms-article__head--hero::after { content: none; }
  .cms-article__head--hero .cms-article__cover {
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .cms-article__hero {
    position: static;
    padding: var(--sp-3) 0 0;
  }
  .cms-article__head--hero .cms-article__title { color: var(--c-ink); }
  .cms-article__head--hero .cms-article__byline { color: var(--c-ink-2); }
}

/* Closing CTA — appended after a post body (lean: one line + one button). */
.cms-article__cta {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}
.cms-article__cta p { color: var(--c-ink-2); margin: 0 0 var(--sp-3); }

.cms-job-detail__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  margin-top: var(--sp-3);
}
.cms-job-detail__cta { margin-top: var(--sp-5); }

/* Job post body: stacked sections (About PITCO, The Role, Requirements, What
   We Offer, How to Apply). The role fields are authored; the rest are fixed. */
.cms-job-detail__body > .cms-job-section + .cms-job-section {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}
.cms-job-section__title {
  font-size: var(--t-h3);
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
}
.cms-job-section p { margin: 0 0 var(--sp-3); }
.cms-job-section p:last-child { margin-bottom: 0; }
/* Job-post lists (Requirements + What We Offer) render as real bullet points.
   A flex layout would suppress the markers, so this stays a normal list. */
.cms-job-list {
  margin: 0;
  padding-left: 1.4em;
  list-style: disc;
}
.cms-job-list li + li { margin-top: 0.4em; }
.cms-job-applylist { margin: 0 0 var(--sp-4); padding-left: 1.4em; }
.cms-job-applylist li { margin-top: 0.3em; }
/* About PITCO leads the post — give it a touch more presence. */
.cms-job-about p { color: var(--c-ink); }

/* Not-found / error */
.cms-notfound { text-align: center; padding-block: var(--sp-6); }
.cms-notfound__title { font-size: var(--t-h2); }
.cms-notfound__msg { color: var(--c-ink-2); margin-top: var(--sp-3); }

/* ------------------------------------------------------------------ */
/* render-blocks body typography (cms-* classes from render-blocks.js) */
/* ------------------------------------------------------------------ */
.cms-article__body { font-size: var(--t-body); line-height: 1.65; color: var(--c-ink); }
/* Inline links must read as links (base a{color:inherit} hides them) — accent
   blue, no underline; underline only on hover. */
.cms-article__body a { color: var(--c-accent); text-decoration: none; }
.cms-article__body a:hover { color: var(--c-accent-hover); text-decoration: underline; }
/* A linked body image: keep it block-level and underline-free (it wraps an img). */
.cms-article__body a.cms-figure__link { display: block; text-decoration: none; }
/* Reset UA <p> margins BEFORE the owl rule below, so the owl's margin-top wins
   (equal specificity → source order decides) and consecutive paragraphs get the
   --sp-3 gap. Previously this sat after the owl rule and silently zeroed it. */
.cms-paragraph { margin: 0; }
.cms-article__body > * + * { margin-top: var(--sp-3); }
.cms-heading { line-height: 1.2; margin-top: var(--sp-5); }
.cms-heading--2 { font-size: var(--t-h2); }
.cms-heading--3 { font-size: var(--t-h3); }
.cms-heading--4 { font-size: 1.25rem; }
.cms-list { padding-left: 1.4em; }
.cms-list__item { margin-top: 0.4em; }
.cms-quote {
  margin: var(--sp-4) 0;
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-accent);
}
.cms-quote--right { text-align: right; border-left: 0; border-right: 3px solid var(--c-accent); padding-right: var(--sp-3); }
.cms-quote blockquote { margin: 0; font-size: var(--t-lead); }
.cms-quote__caption { color: var(--c-ink-2); margin-top: var(--sp-1); font-size: 0.95rem; }
.cms-figure { margin: var(--sp-4) 0; }
.cms-figure img { width: 100%; height: auto; border-radius: var(--r-md); display: block; }
.cms-figure--border img { border: 1px solid var(--c-line); }
.cms-figure__caption,
.cms-embed__caption { color: var(--c-ink-2); font-size: 0.95rem; margin-top: var(--sp-1); text-align: center; }
.cms-embed { margin: var(--sp-4) 0; }
.cms-embed__wrapper { position: relative; width: 100%; border-radius: var(--r-md); overflow: hidden; }
.cms-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cms-table-wrapper { overflow-x: auto; margin: var(--sp-4) 0; }
.cms-table { width: 100%; border-collapse: collapse; }
.cms-table__cell { border: 1px solid var(--c-line); padding: 0.6rem 0.9rem; text-align: left; }
.cms-table__header-row .cms-table__cell { background: var(--c-bg-alt); font-weight: 600; }
.cms-delimiter { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-5) auto; width: 40%; }
.cms-code {
  background: var(--c-bg-dark); color: var(--c-on-dark);
  padding: var(--sp-3); border-radius: var(--r-md);
  overflow-x: auto; font-family: var(--f-mono); font-size: 0.9rem;
}
.cms-checklist { list-style: none; padding-left: 0; }
.cms-checklist__item { position: relative; padding-left: 1.8em; margin-top: 0.4em; }
.cms-checklist__item::before {
  content: "☐"; position: absolute; left: 0; color: var(--c-ink-3);
}
.cms-checklist__item--checked::before { content: "☑"; color: var(--c-accent); }
.cms-warning {
  background: var(--c-bg-alt);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin: var(--sp-4) 0;
}
.cms-warning__title { font-weight: 600; margin: 0; }
.cms-warning__message { margin: 0.4em 0 0; color: var(--c-ink-2); }