/* ============================================================================
   HYDRO2050 - PAGE 08, PARTNERS
   ----------------------------------------------------------------------------
   Measured from Paper artboard 847-0, "Page 08, Partners 1440". No 375
   artboard exists, so the mobile layout is derived from the industry family's
   Page 03 artboard, which is the convention DESIGN-NOTES.md records.

   Five partner rows, each an anchor target:
     #adelaide  #monash  #la-trobe  #unsw  #advisory
   Four are the research universities, in the order the client's Research,
   Validation & Scientific Foundation paper lists them, and the header dropdown
   and the footer directory both link to all four. The fifth row is the
   scientific advisory entry, which has no page of its own.

   IT WAS FIVE COMMERCIAL AND RESEARCH PARTNERS until the client's pack of
   10 September 2026: Naias, SAGE Automation, UniSA, AquaFUTURE and Nested
   Ventures, at #naias #sage #unisa #aquaspec #nested. Nothing in this
   stylesheet depended on which five they were, so the geometry is unchanged.
   ========================================================================== */

.p08-open { padding-top: var(--rhythm-open); position: relative; isolation: isolate; overflow-x: clip; }
/* The content lift, which this section was the only art-carrying section on
   the site to be missing. `.art` is position: absolute with z-index 0, and a
   positioned element with z-index 0 paints AFTER every non-positioned block in
   the same stacking context. So the wave painted over this section's own
   eyebrow, its h1 and its deck. It was invisible in review because the layer
   is 0.26 opacity multiplied over navy type, which darkens the type rather
   than washing it out, and no tool asserted paint order. audit.mjs now does. */
.p08-open > .wrap { position: relative; z-index: var(--z-content); }
.p08-open__eyebrow { margin-bottom: 28px; }
.p08-open__title { max-width: 900px; margin-bottom: 28px; }
.p08-open__deck  { max-width: 680px; }

/* ===== THE FIVE ========================================================== */

.p08-list {
  padding-top: var(--rhythm-open);
  padding-bottom: var(--rhythm-section);
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}
.p08-list > .wrap { position: relative; z-index: var(--z-content); }

.partner {
  border-top: 1px solid var(--rule);
  padding-top: 44px;
  padding-bottom: 52px;
  display: grid;
  /* 376 is the artboard's identity column against its 1312, held as that
     fraction rather than as a pixel so it takes its share of the width the
     row gains instead of standing still and handing all of it to the copy.
     The third track keeps the copy at a 680 reading measure and is meant to
     be empty; that is a measure cap, not a void. */
  grid-template-columns: minmax(280px, 28.659%) minmax(0, 680px) minmax(0, 1fr);
  column-gap: 48px;
  /* No scroll-margin-top here, for the reason given in legal.css: each of
     these carries an id inside #main, so layout.css lands them off --header-h
     rather than off a literal that has to be kept in step by hand. */
}
.partner:last-child { border-bottom: 1px solid var(--rule); }

.partner__id { display: flex; flex-direction: column; gap: 10px; }
.partner__name {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 42px;
  letter-spacing: -0.02em;
  font-weight: var(--wt-medium);
  color: var(--brand-navy);
}
.partner__copy { display: flex; flex-direction: column; gap: 22px; }
.partner__body { font-size: 18px; line-height: 30px; color: var(--ink); }

/* The one figure on the page. Paper sets it in Archivo 100, which is not a
   Hydro2050 brand face; Montserrat 300 carries the hairline weight at the
   measured 48 / 52 and -0.05em. */
.partner .stats { gap: 16px; align-items: baseline; }
.partner .stat__value { font-size: 48px; line-height: 52px; letter-spacing: -0.05em; }
.partner .stat__label {
  max-width: 420px;
  /* The dot field runs behind this caption and drops --ink-muted to 4.22:1
     against its darkest pixel. See the token's own note in tokens.css. */
  color: var(--ink-muted-art);
}

.partner__note {
  background: var(--surface);
  border-radius: 8px;
  padding: 20px 24px;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink);
}

/* ===== MOBILE ============================================================
   Derived from the Page 03 artboard: one column, the 20px gutter, edge to
   edge photography with its height capped, no decorative artwork behind body
   copy, and the 2px --brand-azure row rule in place of the 1px --rule. */

@media (max-width: 899px) {
  .p08-open { padding-top: 32px; }
  .p08-open__eyebrow { margin-bottom: 14px; }
  .p08-open__title { margin-bottom: 14px; }
  .p08-list { padding-top: 0; padding-bottom: 0; }

  .partner {
    display: block;
    border-top: 2px solid var(--brand-azure);
    padding-top: 18px;
    padding-bottom: 0;
    margin-top: 44px;
  }
  .partner:first-child { margin-top: 48px; }
  .partner:last-child { border-bottom: 0; }
  .partner__id { gap: 6px; margin-bottom: 12px; }
  .partner__name { font-size: 22px; line-height: 28px; }
  .partner__copy { gap: 14px; }
  .partner__body { font-size: 17px; line-height: 26px; }
  .partner__note { border-radius: 0; padding: 16px 18px; font-size: 15px; line-height: 23px; }
  .partner .stat__value { font-size: 34px; line-height: 42px; letter-spacing: -0.03em; font-weight: var(--wt-medium); }
  .partner .stat__label { font-size: 13px; line-height: 20px; max-width: none; }
  .partner .stats { flex-direction: column; gap: 4px; }

  .p08-list + .band { margin-top: 56px; }
}

/* ===== THE ROWS LINK THROUGH ==============================================
   Client: "the rows needs to have hover and be clickable to direct into the
   given page for the partner."

   Same stretched-link pattern as the industry tiles, the laboratory cards and
   the footer enquiry card: ONE real <a> per row, dropped to position: static
   so its ::after resolves against `.partner`, which becomes the positioned
   ancestor and is therefore the hit area. No overlay anchor over the row and
   no click handler on the <article>, so keyboard tabbing, middle click to open
   in a new tab, and copy link address all keep working, and each row still has
   exactly one accessible name.

   The five ids stay on the articles. Nothing links to partners.html#anchor
   today, but the header dropdown and the footer directory are written against
   them in the file header above, and removing them buys nothing. */

.partner { position: relative; isolation: isolate; cursor: pointer; }

/* THE ROW TINT, the same recipe as `.lab::before` on the home page, at 18 per
   cent rather than the artboard's 20.

   Two departures from `.lab`, both because a partner row is not a column card.

   First the strength. `.lab` is roughly 400 wide; a partner row is the full
   1312 and about three times the area, and the same wash over three times the
   field reads stronger than it does inside a card. 18 keeps it clearly a state
   without turning a third of the page cyan. It stays well clear of --surface
   (#EBF7FD), which matters because `.partner__note` is filled with exactly
   that token: at 20 or at 18 the note still reads as a card sitting ON the
   hovered row, where a --surface row tint would have swallowed it.

   Second the paint order. `.lab::before` sits at --z-art, which is 0, and a
   positioned element at z-index 0 paints AFTER the static in-flow blocks
   beside it, so that tint is over its own type rather than under it. It
   survives there only because it is translucent. This one is at -1 inside the
   row's own `isolation: isolate`, which is the fix `.tile` already carries in
   home.css: -1 is above the row's own ground and the section's dot field, and
   below every line of type in it.

   sRGB first so a browser without color-mix still gets a tint rather than
   dropping the declaration and losing the whole state. */
.partner::before {
  content: '';
  position: absolute;
  /* Flush at the top so the tint starts under the row rule and leaves the rule
     itself alone, 20px of bleed either side so it reads as a band a little
     wider than the text, and held 8px off the bottom so it never touches the
     next row's rule. `.p08-list` is overflow-x: clip, so the bleed cannot
     produce a scrollbar. */
  inset: 0 -20px 8px;
  z-index: -1;
  border-radius: 20px;
  background-image: linear-gradient(180deg, rgba(0,160,224,0.18), rgba(35,225,220,0.18));
  background-image: linear-gradient(in oklab,
    color-mix(in oklab, var(--brand-azure) 18%, transparent),
    color-mix(in oklab, var(--brand-turq) 18%, transparent));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.partner:hover::before,
.partner:focus-within::before { opacity: 1; }

/* The one grey on the row firms up with the tint, same as the laboratory
   cards. --ink-muted-art is chosen for the dot field underneath it and has no
   slack to spend, so it steps to --ink for the length of the state. The name
   is --brand-navy and the body is --ink; both clear the wash on their own. */
.partner .stat__label { transition: color var(--dur-hover) var(--ease-out); }
.partner:hover .stat__label,
.partner:focus-within .stat__label { color: var(--ink); }

/* Drawn like `.lab__link`: a real 44px box around 22.5px of leading so the
   element itself clears the tap floor, not just its hit area. */
.partner__link {
  position: static;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  font-size: 15px;
  font-weight: var(--wt-medium);
  line-height: 22.5px;
  color: var(--brand-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-hover) var(--ease-out);
}
.partner:hover .partner__link { color: var(--brand-blue-cta); }

/* The hit area. inset: 0 covers the row itself rather than `.lab__link`'s
   -10px, because here the containing block IS the whole clickable target and
   there is nothing outside it to reach for. z-index 3 puts it over the tint. */
.partner__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
/* The keyboard ring goes round the whole row, not round the small text link,
   because the whole row is what activating the link operates. Same shape as
   `.lab__link:focus-visible::after`, 3px at a negative offset with the tint's
   own radius, and ONE DELIBERATE DEPARTURE: the colour.

   `.lab__link` draws this ring in --brand-turq. base.css measures turquoise at
   1.63:1 on white and restricts it to dark grounds for exactly that reason,
   and a partner row is a light ground even with the hover tint under it, which
   only lifts it further toward white. A ring nobody can see is not a ring, and
   this project holds WCAG AA as a hard requirement. So the row ring is --focus,
   the site's own indicator colour at 4.94:1 on page, which is also what the
   2px ring base.css already draws on the <a> itself uses: the two then read as
   one indicator, the small ring on the words and the large one showing how far
   the target actually reaches, rather than as two unrelated colours. */
.partner__link:focus-visible::after {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
  border-radius: 20px;
}

@media (max-width: 899px) {
  /* The row is display: block here with padding-bottom: 0 and a 20px gutter,
     so the tint takes a smaller bleed and a little breathing room under the
     copy instead of the desktop row's 8px off a 52px pad. */
  .partner::before { inset: 0 -10px -14px; border-radius: 12px; }
  .partner__link { margin-top: 2px; }
}

/* ===== THE MARK THAT BLEEDS OFF THE ROW ==================================
   Client instruction of 18 September 2026, "have the uni logos in the rows
   bleed". Read as a bleed in the printer's sense: the mark is set large and
   runs off the right page edge, cropped by the edge rather than sized to sit
   inside it. It is not an inline logo beside the name.

   WHERE IT SITS. The row is three tracks and the third one is empty by
   design, a measure cap that keeps the copy at 680. The mark is dropped into
   that track as a fourth child, so its left edge starts exactly where the
   reading measure ends and it never crosses a line of type. Everything to the
   right of that, the rest of the track, the page gutter, and then the edge, is
   what the reader sees of it; the remainder is cut by `.p08-list`'s own
   `overflow-x: clip`, which is already there for the hover tint's 20px bleed
   and needs nothing added.

   The wrapper carries no size of its own. It stretches to the row, the mark is
   absolutely positioned inside it, so a 550px lockup in a 160px track cannot
   widen the row, cannot lengthen it, and cannot reorder the grid.

   HOW MUCH SHOWS IS NOT EQUALISED, AND THAT IS THE POINT. Setting a common
   visible fraction would mean a common width, and a common width across
   aspects from 2.36 to 4.19 puts Adelaide at half La Trobe's ink. The four
   are set to a common height, so they carry equal weight down the page, and
   each is cut wherever the page edge falls: Adelaide at about two fifths
   shown, UNSW at about seven tenths. All four are symbol-left lockups, so what
   survives the crop is the crest and the head of the name in every case, which
   is what makes the treatment read as one device rather than four accidents.

   OPACITY, NOT A RECOLOUR. These are four third-party trade marks in four
   brand colours, and at full strength on a white page they would compete with
   the row's own heading and turn the list into a colour chart. Recolouring or
   greying them is a modification of someone else's mark; dropping the layer's
   opacity is not, and it is what puts them behind the type where a watermark
   belongs. -2 rather than -1 so the row's hover tint washes over the mark as
   it does over the ground, and `.partner`'s `isolation: isolate` keeps both
   negatives inside the row. */

.partner__mark {
  --pm-h: clamp(104px, 10.2778vw, 148px);  /* 104 at 1012 and below, 148 at 1440 */
  grid-column: 3;
  position: relative;
  z-index: -2;
  opacity: 0.18;
  pointer-events: none;
}
.partner__mark img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  width: auto;
  height: var(--pm-h);
  max-width: none;
}
/* The same optical correction the opening band carries, and for the same
   reason: a bounding box is not an ink height. */
.partner__mark--adelaide img { height: calc(var(--pm-h) * 0.86); }
.partner__mark--monash img   { height: calc(var(--pm-h) * 0.96); }
.partner__mark--la-trobe img { height: calc(var(--pm-h) * 1.00); }
.partner__mark--unsw img     { height: calc(var(--pm-h) * 0.94); }

@media (max-width: 899px) {
  /* THE MARK COMES OUT FROM BEHIND THE TYPE AT 899.

     The row is one column down here, so there is no empty third track to bleed
     out of and no column of white beside the copy. A watermark placed the
     desktop way lands on the eyebrow, which is 13px of azure small caps and
     the smallest type in the row, and this file's own mobile note already
     forbids that: "no decorative artwork behind body copy", taken from the
     Page 03 artboard.

     So the mark stops being a watermark and becomes an object. It is lifted to
     the head of the row with `order: -1`, set at full strength, and pushed far
     enough past the gutter that the page edge takes a real bite out of it, a
     little under a quarter of Adelaide and rather more of the wider crops. It
     is the same device, cut by the same edge; what changes is that it sits
     above the type instead of under it.

     `order` needs a flex container, which is what turns `.partner` from block
     to flex here. Nothing else in the row depends on block layout: the three
     children are already stacked, and their own margins are unchanged. */
  .partner { display: flex; flex-direction: column; }
  .partner__mark {
    order: -1;
    position: static;
    z-index: auto;
    opacity: 1;
    height: clamp(64px, 20.8vw, 92px);
    margin-bottom: 20px;
    /* Past the gutter, then past the edge. `.p08-list` is `overflow-x: clip`,
       so the overhang is cut rather than scrolled to. */
    margin-right: calc(-1 * var(--gutter) - 56px);
    display: flex;
    justify-content: flex-end;
  }
  .partner__mark img {
    position: static;
    transform: none;
    height: 100%;
    width: auto;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner::before,
  .partner .stat__label,
  .partner__link { transition: none; }
}