/* nCommunity: the partners page.
 *
 * Everything here is additive. site.css supplies the nav, footer, buttons,
 * skip link and sign-up form unchanged; this file only adds what the landing
 * page has no equivalent of. Nothing in here may restyle a landing-page class.
 *
 * This page is allowed to be wordier than the landing page. Someone who clicks
 * "for venues" has asked to be told how it works, and answering that in four
 * words would be a worse failure than answering it in forty.
 */

.phero {
  padding: calc(var(--nc-nav-height) + clamp(56px, 12vh, 120px))
    clamp(var(--nc-space-lg), 4vw, var(--nc-space-xxxl)) clamp(48px, 8vh, 96px);
  max-width: 1440px;
  margin: 0 auto;
}

/* Imagery carries the interface here too, and until this change it did not:
 * the scrim opened at 90% black and never came off the photograph, so a good
 * picture arrived as a texture behind four lines of type. That is the exact
 * thing the app's vibrancy pass corrected -- §5 says warmth comes from
 * photography rather than chrome, and a photograph you cannot see is chrome.
 *
 * The gradient dips through the middle instead of holding flat, the same shape
 * `NcHero`'s top/mid/lower alphas take: heavy at the top where the fixed nav
 * and the kicker sit, light where the picture is, and back down to the page
 * colour at the bottom so the section ends rather than stops. The headline
 * keeps its shadow, which is what actually holds its contrast -- the scrim was
 * never the thing doing that job. */
.phero--shot {
  position: relative;
  isolation: isolate;
  max-width: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.86) 0%,
      rgba(0, 0, 0, 0.62) 26%,
      rgba(0, 0, 0, 0.46) 52%,
      rgba(0, 0, 0, 0.72) 80%,
      var(--nc-color-background) 100%
    ),
    url('../assets/photos/partners-hero.jpg') center / cover no-repeat;
}

.phero--shot > * {
  max-width: 1440px;
  margin-inline: auto;
}

/* Everything set over the photograph carries its own shadow, now that the
   scrim no longer flattens the picture to near-black for it. The shadow is
   what holds these legible across whatever is behind them; the jump pills get
   a backing instead, because a pill is a shape rather than a line of type. */
.phero--shot .phero__h {
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.75);
}

.phero--shot .phero__kicker,
.phero--shot .phero__sub {
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.9);
}

.phero--shot .jump a {
  background: color-mix(in srgb, var(--nc-color-background) 62%, transparent);
  backdrop-filter: blur(6px);
}

.phero__kicker {
  margin: 0 0 var(--nc-space-lg);
  font-size: var(--nc-type-caption-size);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nc-color-text-secondary);
}

.phero__h {
  margin: 0;
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.phero__h--small {
  font-size: clamp(30px, 4.4vw, 56px);
}

.phero__sub {
  margin: var(--nc-space-xl) 0 0;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--nc-color-text-secondary);
  max-width: 52ch;
}

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-space-sm);
  margin-top: clamp(32px, 5vh, 48px);
}

.jump a {
  padding: 10px var(--nc-space-lg);
  border-radius: var(--nc-radius-pill);
  border: 1px solid var(--nc-color-border-strong);
  font-size: 15px;
  font-weight: 600;
  transition:
    background-color var(--nc-duration-fast) ease,
    border-color var(--nc-duration-fast) ease;
}

.jump a:hover {
  background: var(--nc-color-surface-raised);
  border-color: var(--nc-color-primary);
}

/* ------------------------------------------------------ one audience */

.aud {
  padding: clamp(56px, 9vh, 104px) clamp(var(--nc-space-lg), 4vw, var(--nc-space-xxxl));
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid var(--nc-color-border);
  /* The nav is fixed, so a section jumped to from the menu has to clear it. */
  scroll-margin-top: var(--nc-nav-height);
}

.aud__hero {
  position: relative;
  border-radius: var(--nc-radius-lg);
  overflow: hidden;
  border: 1px solid var(--nc-color-border);
}

.aud__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 700px) {
  .aud__img {
    aspect-ratio: 16 / 7;
  }
}

/* The gradient dips through the middle rather than flattening the whole
 * frame, so the photograph survives underneath the words. */
.aud__over {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(var(--nc-space-lg), 3vw, var(--nc-space-xxl));
  /* The overlay only covers the bottom band of the plate, so it can afford to
   * be genuinely dark: the photograph still reads above it. It has to be. The
   * kicker sits near the top of this band, and measured against the brightest
   * pixel behind it a softer scrim gave 2.08:1, which is unreadable. These
   * stops hold every plate above 4.5:1. */
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.84) 22%,
    rgba(0, 0, 0, 0.95) 100%
  );
}

.aud__over .aud__kicker {
  color: var(--nc-color-text-primary);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.9);
}

.aud__over .aud__h {
  max-width: 22ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}

.aud__kicker {
  margin: 0 0 var(--nc-space-md);
  font-size: var(--nc-type-caption-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nc-color-text-secondary);
}

.aud__h {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.aud__intro {
  margin: clamp(24px, 3vh, 36px) 0 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--nc-color-text-secondary);
}

.aud__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nc-space-lg);
  margin-top: clamp(36px, 5vh, 56px);
}

@media (min-width: 860px) {
  .aud__cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--nc-space-xl);
  }
}

/* No card. A boxed "how it works" beside a boxed "what you get", repeated
 * identically for every audience, is the shape of a template rather than of an
 * argument. Hairlines and space do the separating, as they do everywhere else
 * on the site. */
.block__h {
  margin: 0 0 var(--nc-space-lg);
  padding-bottom: var(--nc-space-md);
  border-bottom: 1px solid var(--nc-color-border);
  font-size: var(--nc-type-caption-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--nc-color-text-secondary);
}

/* Numbered because the order is the explanation: you cannot take a booking
 * before somebody has reviewed your claim. */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--nc-space-lg);
}

/* The number is absolutely positioned, not a grid column. A grid here breaks
 * the item: the bold <span> and the description that follows it are two
 * separate grid items, so the description drops to the next row and gets laid
 * out in the narrow number column, one word per line. */
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 38px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--nc-color-text-secondary);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-size: var(--nc-type-caption-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--nc-color-text-secondary);
}

.steps--plain li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 0.62em;
  left: 4px;
  background: var(--nc-color-border-strong);
}

.steps li span {
  display: block;
  color: var(--nc-color-text-primary);
  font-weight: 600;
}

.gets {
  display: grid;
  gap: var(--nc-space-md);
}

.gets li {
  position: relative;
  padding-left: var(--nc-space-xl);
  font-size: 15px;
  line-height: 1.55;
  color: var(--nc-color-text-secondary);
}

.gets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1px;
  background: var(--nc-color-border-strong);
}

.gets strong,
.limits strong {
  color: var(--nc-color-text-primary);
  font-weight: 600;
}

/* The honest block. Every audience gets one, and it is deliberately not
 * styled as small print: what a badge does not mean is the part somebody has
 * to read, and it is the first thing a marketing page usually hides. */
/* A left rule rather than a dashed box. Dashes read as a wireframe someone
 * has not finished, and this is the most considered paragraph on the page. */
.limits {
  margin-top: clamp(32px, 5vh, 48px);
  padding: 0 0 0 clamp(var(--nc-space-lg), 2.4vw, var(--nc-space-xl));
  border-left: 2px solid var(--nc-color-border-strong);
  max-width: 78ch;
}

.limits__h {
  margin: 0 0 var(--nc-space-md);
  font-size: var(--nc-type-caption-size);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nc-color-text-secondary);
}

.limits p + p {
  margin-bottom: 0;
}

.limits p:not(.limits__h) {
  margin: 0 0 var(--nc-space-md);
  font-size: 15px;
  line-height: 1.6;
  color: var(--nc-color-text-secondary);
}

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

/* Amber is the reserved warning hue, and "we have not built this" is exactly
 * what it is for. */
.limits--loud {
  border-left-color: var(--nc-color-warning);
}

.limits--loud .limits__h {
  color: var(--nc-color-warning);
}

.aud--future .aud__h {
  color: var(--nc-color-text-secondary);
}

/* ------------------------------------------------------------- cta */

.pcta {
  padding: clamp(64px, 11vh, 128px) clamp(var(--nc-space-lg), 4vw, var(--nc-space-xxxl));
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid var(--nc-color-border);
  scroll-margin-top: var(--nc-nav-height);
}

.pcta .signup {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- footer */

/* On the landing page .footer__cols is divided from the big closing headline
 * and the sign-up form above it. This page has neither, so that rule lands
 * just below .footer's own border and reads as a double line. */
.footer--bare .footer__cols {
  border-top: 0;
  padding-top: 0;
}