/**
 * =============================================================================
 * PAGE: Partners (About ▸ Partners)
 * =============================================================================
 * No Figma frame yet: this stylesheet deliberately reuses the About page rhythm
 * (--space-30 section tops, --container-content width, same type scale) so the
 * page looks native today and can be restyled from this one file when the
 * mockup lands. All values from variables.css. BEM naming. Mobile-first.
 * =============================================================================
 */

/* =========================================================================
 * SHARED SECTION SPACING — mirrors .about-mission / .about-background
 * ========================================================================= */
.partners-intro,
.partners-list,
.partners-pubs,
.partners-next {
  padding: var(--space-30) var(--padding-x) 0;
}

.partners-intro__inner,
.partners-list__inner,
.partners-pubs__inner,
.partners-next__inner {
  max-width: var(--container-content);
  margin-inline: auto;
}

.partners-next {
  padding-bottom: var(--space-30);
}

/* =========================================================================
 * INTRO
 * ========================================================================= */
/* Everything is flush left (ferré à gauche), matching the rest of the site.
   Kept as one explicit rule rather than relying on inheritance, so a centred
   heading cannot creep back in via a shared block or a parent's text-align. */
.partners-intro__title,
.partners-list__title,
.partners-pubs__title,
.partners-next__title,
.partners-group__title {
  text-align: left;
}

/* Spacing follows page-about.css, which uses exactly two values:
     16px (--space-8)  → between a title and its OWN body copy (.about-intro__inner gap)
     40px (--space-20) → between a title and the BLOCK it introduces
                         (.about-team-heading__intro margin-top)
   The intro below is the first case; every other section heading is the second. */
.partners-intro__title {
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--color-white);
  margin: 0 0 var(--space-8);
}

.partners-intro__body {
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
  /* 16px, like the uniform gap between .about-intro__title and its paragraphs. */
  margin: 0 0 var(--space-8);
}

.partners-intro__body:last-child {
  margin-bottom: 0;
}

/* =========================================================================
 * PARTNERS LIST
 * ========================================================================= */
/* Headings that introduce a block (grid, list, cards) → 40px below, the gap
   page-about.css puts under .about-team-heading__title. */
.partners-list__title,
.partners-pubs__title,
.partners-next__title {
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--color-white);
  margin: 0 0 var(--space-20);
}

/* Short one-liner under a left-aligned heading: flush left as well, and the
   max-width block starts at the left edge instead of being centred. */
.partners-list__intro {
  font-family: var(--font-inter);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
  max-width: 780px;
  text-align: left;
  /* Same 40px before the block below, so an intro paragraph slots into the
     rhythm without changing the distance the heading already established. */
  margin: 0 0 var(--space-20);
}

/* ---- One group per category ----
   48px between two categories, i.e. more than the 40px a heading puts above its
   own content, so the grouping stays legible as the outer level. */
.partners-group + .partners-group {
  margin-top: var(--space-24);
}

/* A labelled divider rather than a section heading, so it sits tighter (20px)
   than the 40px used under the h2 above. */
.partners-group__title {
  font-family: var(--font-gilroy);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--color-text-accent);
  margin: 0 0 var(--space-10);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-white-15);
}

/* ---- Grid of partner cards ---- */
.partners-grid {
  display: grid;
  /* 320px min keeps a readable text measure for the description; the container
     fits 3 columns, so a long list wraps into tidy rows. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.partners-grid__item {
  display: flex;
}

/* =========================================================================
 * PARTNER CARD
 * -------------------------------------------------------------------------
 * Renders as <a> when the partner has a website, <div> otherwise — hence the
 * display/inherit resets so both tags look identical.
 * ========================================================================= */
.partner-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-6);
  border: 1px solid var(--color-white-10);
  border-radius: var(--radius-lg);
  background: var(--color-white-04);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}

.partner-card--link:hover,
.partner-card--link:focus-visible {
  border-color: var(--color-glass-lime-35);
  background: var(--color-white-10);
  transform: translateY(-2px);
}

/* ---- Logo tile: white plate, because institutional logos are almost always
       dark-on-white and would vanish on the dark page background. ---- */
.partner-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.partner-card__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---- Placeholder: same footprint as a real logo tile, so a partner still
       awaiting its logo does not shift its card out of line with the others.
       Dashed + translucent rather than the white plate, so it reads as "logo
       to come" instead of a broken image. Declared after the base rule to win
       on the background (equal specificity). ---- */
.partner-card__logo--placeholder {
  background: var(--color-white-04);
  border: 1px dashed var(--color-white-20);
}

.partner-card__logo-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  color: var(--color-white-40);
}

.partner-card__logo-icon svg {
  width: 100%;
  height: 100%;
}

.partner-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.partner-card__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-gilroy);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--color-white);
}

.partner-card__arrow {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--color-text-accent);
  transition: transform var(--transition-fast);
}

.partner-card__arrow svg {
  width: 100%;
  height: 100%;
}

.partner-card--link:hover .partner-card__arrow {
  transform: translate(2px, -2px);
}

.partner-card__meta {
  font-family: var(--font-inter);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-accent);
}

.partner-card__desc {
  font-family: var(--font-inter);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
}

/* =========================================================================
 * PUBLICATIONS
 * ========================================================================= */
/* The same .card-blog component the Blog page and "Related posts" use, so a
   publication teaser is visually the same object as any other article teaser.
   .card-blog / .card-blog-grid come from assets/css/blocks/card-blog.css
   (enqueued globally); only the two paper-specific tweaks below live here. */

/* Thumbnails are scans of a paper's first page — portrait A4. `cover` centred
   would frame a band of body text; anchoring to the top shows the title block,
   which is the part worth seeing. */
.partners-pubs .card-blog__image {
  object-position: top center;
}

/* Sits behind the <img>, so it only shows for a paper with no scan: a soft
   glass panel instead of an empty bordered box. */
.partners-pubs .card-blog__media {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.07) 0%, transparent 70%),
    var(--color-white-04);
}

/* Title left, "See all publications" flush right on the same row — mirrors
   .home-uc__header on the Home page. space-between does the right-alignment;
   the gap only comes into play once the row gets tight. */
.partners-pubs__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-20); /* 40px — the gap the title used to own */
}

/* The shared heading rule carries that 40px; the header row owns it now. */
.partners-pubs__header .partners-pubs__title {
  margin-bottom: 0;
}

/* A long title must not squeeze the pill, which has white-space: nowrap. */
.partners-pubs__header .btn {
  flex: 0 0 auto;
}
/* =========================================================================
 * GO FURTHER — Blog + Solutions
 * ========================================================================= */
/* auto-fit rather than a fixed column count: the section ships three cards, but
   an editor can hide any of them by clearing its title, and a fixed 3-column
   grid would then leave a hole where the missing card was. With auto-fit two
   cards spread across two columns and one card fills the row. */
.partners-next__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
}

.next-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8);
  border: 1px solid var(--color-white-10);
  border-radius: var(--radius-xl);
  /* Same flat glass surface as .partner-card — a gradient here read as an
     unintended diagonal band next to those cards. */
  background: var(--color-white-04);
}

/* Banner image, full-bleed to the card edges: the card carries --space-8 of
   padding, so the media cancels it with negative side/top margins and rounds
   only its top corners to sit flush inside the border. align-self overrides the
   card's align-items: flex-start, which would otherwise shrink it to the image
   width. */
.next-card__media {
  align-self: stretch;
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 7;
}

.next-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The title was cramped between the full-bleed banner and the body copy, with
   only the card's 8px flex gap on each side. 12px of its own padding brings that
   to 20px above and below — +12px, a bit more than the 10px minimum asked for,
   because 10px still read as tight against a 24px-tall heading. */
.next-card__title {
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--color-white);
  margin: 0;
  padding: var(--space-6) 0;
}

.next-card__body {
  font-family: var(--font-inter);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-white-70);
  margin: 0;
}

/* Same 12px vertical rule as the title — applied as margin, not padding, so the
   pill keeps its own height instead of growing taller.
   Order matters: margin-block sets both sides, then margin-top:auto overrides the
   top so the buttons still sit at the card bottom and line up across two cards
   with copy of unequal length. */
.next-card__cta {
  margin-block: var(--space-6);
  margin-top: auto;
}

/* =========================================================================
 * RESPONSIVE
 * ========================================================================= */
@media (max-width: 1024px) {
  .partners-intro,
  .partners-list,
  .partners-pubs,
  .partners-next {
    padding-inline: var(--padding-x-md);
  }
}

@media (max-width: 768px) {
  .partners-intro,
  .partners-list,
  .partners-pubs,
  .partners-next {
    padding-inline: var(--padding-x-sm);
    padding-top: var(--space-16);
  }

  .partners-intro__title,
  .partners-list__title,
  .partners-pubs__title,
  .partners-next__title {
    font-size: var(--text-2xl);
  }

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

  /* Narrow screens: title and button stack, button back under the heading —
     same behaviour as .home-uc__header. */
  .partners-pubs__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }

  .partners-next__cards {
    grid-template-columns: 1fr;
  }
}