/* ============================================================================
   Package 2 — article template: left-aligned column + sticky right rail.

   GEOMETRY, measured on the live page at a 1920px viewport before anything was
   changed, not guessed:

       logo / header container (.p1-wrap)   333 .. 1573   (1240 wide)
       article text as it used to be        613 .. 1293   ( 680 wide, centred)

   Fabien's instruction was to keep the right edge of the content exactly where
   it is and extend the column left to the logo, then use what remains on the
   right for the rail. That gives a 960px column and a 280px rail — and 960 is
   already this theme's --container-wide, so his line falls exactly on the
   existing grid.

   ONE CONFLICT, resolved deliberately and flagged to the client rather than
   decided quietly: the brief also specifies 300x250 and 300x600 banners, and
   280 < 300. Moving the text edge left to make room would break the explicit
   instruction above, so the instruction wins and banner images are capped at
   the rail width instead — a 300px creative renders at 280px, 6.7% down. If
   they would rather have native-size banners, widen the rail here and the
   column follows automatically.
   ========================================================================= */

.p2-art{padding:0 0 8px}
/* No align-items:start here: the rail grid item must STRETCH to the full row
   height, or the sticky element inside it has no distance to travel and
   scrolls away with the page. Caught by scrolling in QA, not by reading
   position:sticky off getComputedStyle — that said "sticky" either way. */
.p2-art-in{display:grid;grid-template-columns:minmax(0,1fr) 280px}

/* The column keeps its box edge on the old 1293 line; the padding is the
   gutter, so text never runs into the rail. --container-content drives the
   theme's own content/breakout grid inside .ghost-content, so setting it here
   is what actually widens the prose — the article element has no max-width. */
.p2-col{min-width:0;padding-right:40px;--container-content:920px}

/* post-hero and the legacy body partials each re-apply the site container and
   their own side padding. Inside the column that would re-indent and re-centre
   everything, so neutralise it here rather than editing partials that other
   templates still use. */
.p2-col > section,
.p2-col > div[data-post-info]{padding-left:0;padding-right:0}
.p2-col .max-w-site,
.p2-col .max-w-content,
.p2-col .max-w-wide{max-width:none;margin-left:0;margin-right:0}
.p2-col [data-post-hero-content]{margin-left:0;margin-right:0}

/* ---- the rail ---------------------------------------------------------- */
.p2-rail{min-width:0}
/* 66px sticky header + breathing room. */
.p2-rail-in{position:sticky;top:86px;display:flex;flex-direction:column;gap:28px}

.p2-banners{display:flex;flex-direction:column;gap:20px}
/* Ghost wraps an editor image in <figure class="kg-card kg-image-card">, and
   links it with an <a> when the editor sets a destination. Strip the editor's
   own spacing so a banner is just the banner. */
.p2-banners figure{margin:0}
.p2-banners img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto}
.p2-banners figcaption{display:none}
/* An empty or absent banner page leaves nothing to show. */
.p2-banners:not(:has(img)){display:none}

.p2-rail-h{font-family:var(--p1-font-head,inherit);font-size:13px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;padding-bottom:8px;
  border-bottom:2px solid currentColor}

/* ---- partner content --------------------------------------------------- */
.p2-partner-grid{display:flex;flex-direction:column;gap:14px}
.p2-pc{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:inherit}
.p2-pc + .p2-pc{border-top:1px solid var(--color-brd-soft,#e4ecef);padding-top:14px}
.p2-pc-img{width:80px;height:80px;flex:none;object-fit:cover;border-radius:4px;display:block}
.p2-pc-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.p2-pc-kicker{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.p2-pc-title{font-size:14px;line-height:1.35;font-weight:600}
.p2-pc:hover .p2-pc-title{text-decoration:underline;text-underline-offset:2px}
/* Three partner posts fill the block and push every interview out of sight;
   one partner post lets two interviews through. This is the "filled with the
   latest interviews when there are fewer than three" rule. */
.p2-partner-grid > .p2-pc:nth-child(n+4){display:none}
/* Neither query returned anything — on Humakina today that is both of them. */
.p2-partner:not(:has(.p2-pc)){display:none}
/* And with no banners either, the rail itself is an empty column. */
.p2-rail:not(:has(img)):not(:has(.p2-pc)){display:none}

/* The sections below the article (related, authors, sponsored) still use the
   centred 1200px container; the column above them is now flush with the
   1240px header line at 333. Align their left edges so the page reads as one
   grid. Scoped to siblings of .p2-art so list pages keep their own layout. */
.p2-art ~ section{padding-left:0;padding-right:0}
.p2-art ~ section > .max-w-site{width:min(1240px,calc(100% - 48px));max-width:1240px}

/* ---- below the lg breakpoint the rail drops under the article ---------- */
@media (max-width:1023px){
  .p2-art-in{grid-template-columns:minmax(0,1fr)}
  .p2-col{padding-right:0;--container-content:680px}
  .p2-rail{margin-top:36px}
  .p2-rail-in{position:static;align-items:center}
  .p2-banners{align-items:center;width:100%}
  .p2-partner{width:100%;max-width:560px}
}