/* ==========================================================================
   Výkup prken (podlahová prkna, střešní podbití, opláštění) – jen to, co sdílené komponenty nepokrývají
   Bloky pod maskou jsou sdílené komponenty (.split, .media, .buy-list__items).
   (Velikosti písma sdílených komponent se tu nepřepisují – sjednotí je foundation.)
   02 Hero
   03 Signature „Kladení prken“ (.floor) – prkna se zasouvají z boků a skládají podlahu
   04 Drobnosti sekcí
   ========================================================================== */

/* ---------- 03 Signature „Kladení prken“ v masce nápisu ----------
   .floor__stage (okno 100svh) > .floor__boards (12 řad prken) + .floor__knock (světlá vrstva s obřím
   černým nápisem, mix-blend-mode: lighten). Mimo písmena je jen barva stránky, v písmenech se skládá podlaha.
   Bez JS / reduced motion = hotová podlaha v nápisu. */

.floor {
  padding-block: 0;
}

/* první blok (podlahová prkna) hned pod maskou – bez velké mezery */
.floor + .band {
  padding-top: var(--s-7);
}

.floor__stage {
  position: relative;
  height: clamp(22rem, 36vw, 30rem);
  min-height: 0;
  max-height: none;
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
  /* podklad = polštáře (podkladové trámky) pod podlahou, než se prkna položí */
  background:
    repeating-linear-gradient(90deg,
      transparent 0 calc(16.666% - 3rem),
      rgba(255, 255, 255, 0.035) calc(16.666% - 3rem) 16.666%),
    var(--c-ink);
}

.floor__boards {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-rows: repeat(12, minmax(0, 1fr));
  gap: 3px;
  transform-origin: 50% 40%;
}

.floor__row {
  display: flex;
  gap: 3px;
  min-height: 0;
}

.floor__board {
  position: relative;
  flex: var(--g) 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 2px;
  background: #6d5039;
}

/* textura prkna – každé prkno jiný výřez jiné fotky */
.floor__board::before,
.floor__board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.floor__board::before {
  background: var(--tex) var(--bx, 50%) 50% / cover no-repeat;
  filter: brightness(var(--b, 1));
}

/* lehké zkosení hran – světlo shora, stín u spáry */
.floor__board::after {
  background: linear-gradient(180deg,
    rgba(255, 236, 205, 0.16) 0,
    rgba(255, 236, 205, 0) 1.5px,
    rgba(5, 17, 7, 0) 78%,
    rgba(5, 17, 7, 0.3) 100%);
}

/* zrcadlení některých prken = víc variací kresby */
.floor__row:nth-child(odd) .floor__board:last-child::before,
.floor__row:nth-child(3n) .floor__board:first-child::before {
  transform: scaleX(-1);
}

.floor__board--1 { --tex: url("../../img/pages/vykup-stare-podlahy/board-1.webp"); }
.floor__board--2 { --tex: url("../../img/pages/vykup-stare-podlahy/board-2.webp"); }
.floor__board--3 { --tex: url("../../img/pages/vykup-stare-podlahy/board-3.webp"); }
.floor__board--4 { --tex: url("../../img/pages/vykup-stare-podlahy/board-4.webp"); }
.floor__board--5 { --tex: url("../../img/pages/vykup-stare-podlahy/board-5.webp"); }

/* hloubka – jemná vinětace přes celou podlahu */
.floor__boards::after {
  display: none;
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 95% at 62% 30%, rgba(5, 17, 7, 0) 45%, rgba(5, 17, 7, 0.5) 100%);
  pointer-events: none;
}

/* světelný přejezd přes hotovou podlahu („naolejováno“) – jen s JS */
.floor__sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(255, 228, 180, 0) 32%,
    rgba(255, 228, 180, 0.32) 48%,
    rgba(255, 228, 180, 0) 64%);
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
}

/* ztmavení pod text (ink, zleva a zdola jako u tmavého hera) */
.floor__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(5, 17, 7, 0.9) 0%, rgba(5, 17, 7, 0.66) 34%, rgba(5, 17, 7, 0.22) 68%, rgba(5, 17, 7, 0.1) 100%),
    linear-gradient(90deg, rgba(5, 17, 7, 0.5) 0%, rgba(5, 17, 7, 0) 66%);
  pointer-events: none;
}

.floor__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: calc(var(--container) + var(--inset-pad) * 2);
  margin-inline: auto;
  padding: 0 var(--inset-pad) var(--s-9);
}

.floor__content .eyebrow {
  color: rgba(255, 255, 255, 0.86);
}

.floor__title {
  color: #f7f4ec;
  text-wrap: balance;
}

/* řádky nadpisu – maska pro vyjetí zdola (rezerva pro háčky a čárky) */
.floor__line {
  display: block;
  overflow: hidden;
  padding-block: 0.12em;
  margin-block: -0.12em;
}

.floor__line > span {
  display: block;
}

.floor__knock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  color: #000;
  mix-blend-mode: lighten;
  font-family: var(--ff-display);
  margin: 0;
  padding: var(--s-4);
  font-size: clamp(2.5rem, 0.5rem + 7.6vw, 9rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-wrap: balance;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.floor__knock span {
  display: block;
}

.floor__features {
  padding-top: var(--s-9);
}

@media (max-width: 1023px) {
  .floor__stage {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 3;
  }

  .floor__content {
    padding-bottom: var(--s-6);
  }

  .floor__features {
    padding-top: var(--s-8);
  }
}

@media (max-width: 767px) {
  .floor__stage {
    aspect-ratio: 3 / 4;
    min-height: 30rem;
  }

  .floor__boards,
  .floor__row {
    gap: 2px;
  }

  .floor__shade {
    background:
      linear-gradient(0deg, rgba(5, 17, 7, 0.92) 0%, rgba(5, 17, 7, 0.7) 42%, rgba(5, 17, 7, 0.2) 75%, rgba(5, 17, 7, 0.08) 100%);
  }

  /* na mobilu se nadpis zalamuje přirozeně */
  .floor__line,
  .floor__line > span {
    display: inline;
    overflow: visible;
    padding: 0;
    margin: 0;
  }

  .floor__content {
    padding-bottom: var(--s-5);
  }
}

/* ---------- 04 Drobnosti sekcí ---------- */

/* nadpis „Kterou podlahu vykupujeme“ na jeden řádek tam, kde se vejde */
#buy-title {
  max-width: 24ch;
}

/* ---------- 05 Druhy prken – sticky fotka + rejstřík (místo tří střídavých bloků) ----------
   Desktop (≥ 1024): vlevo přilepená fotka 8fr, vpravo texty 5fr (zlatý řez). Fotka a rejstřík
   se přepnou, když je daný druh uprostřed obrazovky (VT.prknaTypes). Mobil: fotka nad každým druhem.
   Bez JS: na desktopu zůstane první fotka, rejstřík funguje jako kotvy. */

.boards__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
  column-gap: var(--s-10);
}

.boards__sticky {
  position: sticky;
  /* fotka (8:5) + rejstřík zhruba uprostřed výšky okna, ale nikdy pod navigaci */
  top: max(var(--s-12, 6rem), calc(50svh - 17rem));
}

.boards__media {
  position: relative;
  aspect-ratio: 8 / 5;
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
  background: #8a7355;
}

.boards__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  background: var(--media-bg, #8a7355);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s var(--ease-in-out);
}

.boards__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.4s var(--ease-out);
}

.boards__figure.is-active {
  z-index: 2;
  clip-path: inset(0 0 0 0);
}

.boards__figure.is-active img {
  transform: none;
}

/* předchozí fotka zůstane pod novou, dokud se nová neodkryje */
.boards__figure.is-prev {
  z-index: 1;
  clip-path: inset(0 0 0 0);
  transition: none;
}

.boards__index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-3);
}

.boards__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 2.75rem; /* dotykový cíl 44 px */
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--c-muted);
  transition: color var(--dur) var(--ease-out);
}

.boards__tab::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0);
  transition: transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease-out);
}

.boards__tab.is-active {
  color: var(--c-ink);
}

.boards__tab.is-active::before {
  background: var(--c-gold);
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .boards__tab:hover {
    color: var(--c-ink);
  }
}

.boards__list {
  display: grid;
}

.boards__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-3);
  min-height: 80svh;
  padding-block: var(--s-8);
  transition: opacity 0.6s var(--ease-out);
}

/* s JS (desktop) jsou neaktivní druhy ztlumené – pozornost je na tom, ke kterému patří fotka */
.boards.is-enhanced .boards__item:not(.is-active) {
  opacity: 0.32;
}

.boards__item > .h2 {
  margin-bottom: var(--s-1);
}

.boards__figure-m {
  display: none;
}

/* „Vykoupíme“ – redakční výčet místo zaškrtávacích políček */
.boards__buy {
  margin-top: var(--s-1);
}

.boards__buy-label {
  font-size: var(--fs-body);
  color: var(--c-muted);
}

.boards__buy-list {
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-1);
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--c-ink);
}

.boards__note {
  max-width: 34rem;
  font-size: var(--fs-body);
  color: var(--c-muted);
}

.boards__item > .link-arrow {
  align-self: flex-start;
}

/* tablet a mobil: bez sticky, fotka nad každým druhem */
@media (max-width: 1023px) {
  .boards__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .boards__aside {
    display: none;
  }

  .boards__list {
    gap: var(--s-10);
  }

  .boards__item {
    min-height: 0;
    padding-block: 0;
    opacity: 1;
  }

  .boards__figure-m {
    display: block;
    aspect-ratio: 8 / 5;
    margin: 0 0 var(--s-1);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--media-bg, #8a7355);
  }

  .boards__figure-m img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boards__figure,
  .boards__figure img,
  .boards__item {
    transition: none;
  }
}