/* ==========================================================================
   /blog index: the guides journal (loaded after /redesign.css and /css/pages.css)
   The guide cards are frozen markup: scripts/publish-due-posts.js guideCard() writes
   them daily and the page script rebuilds them from posts.js. So the layout comes
   only from a card's position in #guides, never from new classes or wrappers:
     1st card   the lead story (photo left, large title right)
     2nd + 3rd  two stories side by side
     4th on     index rows over hairlines: date | tag, title, summary | photo
   Whatever the publisher writes (one guide or fifty), it lands in one of those.
   ========================================================================== */

/* ---------- Masthead: label, the H1 across the page, lede set to the right ---------- */
.ph--journal .ph-copy{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.ph--journal .ph-copy>*{grid-column:1/-1}
.ph--journal .ph-h{grid-column:1/12}
.ph--journal .ph-lede{grid-column:7/13;max-width:none;margin-top:clamp(32px,4vw,64px);padding-top:20px;border-top:1px solid var(--rule)}

.gd-ch{padding-top:clamp(64px,7vw,120px)}

/* ---------- The grid: one 12-column track, cards placed by position ---------- */
.gd-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px}
.gd-card{grid-column:1/-1}
.gd-card .wk-tag{margin-bottom:12px}
.gd-card .gd-date{margin:0 0 14px;font-size:var(--fs-small)}

/* lead story */
.gd-card:first-child{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding-bottom:clamp(64px,7vw,112px);border-bottom:1px solid var(--rule)}
.gd-card:first-child .wk-thumb{grid-column:1/8;margin:0;aspect-ratio:4/3}
.gd-card:first-child .wk-body{grid-column:8/13;padding-left:clamp(8px,2vw,32px)}
.gd-card:first-child h3{font-size:clamp(2.25rem,3.7vw,3.9rem);line-height:.98;letter-spacing:-.02em}
.gd-card:first-child .wk-desc{margin-top:22px;font-size:var(--fs-body);line-height:1.55;max-width:26em}

/* two stories side by side */
.gd-card:nth-child(2){grid-column:1/7}
.gd-card:nth-child(3){grid-column:7/13}
.gd-card:is(:nth-child(2),:nth-child(3)){padding-block:clamp(56px,6vw,96px)}
/* a wider alley between the pair than the 24px track gap, so two titles never meet */
.gd-card:nth-child(2){padding-right:clamp(0px,1.4vw,24px)}
.gd-card:nth-child(3){padding-left:clamp(0px,1.4vw,24px)}

/* index rows: date | tag + title + summary | photo, hairline between rows */
.gd-card:nth-child(n+4){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:24px;align-items:start;padding:clamp(28px,2.8vw,40px) 0;border-top:1px solid var(--rule)}
.gd-card:nth-child(n+4):last-child{border-bottom:1px solid var(--rule)}
.gd-card:nth-child(n+4) .wk-body{display:contents}
.gd-card:nth-child(n+4) .gd-date{grid-column:1/4;grid-row:1/-1;margin:2px 0 0}
.gd-card:nth-child(n+4) .wk-tag{grid-column:4/10;grid-row:1}
/* capped at its 1440 size: .wrap stops widening there, so a vw size would keep growing into the photo */
.gd-card:nth-child(n+4) h3{grid-column:4/10;grid-row:2;font-size:clamp(1.6rem,2.3vw,2.0625rem);line-height:1.06}
.gd-card:nth-child(n+4) .wk-desc{grid-column:4/9;grid-row:3;margin-top:12px}
.gd-card:nth-child(n+4) .wk-thumb{grid-column:10/13;grid-row:1/-1;margin:0}

/* the closing action, centred under the last row; the empty-state note (no guides
   published) centres with it */
.gd-more{display:flex;justify-content:center;margin-top:clamp(64px,7vw,112px)}
.gd-empty{margin-inline:auto;text-align:center;text-wrap:pretty}
.gd-empty:not([hidden])+.gd-more{margin-top:40px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  /* rows: the date joins the tag above the title, photo keeps the right-hand third */
  .gd-card:nth-child(n+4){grid-template-rows:auto auto auto 1fr}
  .gd-card:nth-child(n+4) .wk-tag{grid-column:1/9;grid-row:1}
  .gd-card:nth-child(n+4) .gd-date{grid-column:1/9;grid-row:2;margin:0 0 12px}
  .gd-card:nth-child(n+4) h3{grid-column:1/9;grid-row:3}
  .gd-card:nth-child(n+4) .wk-desc{grid-column:1/9;grid-row:4}
  .gd-card:nth-child(n+4) .wk-thumb{grid-column:9/13;grid-row:1/-1}
}
@media (max-width:960px){
  .ph--journal .ph-h{grid-column:1/-1}
  .ph--journal .ph-lede{grid-column:4/13}
  /* lead story stacks: photo, then the copy */
  .gd-card:first-child{display:flex;flex-direction:column;align-items:stretch}
  .gd-card:first-child .wk-thumb{margin-bottom:26px;aspect-ratio:3/2}
  .gd-card:first-child .wk-body{padding-left:0}
}
@media (max-width:760px){
  .ph--journal .ph-lede{grid-column:1/-1}
  .gd-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
  .gd-card:nth-child(n){grid-column:1/-1}
  .gd-card:first-child{padding-bottom:48px}
  .gd-card:is(:nth-child(2),:nth-child(3)){padding:44px 0}
  .gd-card:nth-child(3){border-top:1px solid var(--rule)}
  /* rows: tag, title and date beside a square photo, summary underneath */
  .gd-card:nth-child(n+4){grid-template-columns:minmax(0,1fr) minmax(0,36%);grid-template-rows:auto auto 1fr auto;column-gap:18px;padding:28px 0}
  .gd-card:nth-child(n+4) .wk-tag{grid-column:1;grid-row:1;margin-bottom:10px}
  .gd-card:nth-child(n+4) h3{grid-column:1;grid-row:2;font-size:1.5rem;line-height:1.08}
  .gd-card:nth-child(n+4) .gd-date{grid-column:1;grid-row:3;margin:10px 0 0}
  .gd-card:nth-child(n+4) .wk-thumb{grid-column:2;grid-row:1/4;aspect-ratio:1/1}
  .gd-card:nth-child(n+4) .wk-desc{grid-column:1/-1;grid-row:4;margin-top:16px}
}