/* ==========================================================================
   NYBZ Digital Solutions — Kariérní stránka
   Navazuje na nybz.css (tokeny, tlačítka, karty, formuláře).
   Zde jsou pouze komponenty, které existují jen na této stránce.
   ========================================================================== */

/* ------------------------------------------------------------------ HERO
   Stejné ladění jako hero na hlavní stránce: světlý podklad a dvě měkké
   záře (accent + indigo). Žádná tmavá varianta, ať stránka nevypadá jinak
   než zbytek webu. */
.job-hero {
  position: relative; overflow: hidden;
  padding-top: clamp(7.5rem, 14vw, 11rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.job-hero::before,
.job-hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%; filter: blur(90px);
}
.job-hero::before {
  width: 620px; height: 620px; top: -18%; right: -10%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%);
}
.job-hero::after {
  width: 520px; height: 520px; bottom: -22%; left: -12%;
  background: radial-gradient(circle, color-mix(in srgb, var(--indigo) 18%, transparent), transparent 68%);
}
.job-hero > .container { position: relative; z-index: 1; }

.job-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4375rem .9375rem .4375rem .75rem; border-radius: var(--r-full);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  font-family: var(--f-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}

.job-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1.03; letter-spacing: -.038em;
  margin-top: 1.5rem;
}
.job-title em { font-style: normal; color: var(--accent); }

/* Rotující slovo v nadpisu */
.rotator { display: inline-grid; vertical-align: bottom; text-align: left; }
.rotator > span {
  grid-area: 1 / 1; opacity: 0; transform: translateY(.4em);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  white-space: nowrap;
}
.rotator > span.is-on { opacity: 1; transform: none; }

.job-sub {
  margin-top: 1.5rem; max-width: 54ch; line-height: 1.72;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--fg-2);
}
.job-sub strong { color: var(--fg); font-weight: 600; }

/* Rychlá fakta */
.job-facts { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 2rem; }
.job-fact {
  display: inline-flex; align-items: center; gap: .5625rem;
  padding: .625rem 1rem; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .875rem; color: var(--fg-2);
}
.job-fact i { color: var(--accent); font-size: 1rem; flex-shrink: 0; }
.job-fact b { font-weight: 600; color: var(--fg); }

.job-cta { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.5rem; }
.job-note { margin-top: 1.5rem; font-size: .875rem; color: var(--fg-3); }
.job-note i { color: var(--accent); }

/* ------------------------------------------------------------ V KOSTCE */
.day { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
@media (max-width: 860px) { .day { grid-template-columns: 1fr; } }

.day-rail { display: flex; flex-direction: column; gap: .25rem; }
@media (max-width: 860px) {
  .day-rail { flex-direction: row; overflow-x: auto; gap: .5rem; padding-bottom: .5rem; }
}

.day-tab {
  display: flex; align-items: center; gap: .875rem; width: 100%;
  padding: .9375rem 1rem; border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent; text-align: left;
  color: var(--fg-2); font-size: .9375rem; font-weight: 500; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
@media (max-width: 860px) { .day-tab { white-space: nowrap; width: auto; flex-shrink: 0; } }
.day-tab:hover { color: var(--fg); background: var(--surface-2); }
/* Aktivní záložka stojí na povrchové barvě, ne na akcentovém tónu —
   akcentový text na akcentovém podkladu nedosáhl na WCAG AA (4,24:1). */
.day-tab[aria-selected="true"] {
  background: var(--surface); border-color: var(--accent-line);
  color: var(--accent); font-weight: 600; box-shadow: var(--sh-1);
}
.day-tab time { font-family: var(--f-mono); font-size: .75rem; color: var(--fg-3); flex-shrink: 0; }
.day-tab[aria-selected="true"] time { color: var(--accent); }

.day-panel { display: none; }
.day-panel.is-on { display: block; animation: fadeUp .5s var(--ease); }
.day-panel h3 {
  font-family: var(--f-display); font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  letter-spacing: -.02em; margin-bottom: .875rem;
}
.day-panel p { color: var(--fg-2); line-height: 1.75; max-width: 60ch; }
.day-panel p + p { margin-top: .875rem; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- ANTI-KLIŠÉ */
.myth {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.myth-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(.75rem, 3vw, 2.5rem); align-items: center;
  background: var(--surface); padding: clamp(1.25rem, 2.6vw, 1.875rem);
  transition: background-color .35s var(--ease);
}
.myth-row:hover { background: var(--surface-2); }
@media (max-width: 720px) { .myth-row { grid-template-columns: 1fr; gap: .75rem; } }

.myth-bad { display: flex; align-items: flex-start; gap: .75rem; color: var(--fg-3); font-size: .9375rem; line-height: 1.6; }
.myth-bad s { text-decoration-color: var(--rose); text-decoration-thickness: 2px; }
.myth-bad i { color: var(--rose); font-size: 1.1rem; flex-shrink: 0; margin-top: .12em; }

.myth-good { display: flex; align-items: flex-start; gap: .75rem; color: var(--fg); font-size: .9375rem; line-height: 1.65; }
.myth-good i { color: var(--accent); font-size: 1.1rem; flex-shrink: 0; margin-top: .12em; }
.myth-good b { font-weight: 600; }

/* ================================================================= KVÍZ */
.quiz {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-2);
}
.quiz-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.125rem clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.quiz-step {
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3); flex-shrink: 0;
}
.quiz-step b { color: var(--accent); }

.quiz-bar { flex: 1; max-width: 340px; height: 3px; background: var(--line); border-radius: var(--r-full); overflow: hidden; }
.quiz-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); transition: width .55s var(--ease); }

.quiz-body { padding: clamp(1.75rem, 4vw, 3rem); }

.quiz-card { display: none; }
.quiz-card.is-on { display: block; animation: fadeUp .55s var(--ease); }

.quiz-q {
  font-family: var(--f-display); font-weight: 700; max-width: 22ch;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem); line-height: 1.2; letter-spacing: -.025em;
}
.quiz-hint { margin-top: .75rem; color: var(--fg-3); font-size: .9375rem; }

.quiz-opts { display: grid; gap: .75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.quiz-opt {
  display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left;
  padding: 1.0625rem 1.25rem; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 1rem; color: var(--fg); line-height: 1.5; font-family: inherit;
  transition: border-color .28s var(--ease), background-color .28s var(--ease), transform .28s var(--ease);
}
.quiz-opt:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateX(4px); }
.quiz-opt:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.quiz-opt.is-picked { border-color: var(--accent); background: var(--accent-soft); }

.quiz-key {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r-xs);
  display: grid; place-items: center; font-family: var(--f-mono); font-size: .8125rem;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-3);
  transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.quiz-opt:hover .quiz-key,
.quiz-opt.is-picked .quiz-key { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

.quiz-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.0625rem clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.quiz-note { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--fg-3); }
.quiz-note i { color: var(--accent); flex-shrink: 0; }
.quiz-back {
  display: inline-flex; align-items: center; gap: .5rem; background: none; cursor: pointer;
  padding: .5rem .25rem; font-size: .875rem; color: var(--fg-3); font-family: inherit;
  transition: color .25s var(--ease);
}
.quiz-back:hover { color: var(--fg); }
.quiz-back[hidden] { display: none; }

/* --- Výsledek ----------------------------------------------------------- */
.result { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 700px) { .result { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

.ring { position: relative; width: 200px; height: 200px; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.ring .ring-bg { stroke: var(--line); }
.ring .ring-fg { stroke: var(--accent); transition: stroke-dashoffset 1.4s var(--ease); }
.ring-val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-val b {
  font-family: var(--f-display); font-size: 2.75rem; font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--accent);
}
.ring-val span {
  display: block; margin-top: .3125rem; font-family: var(--f-mono);
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}

.result h3 { font-family: var(--f-display); font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -.025em; line-height: 1.2; }
.result p { margin-top: .875rem; color: var(--fg-2); line-height: 1.72; max-width: 52ch; }
@media (max-width: 700px) { .result p { margin-inline: auto; } }

.answers { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
@media (max-width: 700px) { .answers { justify-content: center; } }
.answer-chip {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .375rem .75rem; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .8125rem; color: var(--fg-2);
}
.answer-chip i { color: var(--accent); font-size: .875rem; flex-shrink: 0; }

.result-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
@media (max-width: 700px) { .result-cta { justify-content: center; } }

/* ------------------------------------------------------------- FORMULÁŘ */
.apply-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 940px) { .apply-grid { grid-template-columns: 1fr; } }

/* Nahrání životopisu */
.drop {
  position: relative; display: flex; align-items: center; gap: 1rem;
  padding: 1.125rem 1.25rem; border-radius: var(--r-md); cursor: pointer;
  border: 1px dashed var(--line-2); background: var(--surface-2);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-ico {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 1.25rem;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.drop-txt { min-width: 0; }
.drop-txt b { display: block; font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
/* Jeden řádek s výpustkou drží dlouhé názvy souborů na uzdě… */
.drop-txt span { display: block; margin-top: .1875rem; font-size: .8125rem; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* …na úzkém displeji ale výčet formátů raději zalomíme, než abychom ho usekli. */
@media (max-width: 560px) {
  .drop-txt span { white-space: normal; }
}
.drop-clear {
  position: relative; z-index: 1; margin-left: auto; flex-shrink: 0;
  background: none; cursor: pointer; padding: .375rem; font-size: 1.1rem; color: var(--fg-3);
}
.drop-clear:hover { color: var(--rose); }
.drop-clear[hidden] { display: none; }

/* Boční panel */
.apply-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 940px) { .apply-aside { position: static; } }

.step-list { display: flex; flex-direction: column; gap: 1.125rem; }
.step-item { display: flex; gap: .9375rem; }
.step-dot {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-mono); font-size: .75rem;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.step-item b { display: block; margin-bottom: .1875rem; font-size: .9375rem; font-weight: 600; }
.step-item p { font-size: .875rem; color: var(--fg-2); line-height: 1.6; }

/* Po odeslání */
.apply-done { display: none; text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 1rem; }
.apply-done.is-visible { display: block; animation: fadeUp .6s var(--ease); }
.apply-done .done-ico {
  width: 72px; height: 72px; margin: 0 auto 1.5rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 2.25rem;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.apply-done p { color: var(--fg-2); line-height: 1.72; max-width: 46ch; margin-inline: auto; }

/* Ohleduplnost k redukovanému pohybu */
@media (prefers-reduced-motion: reduce) {
  .quiz-card.is-on, .day-panel.is-on, .apply-done.is-visible { animation: none; }
  .rotator > span { transition: opacity .01ms linear; }
  .ring .ring-fg { transition: none; }
  .quiz-opt:hover { transform: none; }
}