/* Service detail page template (spec §06): shared by /services/free-team-pulse,
   /services/self-guided-discovery, /services/coach-guided-discovery and the
   workshops detail page /workshops/power-skills, and by level on /levels/….
   Built on tdc-tokens.css - no hex value, rgb() or color keyword here.
   Dark mode comes from the token layer. */

.svc-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.svc-header {
    padding: 2.25rem 2rem 0;
}

.svc-eyebrow {
    color: var(--accent-text);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.svc-pill {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    vertical-align: middle;
    background: var(--surface-subtle);
    color: var(--accent-text);
    border: 1px solid var(--accent);
}

.svc-header h1 {
    font-size: 2.4rem;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.svc-lead {
    color: var(--text-body);
    font-size: 1.15rem;
    line-height: var(--leading-normal);
    max-width: 38rem;
    margin-bottom: 1.5rem;
}

.svc-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 0.9rem;
}

/* Accent-filled call to action. Text on an accent fill reads --on-accent
   per the token contract (white on orange does not pass contrast). */
.btn.svc-cta,
.btn.svc-cta:active {
    background: var(--accent) !important;
    color: var(--on-accent) !important;
    border: none !important;
    border-radius: var(--radius-control);
    padding: 0.85rem 1.4rem;
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    transition: background var(--duration) var(--easing);
}

.btn.svc-cta:hover,
.btn.svc-cta:focus-visible {
    background: var(--accent-hover) !important;
    color: var(--on-accent) !important;
}

/* Secondary action on paid pages: "Not ready? Start the Free Team Pulse" */
.svc-secondary {
    color: var(--interactive);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.svc-secondary:hover,
.svc-secondary:focus-visible {
    color: var(--interactive-hover);
}

.svc-facts {
    color: var(--text-secondary);
    font-size: var(--text-label);
    margin: 0 0 2rem;
}

/* Workshop selector chips (the workshops detail page, spec §06 instance 4) */
.svc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.svc-chip {
    background: var(--surface-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.45rem 0.95rem;
    color: var(--text-body);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: border-color var(--duration) var(--easing),
                background var(--duration) var(--easing);
}

.svc-chip:hover {
    border-color: var(--interactive);
}

.svc-chip-accent {
    border-color: var(--accent);
    color: var(--accent-text);
}

.svc-chip[aria-pressed="true"] {
    background: var(--action-primary-bg);
    border-color: var(--action-primary-bg);
    color: var(--action-primary-text);
}

.svc-chip:focus-visible {
    outline: 2px solid var(--interactive);
    outline-offset: 2px;
}

.svc-eyebrow-gap {
    margin-top: 1.75rem;
}

.svc-dim {
    color: var(--text-body);
    font-size: var(--text-label);
    margin: -0.5rem 0 1.25rem;
}

/* Level tabs: Individual · Agile Team · Leadership · Organizational */
.svc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.25rem;
    margin: 0 -2rem;
    padding: 0 2rem;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 6px 12px -10px var(--surface-overlay);
}

.svc-tab {
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: 0.85rem 1rem;
    color: var(--text-secondary);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: color var(--duration) var(--easing),
                border-color var(--duration) var(--easing);
}

.svc-tab:hover {
    color: var(--text-primary);
}

.svc-tab[aria-selected="true"] {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

.svc-tab:focus-visible {
    outline: 2px solid var(--interactive);
    outline-offset: -2px;
    box-shadow: none;
    border-radius: var(--radius-control) var(--radius-control) 0 0;
}

/* Tab panels */
.svc-panel {
    padding: 2.25rem 2rem 2rem;
}

.svc-panel[hidden] {
    display: none;
}

.svc-col h2 {
    color: var(--accent-text);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
}

.svc-col p,
.svc-col li {
    color: var(--text-body);
    font-size: var(--text-label);
    line-height: 1.55;
}

.svc-col p {
    margin-bottom: 0;
}

.svc-col ul {
    margin: 0;
    padding-left: 1.15rem;
}

.svc-col li + li {
    margin-top: 0.4rem;
}

.svc-col strong,
.svc-limit strong,
.svc-next strong {
    color: var(--text-body);
    font-weight: var(--weight-semibold);
}

/* Level pages (/levels/…): each Discovery panel opens with its own eyebrow, facts and actions */
.svc-service-head {
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--border);
}

.svc-service-head .svc-facts {
    margin-bottom: 0;
}

/* Level pages: the Discovery's own action sits between the four columns and the limit */
.svc-panel-cta {
    margin: 2rem 0 0;
}

/* The honest limit */
.svc-limit {
    background: var(--surface-subtle);
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    padding: 1.35rem 1.5rem;
    margin-top: 2rem;
}

.svc-limit h2,
.svc-next h2 {
    color: var(--text-primary);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.svc-limit p {
    color: var(--text-body);
    font-size: var(--text-label);
    line-height: 1.6;
    margin: 0;
}

/* What happens next: format · duration · effort · natural next step */
.svc-next {
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    padding: 1.35rem 1.5rem;
    margin-top: 1.25rem;
}

.svc-next h2 {
    margin-bottom: 0.9rem;
}

.svc-next-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.svc-next-grid dt {
    color: var(--text-primary);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.svc-next-grid dd {
    color: var(--text-body);
    font-size: var(--text-label);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 767.98px) {
    .svc-header,
    .svc-panel {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .svc-tabs {
        margin: 0 -1.25rem;
        padding: 0 0.5rem;
    }

    .svc-header h1 {
        font-size: 1.9rem;
    }

    .svc-col + .svc-col {
        margin-top: 1.5rem;
    }

    .svc-next-grid {
        grid-template-columns: 1fr;
    }
}