/* ==========================================================================
   Výkup dřeva z demolice – jen to, co sdílené komponenty nepokrývají
   (velikosti písma sdílených komponent řeší foundation centrálně)
   02 Hero: řez „před / po“ přes celou šířku (signature)
   03 Drobnosti sekcí
   ========================================================================== */

/* ---------- 02 Hero – řez „před / po“ ----------
   .demo-ba = sdílený vzhled .ba (úchop, štítky), ale vlastní ovladač v pages/vykup-dreva-z-demolice.js
   (ne data-ba): úvodní „prořezání“ a dojezd na střed, scrollem řízený posun, tažení, klávesy. */

/* řez stojí samostatně hned pod tmavým herem (přes text by nešel pohodlně táhnout) */
.demo-compare {
  padding-top: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);
}

.demo-hero__figure {
  margin: 0;
}

.demo-ba {
  --ratio: 16 / 7;
  --line: 1;
  --glow: 0;
}

/* „po“ – spodní vrstva (obal kvůli <picture>) */
.demo-ba__after {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.demo-ba .ba__img {
  transform-origin: 50% 60%;
}

/* linka řezu se při úvodu „prořízne“ shora dolů */
.demo-ba .ba__handle::before {
  transform: scaleY(var(--line));
  transform-origin: 50% 0;
}

/* světlo na čerstvém řezu – silnější, když se linka pohybuje */
.demo-ba__sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 1;
  width: clamp(4rem, 14%, 12rem);
  background: linear-gradient(90deg, rgba(255, 232, 196, 0.55), rgba(255, 232, 196, 0));
  mix-blend-mode: soft-light;
  opacity: var(--glow);
  pointer-events: none;
}

/* stav před úvodní animací (jen do spuštění skriptu; bez JS / reduced motion = 50 %) */
@media (prefers-reduced-motion: no-preference) {
  .js .demo-ba:not(.is-ready) {
    --pos: 100%;
    --line: 0;
  }

  .js .demo-ba:not(.is-ready) .ba__knob,
  .js .demo-ba:not(.is-ready) .ba__chip {
    opacity: 0;
  }
}

.demo-hero__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-2);
  color: var(--c-muted-2);
  font-size: var(--fs-body);
  line-height: 1.5;
  text-wrap: pretty;
}

.demo-hero__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}

.demo-hero__hint svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-brown);
}

@media (max-width: 1023px) {
  .demo-ba {
    --ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  .demo-ba {
    --ratio: 4 / 3;
  }

  .demo-hero__caption {
    gap: var(--s-1);
  }
}

/* ---------- 03 Drobnosti sekcí ---------- */

/* SplitText (data-split) láme i na &nbsp; – předložku s následujícím slovem držíme pohromadě */
.nowrap {
  white-space: nowrap;
}

/* Proč prodat: delší výrok – vyvážené 4 řádky (bez ručních zlomů, ať se na mobilu nedrobí) */
.sec-head--wide .sec-head__main > .demo-why__title {
  max-width: 28ch;
}

/* Poptávka na mobilu: obě tlačítka stejně široká */
@media (max-width: 599px) {
  .inquiry--center .inquiry__actions {
    display: grid;
    width: 100%;
    max-width: 22rem;
  }
}

/* poznámka pod seznamy: větší písmo, ~60 % šířky */
.demo-note {
  max-width: 46rem;
  font-size: var(--fs-lead);
  line-height: 1.444;
  letter-spacing: -0.01em;
}

/* ---------- 04 Co vykupujeme: tři karty s fotkou ---------- */

.demo-co__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-co__card {
  display: grid;
  align-content: start;
  gap: var(--s-1);
  color: inherit;
}

.demo-co__media {
  margin-bottom: var(--s-2);
}

.demo-co__media img {
  transition: transform 1.1s var(--ease-out);
}

@media (hover: hover) {
  .demo-co__card:hover .demo-co__media img {
    transform: scale(1.05);
  }
}

/* zlatá fajfka v rohu fotky – stejný jazyk jako seznamy Vykupujeme */
.demo-co__check {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: calc(var(--r) / 1.5);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 10.5 8.5 13.5l6-7' stroke='%23051107' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.5rem no-repeat,
    var(--c-gold);
}

.demo-co__title {
  margin: 0;
}

.demo-co__text {
  max-width: 28rem;
  color: var(--c-muted);
  text-wrap: pretty;
}

.demo-co__link {
  margin-top: var(--s-1);
}

.demo-co__more {
  margin-top: var(--s-6);
}

/* ---------- 05 Kde vykupujeme: mozaika typů staveb ---------- */

.demo-where__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-where__media {
  height: 100%;
}

/* název ve spodní části fotky přes tmavý přechod */
.demo-where__media::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(0deg, rgba(5, 17, 7, 0.72), rgba(5, 17, 7, 0));
  pointer-events: none;
}

.demo-where__media img {
  transition: transform 1.2s var(--ease-out), filter var(--dur) var(--ease-out);
}

.demo-where__name {
  position: absolute;
  left: var(--s-2);
  right: var(--s-2);
  bottom: var(--s-2);
  z-index: 1;
  color: #f7f4ec;
  font-family: var(--ff-display);
  font-size: var(--fs-list);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .demo-where__grid:hover .demo-where__item:not(:hover) img {
    filter: saturate(0.55) brightness(0.85);
  }

  .demo-where__item:hover img {
    transform: scale(1.06);
  }

  .demo-where__item:hover .demo-where__name {
    transform: translateY(-0.25rem);
  }
}

/* poslední dlaždice: výzva na tmavém pozadí */
.demo-where__cta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-1);
  height: 100%;
  min-height: 12rem;
  padding: var(--s-3);
  border-radius: var(--r);
  background: var(--c-ink);
  color: #f7f4ec;
}

.demo-where__cta-title {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.demo-where__cta-text {
  color: var(--c-on-dark-muted);
}

.demo-where__cta-go {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-top: var(--s-2);
  border-radius: var(--r);
  background: var(--c-gold);
  color: var(--c-ink);
  transition: transform var(--dur) var(--ease-out);
}

.demo-where__cta-go svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media (hover: hover) {
  .demo-where__cta:hover .demo-where__cta-go {
    transform: translateX(0.375rem);
  }
}

@media (max-width: 1023px) {
  .demo-co__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-where__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 699px) {
  .demo-co__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-where__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-1);
  }

  .demo-where__name {
    left: var(--s-1);
    bottom: var(--s-1);
    font-size: var(--fs-body);
  }

  .demo-where__cta {
    padding: var(--s-2);
    min-height: 0;
  }
}