/* ==========================================================================
   Stránka „Výkup dřeva“ (rozcestník sekce Co vykupujeme)
   Jen to, co sdílené komponenty (subpages.css) nepokrývají:
   (velikosti písma sdílených komponent řeší foundation centrálně – tady se nepřepisují)
   02 Proč prodat – rozvržení s průřezem trámu
   03 Signature: letokruhy (.vd-rings)
   04 Rozcestník typů dřeva (.vd-types) + plovoucí náhled (.vd-float)
   05 Pro koho
   ========================================================================== */

/* ---------- 02 Proč prodat – text vlevo, průřez trámu vpravo ---------- */

.vd-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--s-8) clamp(3rem, 7vw, 8rem);
}

.vd-why .sec-head {
  margin-bottom: var(--s-8);
}

/* výhody pod sebou: nadpis vlevo, text vpravo (redakční tabulka) */
.vd-why__features {
  row-gap: 0;
}

.vd-why .feature {
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  padding-block: var(--s-3);
}

.vd-why .feature:last-child {
  padding-bottom: 0;
}

.vd-why .feature__title {
  max-width: 16ch;
}

@media (max-width: 1023px) {
  .vd-why__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }

  /* průřez mezi nadpisem a výhodami by roztrhl text – na tabletu/mobilu je až pod nimi */
  .vd-rings {
    justify-self: center;
    width: min(100%, 26rem);
  }
}

@media (max-width: 599px) {
  .vd-why .feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .vd-why .sec-head {
    margin-bottom: var(--s-5);
  }
}

/* ---------- 03 Signature: letokruhy (průřez starým trámem) ----------
   SVG je v HTML (hotový stav bez JS). JS kreslí obrys → letokruhy od dřeně ven
   → praskliny; při reduced motion zůstane hotová kresba. */

.vd-rings {
  display: grid;
  gap: var(--s-3);
  margin: 0;
}

.vd-rings__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* kresba stojí přímo na světlém pozadí stránky */
.vd-rings__face {
  fill: rgba(198, 147, 80, 0.1);
}

.vd-rings__edge {
  stroke: rgba(5, 17, 7, 0.4);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.vd-rings__ring {
  stroke: var(--c-brown);
  stroke-opacity: 0.26;
  stroke-width: 1;
}

.vd-rings__ring--late {
  stroke: var(--c-gold);
  stroke-opacity: 0.9;
  stroke-width: 1.35;
}

.vd-rings__crack {
  fill: var(--c-bg);
  stroke: rgba(5, 17, 7, 0.32);
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.vd-rings__pith {
  fill: var(--c-gold);
}

.vd-rings__caption {
  max-width: 24rem;
  color: var(--c-muted-2);
  text-wrap: pretty;
}

/* ---------- 04 Rozcestník typů dřeva ---------- */

.vd-types {
  position: relative;
  margin-top: var(--section-gap);
}

.vd-types__title {
  margin-bottom: var(--s-3);
}

.vd-types__list {
  border-bottom: 1px solid var(--hairline);
}

.vd-types__list > li {
  border-top: 1px solid var(--hairline);
}

.vd-type {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem) 3rem;
  grid-template-areas: "name desc go";
  align-items: center;
  column-gap: var(--s-3);
  min-height: 6.5rem;
  padding-block: var(--s-3);
  color: var(--c-ink);
  transition: opacity var(--dur) var(--ease-out);
}

.vd-type__thumb {
  display: none;
}

.vd-type__name {
  grid-area: name;
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
  transition: transform var(--dur-slow) var(--ease-out);
}

.vd-type__desc {
  grid-area: desc;
  color: var(--c-muted);
  text-wrap: pretty;
}

/* šipka v dlaždici – při hoveru zlatá a naklopená (slovník „vybráno“ z homepage) */
.vd-type__go {
  grid-area: go;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r);
  background: rgba(228, 227, 223, 0.6);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}

.vd-type__go svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--dur) var(--ease-out);
}

.vd-type:focus-visible {
  outline-offset: 4px;
}

@media (hover: hover) {
  .vd-types__list:hover .vd-type:not(:hover) {
    opacity: 0.42;
  }

  .vd-type:hover .vd-type__name {
    transform: translateX(0.75rem);
  }

  .vd-type:hover .vd-type__go {
    background: var(--c-gold);
    transform: rotate(-4deg);
  }

  .vd-type:hover .vd-type__go svg {
    transform: translateX(2px);
  }
}

.vd-type:active .vd-type__go {
  transform: scale(0.94);
}

/* plovoucí náhled – skrytý, dokud ho JS nezapne (desktop s myší) */
.vd-float {
  display: none;
}

.vd-types.is-floating .vd-float {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: block;
  width: 18rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
}

.vd-float__layer {
  position: absolute;
  inset: 0;
  background: var(--media-bg, #8a7356);
  clip-path: inset(100% 0 0 0);
}

.vd-float__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* bez plovoucího náhledu (dotyk, úzké okno, reduced motion, bez JS) = karty s náhledem */
@media (hover: none), (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .vd-types__list {
    display: grid;
    gap: var(--s-1);
    border-bottom: 0;
  }

  .vd-types__list > li {
    border-top: 0;
  }

  .vd-type {
    grid-template-columns: 5.5rem minmax(0, 1fr) 3rem;
    grid-template-areas:
      "thumb name go"
      "thumb desc go";
    align-content: center;
    row-gap: 0.25rem;
    min-height: 0;
    padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1);
    border-radius: 0.75rem;
    background: rgba(228, 227, 223, 0.48);
    transition: background-color var(--dur) var(--ease-out);
  }

  .vd-type__thumb {
    grid-area: thumb;
    display: block;
    align-self: center;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--media-bg, #8a7356);
  }

  .vd-type__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .vd-type__name {
    font-size: var(--fs-h4);
    line-height: 1.3;
  }

  .vd-type__go {
    background: var(--c-white);
  }

  .vd-types__list:hover .vd-type:not(:hover) {
    opacity: 1;
  }
}


@media (max-width: 479px) {
  .vd-type {
    grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem;
    column-gap: var(--s-2);
  }

  .vd-type__go {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* ---------- 05 Pro koho – měřítko: menší a větší fotka vedle sebe ---------- */

.vd-scale__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: var(--s-3);
  align-items: end;
}

.vd-scale__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--media-bg);
}

.vd-scale__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vd-scale__title {
  margin-top: var(--s-3);
}

.vd-scale__text {
  max-width: 30rem;
  margin-top: var(--s-1);
  color: var(--c-muted);
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .vd-scale__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
}

/* ---------- 05 Rozcestník pod hlavičkou sekce „Co vykupujeme“ ---------- */

.vd-buy .vd-types {
  margin-top: 0;
}

.vd-buy .vd-types__title {
  margin-bottom: var(--head-gap);
}