/* public/assets/css/pages.css -- layout for the business and goal pages (/for/<slug>/, /use/<slug>/), loaded last.
 * Those pages are generated by pages/build.mjs. They reuse the homepage's sections (sp-head, sp-glass, sl-work-grid,
 * sp-faq, sp-close-card); this sheet adds only what is theirs: the Example card, the "where you are" list, the run
 * cards and the sibling links. Colours stay in the warm paper and gold skin (theme-warm-gold.css): ink #15231B,
 * slate #4A5560, heartwood #8C6428, bronze #B8893A, honey #D4A857, pine #2E6F40. No teal, no blue, no red.
 */

/* ---------------------------------------------------------------------------------------------------- hero */
.pg-hero .pg-hero-body { max-width: 34em; font-size: 19px; }
@media (min-width: 960px) { .pg-hero .pg-hero-body { font-size: 21px; } }
.pg-hero-ex { margin: 0; width: 100%; max-width: 460px; justify-self: center; min-width: 0; }
.pg-hero-ex .pg-ex { box-shadow: var(--sp-highlight), 0 0 0 1px rgba(212, 168, 87, .22), 0 34px 70px -34px rgba(140, 100, 40, .5); }
.pg-ex-note { margin-top: 14px; padding: 0 6px; font-size: 15px; line-height: 1.55; color: var(--sp-muted); text-align: center; }

/* ---------------------------------------------------------------------------------------------------- the Example card */
.pg-ex { position: relative; padding: 22px; border-radius: 22px; min-width: 0; }
.pg-ex-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; font-family: var(--sp-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8C6428; }
.pg-ex-label span:first-child { padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(184, 137, 58, .45); background: rgba(212, 168, 87, .14); }
.pg-ex-label span + span { color: #5F6B65; }
.pg-ex-page { padding: 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E8DFCB; box-shadow: 0 14px 30px -24px rgba(23, 63, 39, .35); }
.pg-ex-tag { display: inline-block; margin-bottom: 10px; padding: 4px 9px; border-radius: 6px; font-family: var(--sp-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8C6428; background: rgba(212, 168, 87, .18); }
.pg-ex-title { margin: 0 0 14px; font-family: var(--mf-font-display); font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--sp-text); }
.pg-ex-for { margin: -6px 0 16px; font-size: 15px; line-height: 1.5; color: var(--sp-muted); }
.pg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pg-steps li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 11px 13px; border-radius: 12px; background: #FBF8F1; border: 1px solid rgba(140, 100, 40, .14); }
.pg-step-n { flex: none; font-family: var(--sp-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #8C6428; }
.pg-step-t { flex: 1 1 12em; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--sp-text); }
.pg-steps li.is-open { background: rgba(46, 111, 64, .07); border-color: rgba(46, 111, 64, .4); }
.pg-step-badge { flex: none; margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #2E6F40; background: rgba(46, 111, 64, .12); border: 1px solid rgba(46, 111, 64, .35); }

/* Example Sprints: three across when wide, two when there are two, one on phones */
.pg-ex-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pg-ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .pg-ex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-ex-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-ex-grid .pg-ex { padding: 24px; }
.pg-ex-grid .pg-ex-title { font-size: 22px; }

/* ---------------------------------------------------------------------------------------------------- where you are today */
.pg-today-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .pg-today-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-today-list li { position: relative; padding: 26px 24px 24px 56px; border-radius: 20px; font-family: var(--mf-font-display); font-size: 20px; font-weight: 500; line-height: 1.35; color: var(--sp-text); }
.pg-today-list li::before { content: "\201C"; position: absolute; left: 20px; top: 14px; font-family: var(--mf-font-display); font-size: 48px; line-height: 1; color: #B8893A; }

/* ---------------------------------------------------------------------------------------------------- what they get, how to run it */
.pg-gets .sp-head { margin-bottom: 0; }
.pg-run-for { margin: 0 0 12px; font-family: var(--sp-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #8C6428; }
.pg-run-grid.is-one { grid-template-columns: minmax(0, 1fr); max-width: 640px; }

/* ---------------------------------------------------------------------------------------------------- other businesses / goals */
.pg-sib-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .pg-sib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html[data-et-theme="dark"] a.pg-sib { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 20px 22px; border-radius: 18px; color: var(--sp-text); text-decoration: none; transition: border-color .2s ease, transform .15s ease; }
a.pg-sib:hover, a.pg-sib:focus-visible { border-color: rgba(184, 137, 58, .6); transform: translateY(-1px); }
.pg-sib-k { grid-column: 1; font-family: var(--sp-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5F6B65; }
.pg-sib-name { grid-column: 1; font-family: var(--mf-font-display); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--sp-text); }
.pg-sib-arrow { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; color: #8C6428; }
.pg-home { margin: 26px 0 0; font-size: 16px; }
html[data-et-theme="dark"] .pg-home a { color: #8C6428; font-weight: 600; text-decoration: none; }
.pg-home a:hover { text-decoration: underline; }

@media (max-width: 479px) {
  .pg-ex, .pg-ex-grid .pg-ex { padding: 18px 16px; }
  .pg-ex-page { padding: 14px; }
  .pg-today-list li { font-size: 18px; padding: 22px 18px 20px 48px; }
  .pg-today-list li::before { left: 16px; }
}