@charset "utf-8";

/* ═══════════════════════════════════════════════════════
   PRODEJ-BEZ-REALITKY.CSS  — „DIY prodej" layer
   Rozšiřuje style.css. Nové komponenty specifické pro
   podstránku „Jak prodat nemovitost bez realitky".
   Prefix: diy-
   ═══════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────
   LOCAL TOKENS
   ───────────────────────────────────────────────────── */
:root {
  --diy-sh-lift:  0 2px 8px rgba(12,18,37,.04), 0 8px 32px rgba(12,18,37,.07);
  --diy-sh-float: 0 4px 16px rgba(12,18,37,.06), 0 16px 48px rgba(12,18,37,.10);
  --diy-sh-deep:  0 8px 24px rgba(12,18,37,.08), 0 24px 64px rgba(12,18,37,.13);
  --diy-trans: .28s cubic-bezier(.4,0,.2,1);
  --diy-green: #15803d;
  --diy-red: #b91c1c;
  --diy-amber: #b45309;
}


/* ─────────────────────────────────────────────────────
   DIY-ANSWER — Highlighted quick-answer block
   ───────────────────────────────────────────────────── */
.diy-answer {
  padding: 1.75rem 2rem;
  border-radius: var(--r-lg);
  background: var(--c-white);
  border-left: 4px solid var(--c-accent);
  box-shadow: var(--diy-sh-lift);
  position: relative;
  overflow: hidden;
}
.diy-answer::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,96,44,.06) 0%, transparent 65%);
  pointer-events: none;
}
.diy-answer__lead {
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0 0 .75rem;
}
.diy-answer p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-muted);
  margin: 0;
}


/* ─────────────────────────────────────────────────────
   DIY-PROCON — Pro/Con split panel
   ───────────────────────────────────────────────────── */
.diy-procon {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--diy-sh-lift);
  border: 1px solid var(--c-line);
}

.diy-procon__col {
  padding: 1.75rem 1.5rem 1.5rem;
}
.diy-procon__col--pro {
  background: rgba(22,163,74,.04);
  border-bottom: 1px solid var(--c-line);
}
.diy-procon__col--con {
  background: rgba(185,28,28,.03);
}

.diy-procon__col h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 .85rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.diy-procon__col--pro h3 { color: var(--diy-green); }
.diy-procon__col--pro h3::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--diy-green);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
  flex-shrink: 0;
}
.diy-procon__col--con h3 { color: var(--diy-red); }
.diy-procon__col--con h3::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--diy-red);
  box-shadow: 0 0 0 3px rgba(185,28,28,.1);
  flex-shrink: 0;
}

.diy-procon__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.diy-procon__col li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c-muted);
  padding: .45rem 0;
  border-bottom: 1px solid rgba(12,18,37,.05);
}
.diy-procon__col li:last-child { border-bottom: none; }
.diy-procon__col li a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }


/* ─────────────────────────────────────────────────────
   DIY-STEPS — 8-step roadmap (accordion-like cards)
   ───────────────────────────────────────────────────── */
.diy-steps {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.diy-step {
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--diy-sh-lift);
  overflow: hidden;
  transition: box-shadow var(--diy-trans), border-color var(--diy-trans);
}
.diy-step:hover {
  box-shadow: var(--diy-sh-float);
  border-color: rgba(212,96,44,.15);
}

.diy-step__head {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem 2rem 1rem;
}

.diy-step__num {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  background: var(--c-accent);
  margin-top: .1rem;
}

.diy-step__intro h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 .3rem;
  letter-spacing: -.025em;
  line-height: 1.25;
}
.diy-step__intro p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c-light);
  margin: 0;
  font-style: italic;
}

.diy-step__body {
  padding: 0 2rem 1.75rem 5.65rem;
}
.diy-step__body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-muted);
  margin: 0 0 .75rem;
}
.diy-step__body p:last-child:not(.diy-step__tip) { margin-bottom: 0; }

.diy-step__tip {
  margin-top: .75rem;
  padding: .85rem 1.15rem;
  border-radius: var(--r);
  background: rgba(212,96,44,.05);
  border-left: 3px solid var(--c-accent);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-muted);
}
.diy-step__tip strong { color: var(--c-accent); font-weight: 700; }

/* Escrow sub-items inside step 6 */
.diy-step__escrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin: .85rem 0;
}
.diy-step__escrow-item {
  padding: .85rem 1rem;
  border-radius: var(--r);
  background: var(--c-cream);
  border: 1px solid var(--c-line);
}
.diy-step__escrow-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: .2rem;
}
.diy-step__escrow-item span {
  font-size: 13px;
  color: var(--c-light);
  line-height: 1.45;
}

@media (max-width: 767.98px) {
  .diy-step__head { padding: 1.25rem 1.25rem .75rem; gap: 1rem; }
  .diy-step__body { padding: 0 1.25rem 1.5rem 1.25rem; }
  .diy-step__num { width: 36px; height: 36px; flex: 0 0 36px; font-size: 14px; }
  .diy-step__escrow { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────
   DIY-WARN — Anti-scam warning items
   ───────────────────────────────────────────────────── */
.diy-warn-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.diy-warn {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-line);
  transition: padding-left var(--diy-trans);
}
.diy-warn:last-child { border-bottom: none; }
/*.diy-warn:hover { padding-left: .25rem; }*/

.diy-warn__ic {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: rgba(185,28,28,.08);
  color: var(--diy-red);
  margin-top: .15rem;
}

.diy-warn strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: .2rem;
  line-height: 1.3;
}
.diy-warn p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-muted);
  margin: 0;
}


/* ─────────────────────────────────────────────────────
   DIY-CHECK10 — 10 verification questions (numbered)
   ───────────────────────────────────────────────────── */
.diy-check10 {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1.75rem 1.5rem;
  border-radius: var(--r-xl);
  background: var(--c-ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.diy-check10::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,96,44,.14) 0%, transparent 65%);
  pointer-events: none;
}

.diy-check10__item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative;
  transition: padding-left var(--diy-trans);
}
.diy-check10__item:last-child { border-bottom: none; }

.diy-check10__num {
  font-size: 11px;
  font-weight: 800;
  color: var(--c-accent);
  background: rgba(212,96,44,.12);
  border: 1px solid rgba(212,96,44,.2);
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
}

.diy-check10__item span {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
}


/* ─────────────────────────────────────────────────────
   DIY-LOSS — Where people lose money (numbered risks)
   ───────────────────────────────────────────────────── */
.diy-loss-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: .5rem;
}

.diy-loss {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--c-line);
  transition: padding-left var(--diy-trans);
}
.diy-loss:last-child { border-bottom: none; }
/*.diy-loss:hover { padding-left: .25rem; }*/

.diy-loss__ic {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--diy-amber);
  background: rgba(180,83,9,.08);
  border: 1px solid rgba(180,83,9,.12);
  margin-top: .1rem;
}

.diy-loss strong {
  font-weight: 700;
  color: var(--c-ink);
}
.diy-loss > div {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-muted);
}


/* ─────────────────────────────────────────────────────
   DIY-BALANCE — Save vs. Cost split card
   ───────────────────────────────────────────────────── */
.diy-balance {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--diy-sh-lift);
  border: 1px solid var(--c-line);
}

.diy-balance__col {
  padding: 1.5rem 1.5rem 1.25rem;
}
.diy-balance__col--save {
  background: rgba(22,163,74,.04);
  border-bottom: 1px solid var(--c-line);
}
.diy-balance__col--cost {
  background: rgba(180,83,9,.03);
}

.diy-balance__col h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.diy-balance__col--save h3 { color: var(--diy-green); }
.diy-balance__col--save h3::before {
  content: '↓';
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(22,163,74,.12); color: var(--diy-green);
  font-size: 11px; font-weight: 800;
  display: grid; place-items: center; flex-shrink: 0;
}
.diy-balance__col--cost h3 { color: var(--diy-amber); }
.diy-balance__col--cost h3::before {
  content: '↑';
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(180,83,9,.1); color: var(--diy-amber);
  font-size: 11px; font-weight: 800;
  display: grid; place-items: center; flex-shrink: 0;
}

.diy-balance__col ul {
  list-style: none;
  padding: 0; margin: 0;
}
.diy-balance__col li {
  font-size: 14.5px;
  color: var(--c-muted);
  padding: .35rem 0;
  border-bottom: 1px solid rgba(12,18,37,.04);
  line-height: 1.5;
}
.diy-balance__col li:last-child { border-bottom: none; }

.diy-balance__note {
  font-size: 13px;
  color: var(--c-light);
  padding: .85rem 1.5rem;
  margin: 0;
  border-top: 1px solid var(--c-line);
  background: var(--c-cream);
}


/* ─────────────────────────────────────────────────────
   DIY-SCENARIO — Situation mini-case cards
   ───────────────────────────────────────────────────── */
.diy-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.125rem;
  max-width: 1060px;
  margin-inline: auto;
}

.diy-scenario {
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--diy-sh-lift);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--diy-trans), border-color var(--diy-trans), transform var(--diy-trans);
}
.diy-scenario:hover {
  box-shadow: var(--diy-sh-float);
  border-color: rgba(212,96,44,.15);
  transform: translateY(-3px);
}

.diy-scenario__head {
  padding: 1.75rem 1.5rem .75rem;
}
.diy-scenario__tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: var(--c-accent-soft);
  border: 1px solid rgba(212,96,44,.12);
  padding: .25em .7em;
  border-radius: 6px;
  margin-bottom: .5rem;
}
.diy-scenario__head h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.diy-scenario__body {
  padding: .5rem 1.5rem 1.75rem;
  flex: 1;
}
.diy-scenario__body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
  margin: 0 0 .6rem;
}
.diy-scenario__body p:last-child { margin-bottom: 0; }
.diy-scenario__body strong { color: var(--c-ink); font-weight: 600; }

@media (max-width: 991.98px) { .diy-scenarios { grid-template-columns: 1fr; } }


/* ─────────────────────────────────────────────────────
   SCROLL REVEAL
   ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .diy-step, .diy-warn, .diy-check10__item,
  .diy-loss, .diy-scenario,
  .diy-answer, .diy-procon, .diy-balance,
  .doc-check__item, .cmp-table-wrap, .disclaimer {
    opacity: 0; transform: translateY(10px);
    transition: opacity .5s ease-out, transform .5s ease-out;
  }
  .sec.is-vis .diy-step,
  .sec.is-vis .diy-warn,
  .sec.is-vis .diy-check10__item,
  .sec.is-vis .diy-loss,
  .sec.is-vis .diy-scenario,
  .sec.is-vis .diy-answer,
  .sec.is-vis .diy-procon,
  .sec.is-vis .diy-balance,
  .sec.is-vis .doc-check__item,
  .sec.is-vis .cmp-table-wrap,
  .sec.is-vis .disclaimer {
    opacity: 1; transform: translateY(0);
  }
  /* Stagger: steps */
  .sec.is-vis .diy-step:nth-child(1) { transition-delay: .00s; }
  .sec.is-vis .diy-step:nth-child(2) { transition-delay: .06s; }
  .sec.is-vis .diy-step:nth-child(3) { transition-delay: .12s; }
  .sec.is-vis .diy-step:nth-child(4) { transition-delay: .18s; }
  .sec.is-vis .diy-step:nth-child(5) { transition-delay: .24s; }
  .sec.is-vis .diy-step:nth-child(6) { transition-delay: .30s; }
  .sec.is-vis .diy-step:nth-child(7) { transition-delay: .36s; }
  .sec.is-vis .diy-step:nth-child(8) { transition-delay: .42s; }
  /* Stagger: warnings */
  .sec.is-vis .diy-warn:nth-child(1) { transition-delay: .00s; }
  .sec.is-vis .diy-warn:nth-child(2) { transition-delay: .06s; }
  .sec.is-vis .diy-warn:nth-child(3) { transition-delay: .12s; }
  .sec.is-vis .diy-warn:nth-child(4) { transition-delay: .18s; }
  .sec.is-vis .diy-warn:nth-child(5) { transition-delay: .24s; }
  /* Stagger: check10 */
  .sec.is-vis .diy-check10__item:nth-child(1) { transition-delay: .00s; }
  .sec.is-vis .diy-check10__item:nth-child(2) { transition-delay: .05s; }
  .sec.is-vis .diy-check10__item:nth-child(3) { transition-delay: .10s; }
  .sec.is-vis .diy-check10__item:nth-child(4) { transition-delay: .15s; }
  .sec.is-vis .diy-check10__item:nth-child(5) { transition-delay: .20s; }
  .sec.is-vis .diy-check10__item:nth-child(6) { transition-delay: .25s; }
  .sec.is-vis .diy-check10__item:nth-child(7) { transition-delay: .30s; }
  .sec.is-vis .diy-check10__item:nth-child(8) { transition-delay: .35s; }
  .sec.is-vis .diy-check10__item:nth-child(9) { transition-delay: .40s; }
  .sec.is-vis .diy-check10__item:nth-child(10) { transition-delay: .45s; }
  /* Stagger: scenarios */
  .sec.is-vis .diy-scenario:nth-child(1) { transition-delay: .00s; }
  .sec.is-vis .diy-scenario:nth-child(2) { transition-delay: .10s; }
  .sec.is-vis .diy-scenario:nth-child(3) { transition-delay: .20s; }
  /* Stagger: losses */
  .sec.is-vis .diy-loss:nth-child(1) { transition-delay: .00s; }
  .sec.is-vis .diy-loss:nth-child(2) { transition-delay: .07s; }
  .sec.is-vis .diy-loss:nth-child(3) { transition-delay: .14s; }
  .sec.is-vis .diy-loss:nth-child(4) { transition-delay: .21s; }
  /* Stagger: doc-check */
  .sec.is-vis .doc-check__item:nth-child(1) { transition-delay: .00s; }
  .sec.is-vis .doc-check__item:nth-child(2) { transition-delay: .06s; }
  .sec.is-vis .doc-check__item:nth-child(3) { transition-delay: .12s; }
  .sec.is-vis .doc-check__item:nth-child(4) { transition-delay: .18s; }
  .sec.is-vis .doc-check__item:nth-child(5) { transition-delay: .24s; }
  .sec.is-vis .doc-check__item:nth-child(6) { transition-delay: .30s; }
  .sec.is-vis .doc-check__item:nth-child(7) { transition-delay: .36s; }
}


/* ─────────────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────────────── */
@media print {
  .diy-step, .diy-scenario, .diy-warn,
  .diy-check10__item, .diy-loss, .diy-balance,
  .doc-check__item, .cmp-table-wrap {
    opacity: 1 !important; transform: none !important; box-shadow: none !important;
  }
}