/* ==========================================================================
   OnlyTools – szablon strony roli („Kim jesteś?”)
   Bazuje na main.css + kategoria.css + branza.css
   ========================================================================== */

/* ---------- Panel „Typowy dostawca ⇄ OnlyTools” ---------- */
.vs { background: var(--c-panel); border: 1px solid var(--c-line-hi); box-shadow: var(--shadow-2); animation: fade-up .9s .3s var(--ease) both; min-width: 0; }
.vs__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-line); }
.vs__title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }
.vs__switch {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 40px; padding: 3px;
  border: 1px solid var(--c-line-hi); background: var(--c-base); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-muted);
}
.vs__switch span { position: relative; z-index: 1; display: grid; place-items: center; padding: 0 .8rem; white-space: nowrap; transition: color .3s; }
.vs__switch::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--c-line-hi); transition: transform .45s var(--ease), background-color .3s; }
.vs.is-ours .vs__switch::before { transform: translateX(100%); background: var(--c-accent-fill); }
.vs:not(.is-ours) .vs__switch span:first-child, .vs.is-ours .vs__switch span:last-child { color: #fff; }
.vs__rows { display: grid; }
.vs__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-line); }
.vs__row:last-child { border-bottom: 0; }
.vs__k { font-family: var(--font-display); font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); }
.vs__v { position: relative; min-height: 2.6em; display: grid; align-items: center; }
.vs__v > span { grid-area: 1 / 1; display: flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); line-height: var(--lh-sm); transition: opacity .35s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.vs__a { color: var(--c-text-muted); }
.vs__a::before { content: "–"; color: var(--c-text-faint); font-weight: 700; }
.vs__b { color: var(--c-text); font-weight: 600; opacity: 0; transform: translateY(8px); }
.vs__b::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--c-accent); transform: rotate(45deg); }
.vs.is-ours .vs__a { opacity: 0; transform: translateY(-8px); }
.vs.is-ours .vs__b { opacity: 1; transform: none; }
.vs__foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-text-muted); }
@media (max-width: 479px) { .vs__row { grid-template-columns: 1fr; gap: .3rem; } .vs__head { flex-wrap: wrap; } }

/* ---------- Przewagi ---------- */
.adv-grid { display: grid; gap: var(--gutter); }
.adv { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6); background: var(--c-panel); border: 1px solid var(--c-line); overflow: hidden; }
.adv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.adv:hover::after { transform: scaleX(1); }
.adv__n { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; font-weight: 600; color: transparent; -webkit-text-stroke: 1px var(--c-text-muted); }
.adv h3 { margin-top: var(--s-3); }
.adv p { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--c-text-muted); }
.adv a { margin-top: var(--s-2); color: var(--c-text); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.adv a:hover { color: var(--c-accent); }
@media (min-width: 768px) { .adv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .adv-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Szukasz w 10 sekund (potrzeby) ---------- */
.needs { display: grid; gap: var(--gutter); }
.need { padding: var(--s-5); border: 1px solid var(--c-line); border-left: 2px solid var(--c-accent); background: var(--c-base); }
.need b { display: block; font-family: var(--font-display); color: var(--c-text); }
.need span { font-size: var(--fs-sm); color: var(--c-text-muted); }
@media (min-width: 768px) { .needs { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Twój zestaw (linki do narzędzi) ---------- */
.kit { display: grid; gap: var(--gutter); }
.kit a {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem var(--s-4); align-items: center; padding: var(--s-5);
  background: var(--c-panel); border: 1px solid var(--c-line); text-decoration: none; transition: border-color .2s, background-color .2s;
}
.kit a:hover { border-color: var(--c-accent); background: var(--c-panel-hover); }
.kit b { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--c-text); }
.kit span { grid-column: 1; font-size: var(--fs-sm); color: var(--c-text-muted); }
.kit .icon { grid-column: 2; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; color: var(--c-accent); transition: transform .2s var(--ease); }
.kit a:hover .icon { transform: translateX(4px); }
@media (min-width: 768px) { .kit { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kit { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Pasek ról (łącznik między stronami) ---------- */
.roles-strip { padding-block: var(--s-8); border-bottom: 1px solid var(--c-line); }
.roles-strip__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-5); }
.roles-strip__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--c-text); }
.roles-strip ul { display: grid; gap: var(--s-2); }
.roles-strip a {
  display: flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: var(--s-3) var(--s-4);
  background: var(--c-panel); border: 1px solid var(--c-line); text-decoration: none; transition: border-color .2s;
}
.roles-strip a:hover { border-color: var(--c-accent); }
.roles-strip a[aria-current] { border-color: var(--c-accent); background: var(--c-panel-hover); }
.roles-strip svg { flex: none; width: 32px; height: 32px; color: var(--c-text-muted); }
.roles-strip b { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); line-height: 1.3; }
@media (min-width: 768px) { .roles-strip ul { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .roles-strip ul { grid-template-columns: repeat(5, 1fr); } }

@media (prefers-reduced-motion: reduce) { .vs { animation: none; } .vs__v > span { transition: none; } }