/* Tone kit for the v3 detail templates (services / solutions / industries), 2026-10-31.
   Loaded by render-service-v3.php, solutions/render-solution-v3.php and industries/render-industry-v3.php.
   The section tone engine (css/section-system.css) paints every band white, burgundy or pink, so the SAME band can land on any
   of the three tones. Everything that has its own surface (cards, chips, icon tiles, step numbers, lines) therefore reads its
   colours from the --tk-* variables below, which follow the band's data-ss tone. Text sitting directly on the band is coloured
   by the engine (.ss-h / .ss-t). Classes:
     .tk-head   centred eyebrow + heading block        .tk-grid   centred, evenly distributed card grid (orphans centre)
     .tk-card   bordered card                          .tk-ic     small icon tile            .tk-chip  pill link / label
     .tk-line   divider colour                         .tk-close  centred content of the closing .final-card */

html body section[data-ss="w"]:not(#_) { --tk-card: #ffffff; --tk-card-bd: rgba(71, 0, 0, .14); --tk-card-sh: 0 14px 30px -22px rgba(71, 0, 0, .38); --tk-ch: #470000; --tk-ct: #470000; --tk-chip: #ffffff; --tk-chip-fg: #470000; --tk-chip-bd: rgba(71, 0, 0, .24); --tk-ic-bg: rgba(255, 0, 0, .08); --tk-ic-bd: rgba(255, 0, 0, .2); --tk-line: rgba(71, 0, 0, .14); --tk-soft: rgba(255, 0, 0, .05); }
html body section[data-ss="p"]:not(#_) { --tk-card: #ffffff; --tk-card-bd: rgba(71, 0, 0, .14); --tk-card-sh: 0 14px 30px -22px rgba(71, 0, 0, .38); --tk-ch: #470000; --tk-ct: #470000; --tk-chip: #ffffff; --tk-chip-fg: #470000; --tk-chip-bd: rgba(71, 0, 0, .22); --tk-ic-bg: rgba(255, 0, 0, .08); --tk-ic-bd: rgba(255, 0, 0, .2); --tk-line: rgba(71, 0, 0, .16); --tk-soft: rgba(255, 255, 255, .65); }
html body section[data-ss="b"]:not(#_) { --tk-card: rgba(255, 255, 255, .07); --tk-card-bd: rgba(255, 255, 255, .22); --tk-card-sh: none; --tk-ch: #ffffff; --tk-ct: rgba(255, 255, 255, .88); --tk-chip: rgba(255, 255, 255, .1); --tk-chip-fg: #ffffff; --tk-chip-bd: rgba(255, 255, 255, .36); --tk-ic-bg: rgba(255, 255, 255, .1); --tk-ic-bd: rgba(255, 255, 255, .24); --tk-line: rgba(255, 255, 255, .2); --tk-soft: rgba(255, 255, 255, .08); }

/* ---- centred heading block ---- */
.tk-head { text-align: center; margin: 0 auto 36px; max-width: 920px; }
.tk-head > .tk-kick { margin-left: auto; margin-right: auto; }
.tk-head h2 { margin-left: auto; margin-right: auto; max-width: 880px; }
.tk-head > p { margin-left: auto; margin-right: auto; max-width: 720px; }

/* ---- card grid: columns follow the item count, a short last row is centred (never a lone card hugging the left) ---- */
.tk-grid { --n: 3; --gap: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); text-align: left; }
.tk-grid > * { flex: 0 1 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); min-width: 0; box-sizing: border-box; }
.tk-grid:has(> :nth-child(4):last-child) { --n: 4; }
.tk-grid:has(> :nth-child(7)):not(:has(> :nth-child(9))) { --n: 4; }
.tk-grid:has(> :nth-child(2):last-child) { --n: 2; }
.tk-grid:has(> :only-child) { --n: 2; }
.tk-grid.tk-grid--2 { --n: 2; }
.tk-grid.tk-grid--3 { --n: 3; }
@media (max-width: 1100px) { .tk-grid.tk-grid, .tk-grid.tk-grid:has(> *) { --n: 2 !important; } }
@media (max-width: 640px) { .tk-grid.tk-grid, .tk-grid.tk-grid:has(> *) { --n: 1 !important; } }

/* ---- card ---- */
.tk-card { background: var(--tk-card); border: 1px solid var(--tk-card-bd); border-radius: 16px; box-shadow: var(--tk-card-sh); padding: 26px; box-sizing: border-box; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.tk-card:hover { transform: translateY(-3px); border-color: rgba(255, 0, 0, .45); }
.tk-card :is(h3, h4) { color: var(--tk-ch); }
.tk-card :is(p, li) { color: var(--tk-ct); }
.tk-card :is(p, li):last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .tk-card { transition: none; } .tk-card:hover { transform: none; } }

/* ---- icon tile ---- */
.tk-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: var(--tk-ic-bg); border: 1px solid var(--tk-ic-bd); color: #ff0000; font-size: 1.05rem; }
.tk-ic i { color: #ff0000; }

/* ---- chips: bordered on white/pink, glassy on burgundy ---- */
.tk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; text-align: center; }
.tk-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 18px; border: 1px solid var(--tk-chip-bd); border-radius: 999px; background: var(--tk-chip); color: var(--tk-chip-fg); font-size: .9rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; box-sizing: border-box; }
a.tk-chip:hover, a.tk-chip:focus-visible { border-color: #ff0000; color: #ff0000; transform: translateY(-2px); text-decoration: none; }
html body section[data-ss="b"]:not(#_) a.tk-chip:hover, html body section[data-ss="b"]:not(#_) a.tk-chip:focus-visible { background: #ff0000; border-color: #ff0000; color: #ffffff; }
span.tk-chip:hover { border-color: #ff0000; }
@media (prefers-reduced-motion: reduce) { .tk-chip { transition: none; } a.tk-chip:hover { transform: none; } }

/* ---- closing .final-card: centred ---- */
html body section.final-card.tk-close:not(#_) > .container { text-align: center; }
html body section.final-card.tk-close:not(#_) > .container :is(h2, p) { margin-left: auto; margin-right: auto; }
html body section.final-card.tk-close:not(#_) > .container h2 { max-width: 900px; }
html body section.final-card.tk-close:not(#_) > .container p { max-width: 780px; }
html body section.final-card.tk-close:not(#_) :is(.sv3-actions, .sl3-actions, .iv3-actions, .dt-actions) { justify-content: center; }