/* ==========================================================================
   /partnership/ - page-scoped layout.

   Loads after site.css. Every colour, face, size, radius and gap here comes
   from the tokens in that sheet; this file only carries what is specific to
   this one page, so the shared stylesheet does not grow a partnership branch.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero credit
   The opening photograph is FRA's own, so the credit sits on the photograph
   rather than in a caption three sections further down. Right-aligned to the
   same 1360 grid the hero copy uses.
   -------------------------------------------------------------------------- */
.pship-credit {
  position: absolute;
  z-index: 2;
  bottom: 18px;
  right: max(var(--space-gutter), calc(50vw - var(--page-max) / 2));
}

/* --------------------------------------------------------------------------
   The joint statement
   FRA and DREAM describing the partnership in their own words, so it is set
   as a quotation and not as body copy. The rule carries the glacier accent
   down the left edge the way the mission quotes do inside the panels.
   -------------------------------------------------------------------------- */
.pship-quote {
  margin: 0;
  max-width: 900px;
  border-left: 3px solid var(--color-glacier);
  padding-left: clamp(20px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pship-quote blockquote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pship-quote__lead {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 29px);
  line-height: 1.4;
  color: var(--color-stone-bright);
  text-wrap: pretty;
}
.pship-quote__rest {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.pship-quote figcaption {
  font-family: var(--font-data);
  font-size: var(--text-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-mono-faint);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Partner panels
   Each organisation gets the same frame so neither reads as the senior one.
   The only difference is a hairline of the org's own colour along the top
   edge, which is decoration: nothing in the panel depends on reading it.
   -------------------------------------------------------------------------- */
.pship-partner {
  position: relative;
  overflow: hidden;
  gap: 20px;
}
.pship-partner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pship-accent, var(--color-glacier));
}
.pship-partner__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pship-partner__name {
  font-size: var(--text-h3);
  color: var(--color-stone-bright);
}
.pship-partner__mission {
  margin: 0;
  border-left: 2px solid rgba(237, 233, 224, .2);
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-tertiary);
}
.pship-partner__role {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.pship-partner__block {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
/* The programme lists stay lists for a screen reader and become chips for
   everyone else. Seven bulleted lines each made the panels read as a form. */
ul.chip-row {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The two panels are equal-height columns and DREAM's mission runs longer, so
   pinning the buttons to the bottom of both left a hole in the middle of the
   FRA panel. They follow their own content instead, under a hairline that
   reads as the foot of the panel. */
.pship-partner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid rgba(237, 233, 224, .12);
}

/* --------------------------------------------------------------------------
   Photographs
   The column count is set from the photograph count in the page, so a short
   set never strands one picture on a row by itself. `.is-wide` is the escape
   hatch for a count that divides into nothing: the last frame spans two
   columns and reads as a deliberate wide shot rather than a hole in the grid.
   -------------------------------------------------------------------------- */
.gallery--shots {
  grid-template-columns: repeat(var(--gallery-cols, 3), minmax(0, 1fr));
  gap: 22px;
}
.gallery--shots figure { gap: 10px; }
.gallery--shots img {
  /* Landscape, not the square the site default uses: two of these are 4:3
     originals and the third is a phone portrait that keeps its subject in
     the middle band. */
  width: 100%;
  /* `height: auto` is doing real work. An <img> carrying width and height
     attributes gets them as presentational hints, and a hinted height is
     still a definite height, so `aspect-ratio` is ignored and the picture
     renders at the attribute's height and the column's width - stretched.
     Author CSS has to hand the height back to `auto` before the ratio can
     take effect. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-media);
}
.gallery--shots .is-wide { grid-column: span 2; }
.gallery--shots .is-wide img { aspect-ratio: 16 / 7; }
.gallery--shots figcaption {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   What the partnership produced
   Four figures, so the grid is four or two and never three: three columns of
   four tiles is the same orphan problem the photographs had.
   -------------------------------------------------------------------------- */
.pship-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-card);
}
.pship-figure {
  padding: 28px 26px;
  gap: 8px;
}
.pship-figure__n {
  font: 700 var(--text-data-lg) var(--font-data);
  letter-spacing: -.02em;
  color: var(--color-glacier-bright);
}
.pship-figure__label { line-height: 1.55; }

/* --------------------------------------------------------------------------
   Support
   -------------------------------------------------------------------------- */
.pship-support {
  gap: 18px;
  justify-content: space-between;
}
.pship-support__title {
  font-size: var(--text-h3);
  color: var(--color-stone-bright);
}
.pship-support__body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--color-text-tertiary);
}
.pship-support__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .pship-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* One column, full width. Any other count on a phone puts two or three
     photographs across a 390px screen, and with three frames a two-column
     grid brings the orphan straight back. */
  .gallery--shots { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .gallery--shots .is-wide { grid-column: span 1; }
  .gallery--shots .is-wide img { aspect-ratio: 4 / 3; }
  /* Below 820 the hero copy returns to normal flow and fills the bottom of
     the frame, so the credit moves to the clear band above it. */
  .pship-credit { top: 14px; bottom: auto; right: var(--space-gutter); }
}

@media (max-width: 560px) {
  .pship-figure { padding: 22px 20px; }
  .pship-figure__n { font-size: 30px; }
}