/* MindfulSPC collection pages (/sensoryspc, /editspc, ...). Scoped to .spc-page so the rest of the site is untouched. */
/* Colors come from the existing site tokens in styles.css (sky, midnight, periwinkle). Lexend is used for headings only. */
.spc-page h1, .spc-page h2, .spc-page h3 { font-family: "Lexend", var(--font-body); letter-spacing: -0.01em; }
.spc-hero { background: linear-gradient(135deg, #EAF6FC 0%, #F1F0FF 100%); padding-block: var(--space-5); }
.spc-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.spc-hero .lede { max-width: 56ch; }
.spc-hero img { justify-self: center; width: 100%; height: auto; }
.spc-hero img.spc-photo { max-width: 460px; border-radius: 24px; box-shadow: 0 18px 40px rgba(22, 10, 55, 0.12); }
.spc-hero img.spc-mark { max-width: 200px; }
@media (max-width: 760px) {
  .spc-hero-grid { grid-template-columns: 1fr; }
  .spc-hero img.spc-photo { max-width: 100%; }
  .spc-hero img.spc-mark { max-width: 120px; justify-self: start; order: -1; }
}
.spc-intro p { max-width: var(--measure); font-size: 1.1rem; }
.spc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.spc-card { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: var(--space-3); }
.spc-card h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.spc-card p { margin: 0; }
.spc-card img { width: 100%; height: auto; border-radius: 12px; }
.spc-card .btn { margin-top: auto; align-self: flex-start; }
.spc-card.is-preview { border-style: dashed; background: #F7F7FF; }
.spc-kind { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.spc-meta { font-size: 0.95rem; }
.spc-where { color: var(--ink); opacity: 0.85; }
.spc-areas { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }
.spc-areas li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 1rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.spc-chip { white-space: nowrap; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: 999px; background: #ECEBFF; color: var(--ink); }
.spc-chip.is-live { background: var(--ink); color: var(--white); }
.spc-cta h2, .spc-cta p { color: var(--white); }
.spc-cta .spc-secondary a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.spc-related { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); }
.spc-related a { display: flex; flex-direction: column; gap: 0.25rem; height: 100%; padding: var(--space-2); border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink); text-decoration: none; }
.spc-related a:hover { border-color: var(--ochre); }
.spc-related a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.spc-related span { font-size: 0.92rem; }
.spc-info { padding-block: var(--space-2); }