/* =========================================================================
   Public partner pages - /partners/ and /partners/<slug>/
   =========================================================================

   Its own stylesheet for the same reason trust.css is: these rules serve two
   marketing pages and nothing else, and keeping them out of custom.css means
   the app never downloads or risks them.

   EVERY rule is scoped under `.partner-public`, a class only the two public
   templates put on <main>. The logged-in library at /personas/ shares the
   .partner-card* and .partner-section* vocabulary, so an unscoped rule here
   would silently restyle the app. Nothing below may be de-scoped.

   `--partner-accent` comes from the {{ color_class }} on <main>, so each
   partner's page carries its own colour through the filament, the epithet,
   the quote mark and the closing wash - one attribute, different weather.
   ========================================================================= */

/* The card name is a link on the public library and a heading in the app.
   Keep it looking like the heading it is until the reader reaches for it.
   Element-qualified and scoped, to beat the site's default anchor styling. */
.partner-public a.partner-card__name-text,
.partner-public a.partner-card__name-text:visited {
  text-decoration: none;
  color: var(--cp-ink);
  background-image: none;
}
.partner-public a.partner-card__name-text:hover,
.partner-public a.partner-card__name-text:focus-visible {
  text-decoration: underline;
  color: var(--partner-accent, var(--cp-oxblood));
}

/* --- Detail page: hero --------------------------------------------------- */

.partner-public .partner-hero {
  position: relative;
  overflow: hidden;
  background: var(--cp-ivory);
  border: 1px solid var(--cp-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: 0 0 var(--space-10);
  box-shadow: var(--cp-shadow-md);
  text-align: center;
}

/* Accent filament - the landing deck's tile gesture, in this partner's own
   colour rather than a fixed oxblood. */
.partner-public .partner-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, transparent,
              var(--partner-accent, var(--cp-oxblood)) 50%, transparent);
  z-index: 2;
}

/* Atmosphere: the accent bleeding up from the lower right. The landing
   footer CTA uses the same radial-wash move. */
.partner-public .partner-hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background: radial-gradient(ellipse 55% 95% at 86% 112%,
              var(--partner-accent, var(--cp-oxblood)), transparent 68%);
}
.partner-public .partner-hero > *:not(.partner-hero__wash),
.partner-public .partner-cta > *:not(.partner-hero__wash) {
  position: relative;
  z-index: 1;
}

.partner-public .partner-hero__back {
  display: inline-block;
  font-family: var(--cp-font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--cp-muted);
  text-decoration: none;
  margin: 0 0 var(--space-6);
}
.partner-public .partner-hero__back:hover,
.partner-public .partner-hero__back:focus-visible {
  color: var(--partner-accent, var(--cp-oxblood));
}

/* 5.5rem, not the card's 2.9rem: this is the page's only image, and at card
   size it reads as a favicon. On its own line so a long name cannot squeeze
   it - which is also what removes the mobile risk. */
.partner-public .partner-hero__portrait {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  color: var(--partner-accent, var(--cp-gold-2));
  margin: 0 auto var(--space-5);
}
.partner-public .partner-hero__portrait svg {
  width: 100%;
  height: 100%;
  display: block;
}
.partner-public .partner-hero__portrait .partner-card__monogram {
  font-size: 2rem;
}

.partner-public .partner-hero__name {
  font-family: var(--cp-font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--cp-ink);
  margin: 0 auto var(--space-3);
  max-width: 20ch;
  /* Breaks "Claims & Consistency Partner" on the phrase, not mid-phrase. */
  text-wrap: balance;
}

/* The epithet is the page's accent line - where the partner's colour earns
   its keep. It used to be grey body text. */
.partner-public .partner-hero__tagline {
  font-family: var(--cp-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--partner-accent, var(--cp-oxblood));
  margin: 0 0 var(--space-6);
}

.partner-public .partner-hero__quote {
  position: relative;
  margin: 0 auto;
  padding: 3.6rem 0 0;
  border-top: 1px solid var(--cp-rule);
  font-family: var(--cp-font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--cp-ink);
  max-width: 44rem;
}
.partner-public .partner-hero__quote::before {
  content: "\201C";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: var(--space-4);
  font-family: var(--cp-font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--partner-accent, var(--cp-oxblood));
  opacity: 0.3;
  pointer-events: none;
}

/* --- Detail page: body --------------------------------------------------- */

/* One measure for everything that is read rather than looked at. 46rem
   matches the legal pages. The first pass used 68ch, which resolves to about
   560px in Cormorant - whose glyphs are narrow enough that 68ch is really
   ~55 characters, leaving the body thinner than the header above it. */
/* The column is centred; the paragraphs inside it are not. Centred display
   type reads as composed; centred multi-line prose reads as a poster - both
   edges go ragged and the eye loses the line start on every return. */
.partner-public .partner-body {
  max-width: 46rem;
  margin-inline: auto;
}
.partner-public .partner-block { text-align: center; }
.partner-public .partner-block .eyebrow { justify-content: center; }
.partner-public .partner-prose { text-align: left; }

.partner-public .partner-block { margin: 0 0 var(--space-10); }
.partner-public .partner-block:last-child { margin-bottom: 0; }

/* Between the 2.6rem .section-title that dwarfed the copy and the 1.45rem
   that vanished into it. No 22ch cap, so names do not wrap mid-phrase. */
.partner-public .partner-block__heading {
  font-family: var(--cp-font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--cp-ink);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.partner-public .partner-block__heading em {
  font-style: italic;
  font-weight: 500;
  color: var(--partner-accent, var(--cp-oxblood));
}

.partner-public .partner-prose p {
  font-family: var(--cp-font-serif);
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--cp-ink-soft);
  margin: 0 0 var(--space-4);
}
.partner-public .partner-prose p:last-child { margin-bottom: 0; }

/* Coverage line. Ranged left with the prose it follows rather than inheriting
   the block's centring - it is a sentence to be read, not a display element.
   Carries the long-tail subgenre vocabulary that the chip panel used to. */
.partner-public .partner-coverage {
  text-align: left;
  font-family: var(--cp-font-serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--cp-muted);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--cp-rule);
}

/* Standfirst: the missing scale step between hero and body. */
.partner-public .partner-prose--lead p:first-child {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--cp-ink);
}

/* --- Detail page: genres + CTA ------------------------------------------- */

.partner-public .partner-cta__ornament {
  margin: var(--space-12) 0 var(--space-10);
}

.partner-public .partner-cta {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0;
  margin: 0;
  text-align: center;
}
.partner-public .partner-cta .partner-block__heading {
  margin-left: auto;
  margin-right: auto;
  max-width: 24ch;
}
.partner-public .partner-cta .eyebrow { justify-content: center; }
.partner-public .partner-cta__lede {
  font-family: var(--cp-font-serif);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--cp-ink-soft);
  max-width: 52ch;
  margin: 0 auto var(--space-7);
}
.partner-public .partner-cta .partner-hero__wash {
  opacity: 0.13;
  background: radial-gradient(ellipse 46% 70% at 50% 18%,
              var(--partner-accent, var(--cp-oxblood)), transparent 66%);
}

@media (max-width: 640px) {
  .partner-public .partner-hero { padding: var(--space-6) var(--space-5); }
  .partner-public .partner-hero__portrait { width: 4rem; height: 4rem; }
  .partner-public .partner-hero__quote {
    font-size: var(--text-md);
  }
  .partner-public .partner-hero__quote::before { font-size: 2.8rem; }
  .partner-public .partner-cta { padding-top: var(--space-8); }
}