/* PORIEŠI.ME — 123DOPYT: PÁS ČÍSEL, VEREJNÝ VÝPIS DOPYTOV A CENTRUM POMOCI.
   ════════════════════════════════════════════════════════════════════════════
   Prefixy:  .ps-*  = pás skutočných čísel pod hero (index.html #hero-stats)
             .pd-*  = karta a mriežka verejných dopytov (domov + obrazovka #dopyty)
             .pm-*  = Centrum pomoci (#pomoc) — rozcestník, detaily, „Napíš nám“
   Základ karty .fcard prichádza zo style.css — tu ju len dopĺňame, neprepisujeme.
   Mobil (≤640) aj desktop (1440) sa riešia naraz, dotykové ciele 48 px,
   focus-visible a prefers-reduced-motion má každý interaktívny prvok.
   ════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ PÁS SKUTOČNÝCH ČÍSEL (pod hero) ═══════════════ */
#hero-stats:empty{display:none}
.ps-wrap{padding:18px 20px 4px}
.ps-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.ps-i{display:flex; align-items:center; gap:10px; min-height:64px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1)}
.ps-i .ico{width:26px; height:26px; flex:none; color:var(--accent)}
.ps-n{font:800 1.35rem/1 "Manrope","IBM Plex Sans",system-ui,sans-serif; color:var(--ink); letter-spacing:-.02em}
.ps-l{font-size:.78rem; line-height:1.25; color:var(--muted); font-weight:600}
.ps-i > .ps-l{flex:1 1 auto; min-width:0}
.ps-note{margin:10px 0 0; text-align:center; color:var(--muted)}

/* Číslo patrí k svojmu popisu — na užšom mieste ide popis pod číslo. */
@media (max-width:900px){
  .ps-i{flex-wrap:wrap; gap:4px 10px}
  .ps-i .ico{order:0}
  .ps-i > .ps-n{order:1}
  .ps-i > .ps-l{order:2; flex:1 1 100%}
}
@media (max-width:640px){
  .ps-wrap{padding:14px 14px 2px}
  .ps-row{grid-template-columns:1fr 1fr; gap:8px}
  .ps-i{min-height:58px; padding:10px 11px; border-radius:var(--r)}
  .ps-i .ico{width:22px; height:22px}
  .ps-n{font-size:1.15rem}
  .ps-l{font-size:.72rem}
  .ps-note{font-size:.74rem; margin-top:8px}
}

/* ═══════════════ VEREJNÉ DOPYTY — spoločné pre domov aj #dopyty ═══════════════ */
.pd-title{margin-top:34px}
.pd-title .ico{width:1.05em; height:1.05em; color:var(--accent); flex:none}
.pd-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:12px}
.pd-foot{display:flex; justify-content:center; margin-top:16px}
.pd-foot .btn{min-height:48px}

/* Odznaky: „Čaká na ponuky“ je zlatý (upozornenie, nie chyba), obsadenosť oranžová.
   Text odznaku je 11,5 px, takže potrebuje pomer 4,5 : 1 — tokeny --gold a --accent-dark
   ho na svojich svetlých podkladoch nedajú (4,39 a 3,74). Stmavené sú preto LEN tu,
   na samotnom odznaku: --gold 5,46 : 1 na --gold-bg, oranžová 4,99 : 1 na --accent-soft.
   Rám odznaku ostáva pôvodný var(--gold) — na rám sa pomer kontrastu textu nevzťahuje. */
.pd-badges{display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; margin-left:auto}
.badge.pd-wait{background:var(--gold-bg); color:#785C1A; border:1.5px solid var(--gold); text-transform:none}
.badge.pd-slots{text-transform:none}
.badge.soft.pd-slots{color:#A34F05}
.pd-ago{white-space:nowrap}

/* Rozpätie rozpočtu — nikdy presná suma, tá je vyjednávacia pozícia zákazníka. */
.pd-band{display:flex; align-items:baseline; gap:6px; margin:10px 0 0; font-size:.86rem; color:var(--muted)}
.pd-band b{font-size:.95rem; color:var(--ink); font-weight:700}

.pd-cta{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.pd-cta .btn{min-height:44px}
.pd-mini{display:flex; flex-direction:column}
.pd-mini .fc-head{align-items:flex-start}
.pd-mini .fc-t{font-size:.98rem}
/* Na užšej dlaždici sa odznaky aj tak zalomia — nech sa zalomia doľava pod podtitul,
   nie doprava, kde by po nich ostala diera. */
.pd-mini .pd-badges{flex:1 1 100%; margin:2px 0 0}
.pd-mini .pd-cta{margin-top:auto; padding-top:12px}

/* OKRUH §4: riadok pod tlačidlami. `.pd-area` vidí LEN prihlásený majster (km k dopytu
   mimo jeho okruhu), `.pd-pro-hint` naopak len ten, kto majster nie je. */
.pd-area{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px; margin:8px 0 0}
.pd-area .num{color:var(--ink-soft); font-weight:700; font-variant-numeric:tabular-nums}
.pd-pro-hint{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin:8px 0 0}
.pd-pro-hint a{color:var(--accent-dark)}

@media (max-width:1099px){ .pd-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  .pd-title{margin-top:26px}
  .pd-grid{grid-template-columns:1fr; gap:10px}
  .pd-badges{width:100%; margin-left:0}
  .pd-cta{gap:6px}
  .pd-cta .btn{flex:1 1 auto; justify-content:center; min-height:48px}
  .pd-band{margin-top:8px}
  /* Dotykový cieľ odkazu „Vstup pre majstrov“ ostáva 48 px aj na mobile. */
  .pd-pro-hint a{min-height:48px; display:inline-flex; align-items:center}
}

/* ═══════════════ CENTRUM POMOCI (#pomoc) ═══════════════ */
.pm-h1{display:flex; align-items:center; gap:10px; margin:0 0 6px; font-size:1.6rem}
.pm-h1 .ico{width:1.05em; height:1.05em; color:var(--accent); flex:none}
.pm-lead{margin:0 0 20px; color:var(--muted); line-height:var(--lh-body)}

.pm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.pm-card{display:flex; flex-direction:column; gap:6px; min-height:150px; padding:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); text-decoration:none; color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.pm-card:hover,.pm-card:focus-visible{transform:translateY(-2px); border-color:var(--accent);
  box-shadow:var(--shadow-2); outline:none}
.pm-card:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.pm-ic{display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:4px;
  border-radius:var(--r); background:var(--accent-soft); color:var(--accent-dark)}
.pm-ic .ico{width:23px; height:23px}
.pm-t{font-size:1.02rem; line-height:1.3}
.pm-d{font-size:.85rem; line-height:1.45; color:var(--muted)}

.pm-steps{margin:0; padding:0; list-style:none; counter-reset:pmstep}
.pm-steps li{position:relative; padding:14px 0 14px 46px; border-top:1px solid var(--line)}
.pm-steps li:first-child{border-top:0}
.pm-steps li::before{counter-increment:pmstep; content:counter(pmstep);
  position:absolute; left:0; top:13px; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent-dark);
  font:800 .9rem/1 "IBM Plex Sans",system-ui,sans-serif}
.pm-steps b{display:block; margin-bottom:3px; font-size:1rem; line-height:1.3}
.pm-steps span{display:block; font-size:.9rem; line-height:1.55; color:var(--muted)}
.pm-links{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0}
.pm-links .btn{min-height:48px}
.pm-back{margin:22px 0 0}
.pm-back .btn{min-height:44px}

/* „Napíš nám“ — rovnaký tvar poľa ako zvyšok appky, len v samostatnej karte. */
.pm-box{margin-top:30px; padding:20px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1)}
.pm-box h2{display:flex; align-items:center; gap:9px; margin:0 0 6px; font-size:1.2rem}
.pm-box h2 .ico{width:1.05em; height:1.05em; color:var(--accent); flex:none}
.pm-box label{display:block; margin:14px 0 5px; font-weight:600; font-size:.9rem}
.pm-box input,.pm-box textarea{width:100%; min-height:48px; margin:0}
.pm-box textarea{min-height:120px}
.pm-box .row{margin-top:16px}
.pm-box .btn{min-height:48px}
.pm-done p{line-height:var(--lh-body)}

@media (max-width:1099px){ .pm-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  .pm-h1{font-size:1.25rem}
  .pm-lead{font-size:.92rem; margin-bottom:16px}
  .pm-grid{grid-template-columns:1fr; gap:10px}
  .pm-card{min-height:0; padding:14px; border-radius:var(--r)}
  .pm-ic{width:38px; height:38px}
  .pm-steps li{padding:12px 0 12px 40px}
  .pm-steps li::before{width:27px; height:27px; top:11px; font-size:.82rem}
  .pm-steps b{font-size:.96rem}
  .pm-steps span{font-size:.86rem}
  .pm-links .btn{flex:1 1 100%; justify-content:center}
  .pm-box{margin-top:22px; padding:15px; border-radius:var(--r)}
  .pm-box .btn{width:100%; justify-content:center}
}

@media (prefers-reduced-motion: reduce){
  .pm-card,.pd-card{transition:none}
  .pm-card:hover,.pm-card:focus-visible{transform:none}
}

/* Dotykový cieľ aj na desktope (WCAG 2.5.8): tlačidlá v hlavičke feedu a v kartách dopytov */
.feed-top .btn.sm,.pd-cta .btn.sm{min-height:44px}
/* Verejný popis dopytu — už zmaskovaný (bez ulice, čísla, e-mailu), skrátený na PUB_DESC_MAX */
.pd-desc{margin:10px 0 0; font-size:.9rem; line-height:1.45; color:var(--ink); overflow-wrap:anywhere}
.pd-mini .pd-desc{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* ───────── #dopyty — šírka stránky a dve karty vedľa seba na desktope ─────────
   Mobil a tablet: jeden stĺpec do 760 px (ako doteraz, len už nie cez inline štýl).
   Od 1000 px: celá šírka .wrap a dve karty v rade. Karty v rade sú rovnako vysoké a tlačidlá
   sedia dole, aby rad pôsobil ako jeden celok; poradie ostáva zľava doprava = od najnovšieho,
   takže donačítanie ďalších dopytov nič neprehádže (stĺpcové „masonry“ by karty preskladalo). */
#feed-root{max-width:760px}
@media (min-width:1000px){
  #feed-root{max-width:1440px}
  #feed-root .feed-lead{max-width:90ch}
  #feed-root .feed-filters select{max-width:300px}
  #feed-root .feed-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:stretch; margin-top:14px}
  #feed-root .feed-list > .fcard{display:flex; flex-direction:column; min-width:0; padding:20px}
  #feed-root .feed-list > .fcard .pd-cta{margin-top:auto; padding-top:14px}
  /* otvorené komentáre nesmú natiahnuť susednú kartu do nekonečna */
  #feed-root .feed-list > .fcard .fc-thread{max-height:360px; overflow:auto; -webkit-overflow-scrolling:touch}
  #feed-root .feed-list > .feed-empty{grid-column:1 / -1}
  /* Otvorené komentáre: sused v rade sa nenaťahuje na výšku vlákna (inak má uprostred prázdno).
     Partner nepárnej karty je nasledujúca, partner párnej predchádzajúca. Bez :has() ostane rovnaká výška. */
  #feed-root .feed-list > .fcard:nth-child(odd):has(.fc-thread:not(.hidden)) + .fcard,
  #feed-root .feed-list > .fcard:nth-child(odd):has(+ .fcard .fc-thread:not(.hidden)){align-self:start}
}
@media (min-width:1700px){ #feed-root{max-width:1600px} }

/* Dotykový cieľ 48 px na mobile aj pre `.btn.sm` na karte dopytu.
   Pravidlo `.feed-top .btn.sm,.pd-cta .btn.sm{min-height:44px}` vyššie má váhu (0,3,0)
   a prebíjalo mobilné `.pd-cta .btn{min-height:48px}` (0,2,0) — mediálny dotaz váhu
   nepridáva, takže tlačidlá na karte dopytu ostávali na telefóne 44 px. Rovnaká váha
   a neskoršia poloha to vracia na 48 px; desktop (44 px podľa WCAG 2.5.8) sa nemení. */
@media (max-width:640px){
  .feed-top .btn.sm,.pd-cta .btn.sm{min-height:48px}
}

/* PARTIA (021): štítok „Hľadá partiu“ na verejnej karte dopytu. */
.pd-badges .badge.crew.pd-crew .ico{width:1em; height:1em; flex:none}

/* 1. 10. 2026 — NÁSTENKA: hlavné tlačidlo karty „Ja to poriešim · poslať ponuku“ + malý odkaz „Zadať podobný dopyt“ */
.pd-cta .pd-go{display:inline-flex; align-items:baseline; justify-content:center; gap:7px; padding-left:20px; padding-right:20px; font-weight:800; letter-spacing:.005em}
.pd-go .pd-go-s{font-weight:600; font-size:.9em; opacity:.94; white-space:nowrap}
.pd-go .pd-go-s::before{content:"·"; margin-right:7px; opacity:.7}
.pd-same{display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; margin:8px 0 0}
.pd-same .linkbtn{background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--accent-dark); text-decoration:underline; text-underline-offset:2px; cursor:pointer; min-height:44px; display:inline-flex; align-items:center}
.pd-same .linkbtn:hover{color:var(--accent)}
@media (max-width:640px){ .pd-cta .pd-go{width:100%} .pd-same .linkbtn{min-height:48px} }

/* Okno „Ja to poriešim“ — dve cesty: nový (registrácia) a existujúci účet (prihlásenie); obe vrátia k ponuke na tento dopyt */
.pd-way-req{margin:0 0 6px}
.pd-ways{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 10px}
.pd-way{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:64px; padding:12px 14px; border-radius:var(--r-md,14px);
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease; -webkit-tap-highlight-color:transparent}
.pd-way:hover{border-color:var(--accent); box-shadow:0 4px 14px rgba(232,119,34,.16)}
.pd-way:active{transform:scale(.985)}
.pd-way:focus-visible{outline:2px solid transparent; box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent-dark)}
.pd-way .pd-way-t{display:flex; flex-direction:column; gap:2px; min-width:0}
.pd-way .pd-way-t b{font-size:1.02rem; line-height:1.2}
.pd-way .pd-way-t span{font-size:.84rem; color:var(--muted); line-height:1.3}
.pd-way .ico{flex:none; width:20px; height:20px; color:var(--accent-dark)}
.pd-way-new{border-color:transparent; background:linear-gradient(180deg,#F28C28,#D96A0B); color:#fff; box-shadow:0 6px 16px rgba(217,106,11,.28)}
.pd-way-new .pd-way-t span{color:rgba(255,255,255,.92)}
.pd-way-new .ico{color:#fff}
.pd-way-new:hover{border-color:transparent; box-shadow:0 8px 20px rgba(217,106,11,.36)}
.pd-way-n{margin:0}
@media (max-width:560px){ .pd-ways{grid-template-columns:1fr} }