/* =============================================================================
   ecosystem.css  —  Shared styles for the four "ETA Ecosystem" pages
   -----------------------------------------------------------------------------
   Loaded by executive-education.html, meetup.html, university-courses.html AND
   resources.html. These pages share the same shape (opening → body → a
   directory/detail list → hand-off to the sibling pages), so they share ONE
   stylesheet instead of four near-identical ones. Warm "story" palette.

   Background helper classes let each section pick its ground:
     .eco-section--paper  (cream)   .eco-section--white  (off-white)
     .eco-section--ink    (dark)    .eco-section--film   (dark, video behind)
   ============================================================================= */

/* Page background (cream). */
main {
  background: var(--story-paper);
}

/* --------------------------------------------------------------------------
   Opening  (dark hero: eyebrow + headline + lede, optional facts panel)
   -------------------------------------------------------------------------- */

.eco-open {
  padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  color: var(--story-white);
  background: var(--story-ink);
}

/* Headline/lede on the left, facts on the right. */
.eco-open__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: end;
}

/* The uppercase eyebrow label (with a leading dash via ::before). */
.eco-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.4rem;
  color: var(--story-gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The dash before the eyebrow text. */
.eco-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

.eco-open h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.5rem, 6.2vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.eco-open__lede {
  max-width: 48ch;
  margin: 1.75rem 0 0;
  color: rgba(255, 253, 248, 0.72);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.5;
}

/* Facts panel beside the opening. Used for the meetup's standing details. */
.eco-facts {
  margin: 0;
  border-top: 1px solid rgba(255, 253, 248, 0.22);
}

/* Each fact row: label left, value right. */
.eco-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 253, 248, 0.22);
}

/* Fact label. */
.eco-facts dt {
  color: rgba(255, 253, 248, 0.6);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Fact value. */
.eco-facts dd {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Body sections  (choose a background with the modifier classes below)
   -------------------------------------------------------------------------- */

/* Base padding for a body section. */
.eco-section {
  padding: clamp(5rem, 11vw, 8.5rem) 0;
}

/* Background variants. */
.eco-section--paper {
  background: var(--story-paper);
}

.eco-section--white {
  background: var(--story-white);
}

.eco-section--ink {
  color: var(--story-white);
  background: var(--story-ink);
}

/* A section played over footage. The video sits behind everything; the
   section's own children need a stacking context of their own so they are
   not buried by it. */
.eco-section--film {
  position: relative;
  isolation: isolate;
  color: var(--story-white);
  background: var(--story-ink);
}

/* Lift the section's content above the video. */
.eco-section--film > .container {
  position: relative;
  z-index: 1;
}

/* The video layer that fills the film section. */
.eco-film {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.eco-film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark enough that white type holds over any frame of the footage. */
.eco-film__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(17, 17, 15, 0.9), rgba(17, 17, 15, 0.62) 55%, rgba(17, 17, 15, 0.82)),
    rgba(17, 17, 15, 0.25);
}

/* Lighten the head paragraph on the film section. */
.eco-section--film .eco-head p {
  color: rgba(255, 253, 248, 0.72);
}

/* Two-column body: heading on the left, prose on the right. */
.eco-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* Section heading. */
.eco-section h2 {
  margin: 0;
  font-size: clamp(2rem, 3.9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

/* Body paragraphs. */
.eco-body p {
  max-width: 56ch;
  margin: 0 0 1.4rem;
  color: var(--story-muted);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
}

.eco-body p:last-child {
  margin-bottom: 0;
}

/* On a dark section, lighten the body text. */
.eco-section--ink .eco-body p {
  color: rgba(255, 253, 248, 0.72);
}

/* An emphasised lead paragraph. */
.eco-body__lead {
  color: var(--story-ink) !important;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4 !important;
}

.eco-section--ink .eco-body__lead {
  color: var(--story-white) !important;
}

/* Inline links in body copy, distinct from the quiet-link buttons below. */
.eco-body p a {
  color: var(--story-gold-deep);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.eco-body p a:hover,
.eco-body p a:focus-visible {
  text-decoration: none;
}

.eco-section--ink .eco-body p a {
  color: var(--story-gold);
}

/* The "quiet link" button spacing/recolour inside a body. */
.eco-body .quiet-link {
  margin-top: 1.5rem;
}

.eco-section--ink .eco-body .quiet-link {
  color: var(--story-white);
  border-color: rgba(255, 253, 248, 0.35);
}

.eco-section--ink .eco-body .quiet-link:hover,
.eco-section--ink .eco-body .quiet-link:focus-visible {
  color: var(--story-gold);
  border-color: var(--story-gold);
}

/* --------------------------------------------------------------------------
   Head + list sections (used for the directory and the detail lists)
   -------------------------------------------------------------------------- */

/* A section's heading block. */
.eco-head {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.eco-head p {
  max-width: 54ch;
  margin: 1.1rem 0 0;
  color: var(--story-muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

.eco-section--ink .eco-head p {
  color: rgba(255, 253, 248, 0.68);
}

/* A ledger of terms and definitions, matching the About page's treatment.
   margin-block rather than the shorthand, so .container's auto inline margin
   survives and the ledger stays in the centred column. */
.eco-list {
  margin-block: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--story-line);
}

.eco-section--ink .eco-list {
  border-color: rgba(255, 253, 248, 0.18);
}

/* Inside a scrolly column the ledger has half the width it was drawn for,
   so each entry stacks rather than splitting term from definition. */
.scrolly .eco-item {
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

/* The rail is drawn for paper; on ink it needs the light pairing. */
.eco-section--ink .scrolly__progress {
  background: rgba(255, 253, 248, 0.18);
}

.eco-section--ink .scrolly__progress::after {
  background: var(--story-gold);
}

/* One ledger entry: term on the left, definition on the right. */
.eco-item {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(0.6rem, 5vw, 4rem);
  padding: clamp(1.4rem, 2.5vw, 2rem) 0;
  border-bottom: 1px solid var(--story-line);
}

.eco-section--ink .eco-item {
  border-color: rgba(255, 253, 248, 0.18);
}

/* The term. */
.eco-item h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

/* The definition. */
.eco-item p {
  max-width: 60ch;
  margin: 0;
  color: var(--story-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.eco-section--ink .eco-item p {
  color: rgba(255, 253, 248, 0.7);
}

/* The gold meta line under an entry. */
.eco-item__meta {
  margin-top: 0.75rem !important;
  color: var(--story-gold-deep) !important;
  font-size: 0.9rem !important;
}

.eco-section--ink .eco-item__meta {
  color: var(--story-gold) !important;
}

/* --------------------------------------------------------------------------
   University directory
   Logo beside name and link, so the row is scannable by mark or by name.
   -------------------------------------------------------------------------- */

/* The list of universities. */
.uni-list {
  margin-block: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--story-line);
}

/* Over footage the rows sit on a paper panel rather than on the film itself:
   the supplied marks are dark artwork on transparency and would disappear
   against the video. */
.uni-list--panel {
  position: relative;
  z-index: 1;
  padding: clamp(0.5rem, 2vw, 1.25rem) clamp(1.25rem, 3vw, 2.75rem);
  color: var(--story-ink);
  /* Just sheer enough to read the skyline through — the blur keeps the
     footage from competing with the type. */
  background: rgba(255, 253, 248, 0.88);
  backdrop-filter: blur(10px);
  border-top: 0;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(17, 17, 15, 0.36);
}

/* The panel's own edge closes the list — the last row's rule would otherwise
   float just above it. */
.uni-list--panel .uni:last-child a {
  border-bottom: 0;
}

/* Each university row: [logo | name/note | arrow]. */
.uni a {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  color: var(--story-ink);
  border-bottom: 1px solid var(--story-line);
  text-decoration: none;
  transition: color 260ms var(--ease-out);
}

/* Row hover. */
.uni a:hover,
.uni a:focus-visible {
  color: var(--story-gold-deep);
}

/* Only the text travels on hover. Shifting the whole row moved the mark and
   the arrow with it, which read as the row falling out of alignment with the
   ones above and below. */
.uni__text {
  transition: transform 260ms var(--ease-out);
}

.uni a:hover .uni__text,
.uni a:focus-visible .uni__text {
  transform: translateX(0.4rem);
}

/* Each supplied mark is a 2000x2000 canvas with the artwork centred inside a
   great deal of empty space, and the artwork's proportions differ wildly —
   the CU wordmark is roughly 6:1, the Regis crest is square. object-fit
   therefore sizes against the empty canvas rather than the logo, so every
   mark needs scaling up, by a different amount.

   Each scale below is the largest that still fits the artwork inside the box
   on both axes, derived from the measured content bounds of each file. They
   crop the padding and nothing else. If a mark is replaced, its scale has to
   be recalculated — the box keeps its 7:3 ratio at every breakpoint so one
   set of values holds throughout. */
.uni__mark {
  position: relative;
  width: 7rem;
  height: 3rem;
  overflow: hidden;
}

/* The image is taken out of flow rather than sized with percentages. A
   percentage height inside an auto-sized box resolves against an indefinite
   height and is dropped, at which point the image's own 1:1 aspect ratio
   inflates the wrapper into a square and the scales below stop meaning
   anything. Absolute positioning gives it the 7:3 box outright. */
.uni__mark picture {
  position: absolute;
  inset: 0;
  display: block;
}

/* Scale each mark up by its per-brand --mark-scale (set just below). */
.uni__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--mark-scale, 4));
}

/* A section can carry one of the same marks above its heading. The 7:3 box
   the scales are calibrated against has to be preserved, so the width and
   height move together. */
.eco-mark {
  display: block;
  width: 9rem;
  height: 3.857rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  margin-left: -0.35rem;
}

/* Per-university zoom values (see the long note above before changing these). */
.uni__mark--cu { --mark-scale: 4; }
.uni__mark--csu { --mark-scale: 4.7; }
.uni__mark--mines { --mark-scale: 4.2; }
.uni__mark--msu { --mark-scale: 4.4; }
.uni__mark--regis { --mark-scale: 2.7; }
.uni__mark--du { --mark-scale: 5.8; }

/* The name+note text block in a university row. */
.uni__text {
  display: grid;
  gap: 0.2rem;
}

/* University name. */
.uni__name {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

/* University note. */
.uni__note {
  color: var(--story-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* The row's arrow glyph. */
.uni__arrow {
  transition: transform 260ms var(--ease-out);
}

.uni a:hover .uni__arrow,
.uni a:focus-visible .uni__arrow {
  transform: translate(0.2rem, -0.2rem);
}

/* Inside the muted meta line, a link still has to read as one. */
.eco-item__meta a {
  color: inherit;
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.eco-item__meta a:hover,
.eco-item__meta a:focus-visible {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   The other strands — cross-navigation between the sibling pages
   -------------------------------------------------------------------------- */

.strands {
  padding: clamp(4.5rem, 10vw, 7.5rem) 0;
  background: var(--story-white);
}

.strands h2 {
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Grid of sibling-page cards (1px gap + background makes hairline dividers). */
.strands__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--story-line);
  border: 1px solid var(--story-line);
}

/* The resources page links to three siblings rather than two. */
.strands__list--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Each sibling-page card (the whole card is the link). */
.strand a {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--story-ink);
  background: var(--story-white);
  text-decoration: none;
  transition: color 260ms var(--ease-out), background 260ms var(--ease-out);
}

.strand a:hover,
.strand a:focus-visible {
  color: var(--story-gold-deep);
  background: var(--story-paper);
}

/* Card title. */
.strand__name {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

/* Card note. */
.strand__note {
  color: var(--story-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* The card's arrow mark, pinned to the bottom. */
.strand__mark {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--story-gold-deep);
  font-weight: 700;
  transition: transform 260ms var(--ease-out);
}

.strand a:hover .strand__mark,
.strand a:focus-visible .strand__mark {
  transform: translateX(0.35rem);
}

/* --------------------------------------------------------------------------
   Close  (dark closing call-to-action)
   -------------------------------------------------------------------------- */

.eco-close {
  padding: clamp(4rem, 9vw, 7rem) 0;
  color: var(--story-white);
  background: var(--story-ink);
}

.eco-close__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.eco-close h2 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.eco-close p {
  max-width: 52ch;
  margin: 1rem 0 0;
  color: rgba(255, 253, 248, 0.72);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Narrow: stack the two-column layouts and the strands grid. */
@media (max-width: 900px) {
  .eco-open__inner,
  .eco-grid {
    grid-template-columns: 1fr;
  }

  .eco-grid h2 {
    margin-bottom: 0.5rem;
  }

  .eco-item {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .strands__list {
    grid-template-columns: 1fr;
  }
}

/* Phone: move the university mark above the name; full-width close button. */
@media (max-width: 700px) {
  /* The mark moves above the name rather than beside it — at this width a
     7rem column would leave the university names too cramped to read.
     The box keeps its 7:3 ratio so the scales above still hold. */
  .uni a {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
  }

  .uni__mark {
    width: 5.25rem;
    height: 2.25rem;
    grid-column: 1 / -1;
    justify-self: start;
  }

  .eco-close__inner {
    align-items: flex-start;
  }

  /* The button's wrapper is a flex item, so it has to be told to fill the
     row before width:100% on the button itself means anything. */
  .eco-close__inner > * {
    flex: 1 1 100%;
  }

  .eco-close .cta {
    width: 100%;
    justify-content: center;
  }
}