/* Workflow template pages (template-library/). Everything else comes from ds.css. */

/* About: text beside a details panel; stacked on phones. */
.wt-about { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .wt-about { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; } }
.wt-about__text { display: flex; flex-direction: column; gap: 16px; }
.wt-facts {
    display: flex; flex-direction: column; gap: 10px;
    padding: 28px; border-radius: 20px; background: var(--ds-surface-soft);
}
.wt-facts__title { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-teal-700); margin-top: 8px; }
.wt-facts__title:first-child { margin-top: 0; }
.wt-facts__text { font-size: 15px; }

/* "Use this template to": two columns from tablet up. */
@media (min-width: 720px) { .wt-checklist { columns: 2; column-gap: 40px; } .wt-checklist li { break-inside: avoid; } }

/* Index: jump links to each industry. */
.wt-jump { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.ds-page .wt-jump a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
    border: 1.5px solid var(--ds-teal-200); border-radius: var(--ds-radius-pill);
    color: var(--ds-ink-teal); font-weight: 600; text-decoration: none; background: var(--ds-surface);
}
.ds-page .wt-jump a:hover, .ds-page .wt-jump a:focus-visible { border-color: var(--ds-teal-700); background: var(--ds-teal-50); }
.wt-group { scroll-margin-top: calc(var(--ds-header-h, 72px) + 16px); }
.wt-group + .wt-group { margin-top: 56px; }
.wt-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 20px; }
.wt-group__title { font-family: var(--ds-font-display); font-size: 26px; line-height: 34px; color: var(--ds-ink-teal); }
.wt-group__text { color: var(--ds-text-soft); }

/* Template cards: fixed-width columns, so a group with one card doesn't stretch it across the row. */
.wt-group .ds-cards { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
/* "View template" in teal-700 on the light cards (mint is for dark cards; it fails contrast here). */
.ds-cards--soft .ds-card__more, .ds-cards--white .ds-card:not(.ds-card--dark) .ds-card__more { color: var(--ds-teal-700); }