/* ============================================================================
   MEMBERSHIP                                            T-22 · artboard p22
   ----------------------------------------------------------------------------
   Only the pieces p22 draws that no other screen draws. Everything else on
   this page reuses shell.css and the existing components.

   WHAT LIVES HERE

     .cn-mem-panels    the two side-by-side "whats included" panels
     .cn-mem-panel     one panel - white, 2px border, contents centred
     .cn-mem-panel--included   cyan border   (what you already get)
     .cn-mem-panel--plus       gold border   (Connect Plus, has the button)
     .cn-mem-panel__price      "Free" / the CRM's figure, under the logo
     .cn-mem-list              the seven benefit rows inside a panel
     .cn-mem-lede              the one-line offer above the intro copy
     .cn-mem-terms             trial and cancellation small print

   MEASURED on p22, converted at 1pt = 2.4px:

     panel            369.4 x 347.0     two of them, 34.0px apart
     panel border     2px               #1cb7fc left, #cca30e right
     panel fill       #ffffff           NOT grey - the vector layer says
                                        rgb(87,87,86) but it RENDERS white.
                                        That colour is the stroke, not the fill.
     caption          29.4px, centred both ways
     Upgrade button   104.6 x 22.1, centred in the right panel,
                      18.1px above the panel's bottom edge

   The two panels sit inside the 775px reader content column:
     369.4 + 34.0 + 369.4 = 772.8   <- the measured column

   THE PANELS WERE UNDESIGNED INSIDE - the artboard's entire content was the
   words "tick box of whats included", with no tier list, no benefit list and
   no pricing anywhere in it (CONNECT2026.md open question 19). The benefits
   were not invented to fill them: they come from the live plan page at
   /member/subscription/Plan, which is where Upgrade already sends a reader,
   and the price comes from the CRM subscription row that page reads and then
   ignores. See Connect2026Controller.addMembership.

   So the box is still built to the measured size, and the caption rule is
   kept commented further down rather than deleted.

   DEPENDS ON: tokens.css, shell.css
   ========================================================================== */


/* ------------------------------------------------------ rhythm --------- */
/*
   THE COLUMN'S GAPS, measured on p22 rather than taken from the shell.

     intro copy  -> panels        28    (443.8 -> 471.9)
     panels      -> video block   37    (818.8 -> 855.4)
     video block -> "Connect Plus content"  51, close enough to the
                                  shell's 48 to keep the utility class

   .cn-section carries 80 below it and .cn-mt-12 48 above the rail grid;
   those collapsed to 80 under the intro, and 48 stood between the small
   print and the video block. The intro drops its bottom margin and the
   body grid carries the board's 28; the small print sits 16 under the
   panels (it belongs to them) and the video block 37 under whatever came
   before it - the small print for a prospect, the status panel for a member.
*/
.cn-mem-intro { margin-bottom: 0; }
.cn-mem-body  { margin-top: 28px; }
.cn-mem-video { margin-top: 37px; }


/* ------------------------------------------------- the two panels ------ */

/* Rules go here. The sizes and colours are in the header comment above. */

/* Gap measured at 34.0 on p22. Off the 8px spacing scale on purpose -
   two 369.4 panels plus 34 is exactly the 775 column. */
.cn-mem-panels {
  --cn-grid-gap:   34px;
  --cn-grid-floor: 300px;
  /*
     THE SAME HEIGHT, BOTH PANELS. The grid's default align-items:start let
     the Connect panel stop where its seven rows end (477px) while the Plus
     panel beside it ran on to its eighth row and the Upgrade button (553px)
     - two boxes with matching tops and ragged bottoms. Asked for as one
     aligned pair: the shorter panel stretches to the taller.
  */
  align-items: stretch;
}

/*
   THE LOGO SITS AT THE TOP, not centred with the caption.

   Measured inside the panel on p22, which starts at y=471.9:

     logo     ~496    24px down
     caption   616.9  145px down

   place-items:center centred the two as one group, which put the logo 72px
   down and the caption 188 - 48 and 43 out. justify-items keeps them centred
   ACROSS the panel; the rows below place them down it.
*/
.cn-mem-panel {
  position: relative;                /* so the button can sit at the bottom */
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  justify-items: center;             /* centred across, not down */
  min-height: 347px;
  padding: 24px var(--cn-space-8) var(--cn-space-8);
  background: var(--cn-surface);
  border: 2px solid;                 /* colour comes from the modifier */
  border-radius: var(--cn-radius-card);
  text-align: center;
}

.cn-mem-panel--included { border-color: var(--cn-cyan); }
.cn-mem-panel--plus     { border-color: var(--cn-fam-gold); }



/* Measured 18.1px above the panel's bottom edge, centred across it. */
.cn-mem-panel__cta {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
}

/* Renamed from .cn-mem-panel-logo - its siblings are __price and __cta. */
.cn-mem-panel__logo {
  display: block;
  max-height: 40px;
  max-width: 153px;
}

/*
   THE TWO LOGO FILES ARE NOT THE SAME SHAPE, and the rule above was written
   for the one that is.

     ConnectNewLogo.png    1703 x 444   the mark fills the canvas
     ConnectPlusLogo.png   1280 x 720   the mark is 1040 x 235 of it

   Connect Plus is a 16:9 canvas with the lockup floated in the middle of it:
   about 9% empty either side and a THIRD of the height empty above and below.
   Capping that by height renders the whole canvas at 71 x 40, which puts the
   actual wordmark at roughly 58 x 13 - the squashed, unreadable mark on the
   membership panel. The live plan page gets away with the same file because
   it caps by WIDTH (max-width:180px), so the canvas renders 180 x 101 and the
   mark inside lands at a legible 146px.

   Fixed here rather than by cropping the file: the asset is shared with the
   live plan page and the S3 bucket, so recropping it means a new file to
   deploy and two places to keep in step.

   object-fit does the crop instead. The box is the MARK's aspect ratio at the
   same 40px height the other logo gets - 1040:235 is 4.43:1, so 177 x 40 -
   and `cover` scales the canvas to fill it, taking the empty top and bottom
   outside the box. The crop window works out at source y 215-505 against a
   mark at y 230-465, so it clears the artwork by 15px above and 40px below.

   Result: a 144 x 32 mark beside the other panel's 153 x 40, which read as
   the same size, and both panels' lists still start at the same height.
*/
.cn-mem-panel--plus .cn-mem-panel__logo {
  width: 177px;
  height: 40px;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}


/* ------------------------------------------------ what is included ----- */
/*
   OPEN QUESTION 19 IS CLOSED, and the caption rule above went with it.

   p22 wrote "tick box of whats included" in the middle of both panels and
   drew nothing else - no tier list, no benefits, no pricing. That was a note
   to the builder, not copy, and the answer it was asking for turned out to
   exist already: the live /member/subscription/Plan page carries the two
   comparison columns in full. The panels now render those, so the caption has
   no job left. Its rule is kept commented rather than deleted, next to the
   ones that replaced it.

   .cn-mem-panel__caption {
     margin: 81px 0 0;
     font-size: var(--cn-text-h2);
     font-weight: var(--cn-fw-semibold);
     color: var(--cn-ink);
   }
*/

/*
   THE PANEL GROWS NOW. min-height stays at the measured 347 so a panel is
   never shorter than p22 draws it, but a seven-row list plus a price is
   taller than that at narrow widths, and a fixed height would have clipped
   it. The grid stretches both panels to the taller of the two either way, so
   the pair stays level.
*/

/* Room for the absolutely-positioned CTA, which only the Plus panel has:
   its 34px button plus the measured 18px below it, plus the panel's own
   bottom padding. The free panel keeps the plain padding and simply ends
   sooner - both lists still start at the same y, which is what reads as
   aligned. */
.cn-mem-panel--plus {
  padding-bottom: calc(var(--cn-space-8) + var(--cn-btn-h) + 18px);
}

/*
   THE PRICE, under the logo. "Free" on the left, the CRM's figure on the
   right - see Connect2026Controller.priceLabel for why it is totalPrice and
   not the offer price.
*/
.cn-mem-panel__price {
  margin: var(--cn-space-5) 0 0;
  font-size: var(--cn-text-h3);
  font-weight: var(--cn-fw-semibold);
  color: var(--cn-ink);
  line-height: var(--cn-lh-tight);
}

/* "/ year" - the period is a qualifier on the figure, not part of it. */
.cn-mem-panel__per {
  font-size: var(--cn-text-body);
  font-weight: var(--cn-fw-regular);
  color: var(--cn-ink-muted);
}

/*
   THE LIST IS LEFT-ALIGNED INSIDE A CENTRED PANEL.

   .cn-mem-panel sets text-align:center for the logo and the price, which is
   right for two short lines and wrong for seven benefit rows: centred list
   items have no common left edge, so the eye cannot run down them. The list
   stretches to the panel's content box and aligns its own text left.
*/
.cn-mem-list {
  justify-self: stretch;
  margin: var(--cn-space-6) 0 0;
  padding: 0;
  text-align: left;
}

/*
   Two columns, so a label that wraps stays clear of the mark rather than
   running back under it. The mark column is fixed at 1em so every label in
   both panels shares one left edge, tick or cross.
*/
.cn-mem-list__row {
  display: grid;
  grid-template-columns: 1em minmax(0, 1fr);
  gap: var(--cn-space-3);
  align-items: start;
  padding-block: var(--cn-space-2);
  font-size: var(--cn-text-body);
  line-height: var(--cn-lh-snug);
  color: var(--cn-ink-body);
}

.cn-mem-list__row + .cn-mem-list__row {
  border-top: 1px solid var(--cn-border);
}

/* The icon is Font Awesome, which head.jsp already loads for the top bar. */
.cn-mem-list__mark {
  color: var(--cn-fam-green);
  font-size: var(--cn-text-chip);
  line-height: var(--cn-lh-body);
}

/*
   NOT-INCLUDED IS GREY, NOT RED. It is the absence of a benefit on the free
   tier, not an error, and a red cross beside "Connect In-Depth Articles"
   reads as something being wrong with the article rather than with the plan.
*/
.cn-mem-list__row[data-included="false"] .cn-mem-list__mark { color: var(--cn-ink-faint); }
.cn-mem-list__row[data-included="false"] .cn-mem-list__label { color: var(--cn-ink-muted); }

/* One row per panel is emphasised - the live page bolds the 20% discount. */
.cn-mem-list__row[data-emphasis="true"] .cn-mem-list__label {
  font-weight: var(--cn-fw-semibold);
  color: var(--cn-ink);
}


/* -------------------------------------------------- lede and terms ----- */

/* The one-line offer, above the two explanatory paragraphs. */
.cn-mem-lede {
  font-weight: var(--cn-fw-semibold);
  color: var(--cn-ink);
}

/*
   The trial and cancellation terms, under the panels. Small print by size,
   not by hiding: it sits at the reading width of the column and is the same
   ink as any other secondary text on the page.
*/
.cn-mem-terms {
  margin: var(--cn-space-4) 0 0;
  font-size: var(--cn-text-label);
  line-height: var(--cn-lh-body);
  color: var(--cn-ink-muted);
}


/* -------------------------------------------------- your membership ---- */
/*
   WHAT A MEMBER SEES INSTEAD OF THE TIER PANELS.

   p22 draws no such panel, because the artboard only ever imagined a
   prospect: everything on it sells Connect Plus. A member arrives with two
   different questions - when does this end, and how do I stop it - and the
   sales copy answers neither. So this is built on the page's own tokens
   rather than measured from a board that does not have it.

   A DEFINITION LIST, not a table. Four labelled facts about one subscription
   is what dl is for; a table would be claiming rows and columns that do not
   exist, and it reads worse for it.
*/
.cn-mem-status {
  /* The column's full width, like the video block under it - a 775 cap
     left the two boxes' right edges 260px apart on a wide screen. */
  margin-top: 0;                     /* .cn-mem-body carries the 28 */
  padding: var(--cn-space-8);
  background: var(--cn-surface);
  border: 2px solid var(--cn-cyan);
  border-radius: var(--cn-radius-card);
}

.cn-mem-status__facts {
  display: grid;
  /* FOUR ACROSS, THEN TWO BY TWO. auto-fit with a 160 floor put three on
     the first row and "Days remaining" alone on a second at the 708px the
     panel actually has (4 x 160 + 3 x 24 = 712) - the one number a member
     came for, orphaned. Explicit columns instead: four on a desktop, two
     by two on a phone, never three-and-one. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cn-space-6);
  margin: var(--cn-space-6) 0 0;
}

@media (max-width: 767px) {
  .cn-mem-status__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cn-mem-status__fact dt {
  font-size: var(--cn-text-label);
  text-transform: uppercase;
  letter-spacing: var(--cn-tracking-label);
  color: var(--cn-ink-muted);
}

.cn-mem-status__fact dd {
  margin: var(--cn-space-1) 0 0;
  font-size: var(--cn-text-card);
  font-weight: var(--cn-fw-semibold);
  color: var(--cn-ink);
}

/* The number a member came for, so it is the thing the eye lands on. */
.cn-mem-status__days {
  font-size: var(--cn-text-h3);
  color: var(--cn-cyan);
  font-variant-numeric: tabular-nums;
}

.cn-mem-status__note {
  margin: var(--cn-space-6) 0 0;
  font-size: var(--cn-text-label);
  line-height: var(--cn-lh-body);
  color: var(--cn-ink-muted);
}

/*
   CANCEL IS THE QUIET BUTTON ON THIS PANEL. It is the one destructive thing
   here and it should be findable, not inviting - outline rather than solid,
   and it does not turn red until you reach for it.
*/
.cn-mem-status__cancel {
  margin-top: var(--cn-space-4);
}

.cn-mem-status__cancel:hover,
.cn-mem-status__cancel:focus-visible {
  border-color: var(--cn-fam-orange);
  color: var(--cn-fam-orange);
}

/*
   THE MEMBER'S OWN MARK, under the page heading.

   Same crop problem and the same answer as the panel logo above - see that
   note for why the file cannot simply be sized. 1040:235 is 4.43:1, so this
   is that ratio at 60px rather than 40px: the page heading is bigger than a
   panel heading, and a 177px mark under it reads as a stray favicon.

   Nothing else changes: `cover` takes the canvas's empty top and bottom
   outside the box, exactly as it does at the smaller size.
*/
.cn-mem-plus-mark {
  display: block;
  width: 266px;
  height: 60px;
  object-fit: cover;
  object-position: center;
  margin-top: var(--cn-space-4);
}

/* --------------------------------------- the advert ends on the newsletter --- */
/*
   p22 ends the rail's advert level with the newsletter band's foot. The
   column and a fixed 452 x 1357 creative only met by chance (209px apart at
   1440), so beside the column the rail stretches to it and the creative
   fills the stretched box - the same rule Home's skyscraper uses. Below
   1280 the rail stacks and keeps the creative's own shape.
*/
@media (min-width: 1280px) {
  .cn-mem-body > .cn-rail {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
  .cn-mem-body > .cn-rail .cn-ad:not(.cn-ad--placeholder) {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 0;
    contain: size;
  }
  .cn-mem-body > .cn-rail .cn-ad:not(.cn-ad--placeholder) .cn-ad__img { height: 100%; }
}