/* ── join us — Swiss ─────────────────────────────────────────────────────
   Loaded/enabled by the router (index.html #css-join).

   Same system as every other route: whitespace and alignment do the
   structuring. No card has a border, fill, radius or shadow; nothing is drawn
   between rows. See DESIGN.md → The Swiss Grid Rule and
   The Statement Heading Rule.
────────────────────────────────────────────────────────────────────────── */

.join-header, .join-intro-section, .tracks-section, .employers-section, .join-close {
  position: relative;
  overflow: hidden;
  background: var(--off-white);

  /* spacing ladder — all vertical rhythm on this page comes from these */
  --gutter: 24px;
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 96px; --s7: 144px;
}
.join-header {
  padding: var(--s6) 0 var(--s5);
  /* campus sign photo, faded into the canvas on the left: same treatment as the other page heroes */
  background:
    linear-gradient(90deg, rgba(253,250,248,.96) 0%, rgba(253,250,248,.82) 38%, rgba(253,250,248,.15) 75%),
    url(/assets/join/header_img/University-of-Calgary.avif) center 75% / cover no-repeat,
    var(--off-white);
}
/* the hero's lede: centred on the same axis as the section heads below it,
   and sitting closer to the hero (s5) than to the first section (s6) so it
   reads as the hero's continuation rather than a row adrift between the two */
.join-intro-section { padding: var(--s5) 0 0; }
.join-intro {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s3); text-align: center;
}
.join-intro p {
  color: var(--text-mid); font-size: 1rem; line-height: 1.75;
  font-weight: 300; text-wrap: pretty; max-width: 64ch; margin: 0;
}
.tracks-section  { padding: var(--s6) 0 var(--s5); }
.employers-section { padding: var(--s5) 0; }
.join-close      { padding: var(--s5) 0 var(--s6); }

/* the hairline module field — the one decorative layer Swiss keeps */
.join-grid-bg {
  position: absolute; inset: 0; z-index: 0; opacity: .28; pointer-events: none;
  background-image:
    linear-gradient(rgba(180, 140, 170, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 140, 170, .16) 1px, transparent 1px);
  background-size: 64px 64px;
}
/* a whisper of the module field in every section below the hero, unbroken
   from the hero's bottom edge down */
.join-intro-section .join-grid-bg,
.tracks-section .join-grid-bg,
.employers-section .join-grid-bg,
.join-close .join-grid-bg { opacity: .16; }

.inner {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
}

/* label — the single small-type role */
.join-label {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  font-weight: 600;
  text-transform: uppercase;
}

/* ── STATEMENT HEADINGS ── display type is reserved for the site's front
   door, so an inside page opens at h1 and its section heads at h2 ── */
.join-header h1 {
  font-family: 'DM Serif Display', serif;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1); letter-spacing: var(--ls-h1);
  color: var(--text-dark);
  margin-bottom: 0;
  text-wrap: balance;
}
.join-header h1 em { font-style: italic; color: var(--text-dark); }
.section-head h2 {
  font-family: 'DM Serif Display', serif;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  color: var(--text-dark);
  margin-bottom: var(--s3);
  text-wrap: balance;
}

/* section headers stand alone, centred over the section, with the supporting
   copy centred under the heading — same as the About route's section heads.
   The row gap sets the rhythm, so neither child keeps its own margin. */
.section-head.swiss-grid { align-items: start; row-gap: var(--s4); }
.section-head > h2 { grid-column: 1 / -1; text-align: center; margin-bottom: 0; }
.section-head > p { grid-column: 1 / -1; justify-self: center; max-width: 64ch; text-align: center; margin-bottom: 0; }
.section-head h2 em { font-style: italic; color: var(--text-dark); }

.section-head p {
  color: var(--text-mid); font-size: 1rem; line-height: 1.75;
  font-weight: 300; text-wrap: pretty;
}
.section-head { margin-bottom: var(--s5); }
.tracks-section .section-head { margin-bottom: 0; }

/* ── PRIMARY CTA ── a text link in the accent, no button chrome ── */
.join-cta {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--pink-700); font-weight: 600; font-size: .95rem;
  text-decoration: none;
  transition: opacity .2s;
}
.join-cta:hover { opacity: .65; }
.join-cta:focus-visible { outline: 2px solid var(--pink-700); outline-offset: 3px; }

.join-cta:hover .arrow i { transform: translateX(-100%); }

/* ── EMPLOYERS ── a bare logo field. Every mark is pre-normalised to the same
   optical area and centred in an identical 180x60 box, so no logo outweighs
   another. Nothing is drawn between them. A wrapping row rather than a grid,
   so a short last row centres under the full ones instead of hanging left. ── */
.employers {
  --cols: 4;
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: var(--gutter);
  row-gap: var(--s5);
  align-items: center;
}
.employer {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols));
  display: flex; justify-content: center;
}
.employer img {
  width: 180px; height: 60px;
  object-fit: contain;
  display: block;
}

/* ── CLOSING ── bare grid, no rules between the figures ── */
.join-close-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: var(--s4);
  align-items: end;
}
.join-stat { grid-column: span 3; display: flex; flex-direction: column; gap: var(--s1); }
.join-num {
  font-family: 'DM Serif Display', serif;
  font-size: 2.4rem; line-height: 1; letter-spacing: -.02em;
  color: var(--pink-600);
}
.join-label { color: var(--text-mid); }

.join-close-cta {
  grid-column: 10 / 13;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
}
.join-close-cta p { color: var(--text-mid); font-size: .9375rem; line-height: 1.7; font-weight: 300; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .join-header    { padding: var(--s5) 0 var(--s4); }
  .join-intro-section { padding-top: var(--s4); }
  .tracks-section { padding: var(--s5) 0 var(--s4); }
  .employers-section { padding: var(--s4) 0; }
  .employers { --cols: 3; row-gap: var(--s4); }
  .join-close     { padding: var(--s4) 0 var(--s5); }
  .section-head   { margin-bottom: var(--s4); }
  .join-stat      { grid-column: span 4; }
  .join-close-cta { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .join-stat { grid-column: 1 / -1; }
  .employers { --cols: 2; }
  .employer img { width: 140px; height: 48px; }
}