/* Grand Blade Media: page-guides.css
   Guides index rules, then a few small refinements for the six articles.
   Tokens only (site.css section 2). Contract: the guide layout in this file. */

/* ---------- Index: intro ---------- */
.guides-intro{padding-block:clamp(3.5rem,8vw,7rem) calc(var(--section-y) * .3)}
.guides-intro .section__head{margin-bottom:var(--s-4)}
.guides-intro .section__head .h1{margin-top:0}

/* ---------- Index: start here ---------- */
.guides-start{padding-top:calc(var(--section-y) * .5);padding-bottom:calc(var(--section-y) * .25)}
.guides-start__grid{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:64em){
  .guides-start__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);align-items:start}
}

/* the card and its link both carry padding in site.css, which doubles it; here the link alone pads */
.guides-flagship.card--cut,.guides-list .guide-card.card--cut{padding:0}
.guides-flagship .guide-card__link{gap:1rem;padding:clamp(1.75rem,3.4vw,3rem)}
.guides-flagship .h3{max-width:13em;font-size:clamp(1.875rem,3.4vw,2.875rem);line-height:1.04;letter-spacing:-.02em}
.guides-flagship .guide-card__link p:not(.eyebrow):not(.guide-card__meta){max-width:30rem;font-size:var(--fs-lede);line-height:1.45}
.guides-flagship .guide-card__meta{padding-top:1rem}
.guides-flagship__cta{display:inline-flex;align-items:center;gap:.6em;align-self:flex-start;min-height:2.75rem;margin-top:.5rem;font-weight:500;color:var(--fg);
  text-decoration:underline;text-decoration-color:var(--edge);text-decoration-thickness:1px;text-underline-offset:.35em;transition:text-decoration-thickness var(--dur) var(--ease)}
.guides-flagship__cta::after{content:"";flex:none;width:1.1em;height:.7em;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform var(--dur) var(--ease)}
.guide-card__link:hover .guides-flagship__cta{text-decoration-thickness:2px}
.guide-card__link:hover .guides-flagship__cta::after{transform:translateX(4px)}

/* the reading path */
.guides-path{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.guides-path__list{counter-reset:gp;border-bottom:1px solid var(--line)}
.guides-path__list>li{counter-increment:gp;border-top:1px solid var(--line)}
.guides-path__link{display:grid;grid-template-columns:2.75rem minmax(0,1fr);padding:1.35rem 0;color:inherit;text-decoration:none}
.guides-path__link::before{content:counter(gp,decimal-leading-zero);grid-row:1 / span 3;padding-top:.4rem;
  font:500 var(--fs-eyebrow)/1.3 var(--sans);letter-spacing:.14em;color:var(--fg-2)}
.guides-path__title,.guides-path__why,.guides-path__meta{grid-column:2;min-width:0}
/* the underline is there at rest, for every input, so a touch screen sees a link; hover only thickens it */
.guides-path__title{font:400 clamp(1.25rem,2vw,1.5rem)/1.2 var(--serif);letter-spacing:-.005em;text-wrap:balance;
  text-decoration:underline;text-decoration-color:var(--edge);text-decoration-thickness:1px;text-underline-offset:.16em;
  transition:text-decoration-color var(--dur) var(--ease),text-decoration-thickness var(--dur) var(--ease)}
.guides-path__link:hover .guides-path__title{text-decoration-color:var(--edge);text-decoration-thickness:2px}
.guides-path__why{margin-top:.5rem;font-size:.9375rem;line-height:1.5;color:var(--fg-2);text-wrap:pretty}
.guides-path__meta{margin-top:.5rem;font-size:var(--fs-small);line-height:1.5;color:var(--fg-2)}
.guides-path__link:focus-visible{outline-offset:4px}
.guides-path__alt{margin-top:var(--s-1);color:var(--fg-2)}

/* ---------- Index: the note and the groups ---------- */
.guides-all{padding-top:calc(var(--section-y) * .25);padding-bottom:calc(var(--section-y) * .25)}
.guides-note .split,.guides-group .split{padding-block:var(--s-4) var(--s-5)}
.guides-group:last-child .split{padding-bottom:0}
.guides-note__text{max-width:24em;font:400 clamp(1.5rem,2.6vw,2.125rem)/1.22 var(--serif);letter-spacing:-.01em;text-wrap:balance}
/* the rail is an uppercase label; a group heading inside it is set back to a plain serif title */
.guides-group__title{font:400 var(--fs-h3)/1.15 var(--serif);letter-spacing:-.005em;text-transform:none;color:var(--fg)}
/* One column at every width. Most groups hold a single guide, so a second column only ever leaves a
   half-empty row; a card stops at about 46rem so a lone card in a wide body still reads as a card. */
.guides-list{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:minmax(0,1fr)}
.guides-list>.guide-card{max-width:46rem}

.guides-close{padding-top:calc(var(--section-y) * .5);padding-bottom:calc(var(--section-y) * .3)}

/* ---------- Articles (guides/<slug>/): small refinements ---------- */
.prose code{overflow-wrap:anywhere}
.prose pre code{overflow-wrap:normal}
.article__head .chip--tested{max-width:100%}
@media print{
  .prose pre{white-space:pre-wrap;overflow:visible}
  .guides-path__link,.guides-flagship{break-inside:avoid}
}