/* Membership Overview -----------------------------------------------------
   Built from MEASURED computed values on the live reference, not from the
   theme's base rules. The live hero carries `has-panel-photo`, which replaces
   the ground with a photograph behind a dark gradient and overrides the base
   rules in turn: the base `has-panel-photo` block sets a black h1 on a light
   overlay, and the live page renders a WHITE h1 on a dark one. Reading the
   stylesheet would have produced the wrong page. */

/* The reference's sections centre on a 1360px container measured against the
   VIEWPORT. Ours sit inside .plu-shell, which caps at 1180 and pads 20 each
   side, so cancelling the gutter alone still left every section 220px short at
   1440 and 40px short everywhere else. The page has to leave the shell, the
   same way the hero does. */
.plu-membership-page { width: 100vw; margin-left: calc(50% - 50vw); }

/* Hero. The photograph comes from post meta via plu_core_banner_data() and is
   not reproduced here - that needs CMS banner support, not CSS. The dark
   gradient ground is the same, so the image drops in on top when it exists. */
.plu-membership-hero {
  position: relative; display: block; min-height: 610px; isolation: isolate;
  background: #050505; color: #fff;
  border-bottom: 4px solid var(--plu-yellow); overflow: hidden;
}
.plu-membership-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(105deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.72) 40%,
                              rgba(190,0,18,.24) 67%, rgba(5,5,5,.86) 100%);
}
/* The three-colour strip along the foot: yellow, red, white. */
.plu-membership-hero::after {
  content: ''; position: absolute; inset: auto 0 0; height: 8px; z-index: 2;
  background: linear-gradient(90deg, var(--plu-yellow) 0 62%,
                              var(--plu-red) 62% 78%, #fff 78%);
}
.plu-membership-hero__copy {
  position: relative; z-index: 1; max-width: 820px; min-height: 610px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 110px 24px 70px max(64px, calc((100vw - 1360px) / 2 + 24px));
}
/* The base rule is clamp(54px, 6vw, 86px) and a LATER rule overrides it.
   Porting the first one made every heading oversized: 86 against 72 at 1440,
   54 against 34 at 320. Measured on the reference: 72 / 57.3 / 48 / 34. */
.plu-membership-hero h1 {
  /* line-height 1, not the base rule's 1.02: the same later rule that sets
     the size sets this too. At 1.02 every heading ran 3px tall per line. */
  margin: 0; font-size: clamp(48px, 5.6vw, 72px); line-height: 1; font-weight: 900;
  color: #fff;
}
.plu-membership-hero .plu-eyebrow { color: var(--plu-yellow); }
.plu-membership-hero__copy > p:not(.plu-eyebrow) {
  max-width: 720px; font-size: 20px; line-height: 1.65; color: rgba(255,255,255,.88);
}
/* The reference's `has-panel-photo` hero replaces the logo mark with the
   photograph, so there is no mark element here at all. It used to be emitted
   and hidden, which made a whole-site image sweep report this page as showing
   a favicon where the reference shows photographs. */

.plu-membership-scale { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.plu-membership-scale strong { font-size: 28px; font-weight: 900; color: var(--plu-yellow); }
.plu-membership-scale span { color: #fff; font-size: 14px; font-weight: 800; }

/* Buttons: measured, and all three differ. Join PLU is black on white text,
   Cadre Sign In yellow on black, View Patriotic Officers red on white. The
   site-wide "yellow means navigation" convention does not hold here. */
.plu-page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.plu-membership-hero .plu-button {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center;
  padding: 0 22px; border: 2px solid transparent; text-decoration: none;
  font-size: 12px; font-weight: 900; text-transform: uppercase; border-radius: 2px;
}
.plu-membership-hero .plu-page-actions .plu-button:nth-child(1) {
  background: #050505; color: #fff; border-color: #050505;
}
.plu-membership-hero .plu-page-actions .plu-button:nth-child(2) {
  background: var(--plu-yellow); color: #050505; border-color: #050505;
}
.plu-membership-hero .plu-page-actions .plu-button:nth-child(3) {
  background: var(--plu-red); color: #fff; border-color: var(--plu-red);
}

/* Benefit row */
.plu-benefit-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  background: #f7f7f3; max-width: 1360px; margin-inline: auto; padding: 28px 24px;
}
.plu-benefit-row article { display: flex; gap: 16px; padding: 22px; background: #fff; border: 1px solid var(--plu-line); }
.plu-benefit-row article > span { font-size: 26px; color: var(--plu-red); }
.plu-benefit-row h3 { margin: 0 0 6px; font-size: 18px; }
.plu-benefit-row p { margin: 0 0 10px; color: rgba(0,0,0,.66); font-size: 14px; line-height: 1.55; }
.plu-benefit-row strong { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }

/* Explainer */
.plu-membership-explainer {
  display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); gap: 72px;
  background: #fff; max-width: 1360px; margin-inline: auto; padding: 78px 24px;
  align-items: center;
}
.plu-membership-explainer h2 { margin: 0 0 14px; font-size: 34px; }
.plu-membership-explainer__copy p:not(.plu-eyebrow) { color: rgba(0,0,0,.66); line-height: 1.65; }
.plu-membership-explainer ul { margin: 18px 0 0; padding-left: 18px; color: rgba(0,0,0,.72); line-height: 1.9; }
.plu-membership-explainer__player video { width: 100%; background: #050505; }
.plu-membership-explainer__player span { display: block; margin-top: 10px; color: rgba(0,0,0,.55); font-size: 13px; }

/* Journey */
.plu-membership-journey { max-width: 1360px; margin-inline: auto; padding: 76px 24px; }
.plu-membership-journey header h2 { margin: 0 0 12px; font-size: 34px; }
.plu-membership-journey header p:not(.plu-eyebrow) { max-width: 720px; color: rgba(0,0,0,.66); line-height: 1.65; }
.plu-membership-journey header span { display: block; margin-top: 10px; color: rgba(0,0,0,.5); font-size: 13px; font-weight: 800; }
/* 1px, measured. The reference butts these cards together into a hairline
   seam rather than spacing them like the benefit row's 18px. */
.plu-membership-journey__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 30px; }
.plu-membership-journey__steps article { padding: 26px; background: #fff; border: 1px solid var(--plu-line); border-top: 4px solid var(--plu-yellow); }
.plu-membership-journey__steps b { display: block; font-size: 13px; font-weight: 900; color: var(--plu-red); }
.plu-membership-journey__steps h3 { margin: 8px 0 8px; font-size: 20px; }
.plu-membership-journey__steps p { margin: 0; color: rgba(0,0,0,.66); font-size: 14px; line-height: 1.6; }

/* Spotlights */
.plu-member-spotlights { max-width: 1360px; margin-inline: auto; padding: 0 24px 70px; }
.plu-member-spotlights header h2 { margin: 0 0 22px; font-size: 30px; }
.plu-member-spotlights__track article { display: grid; grid-template-columns: 240px 1fr; gap: 26px; padding: 26px; background: #fff; border: 1px solid var(--plu-line); }
.plu-spotlight-photo { position: relative; min-height: 220px; background: #f0f0ec; }
.plu-spotlight-photo__accent { position: absolute; inset: auto 0 0 0; height: 6px; background: var(--plu-yellow); }
.plu-member-spotlights blockquote { margin: 0; }
.plu-member-spotlights blockquote > span { font-size: 44px; line-height: 1; color: var(--plu-yellow); }
.plu-member-spotlights blockquote p { margin: 6px 0 16px; color: rgba(0,0,0,.72); font-size: 17px; line-height: 1.7; }
.plu-member-spotlights footer strong { display: block; font-weight: 900; }
.plu-member-spotlights footer small { color: rgba(0,0,0,.55); }

/* Closing */
.plu-membership-closing {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; max-width: 1360px; margin-inline: auto; padding: 48px 24px;
  background: var(--plu-yellow); color: #0d0d0d;
}
.plu-membership-closing h2 { margin: 8px 0; font-size: 32px; }
.plu-membership-closing p:not(.plu-eyebrow) { margin: 0; max-width: 620px; }
.plu-membership-closing .plu-eyebrow { color: var(--plu-red); }
.plu-membership-closing .plu-button {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center;
  padding: 0 22px; background: #050505; color: #fff; text-decoration: none;
  font-size: 12px; font-weight: 900; text-transform: uppercase; border-radius: 2px;
}

@media (max-width: 980px) {
  .plu-benefit-row, .plu-membership-journey__steps { grid-template-columns: 1fr; }
  .plu-membership-explainer { grid-template-columns: 1fr; gap: 34px; }
  .plu-member-spotlights__track article { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .plu-membership-hero h1 { font-size: 36px; }
}
@media (max-width: 620px) {
  .plu-membership-hero__copy { padding: 26px 20px 32px; min-height: 0; }
  .plu-membership-hero { min-height: 0; }
  .plu-membership-closing { padding: 34px 22px; }
}
@media (max-width: 420px) {
  /* Measured 34px on the reference at 320. */
  /* The small-width override loosens it to 1.08, measured. */
  .plu-membership-hero h1 { font-size: 34px; line-height: 1.08; }
  .plu-benefit-row, .plu-membership-journey, .plu-membership-explainer { padding: 18px 14px; }
}