/* 10k Solutions — component showcase page (template: Component showcase).
   Scoped under .tk-showcase; loads only on that template. */
.tk-showcase-main { margin: 0; padding: 0; }
.tk-showcase { --sc-max: var(--width-wide); }
.tk-showcase .sc-wrap { inline-size: min(100% - var(--page-margin) * 2, var(--sc-max)); margin-inline: auto; }
.tk-showcase .sc-band { padding-block: var(--space-section-s); background: var(--color-bg); color: var(--color-text); }
.tk-showcase .sc-head { display: grid; gap: var(--space-4); max-inline-size: 52rem; margin-block-end: var(--space-7); }
.tk-showcase .sc-head h2 { font-size: var(--fs-3xl); }
.tk-showcase .sc-head p { margin: 0; color: var(--color-text-secondary); }
.tk-showcase code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-secondary); background: none; }

.tk-showcase .sc-hero { padding-block: var(--space-section-m); }
.tk-showcase .sc-hero .sc-wrap { display: grid; gap: var(--space-6); }
.tk-showcase .sc-hero .is-lead { margin: 0; }
.tk-showcase .sc-mark { margin: 0; font-family: var(--font-display); font-weight: var(--fw-heavy); font-size: var(--fs-4xl); line-height: 1; letter-spacing: -0.05em; color: var(--paper-100); }
.tk-showcase .sc-mark span { display: inline-block; background: var(--gradient-k); -webkit-background-clip: text; background-clip: text; color: transparent; transform: skewX(-8deg); }

.tk-showcase .sc-queue { list-style: none; margin: 0; padding: 0; counter-reset: sc; display: grid; gap: var(--space-3); max-inline-size: 40rem; }
.tk-showcase .sc-queue li { counter-increment: sc; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-bg-raised); border: 1px solid var(--color-border); border-radius: var(--radius-m); max-inline-size: none; }
.tk-showcase .sc-queue li::before { content: counter(sc, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-secondary); }
.tk-showcase .sc-queue b { flex: 1; font-weight: var(--fw-semibold); }
.tk-showcase .sc-pill { font-family: var(--font-mono); font-size: var(--fs-2xs); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--paper-200); color: var(--ink-600); }
.tk-showcase .sc-pill--active { background: var(--coral-100); color: var(--coral-700); }

.tk-showcase .sc-type { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-5); border-block-start: 1px solid var(--color-border); align-items: baseline; }
.tk-showcase .sc-type__meta { display: grid; gap: var(--space-1); }
.tk-showcase .sc-type__sample { min-inline-size: 0; }
.tk-showcase .sc-type__sample > * { margin: 0; }
@media (max-width: 600px) { .tk-showcase .sc-type { grid-template-columns: 1fr; gap: var(--space-2); } }
.tk-showcase .sc-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-7); margin-block-start: var(--space-7); }
.tk-showcase .sc-body > div { display: grid; gap: var(--space-4); align-content: start; }
.tk-showcase .sc-body p { margin: 0; }

.tk-showcase .sc-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--space-5); }
.tk-showcase .sc-swatch { margin: 0; display: grid; gap: var(--space-3); }
.tk-showcase .sc-swatch__chip { display: block; aspect-ratio: 16 / 9; max-inline-size: 100%; border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px rgb(21 18 30 / .08); }
.tk-showcase .sc-swatch figcaption { display: grid; gap: 2px; font-size: var(--fs-s); }
.tk-showcase .sc-swatch figcaption span { font-size: var(--fs-xs); color: var(--color-text-secondary); }
.tk-showcase .sc-gradients { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-5); margin-block-start: var(--space-7); }
.tk-showcase .sc-gradients div { min-block-size: 7rem; border-radius: var(--radius-notch); padding: var(--space-4); display: flex; align-items: flex-end; font-family: var(--font-mono); font-size: var(--fs-xs); }
.tk-showcase .sc-feedbacks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-4); margin-block-start: var(--space-7); }
.tk-showcase .sc-feedback { border-radius: var(--radius-s); padding: var(--space-4); display: grid; gap: var(--space-1); font-size: var(--fs-s); }
.tk-showcase .sc-feedback span { color: var(--color-text); }

.tk-showcase .sc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--color-border); }
.tk-showcase .sc-split__pane { padding: var(--space-6); display: grid; gap: var(--space-5); align-content: start; background: var(--color-bg); color: var(--color-text); }
.tk-showcase .sc-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.tk-showcase .sc-field { display: grid; gap: var(--space-2); max-inline-size: 24rem; }
.tk-showcase .sc-field label { font-weight: var(--fw-semibold); font-size: var(--fs-s); }
.tk-showcase .sc-field input { inline-size: 100%; box-sizing: border-box; }

.tk-showcase .sc-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--space-5); }
.tk-showcase .sc-shapes div { aspect-ratio: 1; max-inline-size: 100%; box-sizing: border-box; background: var(--paper-50); border: 1px solid var(--color-border); display: grid; place-items: end start; padding: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-secondary); }
.tk-showcase .sc-shapes .sc-shapes__notch { background: var(--coral-100); border-color: transparent; color: var(--coral-700); }
.tk-showcase .sc-elev { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--space-6); margin-block: var(--space-7); }
.tk-showcase .sc-elev div { background: var(--paper-50); border-radius: var(--radius-m); padding: var(--space-5); min-block-size: 6rem; display: grid; align-content: end; gap: 2px; font-size: var(--fs-s); }
.tk-showcase .sc-feature { padding: var(--space-6); display: grid; gap: var(--space-4); text-decoration: none; color: inherit; max-inline-size: 26rem; }
.tk-showcase .sc-feature h4 { font-size: var(--fs-xl); }
.tk-showcase .sc-feature p { margin: 0; color: var(--color-text-secondary); }

.tk-showcase .sc-cols > div { background: var(--iris-100); border-radius: var(--radius-xs); min-block-size: 2.25rem; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--iris-700); }
.tk-showcase .sc-cols + .sc-cols { margin-block-start: var(--space-4); }
.tk-showcase .sc-cols--use > div { background: var(--coral-100); color: var(--coral-700); min-block-size: 4.5rem; }
.tk-showcase .sc-spaces { margin-block-start: var(--space-8); }
.tk-showcase .sc-space { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 3rem; gap: var(--space-4); align-items: center; padding-block: var(--space-2); }
.tk-showcase .sc-space i { display: block; block-size: .625rem; background: var(--coral-500); border-radius: var(--radius-pill); }

.tk-showcase .sc-foot { padding-block: var(--space-7); font-family: var(--font-mono); font-size: var(--fs-xs); }
.tk-showcase .sc-foot .sc-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); color: var(--ink-300); }

/* Showcase/prototype template: no block-gap above or around the content, so full-viewport prototypes sit flush */
.page-template-showcase .wp-site-blocks > *,
.page-template-showcase .tk-showcase-main,
.page-template-showcase .tk-showcase-main > * { margin-block: 0; }
.page-template-showcase .tk-showcase-main > .wp-block-post-content > * + * { margin-block-start: 0; }