/* Endorsements board, signing form and Contact Us.
   Scoped under .plu-public-endorsement-page so nothing here can reach another
   session's pages. Shared-component fixes belong in plu.css and are the
   coordinating session's to make.

   NOTE: this file used to carry a scoped `.plu-field textarea` width fix. That
   bug is now fixed globally in plu.css (b02af42), so the override is gone.
   Keeping it would have been actively harmful: it hardcoded the pre-03e30a2
   control styling (15px text, 1px #c9c8bf, --plu-radius) and, being more
   specific, would have won - leaving this page's textarea looking unlike every
   other control on the same form. */

/* ---------------------------------------------------------------------------
   Public endorsement page — hero and register section.

   Ported from the WordPress original and then verified by measuring the live
   page, which matters here: plu-core ships TWO stylesheets for this page and
   the second one wins. public-endorsements.css defines a DARK hero;
   public-endorsements-refine.css redefines it as a light one. Everything below
   follows the refine file. Reading only the base file gives the wrong design.

   The reference hero carries a candidate photograph as a second background
   layer (public-endorsement-mhzz.jpg, sitting in the right 44% behind a
   white-to-transparent gradient). That asset is not in the Django tree, so
   only the gradient and the white ground are reproduced; the missing image is
   recorded in the handover.
--------------------------------------------------------------------------- */
.plu-public-endorsement-page .plu-public-endorsement-hero,
.plu-public-endorsement-page .plu-public-register {
  width: min(1180px, calc(100% - 40px));
  margin: auto;
}

.plu-public-endorsement-page .plu-public-endorsement-hero {
  display: grid;
  min-height: 450px;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 36px;
  padding: 52px 62px;
  color: #111;
  border-top: 7px solid #ffe500;
  border-bottom: 1px solid #1a1a1a;
  background-color: #fff;
  background-image: linear-gradient(90deg, #fff 0%, #fff 56%, rgba(255,255,255,0) 56%, rgba(255,255,255,0) 100%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.plu-public-endorsement-page .plu-public-endorsement-hero > div {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  max-width: 570px;
  padding-bottom: 108px;
}

.plu-public-endorsement-page .plu-public-endorsement-hero .plu-eyebrow { color: #bd2029; }

.plu-public-endorsement-page .plu-public-endorsement-hero h1 {
  max-width: 560px;
  margin: 8px 0 18px;
  font-size: clamp(2.45rem, 3.85vw, 3.65rem);
  line-height: .98;
}

.plu-public-endorsement-page .plu-public-endorsement-hero p {
  max-width: 500px;
  font-size: 1rem;
  line-height: 1.55;
  color: #111;
}

.plu-public-endorsement-page .plu-public-endorsement-hero a {
  display: inline-block;
  margin-top: 12px;
  padding: 14px 18px;
  background: #111;
  color: #ffe500;
  font-weight: 800;
  text-decoration: none;
}

.plu-public-endorsement-page .plu-public-endorsement-hero aside {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 11px;
  row-gap: 2px;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  width: auto;
  padding: 13px 18px;
  background: #fff;
  border-left: 4px solid #ffe500;
}

.plu-public-endorsement-page .plu-public-endorsement-hero aside strong { grid-row: 1 / 3; font-size: 2.45rem; line-height: 1; color: #111; }
.plu-public-endorsement-page .plu-public-endorsement-hero aside span { margin: 0; align-self: end; color: #111; font-size: .7rem; }
.plu-public-endorsement-page .plu-public-endorsement-hero aside small { margin: 0; align-self: start; color: #555; font-size: .7rem; }

.plu-public-endorsement-page .plu-public-register {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 46px;
  padding: 52px 62px;
  background: #fff;
  border-top: 6px solid #c61c2c;
}

.plu-public-endorsement-page .plu-public-register > header { padding-top: 5px; padding-right: 16px; }

.plu-public-endorsement-page .plu-public-register h2 {
  max-width: 390px;
  margin: 6px 0 0;
  font-size: clamp(2rem, 2.6vw, 2.65rem);
  line-height: 1.03;
}

/* Empty state, shown when no campaign is active. Metrics from the reference. */
.plu-public-endorsement-page .plu-public-empty {
  width: min(1180px, calc(100% - 40px));
  margin: auto;
  padding: 100px 0;
  min-height: 50vh;
}

.plu-public-endorsement-page .plu-public-empty h1 { font-size: 3rem; margin: 8px 0 14px; }

@media (max-width: 650px) {
  .plu-public-endorsement-page .plu-public-empty { width: 100%; padding: 56px 22px; min-height: 0; }
  .plu-public-endorsement-page .plu-public-empty h1 { font-size: 2rem; }
}

/* DO NOT "FIX" THIS BACK TO THE SHARED VALUE.

   The reference does not have one shared form-label style - its two forms are
   authored differently, and this was measured on both before the override was
   allowed:

     WordPress /join-plu/        13px    / 19.5px  / 900 / rgb(13, 13, 13)
     WordPress endorsement form  13.12px / 19.68px / 800 / rgb(23, 23, 23)
     Django .plu-field label     13px    / 19.5px  / 900 / rgb(13, 13, 13)

   So no single value of the shared `.plu-field label` can match both, and the
   current shared value is right for the signup form, which has eleven measured
   controls behind it. The endorsement form is sized in rem where the signup
   form is sized in px - 13.12px is .82rem and 19.68px is 1.5 x that - which is
   a real authorial difference in the reference rather than drift.

   This is therefore NOT a divergence awaiting reconciliation: it reproduces a
   difference that exists in the reference itself. Ruled by the chrome owner,
   who measured the signup form independently before deciding. */
.plu-public-endorsement-page .plu-public-register .plu-field label {
  font-size: .82rem;
  line-height: 1.5;
  font-weight: 800;
  color: rgb(23, 23, 23);
}

/* The reference's submit is dark with yellow text, matching the hero call to
   action - not the shared yellow .plu-btn. Measured against the reference:
   16px/24px (inherited), weight 800, padding 15px 20px, no radius, no letter
   spacing. Scoped here rather than changed in .plu-btn, which is shared. */
.plu-public-endorsement-page .plu-public-submit {
  margin-top: 7px;
  border: 0;
  border-radius: 0;
  padding: 15px 20px;
  background: #111;
  color: #ffe500;
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: normal;
  cursor: pointer;
}

.plu-public-endorsement-page .plu-public-submit:disabled { opacity: .6; cursor: wait; }

.plu-public-endorsement-page .plu-public-check { display: flex; gap: 10px; align-items: flex-start; }
.plu-public-endorsement-page .plu-public-check input { width: auto; flex: none; margin-top: 3px; }
.plu-public-endorsement-page .plu-public-check label { font-weight: 400; font-size: 13.5px; }

/* Responsive rules below are the reference's own, read from the refine file's
   media blocks and then checked against the running page at 1024/768/320.
   Measuring mattered: the two grids do NOT collapse together. At 768 the
   register is already a single column while the hero is still two, and the
   mobile hero replaces the clamp on the h1 entirely (26.4px at 320, where the
   desktop clamp would give 39.2px). Collapsing both at one breakpoint, which
   is what a reasonable guess produces, is wrong at 768 and at 320. */

@media (max-width: 860px) {
  .plu-public-endorsement-page .plu-public-endorsement-hero { padding-inline: 38px; }
  .plu-public-endorsement-page .plu-public-register { grid-template-columns: 1fr; padding: 38px; }
  .plu-public-endorsement-page .plu-public-register > header { padding-right: 0; }
}

@media (max-width: 650px) {
  .plu-public-endorsement-page .plu-public-endorsement-hero,
  .plu-public-endorsement-page .plu-public-register { width: 100%; }

  .plu-public-endorsement-page .plu-public-register { padding: 35px 20px; gap: 28px; }

  /* DELIBERATE DIVERGENCE FROM THE REFERENCE — read before "fixing" this.

     Below 650 the reference reserves a 258px band at the foot of the hero for
     the candidate photograph, drawn by ::after, giving it
     `padding: 28px 22px 286px` and `min-height: 0`. That image
     (plu-core/assets/public-endorsement-mhzz.jpg) is not in this tree, so
     reproducing the reserve renders roughly a third of a 320px viewport as an
     empty grey slab, which reads as a broken section rather than as a space
     awaiting an image. The membership session reached the same conclusion for
     the join banner, which uses the same reserve-a-band pattern (240px there),
     so this matches the precedent already set in this codebase.

     TO RESTORE once the asset is migrated, both together:
       padding: 28px 22px 286px;   (instead of 28px 22px)
       and re-add the ::after block: position absolute, inset right/bottom/left 0,
       z-index -1, height 258px, background linear-gradient(90deg,
       rgba(0,0,0,.12), rgba(0,0,0,0)) over the photograph, no-repeat, cover.
     Everything else in this block already matches the reference exactly. */
  .plu-public-endorsement-page .plu-public-endorsement-hero {
    display: block;
    position: relative;
    isolation: isolate;
    min-height: 0;
    padding: 28px 22px;
    border-top-width: 6px;
    background: #fff;
    overflow: hidden;
  }

  .plu-public-endorsement-page .plu-public-endorsement-hero > div { display: block; max-width: none; padding: 0; }
  .plu-public-endorsement-page .plu-public-endorsement-hero .plu-eyebrow { margin: 0 0 12px; font-size: .72rem; line-height: 1.35; }

  .plu-public-endorsement-page .plu-public-endorsement-hero h1 {
    max-width: 330px;
    margin: 0 0 16px;
    font-size: clamp(1.65rem, 6.6vw, 1.9rem);
    line-height: 1.08;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
  }

  .plu-public-endorsement-page .plu-public-endorsement-hero p { max-width: 320px; margin: 0; font-size: .98rem; line-height: 1.5; }
  .plu-public-endorsement-page .plu-public-endorsement-hero a { margin-top: 18px; padding: 13px 16px; }

  .plu-public-endorsement-page .plu-public-endorsement-hero aside {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    width: min(100%, 286px);
    margin: 22px 0 0;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #deded9;
    border-left: 4px solid #ffe500;
  }

  .plu-public-endorsement-page .plu-public-endorsement-hero aside strong { font-size: 2.15rem; }
  .plu-public-endorsement-page .plu-public-endorsement-hero aside span { font-size: .65rem; line-height: 1.2; }
  .plu-public-endorsement-page .plu-public-endorsement-hero aside small { font-size: .72rem; line-height: 1.25; }
}