/* canvaswp.com: the guides hub and the long-form guide pages. Loaded only by site/guides/. */

/* Hub cards */
.guide-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 576px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }
.guide-card { position: relative; display: flex; flex-direction: column; gap: .625rem; height: 100%; padding: 1.75rem; border: 1px solid var(--site-line); border-radius: var(--site-radius); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.guide-card:hover, .guide-card:focus-within { transform: translateY(-3px); box-shadow: var(--site-shadow); }
.guide-card .icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .75rem; background: var(--site-accent-soft); color: var(--site-accent-text); font-size: var(--t-2xl); margin-bottom: .25rem; }
.guide-card h3 { font-size: var(--t-lg); font-weight: 700; margin: 0; }
.guide-card h3 a { color: var(--site-ink); text-decoration: none; }
.guide-card h3 a::after { content: ""; position: absolute; inset: 0; }
.guide-card p { color: var(--site-muted); margin: 0; }
.guide-card .guide-card-more { margin-top: auto; padding-top: .875rem; font-size: var(--t-sm); font-weight: 600; color: var(--site-accent-text); }

/* Jump list */
.guide-toc { border: 1px solid var(--site-line); border-radius: .875rem; background: #fff; padding: 1.5rem 1.75rem; max-width: 52rem; margin-inline: auto; }
.guide-toc h2 { font-size: var(--t-lg); font-weight: 700; margin: 0 0 .875rem; }
.guide-toc ol { margin: 0; padding-left: 1.25rem; }
@media (min-width: 768px) { .guide-toc ol { columns: 2; column-gap: 2.5rem; } }
.guide-toc li { margin-bottom: .4375rem; break-inside: avoid; }
.guide-toc a { font-weight: 600; text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }
.guide-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; font-size: var(--t-sm); color: var(--site-muted); margin: 0 0 1.5rem; }
.guide-meta span { display: inline-flex; align-items: center; gap: .375rem; }
.guide-meta i { color: var(--site-accent-text); }

/* Step sections */
.guide-body { max-width: 46rem; margin-inline: auto; }
.guide-body h3 { font-size: var(--t-lg); font-weight: 700; margin: 2rem 0 .625rem; }
.guide-body ul, .guide-body ol { padding-left: 1.25rem; margin-bottom: 1.25rem; }
.guide-body li { margin-bottom: .4375rem; }
.guide-body > p:last-child { margin-bottom: 0; }
.guide-step-head { display: flex; align-items: center; gap: .875rem; margin-bottom: 1.25rem; }
.guide-step-n { display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--site-accent-soft); color: var(--site-accent-text); font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.guide-step-head h2 { margin: 0; }
.guide-note { display: flex; gap: .75rem; align-items: flex-start; background: var(--site-band); border: 1px solid var(--site-line); border-radius: .875rem; padding: 1rem 1.125rem; color: var(--site-muted); font-size: var(--t-sm); margin: 1.5rem 0 0; }
.section-band .guide-note { background: #fff; }
.guide-note i { color: var(--site-accent-text); font-size: var(--t-lg); line-height: 1.45; }
.guide-note p { margin: 0; }
.guide-shot { margin: 1.75rem 0 0; }
.guide-shot figcaption { margin-top: .75rem; font-size: var(--t-sm); color: var(--site-muted); }
.guide-shot .showcase-media { max-height: 30rem; }
@media (max-width: 767.98px) { .guide-shot .showcase-media { max-height: 22rem; } }

/* What to do next */
.guide-next { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 62rem; margin-inline: auto; }
@media (min-width: 768px) { .guide-next { grid-template-columns: repeat(3, 1fr); } }
.guide-next a { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: 1.25rem 1.375rem; border: 1px solid var(--site-line); border-radius: .875rem; background: #fff; text-decoration: none; color: var(--site-ink); transition: transform .15s ease, box-shadow .15s ease; }
.guide-next a:hover, .guide-next a:focus-visible { transform: translateY(-3px); box-shadow: var(--site-shadow); color: var(--site-ink); }
.guide-next .guide-next-kind { font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--site-accent-text); }
.guide-next strong { font-size: var(--t-lg); line-height: 1.3; }
.guide-next .guide-next-text { color: var(--site-muted); font-size: var(--t-sm); }