/* =====================================================================
   pages/svc-extra.css  zf service-template sections restored on /sluzby/<slug>/ and /ai-reseni/:
   tools tab rail, "I need..." tabs, hairline use cases, why-us + win slab, scroll-snap sliders.
   Loaded after zf.css + sluzby.css. Values: zf 03-services.md (sections 3.4, 4.7, 4.8, 4.9, 5).
   ===================================================================== */

/* TABS (zf 4.7 tools rail / 5.4 usecase sidebar) ---------------------------- */
.tabs { display: flex; gap: 24px; align-items: flex-start; }
.tabs__side { position: relative; flex: none; width: 246px; padding: 12px; border-radius: var(--r-grid); background: var(--card); }
.tabs--use .tabs__side { width: 284px; }
.tabs__list { display: flex; flex-direction: column; gap: 8px; }
.tabs__btn { position: relative; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 12px 16px; border-radius: var(--r-tag); font-size: 14px; line-height: 20px; font-weight: 500; text-align: left; color: var(--text-2); transition: color var(--dur-2), background-color var(--dur-2); }
.tabs__btn::before { content: ""; position: absolute; left: 0; top: 14px; width: 2px; height: 16px; border-radius: 2px; background: var(--accent-2); opacity: 0; transition: opacity var(--dur-2); }
.tabs__btn:hover, .tabs__btn[aria-selected="true"] { color: var(--accent); background: var(--accent-wash); }
.tabs__btn[aria-selected="true"]::before { opacity: 1; }
.tabs__toggle { display: none; }
.tabs__area { flex: 1; min-width: 0; display: grid; }
/* all panels share one grid cell, so the area keeps the tallest panel's height and nothing below jumps */
.tabs__panel { grid-area: 1 / 1; }
.tabs__panel[hidden] { display: block; visibility: hidden; }

/* tools content (zf: cream panel, 4-col checker of 72 px logos) */
.tools__area { border-radius: var(--r-grid); border: 1px solid var(--paper-line); background: var(--paper); overflow: hidden; }
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); }
.tcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 195px; padding: 48px 24px; background: var(--paper); color: var(--ink); }
.tcard:nth-child(4n+2), .tcard:nth-child(4n+4) { background: var(--paper-hover); }
.tcard__logo { width: 72px; height: 72px; padding: 14px; border-radius: 18px; background: #010102; display: grid; place-items: center; }
.tcard__logo img { width: 100%; height: 100%; object-fit: contain; }
.tcard__n { font-size: 14px; line-height: 20px; color: var(--ink); text-align: center; }

/* "Potřebuji..." panel (zf 5.4: white, 32 padding, 44 tile, 2-col list, dark button) */
.upanel { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-height: 328px; padding: 32px; border-radius: var(--r-panel); background: #fff; color: var(--ink); }
.upanel__ic { width: 44px; height: 44px; border-radius: var(--r-grid); display: grid; place-items: center; background: var(--paper); border: .8px solid var(--paper-line); color: var(--accent-ink); }
.upanel__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.upanel__t { font-size: 18px; line-height: 28px; font-weight: 500; color: var(--ink); }
.upanel__p { max-width: 560px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.upanel__l { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; width: 100%; max-width: 560px; }
.upanel__l li { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; line-height: 24px; color: var(--ink); }
.upanel__l svg { flex: none; width: 16px; height: 16px; margin-top: 4px; fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.upanel .btn { margin-top: auto; }

@media (max-width: 1200px) { .tgrid { grid-template-columns: repeat(3, 1fr); } .tcard:nth-child(n) { background: var(--paper); } .tcard:nth-child(even) { background: var(--paper-hover); } }
@media (max-width: 991px) {
  .tabs { flex-direction: column; gap: 16px; }
  .tabs__side, .tabs--use .tabs__side { width: 100%; padding: 0; background: none; }
  .tabs__list { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .tabs__list::-webkit-scrollbar { display: none; }
  .tabs__btn { width: auto; flex: none; white-space: nowrap; border-radius: 0; background: none !important; border-bottom: 2px solid transparent; }
  .tabs__btn::before { display: none; }
  .tabs__btn[aria-selected="true"] { border-bottom-color: var(--accent-2); }
  .tabs__area { width: 100%; }
  .upanel { min-height: 0; padding: 24px; }
}
@media (max-width: 768px) { .upanel__l { grid-template-columns: 1fr; } }
@media (max-width: 575px) {
  .tabs__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 14px 16px; border: 1px solid var(--muted); border-radius: 10px; font-size: 16px; line-height: 20px; font-weight: 500; text-align: left; color: var(--text); background: var(--card); }
  .tabs__toggle svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms ease; }
  .tabs__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .tabs__side { position: relative; }
  .tabs__list { display: none; position: absolute; z-index: 4; left: 0; right: 0; top: calc(100% - 4px); flex-direction: column; overflow: visible; gap: 2px; padding: 8px; background: var(--card); border: 1px solid var(--muted); border-top: 0; border-radius: 0 0 10px 10px; }
  .tabs--open .tabs__list { display: flex; }
  .tabs__btn { width: 100%; white-space: normal; padding: 12px 14px; border-radius: var(--r-tag); border-bottom: 0 !important; }
  .tabs__btn:hover, .tabs__btn[aria-selected="true"] { background: var(--accent-wash) !important; }
  .tgrid { grid-template-columns: repeat(2, 1fr); }
  .tcard { gap: 12px; min-height: 0; padding: 18px 24px; }
  .tcard:nth-child(n) { background: var(--paper); } .tcard:nth-child(4n+2), .tcard:nth-child(4n+3) { background: var(--paper-hover); }
  .tcard__logo { width: 56px; height: 56px; padding: 11px; border-radius: 14px; }
  .upanel { padding: 24px 16px; }
}

/* CASES / use-cases paper grid: cell gap 40, optional arrow-less (zf 4.8) ---- */
.cases .hcell__t { color: var(--ink); }

/* AI use-case cards (zf 5.5: title, bold one-liner, description, examples) ------ */
.ucard { gap: 16px !important; }
.ucard__one { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text); }
.ucard__ex { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--muted); }
.ucard__ex b { font-weight: 500; color: var(--text-2); }
.hcell--accent { background: var(--accent-2) !important; color: #010102; justify-content: center; gap: 16px; padding: 32px 24px; align-items: flex-start; }
.hcell--accent .hcell__p { color: #010102; }
.hcell--accent .hcell__t { color: #010102; }
.hgrid .hcell--span2 .btn { align-self: flex-start; }
.hcell__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.hcell__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* WHY-US wrapper + win slab (zf 3.4) -------------------------------------------- */
.why { padding: 60px 32px; border-radius: var(--r-grid); background: #0E0E12; }
.why__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: 48px; }
.why__h { max-width: 560px; font-size: var(--fs-h2); line-height: 44px; font-weight: 500; letter-spacing: -.72px; text-wrap: balance; }
.why__p { max-width: 500px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.hgrid--why { border-radius: 24px; }
.hgrid--why .hcell { background: var(--bg); min-height: 272px; }
@media (hover: hover) and (pointer: fine) { .hgrid--why .hcell:hover { background: var(--card); } }
.win { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin: 64px 32px 0; padding: 60px 64px; border-radius: var(--r-grid); color: #010102; overflow: hidden;
  background: linear-gradient(115deg, #C9F9E3 0%, #58F6B1 50%, #2FD08F 100%); }
.win__txt { max-width: 779px; min-width: 0; }
.win__h { font-size: 48px; line-height: 60px; font-weight: 500; letter-spacing: -.96px; text-wrap: balance; }
.win__p { margin: 16px 0 24px; font-size: 18px; line-height: 28px; }
.win__art { flex: none; width: 200px; height: 200px; fill: #010102; opacity: .92; }
@media (max-width: 991px) { .why { padding: 40px 24px; } .win { margin: 40px 0 0; padding: 40px 32px; } .win__art { display: none; } }
@media (max-width: 575px) {
  .why { padding: 24px 16px; } .why__head { margin-bottom: 24px; } .why__h { font-size: 24px; line-height: 32px; }
  .hgrid--why .hcell { min-height: 0; }
  .win { margin-top: 32px; padding: 24px; } .win__h { font-size: 36px; line-height: 44px; letter-spacing: -.72px; }
}

/* SLIDERS: reviews (work slider = zf.css .ws__*); (gap 24, 600 px cards) (zf 5.6, 5.8) ----- */
.sl__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 48px; }
.sl__head .shead { margin-bottom: 0; flex: 1; }
.sl__btns { display: flex; gap: 12px; flex: none; }
.sl__btn { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: .6px solid #F5F5F4; color: #fff; transition: background-color var(--dur-2), opacity var(--dur-2); }
.sl__btn::after { content: ""; position: absolute; inset: -5px; } /* 44 px hit area, visual stays 34 (zf) */
.sl__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl__btn:disabled { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) { .sl__btn:not(:disabled):hover { background: rgba(255, 255, 255, .08); } }
.sl__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sl__track::-webkit-scrollbar { display: none; }
.sl__track:focus-visible { outline-offset: 4px; }
.rslider .sl__track { gap: 24px; }
.rcard { flex: 0 0 600px; display: flex; flex-direction: column; justify-content: space-between; gap: 72px; padding: 32px; border-radius: 12px; background: var(--card); border-top: .6px solid var(--line); border-left: .6px solid var(--line); scroll-snap-align: start; }
.rcard__q { font-size: 24px; line-height: 32px; font-weight: 500; color: var(--text); }
.rcard__hr { height: 1px; margin: 0 0 32px; background: var(--line); border: 0; }
.rcard__who { display: flex; align-items: center; gap: 12px; }
.rcard__av { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #fff; background: linear-gradient(160deg, #AD96F1, #3A2470); }
.rcard__n { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.rcard__r { display: block; font-size: 14px; line-height: 20px; color: var(--text-2); }
@media (max-width: 991px) { .sl__head { flex-direction: column; align-items: flex-start; gap: 24px; } }
@media (max-width: 575px) {
  .sl__head { margin-bottom: 24px; }
  .rslider .sl__track { gap: 16px; }
  .rcard { flex-basis: 85%; padding: 24px; gap: 24px; }
  .rcard__q { font-size: 16px; line-height: 24px; }
  .rcard__hr { margin-bottom: 24px; }
}

/* AI hero helper + generic bits ---------------------------------------------------- */
.hgrid--aud4 .hcell__t { font-weight: 500; }
.sec-sp { margin-top: 48px; }
@media (max-width: 575px) { .sec-sp { margin-top: 24px; } }

@media (prefers-reduced-motion: reduce) { .tabs__toggle svg, .tabs__btn, .sl__btn { transition: none; } }