/*
 * Jak šperky vznikají.
 *
 * Načítá se jen na obsahových stránkách (registrace v `lasofiamenu`),
 * ne všude. Katalogu ani pokladně nemá co přinést.
 */

.ls-vyroba {
  --ls-krem: #f7f4ee;
  --ls-krem-tmavsi: #f2ece2;

  /*
   * Z `.container` ven, k okrajům okna.
   *
   * Jádro vkládá obsah do sloupce širokého nejvýš 1280 px s odsazením
   * 32 px. Fotky výroby jsou obrazy, ne ilustrace k odstavci, a ve
   * sloupci vypadaly jako obrázky v článku.
   */
  width: 100vw;
  margin-inline: calc(50% - 50vw);

  background: var(--ls-krem);
}

/* Společné prvky ----------------------------------------------------- */

/*
 * Zlatá linka nad nadpisem. Oddělí sekci od té nad ní, aniž by přes
 * celou šířku vedla čára -- těch je na stránce dost už z fotek.
 */
.ls-vyroba__linka {
  display: block;
  width: 2.5rem;
  height: 1px;
  margin-bottom: 1.25rem;
  background: var(--ls-gold);
}

.ls-vyroba__uvod .ls-vyroba__linka,
.ls-vyroba__akce .ls-vyroba__linka {
  margin-inline: auto;
}

.ls-vyroba__nadpis {
  margin: 0;
  font-family: var(--ls-font-heading);
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ls-ink);
}

.ls-vyroba__perex {
  margin: 1rem 0 0;

  /* 58ch drží řádek v pásmu, které se čte bez bloudění očima. */
  max-width: 58ch;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
  color: var(--ls-body);
}

/* Záhlaví ------------------------------------------------------------ */

.ls-vyroba__zahlavi {
  position: relative;
  display: grid;
}

.ls-vyroba__zahlavi-foto,
.ls-vyroba__zahlavi-text {
  grid-area: 1 / 1;
}

.ls-vyroba__zahlavi-foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ls-vyroba__zahlavi-text {
  z-index: 1;
  align-self: center;
  justify-self: center;

  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}

.ls-vyroba__zahlavi-nadpis {
  margin: 0;
  font-family: var(--ls-font-heading);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ls-ink);
}

.ls-vyroba__zahlavi-podnadpis {
  margin: 1rem 0 0;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  color: var(--ls-body);
}

/* Úvod --------------------------------------------------------------- */

.ls-vyroba__uvod {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) 0;
  text-align: center;
}

.ls-vyroba__uvod .ls-vyroba__perex {
  margin-inline: auto;
}

/* Kroky -------------------------------------------------------------- */

.ls-vyroba__kroky {
  max-width: 72rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  list-style: none;
}

.ls-vyroba__krok + .ls-vyroba__krok {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.ls-vyroba__obraz {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.ls-vyroba__obraz img {
  display: block;
  width: 100%;
  height: auto;
}

.ls-vyroba__cislo {
  display: inline-grid;
  place-items: center;

  width: 3rem;
  height: 3rem;

  font-family: var(--ls-font-heading);
  font-size: 1.0625rem;
  line-height: 1;

  /*
   * --ls-gold-text, ne --ls-gold: zlatá jako barva písma má proti
   * krémovému pozadí kontrast pod hranicí AA.
   */
  color: var(--ls-gold-text);

  border: 1px solid var(--ls-gold);
  border-radius: 50%;
}

.ls-vyroba__krok-nadpis {
  margin: 0.875rem 0 0;
  font-family: var(--ls-font-heading);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ls-ink);
}

.ls-vyroba__krok-text {
  margin: 0.75rem 0 0;
  max-width: 46ch;
  font-size: clamp(0.9375rem, 1.05vw, 1rem);
  line-height: 1.75;
  color: var(--ls-body);
}

/* Video u ručního tvarování ------------------------------------------ */

/*
 * Leží přesně na fotce kroku. Fotka pod ním je zároveň náhledem, takže
 * má stejný poměr stran a `poster` není potřeba.
 *
 * Odkrývá se datovým atributem, který nastavuje `lasofia-video.js`.
 * Je společný pro všechna videa na webu, takže skript nemusí znát
 * jména tříd jednotlivých sekcí -- dřív je znal a na téhle stránce
 * proto nastavil třídu, kterou tu nic nestylovalo.
 */
.ls-vyroba__video {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 400ms ease;
}

.ls-vyroba__video[data-ls-video-pripraveno] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ls-vyroba__video {
    display: none;
  }
}

/* Materiál ----------------------------------------------------------- */

.ls-vyroba__material {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  background: var(--ls-krem-tmavsi);
}

.ls-vyroba__material-obraz {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.ls-vyroba__material-obraz img {
  display: block;
  width: 100%;
  height: auto;
}

.ls-vyroba__znaky {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;

  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;

  text-align: center;
}

.ls-vyroba__znak {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ls-body);
}

.ls-vyroba__znak-kolecko {
  display: grid;
  place-items: center;

  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 0.625rem;

  color: var(--ls-gold-text);
  border: 1px solid var(--ls-gold);
  border-radius: 50%;
}

.ls-vyroba__pravni {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  max-width: 58ch;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ls-muted);
}

/* Péče --------------------------------------------------------------- */

.ls-vyroba__pece {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}

.ls-vyroba__zasady {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.ls-vyroba__zasada {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.875rem;
  align-items: start;
}

.ls-vyroba__zasada + .ls-vyroba__zasada {
  margin-top: 1.125rem;
}

.ls-vyroba__zasada-cislo {
  font-family: var(--ls-font-heading);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ls-gold-text);
}

.ls-vyroba__zasada-nazev {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ls-ink);
}

.ls-vyroba__zasada-text {
  display: block;
  padding-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ls-body);
}

.ls-vyroba__pece-obraz {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}

.ls-vyroba__pece-obraz img {
  display: block;
  width: 100%;
  height: auto;
}

/* Rozcestník --------------------------------------------------------- */

.ls-vyroba__akce {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}

.ls-vyroba__akce p {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}

/* ==================================================================== */
/* DVĚ KOLONY OD 48rem                                                  */
/* ==================================================================== */

@media (min-width: 48rem) {
  /*
   * Kroky se střídají: lichý má fotku vlevo, sudý vpravo.
   *
   * Pět stejně rozvržených řádků pod sebou se čte jako tabulka, ne
   * jako postup. Střídání drží oko v pohybu a odděluje kroky od sebe
   * bez jediné linky navíc.
   */
  .ls-vyroba__krok {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .ls-vyroba__krok:nth-child(even) .ls-vyroba__obraz {
    /*
     * `order`, ne druhá sada sloupců: pořadí v dokumentu zůstane
     * fotka → text, takže odečítač obrazovky čte kroky pořád stejně.
     */
    order: 2;
  }

  .ls-vyroba__krok:nth-child(even) .ls-vyroba__text {
    /* Text u sudých kroků končí u fotky, ne u okraje stránky. */
    justify-self: end;
    text-align: right;
  }

  .ls-vyroba__krok:nth-child(even) .ls-vyroba__krok-text {
    margin-left: auto;
  }

  .ls-vyroba__material {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);

    padding-inline: clamp(1.5rem, 5vw, 5rem);
  }

  .ls-vyroba__material-obraz {
    margin-bottom: 0;
  }

  .ls-vyroba__pece {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);

    max-width: 78rem;
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 5vw, 5rem);
  }

  .ls-vyroba__pece-obraz {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-vyroba [data-reveal] {
    animation: none;
    opacity: 1;
  }
}

/* ------------------------------------------------------------------ */
/* Drobečky uvnitř úvodního obrazu                                     */
/* ------------------------------------------------------------------ */

/*
 * Rozvržení staví drobečky i nadpis do bílého pruhu nad obsah. Tady
 * jsou potlačené a kreslí se uvnitř obrazu, takže fotka začíná rovnou
 * pod hlavičkou webu.
 *
 * `position: absolute` místo dalšího políčka mřížky: drobečky patří
 * k hornímu okraji, ne do svislého středu jako nadpis.
 */
.ls-vyroba__drobecky {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.25rem);
  left: 0;
  right: 0;
  z-index: 1;

  padding-inline: clamp(1.25rem, 4vw, 3rem);

  font-size: 0.875rem;

  /*
   * Tmavé a polotučné na světlé podložce.
   *
   * Šedá #555 v běžné tloušťce se na textuře lnu a dřeva ztrácela --
   * ověřeno přiblížením, text byl sotva znát. Samotné ztmavení
   * nestačilo: problém není jen barva, ale i to, že tenké písmo
   * splývá s kresbou dřeva.
   */
  font-weight: 600;
  color: var(--ls-ink);
}

.ls-vyroba__drobecky a {
  color: inherit;
  text-decoration: none;
}

.ls-vyroba__drobecky a:hover,
.ls-vyroba__drobecky a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.ls-vyroba__drobecky span {
  margin-inline: 0.375rem;
}

/*
 * Světlá podložka pod celou cestou.
 *
 * Fotka má světlý len i tmavé kotouče hmoty; samotná tmavá barva by
 * fungovala jen na té světlé části. Podložka drží kontrast bez ohledu
 * na to, co je zrovna pod ní, a přežije i jiný výřez na užším okně.
 *
 * 0,94 a ne 0,82: při nižší krytí prosvítala kresba dřeva a změkčila
 * obrysy písmen. Tohle je prakticky plná plocha, jen o chlup teplejší
 * než čistě bílý obdélník.
 *
 * `inline-flex` na obalu, ne pozadí celé lišty: pruh přes celou šířku
 * by z drobečků udělal další pás v hlavičce stránky.
 */
.ls-vyroba__drobecky-pole {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;

  padding: 0.3125rem 0.75rem;
  background: rgb(255 255 255 / 0.94);
  border-radius: 999px;
}

.ls-vyroba__drobecky-delic {
  /* Oddělovač smí být světlejší -- nese jen tvar cesty, ne obsah. */
  color: var(--ls-muted);
}

@media (min-width: 48rem) {
  .ls-vyroba__drobecky {
    /* Zarovnané se zbytkem obsahu stránky, ne s okrajem okna. */
    max-width: 78rem;
    margin-inline: auto;
    left: 0;
    right: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Obsah bez bílého pruhu nad fotkou                                   */
/* ------------------------------------------------------------------ */

/*
 * Jádro dává `.page-content` bílé pozadí a odsazení shora (naměřeno
 * 20 px). Na téhle stránce pod hlavičkou rovnou začíná fotka, takže
 * z toho byl bílý pruh mezi menu a obrazem.
 */
/*
 * `#content` na začátku kvůli VÁZE, ne zanoření: element má
 * `id="content"` a jádro ho styluje přes to id, takže samotná třída
 * (0,1,0) prohrávala s (1,0,0). Naměřeno: odsazení zůstávalo 20 px.
 */
#content.page-content--vyroba {
  padding-top: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/*
 * Odsazení shora má i `#wrapper` (naměřeno dalších 20 px). Vypíná se
 * jen tehdy, když je uvnitř tahle stránka -- `:has` je na to přesně:
 * ostatní stránky si odsazení ponechají, protože jim pod hlavičkou
 * začínají drobečky, ne fotka.
 */
#wrapper:has(.page-content--vyroba) {
  padding-top: 0;
}

/* ------------------------------------------------------------------ */
/* Drobečky na úzkém okně                                              */
/* ------------------------------------------------------------------ */

/*
 * Pod 48rem stojí drobečky v toku nad nadpisem, ne absolutně přes
 * fotku. Pás je tam nízký (166 px) a absolutní drobečky se s textem
 * překrývaly -- naměřeno 36 px přesahu.
 */
@media (max-width: 47.99rem) {
  .ls-vyroba__zahlavi {
    display: block;
    position: relative;
  }

  .ls-vyroba__zahlavi-foto {
    height: auto;
  }

  .ls-vyroba__drobecky {
    position: static;
    padding-top: 1rem;
  }

  /*
   * Bez podložky: tady drobečky leží na krémovém pozadí, ne na fotce.
   * Světlý obdélník pod každou položkou z nich dělal dvě cedulky.
   */
  .ls-vyroba__drobecky-pole {
    padding: 0;
    background: none;
  }

  .ls-vyroba__zahlavi-text {
    padding-top: 0.75rem;
  }
}